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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery+ajax实现用户登录验证
Sep 13 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
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
python地震数据可视化详解
2019/06/18 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
异常和异常类的概念
2014/09/12 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
面试后感谢信
2014/02/01 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书