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 鼠标滚轮事件
Apr 09 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
window.open()实现post传递参数
Mar 12 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
微信小程序动态添加和删除组件的现实
Feb 28 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
使用PHP编写发红包程序
2015/07/22 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
Node.js实现发送邮件功能
2017/11/06 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
对python中的for循环和range内置函数详解
2018/04/17 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
pandas 数据类型转换的实现
2020/12/29 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
企事业单位求职者的自我评价
2013/12/28 职场文书
检讨书怎么写
2015/01/23 职场文书
酒店员工管理制度
2015/08/05 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL