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

更新时间：2019年06月28日 10:33:23 作者：Yeoman92

这篇文章主要介绍了jQuery层叠选择器用法,结合实例形式分析了jQuery层叠选择器功能、用法及相关操作注意事项,需要的朋友可以参考下

本文实例讲述了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常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

jQuery实现的立体文字渐变效果
这里要说的就是网站中通过js实现的一个有立体感的文字渐变效果
2010-05-05
Jquery实现顶部弹出框特效
本文给大家分享的是jquery顶部浮动弹出层，点击浮动层动画弹出层，弹出层从顶部动画滑动效果，效果非常不错，推荐给大家。
2015-08-08
jQuery EasyUI API 中文文档 - NumberBox数字框
jQuery EasyUI API 中文文档 - NumberBox数字框使用介绍，需要的朋友可以参考下。
2011-10-10
jQuery 绝对入门
对于想学习jquery 的朋友可以看下这样的入门级文章。
2009-04-04
jquery移动端TAB触屏切换实现效果
这篇文章主要介绍了jquery移动端TAB触屏切换实现效果案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-10-10
JQuery实现页面弹出框
这篇文章主要为大家详细介绍了JQuery实现页面弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
jquery实现带缩略图的全屏图片画廊效果实例
这篇文章主要介绍了jquery实现带缩略图的全屏图片画廊效果,实例分析了jquery带缩略图的全屏效果图片实现技巧,并附有完整的源码下载,需要的朋友可以参考下
2015-06-06
jquery实现（textarea）placeholder自动换行
本文主要对jquery如何实现（textarea） placeholder自动换行的方法、思路进行介绍，下面就跟小编一起来看下吧
2016-12-12
jQuery中wrapInner()方法用法实例
这篇文章主要介绍了jQuery中wrapInner()方法用法,实例分析了wrapInner()方法的功能、定义及包裹匹配元素的使用技巧,需要的朋友可以参考下
2015-01-01
JQuery事件冒泡和默认行为代码实例
这篇文章主要介绍了JQuery事件冒泡和默认行为代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05