Jquery选择器

原创已于 2022-01-22 15:55:04 修改 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css3 #css

于 2022-01-22 13:22:10 首次发布

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JQuery选择器的不同类型及其用法，包括元素选择器、ID选择器、类选择器、属性选择器、元素关系选择器及CSS选择器等，并通过实例展示了如何在网页上精确地定位和操作DOM元素。

文章目录

1. Jquery选择器
2. Jquery选择器常用类型
3. Jquery选择器的组合使用

1. Jquery选择器

jQuery 选择器允许您对 HTML 元素组或单个HTML元素进行操作。

2. Jquery选择器常用类型

2.1 元素选择器

基于 HTML元素名选取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
    <p>p1</p>
    <a>a1</a>
    <p>p2</p>
    <a>a2</a>
    <p>p3</p>
    <a>a3</a>
    <p>p4</p>
    <a>a4</a>
</div>
<div>
    <button>点击</button>
</div>
</body>
<script>
    $("button").click(function () {
    	//点击按钮 所有的<p>元素隐藏了
        $("p").hide();
    });
</script>
</html>

在这里插入图片描述

2.2 #id 选择器

id选择器相当于唯一标识符，通过id可以在html中找到唯一的一个html元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<div>
    <button>点击</button>
</div>
</body>
<script>
    $("button").click(function () {
        $("#p1").hide();
    });
</script>
</html>

在这里插入图片描述

2.3 .class 选择器

类型选择器，在元素中定义 class的值，然后通过元素选择器选择操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
    <p id="p1" class="txt">p1</p>
    <p id="p2" >p2</p>
    <div class="txt">div</div>
</div>
<div>
    <button>点击</button>
</div>
</body>
<script>
    $("button").click(function () {
        $(".txt").hide();
    });
</script>
</html>

在这里插入图片描述

如果想在元素选择器的基础上只隐藏

元素呢？
$(".txt").hide(); 可以修改为 $(“p.txt”).hide();
这句话的意思是：选择页面所有

元素中 class属性值为 "txt"的元素隐藏

2.4 属性选择器

通过某些元素的特有属性或者通用属性进行选择元素
格式 $(“元素名[属性名=属性值]”)
如：$(“p[name=‘p_name’]”) 选择 name属性值等于 pname的 p元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
    <p id="p1" class="txt">p1</p>
    <p id="p2" >p2</p>
    <div class="txt">div</div>
    <input name="txtInput"></input>
</div>
<div>
    <button>点击</button>
</div>
</body>
<script>
    $("button").click(function () {
        alert($("[name='txtInput']").val());
    });
</script>
</html>

在这里插入图片描述

2.5 元素关系选择器

父子关系 $(“父元素子元素”)

<div id="div01">
        <p>父div的第一个p元素</p>
        <p>父元素的第2个p元素</p>
        <div>
            <p>子div的p元素</p>
        </div>
        <p>父div的最后一个p元素</p>
    </div>

2.6 CSS选择器

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","red");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

在这里插入图片描述

3. Jquery选择器的组合使用

$("#div01")
$("div")
$(".divClass")
$("a[href='xxxxx']")

总结：

选择器以元素开头表示是该元素类型下的，最后得到的肯定是该元素类型的一个或多个元素组
2.选择器中不出现元素表示最终得到的跟元素类型无关的一个或多个元素组
3.选择器的组合思路：
（1）先选定一个元素作为起点，然后进行各种组合筛选。
（2）选中一组元素，再从中筛选。
（3）把上面两种结合起来，多实践。