jQuery选择器之基本选择器与层次选择器


Posted in Javascript onMarch 03, 2015

基本选择器

基本选择器是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的

标签的一组元素

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等,那么层次选择器是一个非常好的选择。

选择器                 描述 返回 示例
$("ancestor descendant") 选取ancestor元素里的所有 descendant(后代)元素 集合元素 $("div span")选取
里 所有元素
$("parent>child") 选取parent元素下的child元素, 与$("ancestor descendant")有区别, $("ancestor descendant")选择的是后代元素 集合元素 $("div>span")选取
元素下 元素名是的子元素
$("prev+next") 选取紧邻在prev元素之后 的next元素 集合元素 $(".one+div")选取class为one的 下一个
同辈元素
$("prev~siblings") 选取prev元素之后的所有 siblings元素 集合元素 $("#two~div")选取id为two的 元素后面的所有
同辈元素

 $("prev+next")选择器与next()方法的等价关系

                    选择器                    方法
                  等价关系              $(".one+div")        $(".one").next("div")

 $("prev~siblings")选择器与nextAll()方法的等价关系

选择器 方法
等价关系 $("prev~div") $("#prev").nextAll("div")

以上就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
javascript常用函数(2)
Nov 05 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 #Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 #Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 #Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 #Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 #Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 #Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
解析php5配置使用pdo
2013/07/03 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
Javascript----文件操作
2007/01/18 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
精伦电子Java笔试题
2013/01/16 面试题
什么是View State?
2013/01/27 面试题
2014年教师节演讲稿
2014/09/03 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
大足石刻导游词
2015/02/02 职场文书