JQuery的选择器使用

一个优秀的Javascript库必定要有一个强大的选择器,强大的选择器可以使DOM操作事半功倍.选择器是JQuery的根基,要学习JQuery第一个就是要学习它的选择器.

 

JQuery的选择器使用的是CSS的风格,学习起来也是非常的方便.

 

这次先介绍简单的基本的一些选择器

 

1.基本选择器

(1) #id 根据ID选取页面元算,相当于document.getElementById(id);JQuery的写法是$('#id'),这个选择器与传统的getElementById()是等价的,所以效率也是所有选择器中最高的,因此在元素具有ID的情况下,这个肯定是首选的选择器.虽然这个选择器与getElementById是等价的,但是它的安全性要高于getElementById,当用getElementById选取一个页面上没有的元素,并且调用元素的属性时会报异常,但是用JQuery的ID选择器是不会报异常的.

Js代码  

1. // 如果页面上没有'test'这个元素,下面这句就会产生一个错误  
2. document.getElementById('test').style.color = '#00FF00';  
3. // 所以有时会先判一下空  
4. if (document.getElementById('test') != null)  
5.     document.getElementById('test').style.color = '#00FF00';  
6.   
7. // 用JQuery的ID选择器既简单又不会产生错误  
8. $('#test').css('color' ,'#00FF00');  

(2) .class 类选择器 根据类名选取页面上的元素,$('.test')选取页面上所有class="test"的元素.虽然这种选择器,拿到的是多个元素,但是并不需要去迭代它们,可以直接更改属性,这也是JQuery的强大之处

Js代码  

1. // 改变页面上所有Class是test元素的颜色  
2. $('.test').css('color', '#FF00FF');  

(3) element 元素选择器 用于选择匹配的元素名,$('div')选取页面上所有的DIV,这个选择器跟第一个ID选择器一样,等价于原生的Javascript方法,document.getElementsByTagName();正因为如此,这个选择器的执行效率也是比较高的,仅次于ID选择器

Js代码  

1. // 改变所有DIV的前景色  
2. $('div').css('color', '#0000FF');  

(4) selector1,selector2... 合并多个选择器 将多个选择器选择的结果合并到一起返回

Java代码  

1. // 返回所有DIV和id是test的元素  
2. $('div','#test')  

(5) * 全部选择器 $('*') 选择页面上所有的元素

 

2.层次选择器

(1) $('ancestor descendant') 这个是后代元素选择器 选取ancestor元素下的所有descendant后代元素

Html代码  

1. // 选取ID是father的元素下的所有DIV  
2. $('#father div')  
3.   
4. <div id="father">  
5.     <div>被选中</div>  
6.     <div>被选中</div>  
7.     <div>被选中</div>  
8.     <div><!--这个也被选中-->  
9.          <div>被选中</div>  
10.     </div>  
11. </div>  

(2) $('parent>child') 这个是孩子选择器 选取father元素的直接子元素

Java代码  

1. // 选取father元素下的直接子DIV  
2. $('#father>div')  
3.   
4. <div id="father">  
5.     <div>被选中</div>  
6.     <div>被选中</div>  
7.     <div>被选中</div>  
8.     <div><!--这个被选中了,但是它的下一层就不会被选中了-->  
9.         <div>这个没有被选中</div>  
10.     </div>  
11. </div>  

(3) $('prev+next') 这个是选中prev的后面一个元素

Html代码  

1. $('#first+div')  
2.   
3. <div id="first">  
4.     <div>被选中</div>  
5.     <div>没有被选中</div>  
6. </div>  

(4) $('prev~siblings') 这个是选中prev后面的所有同一级siblings元素

Html代码  

1. $('#first~div')  
2.   
3. <div id="first">  
4.     <div>没有被选中</div>  
5. </div>  
6. <div>被选中</div>  
7. <div><!--这个被选中-->  
8.    <div>没有被选中</div>  
9. </div>  

 

 

3. 筛选,过滤选择器

(1) :first 这个选择器用来选择符合要求的第一个元素

Html代码  

1. // 选取第一个DIV  
2. $('div:first')  
3.   
4. <div>被选中</div>  
5. <div>没被选中</div>  
6. <div>没被选中</div>  

(2) :last 这个跟上面那个相对,选取的是符合要求的最后一个元素

Html代码  

1. // 选取最后一个DIV  
2. $('div:last');  
3.   
4. <div>没被选中</div>  
5. <div>没被选中</div>  
6. <div>被选中</div>  

(3) :not(select) 这个选择器是用来选择不符合要求的元素的

Html代码  

1. // 选择Class不是"test"的元素  
2. $('div:not(.test)');  
3.   
4. <div class="test">没被选中</div>  
5. <div class="test">没被选中</div>  
6. <div class="test">没被选中</div>  
7. <div>被选中</div>  
8. <div>被选中</div>  

(4) :even 这个选择器用来选择索引是偶数的元素,从0开始编号

Js代码  

1. // 选取偶数的DIV  
2. $('div:even');  
3.   
4. <div>被选中</div>  
5. <div>没被选中</div>  
6. <div>被选中</div>  
7. <div>没被选中</div>  
8. <div>被选中</div>  

(5) :odd 与上面的对应,选取索引是奇数的元素(这个就不举例子了)

(6) :eq(index) 这个选择器选择第index个元素

Java代码  

1. // 选择第3个DIV  
2. $('div:eq(3)');  
3.   
4. <div>没被选中</div>  
5. <div>没被选中</div>  
6. <div>没被选中</div>  
7. <div>被选中</div>  
8. <div>没被选中</div>  

(7) :gt(index) 选取索引比index大的元素

Java代码  

1. $('div:gt(2)');  
2.   
3. <div>没被选中</div>  
4. <div>没被选中</div>  
5. <div>没被选中</div>  
6. <div>被选中</div>  
7. <div>被选中</div>  

(8) :lt(index) 与上面的相反,选取索引比index小的元素

Html代码  

1. $('div:lt(2)');  
2.   
3. <div>被选中</div>  
4. <div>被选中</div>  
5. <div>被选中</div>  
6. <div>没被选中</div>  
7. <div>没被选中</div>