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 静态对象和构造函数的使用和公私问题
Mar 02 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
Aug 01 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
JavaScript中的几种继承方法示例
Dec 06 Javascript
Vue页面渲染中key的应用实例教程
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
输出控制类
2006/10/09 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP使用数组实现队列
2012/02/05 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
JS跨域总结
2012/08/30 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
微信小程序页面渲染实现方法
2019/11/06 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
python实现KNN近邻算法
2020/12/30 Python
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
厨师岗位职责
2013/11/12 职场文书
超市促销活动总结
2014/07/01 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
教导主任个人总结
2015/03/03 职场文书
离婚上诉状范文
2015/05/23 职场文书
房贷收入证明范本
2015/06/12 职场文书
学术研讨会主持词
2015/07/04 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL