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 相关文章推荐
JS启动应用程序的一个简单例子
May 11 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 Javascript
javascript中如何判断类型汇总
May 14 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
浅谈微信小程序flex布局基础
2018/09/10 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
Python中的ctime()方法使用教程
2015/05/22 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Python中return函数返回值实例用法
2020/11/19 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
新闻记者实习自我鉴定
2013/09/19 职场文书
影视制作岗位职责
2013/12/04 职场文书
初中女生自我鉴定
2013/12/19 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
会计工作决心书
2014/03/11 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技