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-ui中自动完成实现方法
Jun 10 Javascript
jqgrid 表格数据导出实例
Nov 21 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
AngularJS实现表单验证
Jan 28 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
再谈JavaScript线程
Jul 10 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 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
php图片添加文字水印实现代码
2016/03/15 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
PDO::_construct讲解
2019/01/27 PHP
Js的MessageBox
2006/12/03 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
实例讲解JavaScript截取字符串
2018/11/30 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python排序方法实例分析
2015/04/30 Python
python中threading超线程用法实例分析
2015/05/16 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
机械工程系毕业生求职信
2013/09/27 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
买房协议书范本
2014/10/23 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
PHP命令行与定时任务
2021/04/01 PHP
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python