详解强大的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 window.onload 加载多个函数的方法
Nov 02 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
javascript前端实现多视频上传
Dec 13 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中的i++与++i的区别及效率
2016/06/15 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
Python微信公众号开发平台
2018/01/25 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
小学英语教学反思
2014/01/30 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
2015年母亲节寄语
2015/03/23 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书