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监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 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
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
JS 进度条效果实现代码整理
2011/05/21 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
《雾凇》教学反思
2014/02/17 职场文书
生物技术专业求职信
2014/06/10 职场文书
支部书记四风对照材料
2014/08/28 职场文书
考研英语复习计划
2015/01/19 职场文书
Python中else的三种使用场景
2021/06/16 Python