jQuery属性选择器

最新推荐文章于 2023-03-21 17:02:08 发布
原创 最新推荐文章于 2023-03-21 17:02:08 发布 · 455 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jQuery属性选择器

jQuery属性选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>属性选择器</title>
    <!--   引入jQuery -->
    <link href="styles/selectstyle.css" rel="stylesheet" />
    <script src="scripts/jquery-1.3.1.js"></script>
    <script src="scripts/assist.js"></script>
    <script type="text/javascript">
        $(function () {

            //选取含有 属性title 的div元素颜色为：#bbffaa
            $("#btn1").click(function () {
                $("div[title]").css("background-color", "#b6ff00");
            });

            //选取 属性title值等于 test 的div元素.
            $("#btn2").click(function () {
                $("div[title='test']").css("background-color", "#b6ff00");
            });

            //选取 属性title值不等于 test 的div元素.
            $("#btn3").click(function () {
                $("div[title !='test']").css("background-color", "#b6ff00");
            });

            //选取 属性title值 以 te 开始 的div元素.
            $("#btn4").click(function () {
                $("div[title ^='te']").css("background-color", "#b6ff00");
            });

            //选取 属性title值 以 est 结束 的div元素.
            $("#btn5").click(function () {
                $("div[title $='est']").css("background-color", "#b6ff00");
            });

            //选取 属性title值 含有 es  的div元素.
            $("#btn6").click(function () {
                $("div[title *='es']").css("background-color", "#b6ff00");
            });

            //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
            $("#btn7").click(function () {
                $("div[title][title *='es']").css("background-color", "#b6ff00");
            });

        });
    </script>
</head>
<body>
    <h3>属性选择器.</h3>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

    <input type="button" value="选取含有 属性title 的div元素颜色为：#bbffaa" id="btn1" />
    <input type="button" value="选取 属性title值等于 test 的div元素.." id="btn2" />
    <input type="button" value="选取 属性title值不等于 test 的div元素." id="btn3" />
    <input type="button" value="选取 属性title值 以 te 开始 的div元素.." id="btn4" />
    <input type="button" value="选取 属性title值 以 est 结束 的div元素." id="btn5" />
    <input type="button" value="选取 属性title值 含有 es  的div元素." id="btn6" />
    <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素." id="btn7" />


    <br /><br />

    <!-- 测试的元素 -->
    <!-- 测试的元素 -->
    <div class="one" id="one">
        id为one,class为one的div（女警）
        <div class="mini">class为mini的div（曙光）</div>
    </div>

    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div（金克斯）
        <div class="mini" title="other">class为mini,title为other的div（宝石）</div>
        <div class="mini" title="test">class为mini,title为test的div（璐璐）</div>
    </div>

    <div class="one">
        class为one的div（EZ）
        <div class="mini">class为mini的div（琴女）</div>
        <div class="mini">class为mini的div（众星之子）</div>
        <div class="mini">class为mini的div（唤潮鲛姬）</div>
        <div class="mini">class为mini的div（牛头）</div>
    </div>

    <div class="one">
        class为one的div（奥巴马）
        <div class="mini">class为mini的div（凤女）</div>
        <div class="mini">class为mini的div（机器人）</div>
        <div class="mini">class为mini的div（狗熊）</div>
        <div class="mini" title="tesst">class为mini,title为tesst的div（雪人）</div>
    </div>

    <div style="display:none;" class="none">
        style的display为"none"的div（VN）
    </div>

    <div class="hide">
        class为"hide"的div（螃蟹）
    </div>

    <div>
        包含input的type为"hidden"的div（飞机）
        <input type="hidden" size="8" />
    </div>

    <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

jQuery中的属性选择器 - 动态选择元素
TechChamp的博客
09-26 308
继续我们之前的按钮示例，现在我们想选择所有具有以".png"结尾的自定义属性的按钮，并将它们的边框颜色更改为绿色。在方括号内，您可以指定要匹配的属性名称。除了选择具有指定属性名称的元素，您还可以使用属性选择器来选择具有特定属性值的元素。在上述示例中，我们使用属性选择器选择所有具有包含"button"的自定义属性的元素，并使用。在上述示例中，我们使用属性选择器选择所有具有以".png"结尾的自定义属性的元素，并使用。在上述示例中，我们使用属性选择器选择所有具有以"btn"开头的自定义属性的元素，并使用。
jQuery属性选择器用法实例分析
12-13
本文将深入解析jQuery属性选择器的用法，并通过实例进行详细说明。 首先，属性选择器的基本语法是`$("[attribute]")`，用于选取具有指定属性的元素。例如，要选取所有`<input>`类型的文本框，可以使用`$("input...
JQuery 属性选择器 [id^=btn]
houyanhua1的专栏
12-18 1702
$('input');  //所有input元素 $('input[id]'); //input元素中，设置了id属性的所有元素。 $('input[id=btn1]'); //input元素中，id=btn1的元素。 $('input[id*=btn]'); //input元素中，id包含btn的所有元素。 $('input[id^=btn]'); //input元素中，id以btn开头
JQuery中属性选择器
you4580的专栏
03-21 2032
语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器。语法：$("A[属性名='值'][]...")包含多个属性条件的选择器。语法： $("A[属性名]")包含指定属性的选择器。
jQuery之属性选择器
python全栈
01-24 4234
属性选择器 [attribute]匹配包含给定属性的元素 $("a").addClass("myClass"); $("a[href]").addClass("myClass"); [attribute1][attribute2]复合属性选择器，需要同时满足多个属性 $("a[href][title]").addClass("myClass"); [attribute=value]匹配给定的属性是某个特定值的元素 $("a[href='film-2.html']").addClass("myClas
jquery属性选择器
wangin1013的专栏
04-12 176
[name|='value'] 该类型选择器选择匹配value或value-的元素，例子： &lt;a href="http://www.baidu.com" title="en-x"&gt;百度&lt;/a&gt; &lt;a href="http://www.google.com" title="enp"&gt;谷歌&lt;/a&gt; &lt;
jQuery属性选择器用法示例
10-21
综上所述，jQuery属性选择器是实现基于属性选择元素的高效方法，它使我们能够进行精确的DOM操作，并且可以灵活地结合各种选择器实现复杂的元素选择需求。通过本文的实例，相信读者已经对jQuery属性选择器有了较深入...
jQuery 属性选择器element[herf*='value']使用示例
10-26
首先，`element[attribute*='value']`是jQuery中的一种属性选择器，它用于选取具有指定属性，并且该属性的值包含给定子字符串的所有元素。例如，如果你有多个链接`<a>`，并且其中某些链接的`href`属性值包含了字符串...
jquery 属性选择器（匹配具有指定属性的元素）
10-21
jQuery 属性选择器是 jQuery 选择器的一种，用于根据元素的特定属性来选取 HTML 元素。这在处理页面上的动态内容或者需要针对特定属性执行操作时非常有用。以下是对属性选择器的详细说明： 1. **基础用法**： - `...
Jquery属性选择器
菲律宾铁猴子的博客
07-22 149
1.通过某个元素的id取到元素中的value值： //例： <#input id="id" name="name" value="zzh" /> console.log($("#id").val()) //控制台打印"zzh" 2.通过某个元素及其值取到整个元素 //例： $('[name="zzh"]').each(function(index,item){ console.log(item) }) //即 遍历页面中所有name="zzh"的元素，打印在控制台中 3.弹窗获取父
jQuery——属性选择器
Yeoman92的博客
12-29 4803
属性选择器在HTML文档中，元素的开始标记中通常包含有多个属性(attribute)<input id="txtUsername" type="text" value="qiyisoft" name="email" style="display:block" />在jQuery中，除了直接使用id和class属性作为选择器之外，还可以根据各种属性（如title等）对由选择器查询到的元素进行过滤。属性
jQuery中的属性选择器
lkjhchen的博客
06-25 697
本篇文章只是《jQuery in Action》中属性选择器章节的翻译，翻译的主要原因是本人最近买了一本《jQuery实战(第三版)》，打算系统的过一遍知识点。结果那个翻译的实在不敢恭维（我怀疑好多地方是软件直接翻的），挺多地方还翻译错了。我说你出一本书至少也负点责任，别人可是花钱买的呀！喂！到头来还得自己去看原版。下面附上自己的翻译，不敢说会有多好，但保证句子通顺，知识点正确（主要是这章卖书的那
jquery选择器之属性选择器
ling811的专栏
11-18 927
属性选择器中的类别： 1、[attribute]      匹配包含给定属性的元素      例：查找所有含id属性的div元素；$("div[id]"); 2、[attribute=value]     匹配给定的属性是某个特定值的元素                 例：查找所有name属性是newsletter的input元素：$("input[name="newsletter"]").
jQuery-属性选择器
u011121046的专栏
06-01 471
$("li:first"),得到一组相同标签中的第一个元素 $("li:last"),得到一组相同标签中的最后一个元素 $("list:eq(index)"),灵活的选取一组中任意一个元素 $("list:contains('土豪')")，按照文本内容来查找一个或多个元素，它的功能是选择包含指定字符串的全部元素 $("list:has(‘selector’)"),按
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值