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>
1,jQuery获取元素$(".itemSelect");
2,jQuery操作属性 jq.prop("checked",true)
jq.prop("checked",false)
jq.prop("checked",function(){
//this 指当前复选框对象
return !this.checked;
})
匿名函数使用：可以用于作为回调函数。
也可以用于进行一些值处理。（JS函数一定有返回值）
