jQuery第四天~

强风拂过
350 阅读2分钟

「这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战」

jQuery的attr和prop方法

html代码（用于后面操作）：

        <body>
        <span class="span1" name="zxy"></span>
        <span class="span2" name="lmr"></span>
        </body>

attr(name|pro|key,val|fn)

  • 作用：获取或者设置属性节点的值。
  • 传入一个参数：代表获取属性节点的值。
  • 传入两个参数：代表将获取到的第一个参数的属性节-
  • 注意：
    • 获取时：只会返回找到的第一个元素中指定属性节点的值
    • 设置时：找到多少个元素就设置多少个元素，如果设置的指定元素中没有该节点，系统将会自动为其添加该节点。

代码示例：

  • 获取属性节点属性
  • 设置属性节点属性
  • 设置属性节点属性（不存在的属性节点）
        $(function(){        
            //获取属性节点属性
            console.log($("span").attr("class"));
            //设置属性节点属性
            $("span").attr("class","123")
            //设置属性节点属性（不存在的属性节点）
            $("span").attr("abc","456")
        });

结果：

image.png

removeAttr(name)

  • 作用：删除属性节点
  • 注意点：
    • 只能传入一个参数，如果想同时删除多个属性节点，多个属性节点之间可使用空格隔开。
    • 删除时，会删除所有找到元素的指定属性节点。

代码示例：

  • 移除所有span的name，class，abc的属性节点
        $(function(){        
            $("span").removeAttr("name class abc")
        });

结果：

image.png

prop

html代码：

        <body>
            <span class="span1" name="zxy"></span>
            <span class="span2" name="lmr"></span>
        </body>
  • 特点和attr方法一致。
  • 注意点：
    • prop既可以操作属性又可以操作属性节点

代码示例：

  • 获取到第0个span，设置获取到的指定属性节点的属性值，没有便添加
  • 获取指定属性节点的属性值
  • 直接设置属性指定属性节点的值
        $(function(){
            //获取到第0个span，设置获取到的指定属性节点的属性值，没有便添加
            $("span").eq(0).prop("demo","zxy666");
            //获取指定属性节点的属性值
            console.log($("span").prop("demo"));
            
            //直接设置属性指定属性节点的值
            $("span").prop("class","text")
        });

结果：

image.png

image.png

removeProp

  • 特点和removeAttr方法一致

代码示例：

  • 移除所有名称为 demo 的属性节点的值
        $(function(){
            //移除所有名称为 demo 的属性节点的值
            $("span").removeProp("demo")
        });

结果：

image.png

注意：

代码示例：

        <script>
            $(function(){
                console.log($("input").prop("checked"));    //true    /   false
                console.log($("input").attr("checked"));    //checked /   undefined
            });
        </script>
        <body>
            <!-- <input type="checkbox" checked> -->
            <input type="checkbox">
        </body>

结果：

image.png

image.png

  • 此时当checkbox状态为选中时使用prop方法会打印 true ，而使用attr方法则会打印 checked ；当checkbox状态为未选中时使用prop方法会打印 false ，而使用attr方法则会打印 undefined；可见这时两种方法产生差异，所以当需要操作时需要使用Boolean值进行操作时，则选择使用prop方法。

官方推荐在操作属性节点时，具有true和fasle两个属性的属性节点，如checked,selected或者 disabled使用prop(),其他使用attr()即可。

小练习：使用attr方法和prop方法同通过输入文本框图片地址，点击按钮改变img。

image.png

示例代码：

       <script>
           $(function(){
                //1.获取文本框图片地址
                var input = document.getElementsByTagName("input")[0];
                //2.设置img地址为文本框地址
                var newImg = document.getElementsByTagName("button")[0];
                newImg.onclick = function(){
                    
                    var text = input.value;
                    //修改img的src属性节点的值
                    // $("img").attr("src",text);
                    $("img").prop("src",text);
                    //3.清楚文本框
                    newImg="";
                }
           });
       </script>
       
       <body>
           <input type="text">
           <button>换图片</button><br>
           <img src="https://i0.hdslb.com/bfs/archive/9e5f278027
           ae7f1e1933b6e4002870361da6c20b.png" alt="">
       </body>

结果：

image.png

avatar
文章
阅读
粉丝