jQuery层叠选择器用法实例分析


Posted in jQuery onJune 28, 2019

本文实例讲述了jQuery层叠选择器用法。分享给大家供大家参考,具体如下:

层叠选择器

如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等,那么层叠选择器是一个非常好的选择。

位置选择器语法如下:

  • "基准元素 层叠符号 目标元素"

层叠选择器的用法

  • 后代选择器
    • 格式:$("ancestor descendant")
  • 子选择器
    • 格式:$("parent>child")
  • 相邻选择器
    • 格式:$("prev+next")
  • 兄弟选择器
    • 格式:$("prev~siblings")

如操作:

  • 获取第一个ul下所有的li
  • 获取第一个ul下的子节点li
  • 获取form表单中第二个div之后的相邻节点
  • 获取form表单中第二个div之后的所有兄弟节点
<script>
 $(function(){
  //基准节点 空格 目标节点代表后代选择器,不分层次选中属于第一个ul的所有li节点
  //$("ul:first li").css("border" , "1px solid red");
  //我们使用">"来代表子选择器,只获取直接隶属于第一个ul的li节点
  //$("ul:first>li").css("border" , "1px solid red");
  //+号代表相邻节点,它只会选择1个
  //$("form>div:eq(1)+*").css("border" , "1px solid red");
  //获取之后的兄弟节点我们使用~
  $("form>div:eq(1)~div").css("border" , "1px solid red");
 })
</script>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 #jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 #jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 #jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 #jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
第十一节--重载
2006/11/16 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
php微信开发之关注事件
2018/06/14 PHP
javascript 获取图片颜色
2009/04/05 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
利用JS实现数字增长
2016/07/28 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
Python发送Email方法实例
2014/08/21 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python处理“
2019/06/10 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
个人评语大全
2014/05/04 职场文书
职业规划实施方案
2014/06/10 职场文书
索赔员岗位职责
2015/02/15 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js