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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
Sep 09 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
JavaScript中的this机制
Jan 30 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
js实现浏览器打印功能的示例代码
Jul 15 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中对数据库操作的封装
2006/10/09 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python 基础知识之字符串处理
2017/01/06 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
浅析NumPy 切片和索引
2020/09/02 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
客户代表实习人员自我鉴定
2013/09/27 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
语文教研活动总结
2014/07/02 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
人事代理委托书
2014/09/27 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
党员公开承诺书2015
2015/01/21 职场文书
诉讼和解协议书
2016/03/23 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android