Javascript知识【jQuery属性操作&案例:重写复选框操作】

简介: Javascript知识【jQuery属性操作&案例:重写复选框操作】

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>

2bde3b29bf7e4b4887174195011e4f58.png

prop无效,切attr即可

761b67dc903c4655960720383ca028a7.png

扩展:


何时使用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>


案例:重写复选框操作

4bae84768cf9431286e1543c8c6e1ffb.png

分析:

关键点:


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函数一定有返回值)

相关文章
|
2月前
|
XML JavaScript 数据格式
jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法。
41 6
|
2月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
47 3
|
2月前
|
存储 JavaScript 前端开发
jQuery 对属性的操作
【10月更文挑战第8天】
|
2月前
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
51 1
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
22 0
|
3月前
|
JavaScript
jQuery - 设置内容和属性
jQuery - 设置内容和属性
62 2
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
35 0
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
14 0
|
2月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
2月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法