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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
vue.js实现简单购物车功能
May 30 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 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函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
高级护理实习生自荐信
2013/09/28 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
保密承诺书范文
2014/03/27 职场文书
法人代表证明书
2014/09/18 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python