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 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
js变量提升深入理解
Sep 16 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
详解JS ES6编码规范
May 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自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
js中的string.format函数代码
2020/08/11 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python列表解析配合if else的方法
2018/06/23 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python初步实现word2vec操作
2020/06/09 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
计算机应用职专应届生求职信
2013/11/12 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
管辖权异议上诉状
2015/05/23 职场文书
网聊搭讪开场白
2015/05/28 职场文书
早会开场白台词大全
2015/06/01 职场文书
Python Socket编程详解
2021/04/25 Python
Node实现搜索框进行模糊查询
2021/06/28 Javascript
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python