详解强大的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 相关文章推荐
js中call与apply的用法小结
Dec 28 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
js实现select下拉框菜单
Dec 08 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
vue实现简单loading进度条
Jun 06 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
吃通javascript正则表达式
Apr 21 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
Python用threading实现多线程详解
2017/02/03 Python
Python中join函数简单代码示例
2018/01/09 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python的移位操作实现详解
2019/08/21 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python实时监控logstash日志代码
2020/04/27 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
python raise的基本使用
2020/09/10 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
小学开学典礼主持词
2014/03/19 职场文书
活动总结怎么写
2014/04/28 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
师德先进个人材料
2014/12/20 职场文书
志愿者个人总结
2015/03/03 职场文书
加强党性修养心得体会
2016/01/21 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
多表查询、事务、DCL
2021/04/05 MySQL