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 相关文章推荐
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
js实现漫天星星效果
Jan 19 Javascript
Node.js安装配置图文教程
May 10 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 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
常用的php对象类型判断
2008/08/27 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
2020/11/16 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
网上签名寄语活动留言
2014/01/18 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
食堂管理制度范本
2015/08/04 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
golang DNS服务器的简单实现操作
2021/04/30 Golang
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Python中的 Set 与 dict
2022/03/13 Python
Python中re模块的元字符使用小结
2022/04/07 Python
python​格式化字符串
2022/04/20 Python