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存取照片的具体实现方法
Jun 30 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
angular.js分页代码的实例
Jul 27 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php简单压缩css样式示例
2016/09/22 PHP
php实现socket推送技术的示例
2017/12/20 PHP
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
Vue 事件处理操作实例详解
2019/03/05 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
写自荐信的七个技巧
2013/10/15 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
考核工作实施方案
2014/03/30 职场文书
单位消防安全责任书
2014/07/23 职场文书
党性心得体会
2014/09/03 职场文书
七一表彰大会简报
2015/07/20 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书