欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQuery选择器总结(1)基础篇

程序员文章站 2022-07-12 09:18:24
...

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

上一篇: Normal Matrix

下一篇: 动态dp