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下通过$.browser来判断浏览器.
Apr 05 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
Vue实现附件上传功能
May 28 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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实现xml与json之间的相互转换功能实例
2016/07/07 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
解决Vue打包之后文件路径出错的问题
2018/03/06 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python处理CSV与List的转换方法
2018/04/19 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
python设置环境变量的原因和方法
2019/06/24 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android