jquery中子元素和后代元素的区别示例介绍


Posted in Javascript onApril 02, 2014

今天学习jQuery的选择器:

jQuery选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。

基本选择器:id,class,标签名,*,元素组合(div,span,p.myClass)

层次选择器:

难点: jquery中子元素和后代元素的区别
后代,就是当前元素的所有后代,都算,
子元素,就是当前元素的子集,再往下走就不算了。

具体的分析可以参考:

<div>This is <strong>very</strong> important.</div> 
<div>This is <em>really <strong>very</strong></em> important.</div>

以上是html。运行后在浏览器里是看到

This is very important.
This is really very important.

这样的样式,为了容易看到效果,我们不妨就尝试用添加css颜色来试一下

如果运行$("div strong").css("color","red");就是把div的后代元素strong变为红色。运行后是

This is very important.
This is really very important.

如果运行$("div>strong").css("color","blue");就是把div的子元素strong变为蓝色。运行后是

This is very important.
This is really very important.

可以通俗的这样理解,例如有一家人三代同堂,爷爷,父亲和你,这样话爷爷的子元素就是你父亲,同时你父亲也是爷爷的后代元素,而你只是爷爷的后代元素。

Javascript 相关文章推荐
jQuery遍历Table应用示例
Apr 09 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
关于Vue中的options选项
Mar 22 Vue.js
js 日期比较相关天数代码
Apr 02 #Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 #Javascript
网页广告中JS代码的信息监听示例
Apr 02 #Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 #Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 #Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 #Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 #Javascript
You might like
PHP新手上路(六)
2006/10/09 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
小程序新版订阅消息模板消息
2019/12/31 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
python算法表示概念扫盲教程
2017/04/13 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python pygame实现方向键控制小球
2019/05/17 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
销售演讲稿范文
2014/01/08 职场文书
五年级数学教学反思
2014/02/11 职场文书
学校春季防火方案
2014/06/08 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
生日祝酒词大全
2015/08/10 职场文书