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 相关文章推荐
小议Javascript中的this指针
Mar 18 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
CocosCreator入门教程之网络通信
Apr 16 Javascript
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
UCenter Home二次开发指南
2009/05/28 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
平面设计师工作职责范文
2013/12/03 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
无私奉献演讲稿
2014/09/04 职场文书
离职证明标准格式
2014/09/15 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
北京导游词
2015/02/12 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书