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学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
React中的refs的使用教程
Feb 13 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
JavaScript实现旋转轮播图
2020/08/18 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
python实现单链表的方法示例
2019/09/03 Python
阿里云:Aliyun.com
2017/02/15 全球购物
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
大学自我鉴定范文
2013/12/26 职场文书
简历里的自我评价
2014/01/31 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
2015年新学期寄语
2015/02/26 职场文书
个性与发展自我评价
2015/03/06 职场文书
文艺节目主持词
2015/07/06 职场文书
校园开放日新闻稿
2015/07/17 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Golang 字符串的常见操作
2022/04/19 Golang