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实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
javascript清空table表格的方法
May 14 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
纯JS实现简单的日历
Jun 26 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
JavaScript文档对象模型DOM
Nov 20 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新手入门学习方法
2011/05/08 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
使用Apache的rewrite
2021/03/09 Servers
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
python通过文件头判断文件类型
2015/10/30 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
python 字符串格式化的示例
2020/09/21 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
民间个人借款协议书
2014/09/30 职场文书
刑事和解协议书范本
2014/11/19 职场文书
初中军训感想
2015/08/07 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android