在jQuery的语句中,将由“选取”和“控制”两部分组成。
从这段语句已经可以看出jQuery的几项特色。首先以$符号作为声明jQuery的识别语句,其次是批次操作,通过选取指令可以一次性的选择HTML文件中的某个标签名称,接下来则可以直接运用jQuery库提供的控制指令,这里直接使用“addClass”函数便能做到为所有的标签加上class属性,不需要再自己设计循环来加入,省去许多麻烦。
在语句的前面加上$符号即代表声明jQuery对象,但其实$符号是jQuery的缩写,因此有带$符号的地方也可以用“jQuery”字符串取代,例如:
$("div").addClass("special");
jQuery("div").addClass("special");
但是既然能够使用$符号简写,又何必输入一长串的英文呢?其实有的时候在某些情况,可能$符号已经被其他javascript Library所使用,例如一套知名的prototype也有$符号开头的函数名称。在这种情况下就会造成混肴,但是如果你还不想输入一长串英文,jQuery还提供了自定义符号的语句,例如想使用$jq作为新的jQuery声明简写,即声明一个变量$jq来接受jQuery的返回值,就可以设置新的声明符号,避免与其它$符号开头的函数冲突。
var $jq=jQuery.noConflict();
$jq("div").addClass("special");
jQuery选取元素的指令与CSS选择器语句一样,其概念也是可以一次选取文件中同名的标签进行控制,这是因为jQuery引入了CSS选择器引擎,而且已经支持到CSS3版本了,因此在运用jQuery的选取指令时很容易就能融会贯通。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script >
</script>
</head>
<body>
$("div");//Tag选取
$("#body");//id选取
$(".example");//class选取
$("div#body");//Tag结合id选取
$("div.example p");//Tag结合Class选取
<div id="body">
<h1>Header</h1>
<div class="example">
<p>...</p>
</div>
</div>
</body>
</html>
属性选择器【】
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script >
</script>
</head>
<body>
$("input[name]")//通过中括号【】对某个属性进行选取。例如可选取包含name的input标签
<div id="body">
<h1>Header</h1>
<div class="example">
<input>
<input name="box">
</div>
</div>
</body>
</html>
下层选取(>)
使用大于符号(>),可进行标签的下层选取。例如以下例子,可选取<div>标签下的<div>标签。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script >
</script>
</head>
<body>
$("div>div");
<div id="body">
<h1>Header</h1>
<div class="example">
<input>
<input name="box">
</div>
</div>
</body>
</html>
上层选取(has)
使用has()指令则与下层选取恰好相反,可进行标签的上层选取。例如以下例子,可选取含有<div>标签的上层<div>标签。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script >
</script>
</head>
<body>
$("div:has(div)");
<div id="body">
<h1>Header</h1>
<div class="example">
<input>
<input name="box">
</div>
</div>
</body>
</html>
还可以通过“first”指令选取第一个找到的标签元素,例子如下,可选取到第一个搜索的<div>标签。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script >
</script>
</head>
<body>
$("div:first");
<div id="body">
<h1>Header</h1>
<div class="example">
<input>
<input name="box">
</div>
</div>
</body>
</html>