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自执行函数的几种不同写法的比较
Aug 16 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 Javascript
vue 页面跳转的实现方式
Jan 12 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
小文件php+SQLite存储方案
2010/09/04 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
js表头排序实现方法
2015/01/16 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
python3.x实现发送邮件功能
2018/05/22 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
浅析python中的del用法
2020/09/02 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
房地产还款计划书
2014/01/10 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
打架检讨书2000字
2014/02/22 职场文书
公司处罚决定书
2015/06/24 职场文书
区域销售大会开幕词
2016/03/04 职场文书