详解强大的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 相关文章推荐
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
微信小程序 开发之全局配置
May 05 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python和Go语言的区别总结
2019/02/20 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python中实现一行拆多行和多行并一行的示例代码
2020/09/06 Python
基于Python实现天天酷跑功能
2021/01/06 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
12岁生日感言
2014/01/21 职场文书
战略合作意向书范本
2014/04/01 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2015年教务工作总结
2015/05/23 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
52条SQL语句教你性能优化
2021/05/25 MySQL