高级选择器

层次选择器

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_常规选择器-高级选择器的更多相关文章

  1. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  2. 前端 CSS的选择器 高级选择器

    高级选择器分为: 后代选择器 儿子选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.父元素的后代(包括儿子,孙子,重孙子) 后代选择器 在CSS中使用非常频繁 因为HTML元素可以嵌 ...

  3. jQuery_2_常规选择器-高级选择器2

    属性选择器 <a title="num1">num1</a> <a title="num-ad">num2</a> ...

  4. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  5. day40 css高级选择器

    一.高级选择器 高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{ col ...

  6. CSS选择器详解(二)通用选择器和高级选择器

    目录 通用选择器 高级选择器 子选择器 相邻兄弟选择器 属性选择器 通用选择器 通用选择器可以选择页面上的所有元素,并对它们应用样式,用 * 来表示. 语法: * { property1: value ...

  7. jquery学习(3)--高级选择器

    自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器     ul li ...

  8. from提交数据,高级选择器,伪类选择器,前端样式等

    1. form提交数据 get: 不安全的提交数据,高效 post: 安全的提交数据,低效 前台都可以给后台提交数据,后台一定会给前台一个反馈结果 2. 高级选择器 <!DOCTYPE html ...

  9. JQuery_高级选择器

    在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...

随机推荐

  1. 介绍一款网站前台图片滚动插件之"switchable"

    一.简单介绍:jQuery.Switchable是一款整合了Tabs.Slide.Scrollable等常见UI组件的jQuery插件,在这里,简答说说他的Slide.像Tabs,在Jquery-UI ...

  2. jquery ajax + struts2用例

    ajax var url = '/itsm/contract/contract!deleteShopItemById.action'; var shopItemId= selectRows[x].da ...

  3. 开源文字识别软件tesseract

    1.下载4.0软件,下一步下一步到成功: 2.安装之后配置环境变量,Path中添加安装路径(默认:C:\Program Files (x86)\Tesseract-OCR) 3.新增语言库的环境变量, ...

  4. Golang : cobra 包解析

    笔者在<Golang : cobra 包简介>一文中简要的介绍了 cobra 包及其基本的用法,本文我们从代码的角度来了解下 cobra 的核心逻辑. Command 结构体 Comman ...

  5. springBoot2.0 配置@ControllerAdvice 捕获异常统一处理

    一.前言 基于上一篇 springBoot2.0 配置shiro实现权限管理 这一篇配置 异常统一处理 二.新建文件夹:common,param 三.返回结果集对象 1.ResultData.java ...

  6. luoguP4921 情侣?给我烧了!

    luogu 考虑对于\(n\)对情侣,恰好\(k\)对是和谐的方案数是 \[ ans[n][k]=\binom{n}{k}A^k_n2^kg(n-k) \] \(g(n)\)为全部\(n\)对情侣不和 ...

  7. 理解js继承的6种方式

    想要继承,就必须要提供个父类(继承谁,提供继承的属性) 一.原型链继承 重点:让新实例的原型等于父类的实例. 特点:1.实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性.(新 ...

  8. Keepalived + Nginx + Tomcat 高可用负载均衡架构

    环境: 1.centos7.3 2.虚拟ip:192.168.217.200 3.192.168.217.11.192.168.217.12上分别部署Nginx Keepalived Tomcat并进 ...

  9. htmlunit最具有参考意义项目

    ### HtmlUnit What? - 项目1 https://gitee.com/dgwcode/spiderTmallTradeInfo - 项目2 https://gitee.com/dgwc ...

  10. DSL与GPL

    一.DSL 与 GPL DSL(Domain-Specified Language 领域特定语言),而与 DSL 相对的就是 GPL,最常见的 DSL 包括 Regex 以及 HTML & C ...