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+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 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
XHProf报告字段含义的解析
2016/05/17 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python super用法及原理详解
2020/01/20 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
介绍一下gcc特性
2012/01/20 面试题
葡萄牙语专业个人求职信
2013/12/10 职场文书
保研导师推荐信
2015/03/25 职场文书
幼儿园教研工作总结2015
2015/05/12 职场文书
文艺晚会开场白
2015/05/29 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android