详解强大的jQuery选择器之基本选择器、层次选择器


Posted in Javascript onFebruary 07, 2012

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选择器功能,让它很容易上手,吸引了大批的开发者,本文就来介绍一下强大的jQuery选择器。
jQuery选择器类型

jQuery选择器主要分为四类:

1、基本选择器

2、层次选择器

3、过滤选择器

4、表单选择器

由于过滤选择器内容比较多,因此本文仅介绍前两种,下篇文章将介绍后两种。
一点准备工作

为了能让大家看到具体的效果,这里先创建一个示例页面,里面包含各种<div>和<span>元素,然后用jQuery选择器来匹配元素并调整它们的样式。

示例页面代码:

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<style type="text/css"> 
div,span,p{ 
width:140px; 
height:140px; 
margin:5px; 
background:#aaa; 
border:#000 1px solid; 
float:left; 
font-size:17px; 
} 
div.mini{ 
width:55px; 
height:55px; 
background-color:#aaa; 
font-size:12px; 
} 
div.hide{ 
display:none; 
} 
</style> 
</head> 
<body> 
<div class="one" id="one"> 
id为one,class为one的div 
<div class="mini">class为mini</div> 
</div> 
<div class="one" id="two" title="test"> 
id为two,class为one,title为test的div 
<div class="mini" title="other">class为mini,title为other</div> 
<div class="mini" title="test">class为mini,title为test</div> 
</div> 
<div class="one"> 
<div class="mini">class为mini</div> 
<div class="mini">class为mini</div> 
<div class="mini">class为mini</div> 
<div class="mini"></div> 
</div> 
<div class="one"> 
<div class="mini">class为mini</div> 
<div class="mini">class为mini</div> 
<div class="mini">class为mini</div> 
<div class="mini" title="tesst">class为mini,title为tesst</div> 
</div> 
<div style="display:none" class="none"> 
style的display为none的div 
</div> 
<div class="hide">class为hide的div</div> 
<div> 
包含input的type为hidden的div 
<input type="hidden" size="8"/> 
</div> 
<span id="move">正在执行动画的span元素</span> 
</body> 
</html>

基本选择器

基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能用一次,class允许重复使用。

基本选择器规则如下:

基本选择器

选 择 器 描 述 返 回 示 例
#id 根据给定的id匹配一个元素 单个元素 $("#test")选取 id 为 test 的元素
.class 根据给定的类名匹配元素 集合元素 $(".test")选取所有 class 为 test 的元素
element 根据给定的元素名匹配元素 集合元素 $("p")选取所有的

元素

* 匹配所有元素 集合元素 $("*")选取所有的元素
selector1,selector2,...,selectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,p.myClass")选取所有
和拥有class为 myClass 的

标签的一组元素

在线演示 http://demo.3water.com/js/2012/jquery_demo/jQuery基本选择器示例.html
层次选择器

如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择。

层次选择器规则如下:

层次选择器

选 择 器 描 述 返 回 示 例
$("ancestor descendant") 选取ancestor元素里所有 descendant(后代)元素 集合元素 $("div span")选取
里的所 有的元素
$("parent>child") 选取parent元素下的child(子)元素 集合元素 $("div>span")选取
元素下 元素名是的子元素
$("prev+next") 选取紧接在prev元素后的next元素 集合元素 $(".one+div")选取class为one的 下一个
兄弟元素
$("prev~siblings") 选取prev元素之后的所有siblings元素 集合元素 $("#two~div")选取id为two的元素 后面所有
兄弟元素
在线演示 http://demo.3water.com/js/2012/jquery_demo/jQuery层次选择器示例.html
在层次选择器中,第1个和第2个比较常用,而后面两个因为在jQuery里可以用更加简单的方法代替,所以使用的机率相对较少。

可以用next()方法来代替$("prev+next")选择器,即$(".one+div")与$(".one").next("div")等效。

可以用nextAll()方法来代替$("prev~siblings")选择器,即$(".one~div")与$(".one").nextAll("div")等效。

小结

本文主要介绍了jQuery选择器中的基本选择器和层次选择器,并对每种类型的选择器给出了示例代码,希望能对大家有所帮助。本人也是jQuery的初学者,欢迎大家拍砖。

Javascript 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 #Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 #Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 #Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 #Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 #Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 #Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 #Javascript
You might like
PHP原理之异常机制深入分析
2010/08/08 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php中socket的用法详解
2014/10/24 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
优秀应届生推荐信
2013/11/09 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
股东协议书
2014/04/14 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
酒店员工管理制度
2015/08/05 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
小学思品教学反思
2016/02/20 职场文书