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,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery实现手风琴案例
May 04 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php之curl设置超时实例
2014/11/03 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
vue 页面跳转的实现方式
2021/01/12 Vue.js
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Python中进程和线程的区别详解
2017/10/29 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
班主任工作经验材料
2014/02/02 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
实例详解Python的进程,线程和协程
2022/03/13 Python
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android