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 相关文章推荐
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
js 数据类型判断的方法
Dec 03 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python内置函数delattr的具体用法
2017/11/23 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
python实现3D地图可视化
2020/03/25 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
授权委托书公证
2014/09/14 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
行政复议决定书
2015/06/24 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python