详解强大的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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
javascript new fun的执行过程
Aug 05 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
js数组依据下标删除元素
Apr 14 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
vue transition 在子组件中失效的解决
Nov 12 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模板技术[转]
2007/01/04 PHP
php whois查询API制作方法
2011/06/23 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python实现自动清理重复文件
2020/08/24 Python
关于赌博的检讨书
2014/01/08 职场文书
学生周末长期请假条
2014/02/15 职场文书
英语教学随笔感言
2014/02/20 职场文书
天网工程实施方案
2014/03/26 职场文书
2014年纪检工作总结
2014/11/12 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
遗失证明范文
2015/06/19 职场文书
公司人力资源管理制度
2015/08/05 职场文书
nginx之内存池的实现
2022/06/28 Servers