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 ...
随机推荐
- 介绍一款网站前台图片滚动插件之"switchable"
一.简单介绍:jQuery.Switchable是一款整合了Tabs.Slide.Scrollable等常见UI组件的jQuery插件,在这里,简答说说他的Slide.像Tabs,在Jquery-UI ...
- jquery ajax + struts2用例
ajax var url = '/itsm/contract/contract!deleteShopItemById.action'; var shopItemId= selectRows[x].da ...
- 开源文字识别软件tesseract
1.下载4.0软件,下一步下一步到成功: 2.安装之后配置环境变量,Path中添加安装路径(默认:C:\Program Files (x86)\Tesseract-OCR) 3.新增语言库的环境变量, ...
- Golang : cobra 包解析
笔者在<Golang : cobra 包简介>一文中简要的介绍了 cobra 包及其基本的用法,本文我们从代码的角度来了解下 cobra 的核心逻辑. Command 结构体 Comman ...
- springBoot2.0 配置@ControllerAdvice 捕获异常统一处理
一.前言 基于上一篇 springBoot2.0 配置shiro实现权限管理 这一篇配置 异常统一处理 二.新建文件夹:common,param 三.返回结果集对象 1.ResultData.java ...
- luoguP4921 情侣?给我烧了!
luogu 考虑对于\(n\)对情侣,恰好\(k\)对是和谐的方案数是 \[ ans[n][k]=\binom{n}{k}A^k_n2^kg(n-k) \] \(g(n)\)为全部\(n\)对情侣不和 ...
- 理解js继承的6种方式
想要继承,就必须要提供个父类(继承谁,提供继承的属性) 一.原型链继承 重点:让新实例的原型等于父类的实例. 特点:1.实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性.(新 ...
- Keepalived + Nginx + Tomcat 高可用负载均衡架构
环境: 1.centos7.3 2.虚拟ip:192.168.217.200 3.192.168.217.11.192.168.217.12上分别部署Nginx Keepalived Tomcat并进 ...
- htmlunit最具有参考意义项目
### HtmlUnit What? - 项目1 https://gitee.com/dgwcode/spiderTmallTradeInfo - 项目2 https://gitee.com/dgwc ...
- DSL与GPL
一.DSL 与 GPL DSL(Domain-Specified Language 领域特定语言),而与 DSL 相对的就是 GPL,最常见的 DSL 包括 Regex 以及 HTML & C ...