jQuery入门之层次选择器实例简析


Posted in Javascript onDecember 11, 2015

本文实例分析了jQuery入门之层次选择器的使用方法。分享给大家供大家参考,具体如下:

这里简单介绍一下jQuery层次选择器中ancestor descendant与parent>child的区别。

parent>child:根据父元素匹配所有的子元素,层次关系是父子关系。

ancestor descendant:根据祖先元素匹配所有的后代元素,层次关系是祖先和后代。

编写代码,进行测试,以更加清楚的区分两者的区别:

<div id="first">1
  <span>1.1 </span>
  <span>1.2 </span>
  <div>1.3
    <span>1.3.1 </span>
  </div>
 </div>
<script type="text/javascript" src="jquery-1.4.1.min.js">
</script>
<script type="text/javascript">
  $(function () {
    $("#first>span").css("color", "red");
  });
</script>

运行后发现:

jQuery入门之层次选择器实例简析

1.3.1的文字颜色不是红色,因为parent>child是父子关系;

如果把选择器改为:

$("#first span").css("color", "red");

则运行后发现:

jQuery入门之层次选择器实例简析

1.3.1的文字颜色也是红色,因为ancestor descendant层次关系是祖先和后代。即id为"first"的元素下的所有span标记,不管是子辈,还是孙子辈,都会变成红色。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 #Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 #Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 #Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 #Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 #Javascript
Express的路由详解
Dec 10 #Javascript
You might like
PHP常用数组函数介绍
2014/07/28 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
js解析json读取List中的实体对象示例
2014/03/11 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jQuery功能函数详解
2015/02/01 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
17个Python小技巧分享
2015/01/23 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
深入理解Python异常处理的哲学
2019/02/01 Python
python中下标和切片的使用方法解析
2019/08/27 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
Python descriptor(描述符)的实现
2020/11/15 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
写给老婆的检讨书
2014/02/21 职场文书
公证书标准格式
2014/04/10 职场文书
法务专员岗位职责
2015/02/14 职场文书
大学生活感想
2015/08/10 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript