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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
小程序实现密码输入框
Nov 16 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和MySql中计算时间差的方法
2011/04/22 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
php代码架构的八点注意事项
2016/01/25 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
js中less常用的方法小结
2017/08/09 Javascript
React Native 图片查看组件的方法
2018/03/01 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
python 判断自定义对象类型
2009/03/21 Python
python sys模块sys.path使用方法示例
2013/12/04 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
python如何随机生成高强度密码
2020/08/19 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
家长给小学生的评语
2014/01/30 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
新课程改革心得体会
2016/01/22 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书