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中删除元素的实现代码
Dec 29 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
Angular中$compile源码分析
Jan 28 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
前端 javascript 实现文件下载的示例
Nov 24 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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
php中socket通信机制实例详解
2015/01/03 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
利用python编写一个图片主色转换的脚本
2017/12/07 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
小学国庆节活动方案
2014/02/11 职场文书
培训协议书范本
2014/04/22 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis