jQuery选择器

最新推荐文章于 2024-01-14 11:54:30 发布

不是很菜的菜

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量144

点赞数 6

文章标签： jquery

本文链接：https://blog.csdn.net/s001125/article/details/114285852

版权

一、jQuery的用途

jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。
允许对 HTML 元素组或单个元素进行操作。
允许对 DOM 元素组或单个 DOM 节点进行操作。

二、jQuery的优点

1.写法简介

2.具有完善的事件处理机制

三、jQuery元素选择器

jQuery 使用元素选择器来选取 HTML 本身自带的元素，例如p，h1-h6。

$(“p”) 选取 p 元素。

$(“p.item”) 选取所有 class=“item” 的 p 元素。

$(“p#item”) 选取所有 id=“item” 的 p 元素。

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./JQuery/jquery-3.4.1.min.js"></script>
    <script>
        $(function()
            $("h1").css("background","red");
    </script>
    <title>Document</title>
</head>
<body>
    <h1>1</h1>
    <h2 id="demo">2</h2>
    <h3 id="demo1">3</h3>
    <h4 class="item">4</h4>
    <h5 class="item">5</h5>
    <ul>
        <li title="#">1</li>
        <li title="#">2</li>
        <li title="s">3</li>
        <li title="s">4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

结果为
在这里插入图片描述

四、属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[title]") 选取所有带有 title 属性的元素。

$("[title=’#’]") 选取所有带有 title 值等于 “#” 的元素。

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./JQuery/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            //属性选择器
            $("[title]").css("background","orange");
            //选取属性为制定的
            $("[title='s']").css("background","red");
    </script>
    <title>Document</title>
</head>
<body>
    <h1>1</h1>
    <h2 id="demo">2</h2>
    <h3 id="demo1">3</h3>
    <h4 class="item">4</h4>
    <h5 class="item">5</h5>

    <ul>
        <li title="#">1</li>
        <li title="#">2</li>
        <li title="s">3</li>
        <li title="s">4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

在这里插入图片描述

五、 CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

具体语法为：$(“p”).css(“background-color”,“red”);

这个例子在上面的案例中已经实现

六、id选择器和类选择器

选取所有 class="item"和id = "demo"的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./JQuery/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $(".item").css("background","green");
            $("#demo").css("background","pink");
    </script>
    <title>Document</title>
</head>
<body>
    <h1>1</h1>
    <h2 id="demo">2</h2>
    <h3 id="demo1">3</h3>
    <h4 class="item">4</h4>
    <h5 class="item">5</h5>

    <ul>
        <li title="#">1</li>
        <li title="#">2</li>
        <li title="s">3</li>
        <li title="s">4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

在这里插入图片描述

七、并集和交集选择器

同时选取h1和h2

选取class="item"的h5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./JQuery/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("h1,h2").css("background","pink");
            $("h5.item").css("background","red");
    </script>
    <title>Document</title>
</head>
<body>
    <h1>1</h1>
    <h2 id="demo">2</h2>
    <h3 id="demo1">3</h3>
    <h4 class="item">4</h4>
    <h5>5</h5>
    <h5 class="item">5</h5>

    <ul>
        <li title="#">1</li>
        <li title="#">2</li>
        <li title="s">3</li>
        <li title="s">4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

在这里插入图片描述

不是很菜的菜

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
jQuery选择器

一、jQuery的用途jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。允许对 HTML 元素组或单个元素进行操作。允许对 DOM 元素组或单个 DOM 节点进行操作。二、jQuery的优点1.写法简介2.具有完善的事件处理机制三、jQuery元素选择器jQuery 使用元素选择器来选取 HTML 本身自带的元素，例如p，h1-h6。$(“p”) 选取 p 元素。$(“p.item”) 选取所有 class=“item” 的 p 元素。$(
复制链接

扫一扫