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----文件操作
Jan 18 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
移动端界面的适配
Jan 11 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
vue实现在线学生录入系统
May 30 Javascript
如何用JS实现简单的数据监听
May 06 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 异常处理实现代码
2009/03/10 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php字符串过滤与替换小结
2015/01/26 PHP
详解YII关联查询
2016/01/10 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
微信小程序如何使用globalData的方法
2019/06/06 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
Python argv用法详解
2016/01/08 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
浅谈django的render函数的参数问题
2018/10/16 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
Python super()函数使用及多重继承
2020/05/06 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
小学庆六一活动方案
2014/02/28 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
解除劳动合同证明书
2014/09/26 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书