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系列之数据类型 字符串
Jun 08 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
vue.js开发环境安装教程
Mar 17 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
python实现矩阵乘法的方法
2015/06/28 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
linux 下selenium chrome使用详解
2020/04/02 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
八年级音乐教学反思
2014/01/09 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
领导班子整改方案
2014/10/25 职场文书
护理专业自我评价
2015/03/11 职场文书
2016党员入党决心书
2015/09/22 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python