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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
Node.js fs模块原理及常见用途
Oct 22 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
用户的详细注册和判断
2006/10/09 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
js function使用心得
2010/05/10 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
Javascript Throttle & Debounce应用介绍
2013/03/19 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
python datetime中strptime用法详解
2019/08/29 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
英语专业学生个人求职信
2014/01/28 职场文书
社团文化节策划书
2014/02/01 职场文书
户外婚礼策划方案
2014/02/08 职场文书
外贸业务员求职信
2014/06/16 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
学术会议领导致辞
2015/07/29 职场文书
2019学校运动会开幕词
2019/05/13 职场文书