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.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
关于js遍历表格的实例
Jul 10 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
react中Suspense的使用详解
Sep 01 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中动态变量用法实例
2015/06/10 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
js tab效果的实现代码
2009/12/26 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
火锅店营销方案
2014/02/26 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
公司新员工欢迎词
2015/09/30 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
如何计划开一家便利店?
2019/07/31 职场文书