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-data的三种用法
Apr 18 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery常用选择器详解
Jul 17 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现放大镜案例
Oct 19 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python定时执行指定函数的方法
2015/05/27 Python
Python实现的建造者模式示例
2018/08/06 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python实现不规则图形填充的思路
2020/02/02 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
护理专业个人求职简历的自我评价
2013/10/13 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
工会趣味活动方案
2014/08/18 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server