http://simpleframework.net/bbs/836/13453.html
--------------------------------------------------
一个优秀的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 class="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>
