详解强大的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 相关文章推荐
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
js实现幻灯片轮播图
Aug 14 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
关于文本留言本的分页代码
2006/10/09 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php提交post数组参数实例分析
2015/12/17 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
使用Python的Twisted框架实现一个简单的服务器
2015/04/16 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
代码详解django中数据库设置
2019/01/28 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
工商行政管理专业求职书
2014/05/23 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
关于安全的广播稿
2014/10/23 职场文书
2014年应急工作总结
2014/12/11 职场文书
欢迎词范文
2015/01/27 职场文书
车间质检员岗位职责
2015/04/08 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
python运行脚本文件的三种方法实例
2022/06/25 Python