selector_attribute(选择器_属性)

最新推荐文章于 2023-07-03 09:56:00 发布

Begin_W_T_E_I_M

最新推荐文章于 2023-07-03 09:56:00 发布

阅读量711

点赞数

分类专栏： jQuery技术文章标签： selector attribute jQuery选择器 jQuery属性

本文链接：https://blog.csdn.net/Begin_W_T_E_I_M/article/details/97484155

版权

jQuery技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.jQuery 子元素选择器-内容
(1)[attribute]
概述：匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。

<script>
$(function () {
    let size = $('[href]').size();
    console.log(size);

})
</script>

作用：查找有href属性的元素，在控制台打印总共大小。

(2)[attribute=value]
概述：匹配给定的属性是某个特定值的元素

<script>
$(function () {
   
    console.log($("[id='taobao']").get(0));

})
</script>

作用：查找id等于taobao的元素，在控制台打印第一个找到的元素。

(3)[attribute!=value]
概述：匹配所有不含有指定的属性，或者属性不等于特定值的元素。

此选择器等价于:not([attr=value])
要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])

<script>
       $("a[id!='taobao']").each(function () {
        console.log(this);
    });
    </script>

作用：查找所有属性id不等于taobao的元素，控制台打印。

(4)[attribute^=value]
概述：匹配给定的属性是以某些值开始的元素

<script>
        $(function () {
        	 console.log($("a[href^='https']").get(0));
        });
    </script>

作用：查找所有属性id以https开头的元素，控制台打印找到的第一个。

(5)[attribute$=value]
概述：匹配给定的属性是以某些值结尾的元素

<script>
        $(function () {
        	console.log($("img[src$='jpg']").get(0));
        });
    </script>

作用：查找所有img的src属性以.jpg结尾的元素，控制台打印找到的第一个。

(6)[attribute*=value]
概述：匹配给定的属性是以包含某些值的元素

<script>
        $(function () {
          	console.log($("a[href*='sina']").get(0));
        });
    </script>

作用：查找所有a的href属性含sina的元素，控制台打印找到的第一个。

（5）源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 选择器：属性</title>
    <script src="../jquery-2.2.4.js"></script>
<style>
    div >p > img {
        border: 10px solid blueviolet;
    }
</style>
<script>
$(function () {
    let size = $('[href]').size();
    console.log(size);

    console.log($("[id='taobao']").get(0));


    $("a[id!='taobao']").each(function () {
        console.log(this);
    });

    console.log($("a[href^='https']").get(0));

    console.log($("img[src$='jpg']").get(0));

    console.log($("a[href*='sina']").get(0));

    console.log($("div [src$='.jpg'][height][width]").get(0));

})
</script>
</head>
<body>
<h3><a id="reture" href="../index.html">返回</a></h3>

<h1>jQuery 选择器：属性</h1>
<pre>
    属性
    [attribute]
    [attribute=value]
    [attribute!=value]
    [attribute^=value]
    [attribute$=value]
    [attribute*=value]
    [attribute~=value]
    [attribute|=value]
    [attrSel1][attrSel2][attrSelN]
</pre>

<div class="my">

    <h4><a id="taobao" href="https://www.taobao.com">淘宝</a></h4>
    <h4><a id="sina" href="http://www.sina.com">新浪</a></h4>

<br>
    <p><img src="../images/adv_2.jpg" height="190" width="360"/></p>

</div>


</body>
</html>

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

Begin_W_T_E_I_M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
selector_attribute(选择器_属性)

1.jQuery 子元素选择器-内容(1)[attribute]概述：匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。<script>$(function () { let size = $('[href]').size(); console.log(size);})</...
复制链接

扫一扫