jQuery_2_常规选择器-高级选择器
高级选择器
层次选择器
1. 后代选择器 $("#d1 p") 获取追溯到的多个DOM对象 (无论儿子还是孙子都是后代)
2. 子选择器 $("#d1>p") 只获取子类节点的多个DOM对象 (只是儿子)
3. next选择器 $("#d1+p") 只获取某节点后同一个级别的DOM对象 (这里的p是紧跟的,如果中间还有别的标签,则 无用)
4. nextAll选择器 $("#d1~p") 获取某节点后面所有同级DOM对象
<div id="d1">
<p>p</p>
<p>p</p>
<p>p</p>
<div id="d2">
<p>p</p>
<p>p</p>
<p>p</p>
</div>
</div>
#d1>p{
color:red;
}
#d1+p{
color:red;
}
#d1~p{
color:red;
}
$("#d1 p").css("color", "red"); //后代选择器,无论儿子还是孙子都是后代
$("#d1").find("p").css("color", "blue");//find等价于后代选择器
$("#d1>p").css("color", "green");//子选择器
$("#d1").children("p").css("color", "orange")//为子选择器提供了一个等价children()方法
$("#d1+p").css("color", "blue");//next选择器
$("#d1").next("p").css("color", "blue");//为next选择器提供了一个等价的next()方法
$("#d1~p").css("color", "blue");//nextAll选择器
$("#d1").nextAll("p").css("color", "yellow");//为nextAll选择器提供了一个等价的nextAll()方法
层次选择器对节点的层次都是有要求的,比如子选择器,只有子节点可以被选择到,孙子节点和重孙子节点都无法选择到。next和nextAll选择器,必须是同一个层次的后一个和后N个,不在同一个层次是无法选取到的。
选择器方法不传参,就相当于传递了“*”号
$("#d1").next().css("color", "green");//next()等选择器不传参,就相当于传递了*号
//如果*在某个环境里有所浪费,建议尽量不去使用
CSS不能实现的选择器,下面是jQuery提供的方法
<p>p</p>
<p>p</p>
<p>p1</p>
<strong>s</strong>
<div id="d1">div<p>p2</p></div>
<strong>s</strong>
<p>p3</p>
<strong>s</strong>
<p>p</p>
<p>p</p>
$("#d1").prev("p").css("color", "red"); //同级上一个元素
$("#d1").prevAll("p").css("color", "red");//同级所以上面的元素
$("#d1").preAll("P").css("color", "red");
$("#d1").nextAll("P").css("color", "red");
$("#d1").preAll("P").nextAll("P").css("color", "red");//错误形式,不能连缀
$("#d1").siblings("p").css("color", "red");//同级上下所以元素
$("#d1").preUntil("p").css("color", "red"); //同级上非指定元素选定,遇到则停止
$("#d1").nextUntil("p").css("color", "red");//同级下非指定元素选定,遇到则停止
jQuery_2_常规选择器-高级选择器的更多相关文章
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- 前端 CSS的选择器 高级选择器
高级选择器分为: 后代选择器 儿子选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.父元素的后代(包括儿子,孙子,重孙子) 后代选择器 在CSS中使用非常频繁 因为HTML元素可以嵌 ...
- jQuery_2_常规选择器-高级选择器2
属性选择器 <a title="num1">num1</a> <a title="num-ad">num2</a> ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- day40 css高级选择器
一.高级选择器 高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{ col ...
- CSS选择器详解(二)通用选择器和高级选择器
目录 通用选择器 高级选择器 子选择器 相邻兄弟选择器 属性选择器 通用选择器 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示. 语法: * { property1: value ...
- jquery学习(3)--高级选择器
自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器 ul li ...
- from提交数据,高级选择器,伪类选择器,前端样式等
1. form提交数据 get: 不安全的提交数据,高效 post: 安全的提交数据,低效 前台都可以给后台提交数据,后台一定会给前台一个反馈结果 2. 高级选择器 <!DOCTYPE html ...
- JQuery_高级选择器
在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...
随机推荐
- Python:列表也能拆包?
前几天,微信学习群里有个小伙伴在看书时遇到了这样一个问题,在群里提问,看下图: 这是常用的 matplotlib 库,只是一般我们调用 plot 方法绘图时,不会去关心它的返回值.然而 plt1, = ...
- foreach 加 &
- sass使用参考文档
内容提要 变量 嵌套 占位符选择器 % @mixin 运算 @if @for @each @extend @import 正文 1.变量 //定义变量:声明变量以$开 $baseColor:#ff90 ...
- Highest Price in Supply Chain (25)(DFS)(PAT甲级)
#include<bits/stdc++.h>using namespace std;int fa;int degree[100007];vector<int>v[100007 ...
- 洛谷P1282 多米诺骨牌
P1282 多米诺骨牌 题目描述 多米诺骨牌有上下2个方块组成,每个方块中有1~6个点.现有排成行的 上方块中点数之和记为S1,下方块中点数之和记为S2,它们的差为|S1-S2|.例如在图8-1中,S ...
- 不建议使用Restsharp
Restsharp确实是个优秀的插件,它最大的特点是内置了JsonConverter, 在一定程度上简化了HttpWebRequest的使用,在nuget上面有19.3M的下载量,是个很好的证明. 但 ...
- MQ 重复消费如何解决?
1. 使用幂等操作 乐观锁:每个数据有一个版本号,和当前版本号相同的时候进行更新 去重表(缓存): 唯一性索引,如果已经存在值了就不行更新 2. 算法 两个链表是否相交? 3.redis 集合相交的 ...
- springboot和Druid整合配置数据源
@Configuration public class DruidConfiguration { @ConfigurationProperties(prefix = "spring.data ...
- java动态线程池LinkedBlockingQueue和SynchronousQueue比较
import java.util.concurrent.Callable; public class MyCallable implements Callable<String> { pr ...
- 配置IIS Web服务器
配置IIS Web服务器 1.1 控制面板中找到“程序”并打开 1.2 程序界面找到“启用或关闭Windows功能”并打开 1.3 上面两步也可以简化为一步:按[Win + R]快捷键打开运行对话框, ...