2.3.1 基本选择器
基本选择器
基本选择器是jQuery 中最常用的选择器,也是最简单的选择器,它通过元素Id,class和标签名等
来查找DOM元素。 在网页中,每个id名称只能使用一次,class 允许重复使用
node2:/var/www/html#cat a19.html
<p id="aa">测试1</p>
<p id="bb">测试2</p>
<p id="cc">测试3</p>
<p id="cc">测试4</p>
<p id="cc">测试5</p>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a19.js"></script>
node2:/var/www/html#cat a19.js
var $aa=$('#cc'); //选取id为cc的元素
console.log($aa);
node2:/var/www/html#cat a19.js
var $aa=$('#cc'); //选取id为cc的元素
console.log($aa);
基本选项器
选择器 描述 返回 示例
#id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素
.class 根据给定的类匹配元素 集合元素 $(".test")选取所有class为test的元素
node2:/var/www/html#cat a20.html
<div class="a">class为a</div>
<div class="b">class为b</div>
<div class="a">class为c</div>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a20.js"></script>
node2:/var/www/html#cat a20.js
var $aa=$(".a"); //选取所有class为a的元素
console.log($aa);
导航至 http://192.168.137.3/a20.html
{…}
0: <div class="a">
1: <div class="a">
context: HTMLDocument http://192.168.137.3/a20.html
length: 2
prevObject: Object { 0: HTMLDocument http://192.168.137.3/a20.html, context: HTMLDocument http://192.168.137.3/a20.html, length: 1 }
selector: ".a"
__proto__: Object { jquery: "2.2.2", constructor: n(), length: 0, … }
a20.js:2:1
忽略了对含 [LenientThis] 的属性进行获取或设置，因为“this”对象不正确。
a20.html
element 根据给定的元素名匹配元素 集合元素 $("p")选取所有的<p>元素
node2:/var/www/html#cat a21.html
<p class="aaa">测试1</p>
<p class="aaa">测试2</p>
<p class="aaa">测试3</p>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a21.js"></script>
node2:/var/www/html#cat a21.js
var $aa=$("p"); //选取所有的<p>元素
console.log($aa);
* 匹配所有元素 集合元素 $("*") 选取所有的元素
selectot1,selector2, 将每一个选择器匹配到的元素合并后一起返回 集合元素
$("div,span,p,myClass") 选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素
node2:/var/www/html#cat a22.html
<div class="aaaa">class为mini</div>
<div style="bbbb:none;" class="none">style的display为"none"的div</div>
<span id="ccccc">正在执行动画的span元素.</span>
<span id="ddddd">111111111111</span>
<p id="xxxx">22222</p>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a22.js"></script>
选取div和span标签的记录
node2:/var/www/html#cat a22.js
var $aa=$("div,span")
console.log($aa);
导航至 http://192.168.137.3/a22.html
{…}
0: <div class="aaaa">
1: <div class="none" style="bbbb:none;">
2: <span id="ccccc">
3: <span id="ddddd">
context: HTMLDocument http://192.168.137.3/a22.html
length: 4
prevObject: Object { 0: HTMLDocument http://192.168.137.3/a22.html, context: HTMLDocument http://192.168.137.3/a22.html, length: 1 }
selector: "div,span"
__proto__: Object { jquery: "2.2.2", constructor: n(), length: 0, … }
a22.js:2:1
拥有class为myClass的<p>标签的一组元素:
node2:/var/www/html#cat a23.html
<p class="xxxx">22222</p>
<p class="yyyy">22222</p>
<p class="myClass">33333</p>
<p class="zzzz">4444</p>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="a23.js"></script>
node2:/var/www/html#cat a23.js
var $aa=$("p.myClass");
console.log($aa);
导航至 http://192.168.137.3/a23.html
{…}
0: <p class="myClass">
context: HTMLDocument http://192.168.137.3/a23.html
length: 1
prevObject: Object { 0: HTMLDocument http://192.168.137.3/a23.html, context: HTMLDocument http://192.168.137.3/a23.html, length: 1 }
selector: "p.myClass"
__proto__: Object { jquery: "2.2.2", constructor: n(), length: 0, … }
a23.js:2:1