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创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
SWFObject Flash js调用类
Jul 08 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 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
极典R601SW收音机
2021/03/02 无线电
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
javascript实现贪吃蛇小练习
2020/07/05 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
python2与python3共存问题的解决方法
2018/09/18 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
KIKO比利时官网:意大利彩妆品牌
2017/07/23 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
跟单文员的岗位职责
2013/11/14 职场文书
大学生学习自我评价
2014/01/13 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
学校师德承诺书
2014/05/23 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python