zoukankan      html  css  js  c++  java
  • jQuery属性过滤选择器例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <script>
    $(function () {
    //为包含id属性的p元素设置颜色属性
    $("p[id]").css("color", "blue");
    //为包含class="222"的p元素设置颜色属性
    $("p[class='222']").css("color", "pink");
    //为包含id属性且id的属性值以'a'开头的span元素设置颜色
    $("span[id^='a']").css("color", "green");
    //为包含id属性且id的属性值以'g'结尾的span元素设置颜色
    $("span[id$='g']").css("color", "red");
    //组合属性包含id='gg'name='11'的span元素设置颜色
    $("span[id='gg'][name='11']").css("color", "blue");
    //选取属性id里包含'123'的span元素设置颜色
    $("span[id*='123']").css("color", "purple");
    //属性id!="btn1"里按钮设置颜色
    $("input[id!='btn1']").css("color",'green');
    })
    </script>
    </head>
    <body>
    <p id="111">bbbb</p>
    <p id>ccc</p>
    <p class="222">aaaaaaaaaaaaa</p>
    <p class>ddddd</p>
    <span id="a111111">QQQQQQQQQQQ</span>
    <span id="abbb">FFFFFFFFFFFFFF</span>
    <span id="ccccg">HHHHHHHH</span>
    <span id="gg" name="11">TTTTTT</span>
    <span id="123">WWWWWW</span>
    <span id="12345">YYYYYYYY</span>
    <input type="button" id="btn1" value="111">
    <input type="button" id="btn2" value="222">
    </body>
    </html>
  • 相关阅读:
    JavaScript对象编程-第3章
    JavaScript对象编程-第3章
    JavaScript基础-第2章
    JavaScript基础-第2章
    JavaScript基础-第2章
    第十八节:详解Java抽象类和接口的区别
    第十八节:详解Java抽象类和接口的区别
    第十八节:详解Java抽象类和接口的区别
    JavaScript概述-第1章
    JavaScript概述-第1章
  • 原文地址:https://www.cnblogs.com/kukai/p/10915051.html
Copyright © 2011-2022 走看看