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 版元素拖拽原型代码
Apr 25 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
如何把python项目部署到linux服务器
2020/08/26 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
劳动纠纷调解协议书格式
2014/11/30 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
电台广播稿范文
2015/08/19 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
Tomcat弱口令复现及利用
2022/05/06 Servers