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模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
vue计算属性无法监听到数组内部变化的解决方案
Nov 06 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
React 组件间的通信示例
2018/06/14 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python async with和async for的使用
2019/06/20 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python+OpenCV实现图像拼接
2020/03/05 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
Python timeit模块原理及使用方法
2020/10/10 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
Shell如何接收变量输入
2016/08/06 面试题
教师节慰问信
2015/02/15 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
优秀大学生申请书
2019/06/24 职场文书