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的匿名函数小结
Dec 31 Javascript
让textarea自动调整大小的js代码
Apr 12 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
参赛口号
2014/06/16 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
Java 写一个简单的图书管理系统
2022/04/26 Java/Android