一文讲透jquery基本选择和层次选择器

当前位置：首页 / 技术干货 / 正文

2023-06-07

jquery 前端太原深圳

　　jQuery 是一款流行的 JavaScript 库，它提供了方便易用的 API，使在浏览器中操作 DOM 变得更加简单。jQuery 提供了多种选择器，包括基本选择器和层次选择器，使得选择 DOM 元素变得十分便捷。

　　基本选择器

　　元素选择器

　　元素选择器用于选取指定元素名的元素。

$("p") //选取所有 <p> 元素

　　ID 选择器

　　ID 选择器用于选取指定 ID 属性的元素。

$("#myID") //选取 ID 为 "myID" 的元素

　　类选择器

　　类选择器用于选取指定类名的元素。

$(".myClass") //选取所有类名为 "myClass" 的元素

　　属性选择器

　　属性选择器用于选取带有指定属性的元素。

$("[href]") //选取所有带有 href 属性的元素
$("[href='#']") //选取所有 href 属性值为 "#" 的元素
$("[type='text']") //选取所有 type 属性值为 "text" 的元素

　　层次选择器

　　后代选择器

　　后代选择器匹配属于指定元素的后代元素。

$("div p") //选取所有 <div> 元素的后代 <p> 元素

　　子元素选择器

　　子元素选择器匹配属于指定元素的子元素。

$("div > p") //选取所有 <div> 元素的直接子 <p> 元素

　　相邻元素选择器

　　相邻元素选择器匹配紧随在另一个元素后面的元素。

$("h1 + p") //选取紧随在 <h1> 元素后面的 <p> 元素

　　兄弟选择器

　　兄弟选择器匹配所有与指定元素在同一级别的元素。

$("h1 ~ p") //选取和 <h1> 元素在同一级别的所有 <p> 元素

　　示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // 选中所有 class 为 "test" 的元素
            $(".test").css("background-color", "yellow");
            // 选中所有 input 元素
            $("input").css("background-color", "pink");
            // 选中所有带有 href 属性的 a 元素
            $("a[href]").css("color", "red");
            // 选中 class 为 "test" 的第一个 div 元素
            $("div.test:first").css("font-size", "24px");
            // 选中 class 为 "test" 的最后一个 p 元素
            $("p.test:last").css("font-size", "16px");
            // 选中 class 为 "test" 的后一个 b 元素
            $("b.test").next().css("font-weight", "bold");
        });
    </script>
</head>
<body>
    <h2 class="test">这是标题</h2>
    <div class="test">
        <p>这是段落1</p>
        <p>这是段落2</p>
    </div>
    <b class="test">这是加粗文本</b>
    <span>这是普通文本</span>
    <a href="https://www.google.com">这是链接1</a>
    <a href="#">这是链接2</a>
    <input type="text" value="这是输入框">
</body>
</html>