一个优秀的Javascript库必定要有一个强大的选择器,强大的选择器可以使DOM操作事半功倍.选择器是JQuery的根基,要学习JQuery第一个就是要学习它的选择器.
JQuery的选择器使用的是CSS的风格,学习起来也是非常的方便.
这次先介绍简单的基本的一些选择器
1.基本选择器
(1) #id 根据ID选取页面元算,相当于document.getElementById(id);JQuery的写法是$('#id'),这个选择器与传统的getElementById()是等价的,所以效率也是所有选择器中最高的,因此在元素具有ID的情况下,这个肯定是首选的选择器.虽然这个选择器与getElementById是等价的,但是它的安全性要高于getElementById,当用getElementById选取一个页面上没有的元素,并且调用元素的属性时会报异常,但是用JQuery的ID选择器是不会报异常的.
- // 如果页面上没有'test'这个元素,下面这句就会产生一个错误
- document.getElementById('test').style.color = '#00FF00';
- // 所以有时会先判一下空
- if (document.getElementById('test') != null)
- document.getElementById('test').style.color = '#00FF00';
- // 用JQuery的ID选择器既简单又不会产生错误
- $('#test').css('color' ,'#00FF00');
(2) .class 类选择器 根据类名选取页面上的元素,$('.test')选取页面上所有class="test"的元素.虽然这种选择器,拿到的是多个元素,但是并不需要去迭代它们,可以直接更改属性,这也是JQuery的强大之处
- // 改变页面上所有Class是test元素的颜色
- $('.test').css('color', '#FF00FF');
(3) element 元素选择器 用于选择匹配的元素名,$('div')选取页面上所有的DIV,这个选择器跟第一个ID选择器一样,等价于原生的Javascript方法,document.getElementsByTagName();正因为如此,这个选择器的执行效率也是比较高的,仅次于ID选择器
- // 改变所有DIV的前景色
- $('div').css('color', '#0000FF');
(4) selector1,selector2... 合并多个选择器 将多个选择器选择的结果合并到一起返回
- // 返回所有DIV和id是test的元素
- $('div','#test')
(5) * 全部选择器 $('*') 选择页面上所有的元素
2.层次选择器
(1) $('ancestor descendant') 这个是后代元素选择器 选取ancestor元素下的所有descendant后代元素
- // 选取ID是father的元素下的所有DIV
- $('#father div')
- <div id="father">
- <div>被选中</div>
- <div>被选中</div>
- <div>被选中</div>
- <div><!--这个也被选中-->
- <div>被选中</div>
- </div>
- </div>
(2) $('parent>child') 这个是孩子选择器 选取father元素的直接子元素
- // 选取father元素下的直接子DIV
- $('#father>div')
- <div id="father">
- <div>被选中</div>
- <div>被选中</div>
- <div>被选中</div>
- <div><!--这个被选中了,但是它的下一层就不会被选中了-->
- <div>这个没有被选中</div>
- </div>
- </div>
(3) $('prev+next') 这个是选中prev的后面一个元素
- $('#first+div')
- <div id="first">
- <div>被选中</div>
- <div>没有被选中</div>
- </div>
(4) $('prev~siblings') 这个是选中prev后面的所有同一级siblings元素
- $('#first~div')
- <div id="first">
- <div>没有被选中</div>
- </div>
- <div>被选中</div>
- <div><!--这个被选中-->
- <div>没有被选中</div>
- </div>
3. 筛选,过滤选择器
(1) :first 这个选择器用来选择符合要求的第一个元素
- // 选取第一个DIV
- $('div:first')
- <div>被选中</div>
- <div>没被选中</div>
- <div>没被选中</div>
(2) :last 这个跟上面那个相对,选取的是符合要求的最后一个元素
- // 选取最后一个DIV
- $('div:last');
- <div>没被选中</div>
- <div>没被选中</div>
- <div>被选中</div>
(3) :not(select) 这个选择器是用来选择不符合要求的元素的
- // 选择Class不是"test"的元素
- $('div:not(.test)');
- <div class="test">没被选中</div>
- <div class="test">没被选中</div>
- <div class="test">没被选中</div>
- <div>被选中</div>
- <div>被选中</div>
(4) :even 这个选择器用来选择索引是偶数的元素,从0开始编号
- // 选取偶数的DIV
- $('div:even');
- <div>被选中</div>
- <div>没被选中</div>
- <div>被选中</div>
- <div>没被选中</div>
- <div>被选中</div>
(5) :odd 与上面的对应,选取索引是奇数的元素(这个就不举例子了)
(6) :eq(index) 这个选择器选择第index个元素
- // 选择第3个DIV
- $('div:eq(3)');
- <div>没被选中</div>
- <div>没被选中</div>
- <div>没被选中</div>
- <div>被选中</div>
- <div>没被选中</div>
(7) :gt(index) 选取索引比index大的元素
- $('div:gt(2)');
- <div>没被选中</div>
- <div>没被选中</div>
- <div>没被选中</div>
- <div>被选中</div>
- <div>被选中</div>
(8) :lt(index) 与上面的相反,选取索引比index小的元素
- $('div:lt(2)');
- <div>被选中</div>
- <div>被选中</div>
- <div>被选中</div>
- <div>没被选中</div>
- <div>没被选中</div>