jquery 2.3.1 基本选择器

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