JQuery选择器总结（1）基础篇

一个优秀的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>

 

 

下次介绍复杂的高级选择器,包括过滤选择器、属性选择器和表单选择器。

 

 

2011/3/6---------------------------------------------------------------------------------------------

第二篇已经完成:http://redstarofsleep.iteye.com/blog/942851

评论

8 楼 evil850209 2011-03-17  

不错，继续写

7 楼 redstarofsleep 2011-03-09  

JE帐号 写道

// 选取ID是father的元素下的所有DIV
$('#father div')

<div class="father">
    <div>被选中</div>
    <div>被选中</div>
    <div>被选中</div>
    <div><!--这个也被选中-->
         <div>被选中</div>
    </div>
</div>

应该是<div id="father">

噢~~是的,写错了

6 楼 JE帐号 2011-03-09  

// 选取ID是father的元素下的所有DIV
$('#father div')

<div class="father">
    <div>被选中</div>
    <div>被选中</div>
    <div>被选中</div>
    <div><!--这个也被选中-->
         <div>被选中</div>
    </div>
</div>

应该是<div id="father">

5 楼 tiannet 2011-03-05  

很不错，期待楼主继续总结。

4 楼 zui4yi1 2011-03-01  

写得很好啊，例子很清楚

3 楼 redstarofsleep 2011-02-28  

baochunyu 写道

不错，楼主继续下去！

多谢支持!!!

2 楼 baochunyu 2011-02-28  

不错，楼主继续下去！

1 楼 limcosln1andx 2011-02-26  

老帖子了，木有新东西