💂 个人主页: 爱吃豆的土豆

🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主

💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

🌈欢迎加入社区，福利多多哦！土豆社区

🏆人必有所执，方能有所成！

🐋希望大家多多支持😘一起进步呀！

jQuery属性操作【阶段重点】

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>
        .blueDiv{
            background-color: #87CEFA;
            width:300px;
            height:300px;
        }
        .redDiv{
            background-color: red;
            width:300px;
            height:300px;
        }
    </style>
    <script src=”../js/jquery-3.3.1.min.js”></script>
    <script>
        $(function(){
            //attr和prop有区别的：
            //attr 操作的是html自带属性
            //prop 操作的是自定义属性
            //1、获取d2这个div标签的class值
            //var v1 = $(“#d2”).prop(“class”);
            var v1 = $(“#d2”).attr(“class”);
            alert(v1);
            //2、设置d1这个div标签样式为blueDiv
            //$(“#d1”).prop(“class”,”blueDiv”);
            $(“#d1”).attr(“class”,“blueDiv”);
            //3、移除d2这个div标签的redDiv样式
            //$(“#d2”).removeProp(“class”);
            $(“#d2”).removeAttr(“class”);
            //$(“#d2”).prop(“key1″,”value1”);
        });
    </script>
</head>
<body>
    <div id=”d1″>11111</div>
    <div id=”d2″ class=”redDiv”>22222</div>
</body>
</html>

prop无效，切attr即可

扩展：

何时使用Prop何时使用attr：

若需要操作属性，需要在页面DOM上进行改变，使用attr

若需要操作的属性，值不需要在页面DOM改变，要动态保存使用prop

敏感信息操作，使用prop。

建议：先用prop，若prop无效果，切换attr

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <script src=”../js/jquery-3.3.1.min.js”></script>
    <script>
        $(function(){
            //HTML自带属性:attr会更改页面DOM值，prop不会更改页面DOM值，对动态值进行改变。【prop若无法改变，立刻切换attr】
            //获取value展示
            //alert($(“#t1”).prop(“value”));
            //alert($(“#t1”).attr(“value”));
            //设置value
            //$(“#t1”).prop(“value”,”v2″);//未改变页面元素中的value，仅对value的动态值进行了改变
            //$(“#t1”).attr(“value”,”v2″);//改变了页面元素中的value

            //自定义属性：attr会将自定义属性保存在页面元素中，prop动态保存不会保存页面元素。
            //设置自定义属性，k1=v1
            //$(“#t1”).prop(“k1″,”v1”);//不会向页面中添加自定义属性，而是动态保存
            //$(“#t1”).attr(“k1″,”v1”);//会修改页面元素，添加k1=v1属性值
            //获取自定义属性, k1=v1
            //alert($(“#t1”).prop(“k1”));
            //alert($(“#t1”).attr(“k1”));

            //页面书写自定义属性：仅能使用attr获取
            //获取自定义书写属性，memeda
            //alert($(“#t1”).prop(“memeda”));//undefined
            //alert($(“#t1”).attr(“memeda”));
        });
    </script>
</head>
<body>
    <input type=”text” id=”t1″ value=”hehe” memeda=”么么哒”/>
</body>
</html>

案例：重写复选框操作

分析：

关键点：

1、jQuery获取元素

$(“.itemSelect”);

2、jQuery操作属性

jq.prop(“checked”,true);

jq.prop(“checked”,false);

jq.prop(“checked”,function(){

//this 指当前复选框对象

return !this.checked;

});

步骤：

1、页面加载完成时，为三个按钮绑定点击事件

2、全选：进行为true

3、全不选：进行为false

4、反选：进行匿名函数取反操作

代码实现：

<script src=”../js/jquery-3.3.1.min.js”></script>
<script>
   //1、页面加载完成时，为三个按钮绑定点击事件
   $(function () {
      var cbs = $(“.itemSelect“);
      //2、全选：进行为true
      $(“input[value=’全选’]”).click(function () {
         cbs.prop(“checked”,true);
      });
      //3、全不选：进行为false
      $(“input[value=’全不选’]”).click(function () {
         cbs.prop(“checked”,false);
      });
      //4、反选：进行匿名函数取反操作
      $(“input[value=’反选’]”).click(function () {
         cbs.prop(“checked”,function () {
            return !this.checked;
         });
      });
   });
</script>