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 OOP类与继承
Nov 15 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
载入进度条 效果
2006/07/08 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
js读写json文件实例代码
2014/10/21 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
python爬虫可以爬什么
2020/06/16 Python
Python中Selenium库使用教程详解
2020/07/23 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
办理居住证介绍信
2014/01/15 职场文书
教师师德承诺书
2014/03/26 职场文书
活动总结怎么写
2014/04/28 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python