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实现Sleep函数的代码
Mar 04 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
软件测试面试题
2014/01/05 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
个人委托书范本
2014/04/02 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
商务日语专业自荐信
2014/04/17 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
贷款收入证明格式
2015/06/24 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书
零基础学java之循环语句的使用
2022/04/10 Java/Android