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 相关文章推荐
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
JavaScript中Function详解
Feb 27 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
JS获取当前时间戳方法解析
Aug 29 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 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
如何去掉文章里的 html 语法
2006/10/09 PHP
php数组总结篇(一)
2008/09/30 PHP
用php解析html的实现代码
2011/08/08 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php url路由入门实例
2014/04/23 PHP
php把数组值转换成键的方法
2015/07/13 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Python入门篇之列表和元组
2014/10/17 Python
详解python进行mp3格式判断
2016/12/23 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
python线程池threadpool实现篇
2018/04/27 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
在校学生职业规划范文
2014/01/08 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
思想道德自我评价2015
2015/03/09 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL