一个优秀的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
分享到:
相关推荐
python 零基础学习篇
本篇文章记录了Jquery基础学习过程中的Jquery选择器以及核心函数。Jquery选择器:基本元素选择器,层级选择器,过滤选择器,子元素过滤选择器,表单过滤选择器,属性选择器,表单对象过滤选择器。
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率...
近期看了一些网上关于Sizzle的分析文章,就匹配次序往往就说使用了从右到左的逆向匹配法,...在此先申明一点,下面所说的关系选择器是指W3C中的Combinator选择器,因本人觉得用关系选择器这个名字要比其它更加贴近实际
本文实例讲述了jQuery 选择器用法。分享给大家供大家参考,具体如下: 今儿个开始学习jQuery,在学习jQuery之前我们应该掌握js,我之前也写过几篇笔记,但是只是小部分的知识,js也不是很难 可以自己简单的看看。...
理论篇:对选择器、事件、常用函数方法、外观效果、查找筛选、文档处理、Ajax处理的基础知识,以及《锋利的JQUERY》读书笔记精华完整版。 实践篇:Tab菜单栏源码、手风琴菜单源码、圆角效果源码、网页弹出对话框...
第1部分 JavaScript.cCSS与DOM基础篇 第1章 ccJavaScript概述 1.1 JavaScript的起源 1.2 浏览器之争 1.2.1 DHTML 1.2.2 浏览器之间的冲突 1.2.3 标准的制定 1.3 JavaScript的实现 1.3.1...
jQuery 1.1.3(2007年7月):这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。 jQuery 1.2(2007年9月):...
第1部分 JavaScript.cCSS与DOM基础篇 第1章 ccJavaScript概述 1.1 JavaScript的起源 1.2 浏览器之争 1.2.1 DHTML 1.2.2 浏览器之间的冲突 1.2.3 标准的制定 1.3 JavaScript的实现 ...
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。 jQuery是继prototype之后又一个优秀的Javascrīpt框架。其...
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深。
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!
摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言 本系列的2,3篇上面列举了太多的API相信大家...
因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。 虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,...
我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : )在我们开始学习之前建议大家先去...