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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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
yii框架搜索分页modle写法
2016/12/19 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
node.js超时timeout详解
2014/11/26 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python实现批量下载图片的方法
2015/07/08 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
班级入场式解说词
2014/02/01 职场文书
酒店总经理助理职责
2014/02/12 职场文书
大型营销活动计划书
2014/04/28 职场文书
奥运会口号
2014/06/13 职场文书
水电维修专业推荐信
2014/09/06 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
2019大学生实习报告
2019/06/21 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
python 爬取天气网卫星图片
2021/06/07 Python