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实现浏览器的title闪烁
Jul 08 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
js变量提升深入理解
Sep 16 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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/05/27 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
jQuery中last()方法用法实例
2015/01/06 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
出国考察邀请函
2014/01/21 职场文书
库房管理员岗位职责
2014/03/09 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
指导老师鉴定意见
2015/06/05 职场文书
导游词之无锡古运河
2019/11/14 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL