层级选择器

层级选择器
2021-01-27 03:21:05
除了基本的选择器外，jQuery的层级选择器更加灵活，也更强大。

因为DOM的结构就是层级结构，所以我们经常要根据层级关系进行选择。

层级选择器(Descendant Selector)

如果两个DOM元素具有层级关系，就可以用$('ancestor descendant')来选择，层级之间用空格隔开。例如：

JavaScript
Python
Lua

要选出JavaScript，可以用层级选择器：

$('ul.lang li.lang-javascript'); // [
JavaScript]
$('div.testing li.lang-javascript'); // [
JavaScript]
因为

和
都是
的祖先节点，所以上面两种方式都可以选出相应的
节点。
要选择所有的
节点，用：
$('ul.lang li');
这种层级选择器相比单个的选择器好处在于，它缩小了选择范围，因为首先要定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素。
例如：
$('form[name=upload] input');
就把选择范围限定在name属性为upload的表单里。如果页面有很多表单，其他表单的不会被选择。
多层选择也是允许的：
$('form.test p input'); // 在form表单选择被
包含的
子选择器(Child Selector)
子选择器$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，就是节点必须是节点的直属子节点。还是以上面的例子：
$('ul.lang>li.lang-javascript'); // 可以选出[
JavaScript]

$('div.testing>li.lang-javascript'); // [], 无法选出，因为

和不构成父子关系
过滤器(Filter)

过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。观察过滤器的效果：

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript

$('ul.lang li:last-child'); // 仅选出Lua

$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始

$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素

$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

表单相关

针对表单元素，jQuery还有一组特殊的选择器：

:input：可以选择，，和；

:file：可以选择，和input[type=file]一样；

:checkbox：可以选择复选框，和input[type=checkbox]一样；

:radio：可以选择单选框，和input[type=radio]一样；

:focus：可以选择当前输入焦点的元素，例如把光标放到一个上，用$('input:focus')就可以选出；

:checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；

:enabled：可以选择可以正常输入的、

等，也就是没有灰掉的输入；

:disabled：和:enabled正好相反，选择那些不能输入的。

此外，jQuery还有很多有用的选择器，例如，选出可见的或隐藏的元素：

$('div:visible'); // 所有可见的div

$('div:hidden'); // 所有隐藏的div

练习

针对如下HTML结构：

JavaScript
Python
Lua

Swift
Java
C

选出相应的内容并观察效果：

'use strict';

var selected = null;

----

// 分别选择所有语言，所有动态语言，所有静态语言，JavaScript，Lua，C等:

selected = ???

----

// 高亮结果:

if (!(selected instanceof jQuery)) {

return console.log('不是有效的jQuery对象!');

}

$('#test-jquery').find('*').css('background-color', '');

selected.css('background-color', '#ffd351');

JavaScript

Python

Lua

Swift

Java

C
更多相关内容
jquery层级选择器的实现(匹配后代元素div)
2020-11-23 02:29:28

如下所示： <!DOCTYPE ...<... <head>...层级 </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type="text/javascrip

收起
jQuery层级选择器实例代码
2020-10-20 12:19:43

主要为大家详细介绍了jQuery层级选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
jQuery层级选择器用法分析
2020-12-08 20:49:13

1. 子元素选择器 用于查找在给定的父元素下查找这个父元素下的所有子元素，语法格式：代码如下:$(“parent->chilid”); 2. 后代元素选择器 用于在给定的祖先元素下匹配所有的后代元素，语法格式: 代码如下:$(...

收起
jQuery层级选择器_动力节点节点Java学院整理
2020-12-29 16:57:24

层级选择器（Descendant Selector）如果两个DOM元素具有层级关系，就可以用$(‘ancestor descendant’)来选择，层级之间用空格隔开。例如：  <li class=lang-javascript>JavaScript ...

收起
jquery层级选择器(匹配父元素下的子元素实现代码)
2020-10-21 14:29:28

下面小编就为大家带来一篇jquery层级选择器(匹配父元素下的子元素实现代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收起

CSS04：层级选择器

2022-02-10 16:48:15

后代选择器 在某个元素的后面；比如祖爷爷的“后代选择器”有爷爷、爸爸、你举例：body 后的所有 p 元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

后代选择器（空格）

在某个元素的后面；比如祖爷爷的“后代选择器”有爷爷、爸爸、你

举例：body 后的所有 p 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 后代选择器 */
        body p {
            background: chartreuse;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

子选择器（>）

某个元素的下一级元素；比如爷爷的“子选择器”是爸爸

举例：body 的下一级 p 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 子选择器 */
        body > p {
            background: #ff008a;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

相邻兄弟选择器（+）

同级向下相邻的一个元素；比如你有一个哥哥和一个弟弟，那么你的“相邻兄弟选择器”是你的弟弟

举例：p1 的相邻兄弟 p 元素，只有 p2 的样式会发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 相邻兄弟选择器，只有p2的样式会发生改变 */
        .active + p {
            background: gold;
        }
    </style>
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

通用兄弟选择器（~）

当前元素的向下的所有兄弟元素；你的“通用兄弟选择器”是你的弟弟妹妹们

举例：p2 的通用兄弟 p 元素，是 p2 后面的所有 p 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 通用选择器 */
        .active ~ p {
            background: aqua;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

收起

展开全文

linq html

层级选择器（基础）+基本选择器
千次阅读 2020-10-17 17:33:28
ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素语法：$("ancestor descendant") ancestor是祖辈或者父辈的标签或者属性，descendant是后代的标签或者属性
文章目录

$("ancestor descendant")后代选择器
$("父>子")选择器
$("兄弟+兄弟")选择器
$("兄~兄")选择器

基本选择器
ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在
prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

$(“ancestor descendant”)后代选择器

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
语法：$("ancestor descendant")

ancestor是祖辈或者父辈的标签或者属性，descendant是后代的标签或者属性

$(“父>子”)选择器

语法：$("father>son")
选择指定父元素的子元素
跟后代选择器类似，不过这个只能用于父子之间，不能跨越父子关系

当然，这里，父子不仅可以为标签也可为属性，如#id，.class…

$(“兄弟+兄弟”)选择器

选择指定元素指定的且紧挨着的兄弟元素
语法：$("兄+兄")

不能选到自己的后代，同时，指定的限制条件可以为属性

$(“兄~兄”)选择器

选择元素的所有指定兄弟元素
语法：$("兄~兄")

可以用兄弟元素的属性，不一定非为标签，而且这个不用紧挨着

基本选择器

#ID选择器：($("#id"))根据 id 查找标签对象

.class选择器：($(".class"))根据 class 查找标签对象

element选择器：($("element"))根据标签名查找标签对象 (element表示元素也就是标签)

* 选择器：($("*"))表示任意的，所有的元素

selector1，selector2组合选择器：将每种选择器匹配到的元素合并后一起返回，即返回一个包含所有dom对象的数组。(("element,#id,.class"))合并选择器 1(element选择器)和选择器 2(#id选择器)和(.class选择器) 的结果并返回

还可$(选择器1选择器2...)来选择可以匹配这里面所有选择器的元素，选择器间紧挨着，当然如果其中选择器中有element则·其必须写在开头不然会出错，这一疙瘩的整个选择器也可放在组合选择器里面当做一个选择器来用
收起
展开全文
jquery

css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）

千次阅读 2021-04-17 15:16:07

层级选择器(后代选择器) id选择器组选择器伪类选择器 3. 标签选择器根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。示例代码 <style type="text/css"> p{ ...

css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签加样式。

css 选择器的种类

标签选择器
类选择器
层级选择器(后代选择器)
id选择器
组选择器
伪类选择器
通配符选择器

标签选择器

概念：

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

作用：

标签选择器可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签
优点：

是能快速为页面中同类型的标签统一样式
缺点：

不能设计差异化样式。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>

<body>
    <div>hello</div>
    <p>hello</p>
</body>

</html>

类选择器

根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

语法：

类名选择器

.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}

标签

<p class='类名'></p>

优点：
- 可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
注意
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。

多类名注意：

各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        .blue {
            color: blue
        }

        .big {
            font-size: 20px
        }

        .box {
            width: 100px;
            height: 100px;
            background: gold
        }
    </style>
</head>

<body>
    <div class="blue">这是一个div</div>
    <h3 class="blue big box">这是一个标题</h3>
    <p class="blue box">这是一个段落</p>

</body>

</html>

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style type="text/css">
        .blue {
            color: blue;
            font-size: 100px;
        }

        .red {
            color: red;
            font-size: 100px;
        }

        .orange {
            color: orange;
            font-size: 100px;
        }

        .green {
            color: green;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>

</html>