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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现评论模块
Aug 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
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
python条件和循环的使用方法
2013/11/01 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python Paramiko使用示例
2020/09/21 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
大学生村官心得体会范文
2014/01/04 职场文书
社区学习十八大感想
2014/01/22 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
大学迎新标语
2014/06/26 职场文书
中小企业员工手册范本
2015/05/14 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang