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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
DOM 高级编程
May 06 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
SVG描边动画
Feb 23 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
详解Vue之事件处理
Jul 10 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 开源AJAX框架14种
2009/08/24 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
为你总结一些php系统类函数
2015/10/21 PHP
tagName的使用,留一笔
2006/06/26 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python列表list数组array用法实例解析
2014/10/28 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python字符串Intern机制详解
2019/07/01 Python
python实现大学人员管理系统
2019/10/25 Python
Django 路由层URLconf的实现
2019/12/30 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
世界上最大的艺术社区:SAA
2020/12/30 全球购物
什么时候用assert
2015/05/08 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
《自然之道》教学反思
2014/02/11 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL