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 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JS限制条件补全问题实例分析
Dec 16 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
如何实现JS函数的重载
2006/09/22 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
如何把python项目部署到linux服务器
2020/08/26 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
Unix如何在一行中运行多个命令
2015/05/29 面试题
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
物业经理自我鉴定
2014/03/03 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
社区居务公开实施方案
2014/03/27 职场文书
医学专业自荐信
2014/06/14 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
写给父母的感谢信
2015/01/22 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书