精华内容
下载资源
问答
  • JQuery 属性选择器

    2020-06-14 14:23:50
    属性选择器 属性名称选择器 语法: $(“A[属性名]”)包含指定属性的选择器 属性选择器 语法: $(“A[属性名=‘值’]”)包含指定属性等于指定值的选择器 复合属性选择器 ...JQuery属性选择器</title

    属性选择器

    1. 属性名称选择器
      语法: $(“A[属性名]”)包含指定属性的选择器
    2. 属性选择器
      语法: $(“A[属性名=‘值’]”)包含指定属性等于指定值的选择器
    3. 复合属性选择器
      语法: $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery属性选择器</title>
        <script src="js/jquery-3.4.1.min.js"></script>
    
        <style>
            #div1{
                background-color: red;
                height: 100px;
                width: 100px;
            }
            #div2{
                background-color: red;
                height: 100px;
                width: 100px;
            }
            #div3{
                background-color: red;
                height: 50px;
                width: 50px;
            }
            #div4{
                border: 1px solid black;
                height: 20px;
                width: 20px;
            }
    
        </style>
    
        <script>
            $(function () {
                //将含有title属性的div元素背景色改为黑色
                $("#b1").click(function () {
                    $("div[title]").css("backgroundColor","black")
                })
    
                //将含有title属性=div1的div元素背景色改为灰色
                $("#b2").click(function () {
                    $("div[title='div1']").css("backgroundColor","gray")
                })
    
                //将含有title属性不等于div1的div元素背景色改为蓝色
                $("#b3").click(function () {
                    $("div[title!='div1']").css("backgroundColor","blue")
                })
    
                //将含有title属性y开头的div元素背景色改为黄色
                $("#b4").click(function () {
                    $("div[title^='y']").css("backgroundColor","yellow")
                })
    
                //将含有title属性yz结尾的div元素背景色改为绿
                $("#b5").click(function () {
                    $("div[title$='yz']").css("backgroundColor","green")
                })
    
                //将含有title属性包含i的div元素背景色改为粉
                $("#b6").click(function () {
                    $("div[title*='i']").css("backgroundColor","pink")
                })
    
                //选取有id属性,且有title属性包含“v”的div更改背景颜色为白色
                $("#b7").click(function () {
                    $("div[id][title*='v']").css("backgroundColor","white")
                })
            })
        </script>
    </head>
    
    <body>
    
        <div id="div1" title="div1">div1...</div>
        <div id="div2" title="div2">div2...
            <div id="div3">div3...</div>
        </div>
        <div id="div4" title="yyy">yyy</div>
        <div id="div4" title="yyz">yyz</div>
    
        <input type="button" id="b1" value="改变含有title属性div的颜色">
        <input type="button" id="b2" value="改变title值为div1的div的颜色">
        <input type="button" id="b3" value="改变title值不为div1的div的颜色">
        <input type="button" id="b4" value="改变title值y开头的div的颜色">
        <input type="button" id="b5" value="改变title值yz结尾的div的颜色">
        <input type="button" id="b6" value="改变title值包含i的div的颜色">
        <input type="button" id="b7" value="b7">
    </body>
    </html>
    
    展开全文
  • jQuery属性选择器

    2019-06-12 14:27:00
    jQuery属性选择器是基于元素属性作为筛选条件的选择器。 [attribute] 属性名选择器 [attribute=value]属性值选择器 [attribute!=value]非属性值选择器 [attribute^=value]属性值以某个字符串开头的选择器 ...

    jQuery属性选择器是基于元素属性作为筛选条件的选择器。

    [attribute] 属性名选择器

    [attribute=value]属性值选择器

    [attribute!=value]非属性值选择器

    [attribute^=value]属性值以某个字符串开头的选择器

    [attribute$=value]属性值以某个字符串结尾的选择器

    [attribute*=value]属性值中包含某个字符串的选择器

    [selector1][selector2][selectorN] 多属性选择器(交集属性选择器)

    代码示例

    <!DOCTYPE html>
    <html>
    
    <head lang="zh-CN">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>多项选择器</title>
        <style></style>
    </head>
    
    <body>
        <section>
            <ul id="one" class="eukaryotes_animal">
                <li>猴子</li>
                <li>猛犸</li>
                <li>猩猩</li>
            </ul>
            <ul id="two" class="eukaryotes_plant">
                <li>牡丹</li>
                <li>樱花</li>
                <li>仙人掌</li>
            </ul>
            <ul id='three' class="prokaryotes_microbe">
                <li>细菌</li>
                <li>蓝细菌</li>
                <li>放线菌</li>
                <li>支原体</li>
            </ul>
        
        </section>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                //此处填写代码
    
    
            });
        </script>
    </body>
    
    </html>

     

    [attribute] 属性名选择器

    选择拥有该属性名的元素。

    var a=$('[id]');
    console.log(a);

    选中了示例中所有拥有id属性的元素

    [attribute=value]属性值选择器

    选择属性值为某个特定值的元素。

    var a=$('[id=one]');
    console.log(a);

    选中了示例中id=one的元素

    [attribute!=value]非属性值选择器

    选择所有属性值不为特定值的元素(包括没有该属性的元素)

    var a=$('[class!=eukaryotes_animal]');
    console.log(a);

    除了ul#one.eukaryotes_animal没有选中外,包括它的子元素在内的其他元素均在选择范围内。

    [attribute^=value]属性值以某个字符串开头的选择器

    var a=$('[class^=eukaryotes]');
    console.log(a);

    [attribute$=value]属性值以某个字符串结尾的选择器

    var a=$('[class$=plant]');
    console.log(a);

    [attribute*=value]属性值中包含某个字符串的选择器

    var a=$('[class*=yotes_m]');
    console.log(a);

    [selector1][selector2][selectorN] 多属性选择器(属性交集选择器)

    var a=$('[class^=eukaryotes_][id]');
    console.log(a);

     

    转载于:https://www.cnblogs.com/f6056/p/11009440.html

    展开全文
  • jquery属性选择器

    2018-05-17 21:49:45
    jquery属性选择器html的元素标签对应的都有自己的属性,属性选择器就是根据元素的属性来进行匹配元素的。1、[attribute]属性选择器 代表着只要元素标签含有某一个指定的属性,该元素就会被匹配的到。不管元素的属性...

    jquery属性选择器

    html的元素标签对应的都有自己的属性,属性选择器就是根据元素的属性来进行匹配元素的。

    1、[attribute]属性选择器

        代表着只要元素标签含有某一个指定的属性,该元素就会被匹配的到。不管元素的属性是什么值。

    比如$("input[id]"):匹配含有属性id的input元素。

    2、[attribute=value]属性选择器

        匹配含有指定属性并且属性值必须是指定的值的元素。

    3、[attribute!=value]属性选择器

     匹配含有指定属性并且属性值不是指定的值的元素。

    4、[attribute^=value]属性选择器

    匹配含有指定属性并且属性值必须以value开头的元素。

    5、[attribute$=value]属性选择器

    匹配含有指定属性并且属性值必须以value结尾的元素。

    6、[attribute*=value]属性选择器

    匹配含有指定属性并且属性值必须包含value的元素。

    7、[selector1][selector2][selectorN]属性选择器

    复合属性选择器,需要同时满足多个条件时使用。


    展开全文
  • JQuery属性选择器

    2018-12-29 19:51:38
    今天我们学习一下JQuery属性选择器,方便我们调用不同类型的属性。  一、属性选择器 代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8&...

    今天我们学习一下JQuery属性选择器,方便我们调用不同类型的属性。

     一、属性选择器

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="script/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                $('input');
            });
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="按钮1" />
        <input type="button" value="按钮2" />
        <input type="button" id="btn2" />
        <input type="text" id="txt1" />
    </body>
    </html>

     展示效果:

    有了属性选择器,我就能快速定位我需要的控件,然后对控件进行操作了。

     4种表单选择器的简写

    enabled:选择所有被启用的元素

    disabled:选择所有被禁用的元素

    checked:表示checked属性为选中状态的元素,用于checkbox、radio控件,$(':checkbox'):选择所有的checkbox元素

    selected:表示所有被selected的option,用于select控件

     

    展开全文
  • jQuery 属性选择器

    2018-02-08 14:55:33
    选择器:jQuery 使用 CSS 选择器来选取 HTML 元素。$("p") 选取 &lt;p&gt; 元素。$("p.intro") 选取所有 class="...jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,720
精华内容 2,288
关键字:

jquery属性选择器