jQuery选择器---层次选择器总结
今天要分享的是jQuery层次选择器,层次选择器的分类如图:
接下来就开始了 要不先养养眼精神一下:
开始1.祖先选择器:
案例:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用方法:
$("form input").css("background","pink");
使用结果:
案例分析:
$("form input")是选中了form里边的所有input包括父子,爷孙,等,然而form外边的input属于兄弟关系是属于form外边的,所以没有变背景色。
2.父子选择器:
案例:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用方法:
$("form > input").css("background","pink");
使用结果:
案例分析:
$("form > input")是选中了跟form是父子关系的input,让其背景变色,然而跟form是爷孙和兄弟的input是不被选中的,所以跟父子选择器是没有关系的。
3.兄弟紧邻选择器:
案例:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用方法:
$("label + input").css("background","pink");
使用结果:
案例分析:
$("label + input")是选中了label下边紧挨着的input兄弟元素,咱们案例里边有两个label而且每个下边都有一个紧挨着的input,所以这两个input的背景都变了颜色。
4.下边兄弟选择器
案例:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
使用方法:
$("form ~ input").css("background","pink");
使用结果:
案例分析:
$("form ~ input")是选中了form下边的所有input兄弟元素,跟form是父子,爷孙关系的input没有关系所以没变颜色;
层次选择器完了,欢迎继续观看下集的表单选择器!
jQuery选择器---层次选择器总结的更多相关文章
- 黑马day16 jquery&层次选择器
假设想通过DOM元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素,兄弟元素等,则须要使用层次选择器. 1 .ancestor descendant 使用方法: $("form ...
- jquery 中多条件选择器,相对选择器,层次选择器的区别
一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...
- jQuery之层次选择器
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器1. ancestor descendant 在给定的祖先元素下匹配所有的后代元素2. parent>child 在给定的父元素下匹配所有 ...
- jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器
- 关于jQuery里面的选择器
一.JQuery选择器的概述 选择器是JQuery的根基,在JQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器. 二.选择器的优势 1.简洁的语法 2.支持CSS1.0到CSS3.0选 ...
- jQuery中的选择器(上)
从学习jquery开始,现在已经是第三遍看锋利的jQuery这本书了,现在打算对jQuery中的各种选择器进行一下总结,主要是是为了进一步系统的巩固自己对知识的掌握,另外也可以为那些学习jQuery并 ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- JQuery快速入门-选择器
JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...
- Jquery(DOM和选择器)
O(∩_∩)O~~~,今天简单整理了一下最近所学的Jquery知识.下面就总结一下. 首先,对于Jquery我们需要简单了解下: 1.Jquery是开放源代码的JS库, 2.Jquery操作是函数式编 ...
随机推荐
- Python快速入门(2)
var = raw_input() 获取用户输入,该函数会将获取的值转化为一个字符串,因此有时需要强制类型转换. if-elif-else: 三元操作符:condition1 if exp else ...
- 自己开发图表插件,脱离echart
前言 由于公司业务需要做一些图标来展示一些数据,之前都是用百度的echart.js.这次放弃使用它转而自己开发是有几个原因1.echart文件太大,有些功能用不到2.echart样式不易扩展3.需求简 ...
- 性能测试培训: 监控CPU之python
性能测试培训: 监控CPU之python 作为一名测试开发工程师,开发脚本是为了测试服务的,我们在手里没有性能监控工具的情况下,我们会自己来进行开发脚本完成监控任务.下面是python监控cpu '' ...
- 性能测试分享:Jmeter的api监控工具解决方案
性能测试分享:Jmeter的api监控工具解决方案 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询q ...
- JDBC基础学习(三)—处理BLOB类型数据
一.BLOB类型介绍 在MySQL中,BLOB是一个二进制的大型对象,可以存储大量数据的容器,它能容纳不同大小的数据. 在MySQL中有四种BLOB类型. 实际使 ...
- 1135: 零起点学算法42——多组测试数据(求和)IV
1135: 零起点学算法42--多组测试数据(求和)IV Time Limit: 1 Sec Memory Limit: 64 MB 64bit IO Format: %lldSubmitted ...
- Java常用的八种排序算法与代码实现
1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已经排好的数据列中. 将第一个数和第二个数排序,然后构成一个有序序列 将第三个数插入进去,构成一个新的有序序列. 对第四个数.第五个数--直 ...
- Java将一个目录下的所有数据复制到另一个目录下
/* 将"C:\\JavaProducts\\Source"下的所有数据复制到"C:\\Target"下 */ import java.io.*; public ...
- xshell配色Solarized Dark
转自:xshell配色Solarized Dark [Solarized_Dark] text(bold)= magenta(bold)=6c71c4 text= white(bold)=fdf6e3 ...
- MyBatis注解配置动态SQL
MySQL创建表 DROP TABLE IF EXISTS `tb_employee`; CREATE TABLE `tb_employee` ( `id` int(11) NOT NULL AUTO ...