JQuery学习笔记——层级选择器
JQuery学习笔记——层级选择器
上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器。根据手册大纲,这篇学习的是层级选择器。
选择器:
1、基础选择器
2、层级选择器
1)、ancestor descendant
2)、parent > child
3)、prev + next
4)、prev ~ siblings
3、基本筛选器
4、内容选择器
5、可见性选择器
6、属性选择器
7、子元素选择器
8、表单选择器
9、表单元素选择器
10、混淆选择器
层级选择器:层级选择器有四种选择器
同样与上一篇一样,先写一段简单的HTML代码,供接下来的各选择器使用演示。
<body>
<div>
<h1 id="h1">jquery</h1>
<h1 class="h2">javascript</h1>
<div>
<h1>第二层div中的jquery</h1>
<h1>第二层div中的javascript</h1>
</div>
</div>
<h1>html</h1>
<h1>css</h1>
</body>
显示如图:
第一种:ancestor descendant(在给定的祖先元素下匹配所有的后代元素)
代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div h1").css({"color":"red"});
});
</script>
效果如图:
解析:$("div h1"),指定祖先元素div下匹配所有的后代h1元素。在此示例中,第一层div下的所有后代即为
<h1 id="h1">jquery</h1>
<h1 class="h2">javascript</h1>
<div>
<h1>第二层div中的jquery</h1>
<h1>第二层div中的javascript</h1>
</div>
则这些所有匹配的后代元素的颜色设置为红色。
第二种:parent > child(在给定的父元素下匹配所有的子元素)
代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#div1 > h1").css({"color":"red"});
});
</script>
给第一个div添加一个id="div1",则可明显却分祖先与后代的关系。
效果图如下:
解析:$("#div1 > h1"),在给定的父元素id为div1的元素下匹配所有为h1标签的子元素,则该父元素的h1子元素有
<h1 id="h1">jquery</h1>
<h1 class="h2">javascript</h1>
第三种:prev + next(匹配所有紧接在 prev 元素后的 next 元素)
代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#div1 + h1").css({"color":"red"});
});
</script>
效果图如下:
解析:该段JQuery代码,指的是匹配所有紧接在id=“div1”的元素后的h1元素,紧接则特指一个,即选择器选择的是
<h1>html</h1>
第四种:prev ~ siblings (匹配 prev 元素之后的所有 siblings 元素)
代码如下:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#div1 ~ h1").css({"color":"red"});
});
</script>
效果图如下:
解析:该段JQuery代码指的是匹配 id="div1"的元素之后的所有 h1元素,即为
<h1>html</h1>
<h1>css</h1>
四种层级选择器,学完了,总结一下:
prev + next
prev ~ siblings
这两种选择器是同级元素间的选择器。而prev + next特指第一个,prev ~ siblings指所有。
ancestor descendant
parent > child
这两种选择器是上下级关系,也可以称包含关系,后代包含在祖先里,子元素包含在父元素里。区别在于:parent > child,匹配的是parent元素内的第一层所有元素,而ancestor descendant,匹配的是ancestor元素内的所有元素。
这一篇我学习了JQuery的层级选择器,下一篇将学习基本筛选器。进来的大神们,可在文章下面评论,如有理解错误,请指出,一起进步,一起学习。
JQuery学习笔记——层级选择器的更多相关文章
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- jQuery学习笔记(2)-选择器的使用
一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...
- JQuery学习笔记之选择器
JQuery与DOM对象 <div id="test1" class="test2"></div> DOM对象获取方式: var dom ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记之概念(1)
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
随机推荐
- Delphi使用Zint生成QR二维条码(zint.dll)
Delphi使用Zint生成QRCODE 本文使用的Zint Barcode Library(zint.dll)版本为2.6.0,和之前使用的2.4.3版本在zint_symbol这个结构体上会有差异 ...
- struts2 Unable to load configuration. - bean - jar:file:struts2-core-2.2.3.jar!/struts-default.xml:29:72
今天启动tomcat的时候发现如下错误记录一下! 从stackoverflow上找到 原因是加入了多个struts2包 删除相同的包即可!!
- java map集合的知识
/** * Map用于存储键值对,不允许键重复,值可以重复. * (1)HashMap是一个最常用的Map,它根据键的hashCode值存储数据,根据键可以直接获取它的值,具有很快的访问速度. * H ...
- Hadoop hdfs完全分布式搭建教程
1.安装环境 ①.四台Linux CentOS6.7 系统 hostname ipaddress subnet mask ...
- checkbox全选、全不选实现
<form name=aa1 > <p> <input type=checkbox name="radiot ...
- ASP.NET MVC5(四):数据注解和验证
前言 用户输入验证的工作,不仅要在客户端浏览器中执行,还要在服务端执行.主要原因是客户端验证会对输入数据给出即时反馈,提高用户体验:服务器端验证,主要是因为不能完全信任用户提供的数据.ASP.NET ...
- 零基础开始学python
变量规则:在python中变量名不能有特殊字符和数字开头以及python里的一些关键字,可以使用下划线开头,在python里,变量是支持使用中文的,但尽量不要使用中文,为什么?因为这样会让你看起来太l ...
- scrapy设置"请求池"
scrapy设置"请求池" 引言 相信大家有时候爬虫发出请求的时候会被ban,返回的是403错误,这个就是请求头的问题,其实在python发出请求时,使用的是默认的自己的请求头,网 ...
- 关于Iscroll.js 的滑动和Angular.js路由冲突问题
Iscroll主要应用于app移动端开发. 主要代码: window.onload=function(){ var myIscroll=new IScroll(".headerNav&quo ...
- Mac, Linux中配置Latex中文字体
对于中文的latex文档,在Linux下一般可以使用系统自带的开源字体:文泉驿(WenQuanYi)来实现,即如下的最小例子,通过xelatex命令来编译即可生成中文文档. \documentclas ...