jQuery选择器

最新推荐文章于 2022-12-04 20:55:47 发布

李胖圆

最新推荐文章于 2022-12-04 20:55:47 发布

阅读量182

点赞数 1

分类专栏：记录全面实例文章标签： jquery html css 前端

本文链接：https://blog.csdn.net/weixin_45686583/article/details/114294406

版权

实例同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

全面

40 篇文章 0 订阅

订阅专栏

记录

32 篇文章 0 订阅

订阅专栏

一、jQuery的用途

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

二、jQuery元素选择器

jQuery 使用元素选择器来选取 HTML 本身自带的元素，例如h1-h6。
$(“h”) 选取 h 元素。
$(“h.item”) 选取所有 class=“item” 的 h 元素。
$(“h#item”) 选取所有 id=“item” 的 h 元素。

实例：

<!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="js/jquery-1.8.3.js"></script>
    <style>
        li{
            list-style: none;
        }
    </style>
    <script>
        $(function(){
            $("h1").css("background","blue")
        });  
    </script>
    <title>Document</title>
</head>
<body>
    <h1>草莓</h1>
    <h2 id="demo">橘子</h2>
    <h3 id="demo1">橙子</h3>
    <h4 class="item">芒果</h4>
    <h5 class="item">冰冰</h5>
    <ul>
        <li title="#">草莓</li>
        <li title="#">橘子</li>
        <li title="s">橙子</li>
        <li title="s">冰冰</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="js/jquery-1.8.3.js"></script>
    <style>
        li{
            list-style: none;
        }
    </style>
    <script>
        $(function(){
            //属性选择器
            $("[title]").css("background","blue");
            //选取属性为制定的
            $("[title='s']").css("background","pink")
        });
    </script>
    <title>Document</title>
</head>
<body>
    <ul>
        <li title="#">橘子</li>
        <li title="#">橙子</li>
        <li title="s">冰冰</li>
        <li title="s">椰果</li>
        <li>牛奶</li>
        <li>奶茶</li>
    </ul>
</body>
</html>

结果是：
在这里插入图片描述

四、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="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            $(".item").css("background","blue")
            $("#demo").css("background","pink")
        });
    </script>
    <title>Document</title>
</head>
<body>
    <h1>冰冰</h1>
    <h2 id="demo">椰果</h2>
    <h3 id="demo1">奶茶</h3>
    <h4 class="item">橘子</h4>
    <h5 class="item">橙子</h5>
</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="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            $("h1,h2").css("background","blue")
            $("h5.item").css("background","pink")
        });
    </script>
    <title>Document</title>
</head>
<body>
    <h1>冰冰</h1>
    <h2 id="demo">椰果</h2>
    <h3 id="demo1">奶茶</h3>
    <h4 class="item">橘子</h4>
    <h5>橙子</h5>
    <h5 class="item">牛奶</h5>
</body>
</html>

结果是：
在这里插入图片描述
不忘初心，砥砺前行

李胖圆

关注

1
点赞
踩
0

收藏

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

一、jQuery的用途jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。允许对 HTML 元素组或单个元素进行操作。允许对 DOM 元素组或单个 DOM 节点进行操作。二、jQuery元素选择器jQuery 使用元素选择器来选取 HTML 本身自带的元素，例如h1-h6。$(“h”) 选取 h 元素。$(“h.item”) 选取所有 class=“item” 的 h 元素。$(“h#item”) 选取所有 id=“item” 的 h 元素。
复制链接

扫一扫