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 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
Node.js实现数据推送
Apr 14 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
小程序实现五星点评效果
Nov 03 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
QT与javascript交互数据的实现
May 26 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
动易数据转成dedecms的php程序
2007/04/07 PHP
JQuery的一些小应用收集
2010/03/27 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
vue小白入门教程
2018/04/02 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python自动发邮件脚本
2017/03/31 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python中关于浮点数的冷知识
2019/09/22 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
python如何使用腾讯云发送短信
2020/09/17 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
房地产开发项目建议书
2014/05/16 职场文书
长江三峡导游词
2015/01/31 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
php 解析非标准json、非规范json
2021/04/01 PHP
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android