jquery属性

头像
李钢铁
    阅读 6 分钟
    3

    原生方法给对象加属性

    1. <div id="div1">div</div>

      <script src="jquery-3.3.1.js"></script>
      <script>

       var oDiv = document.getElementById('div1');
 oDiv.aa = '123';
 console.log(oDiv.aa);

      </script>

      打印输出123 注意：此时在DOM结构中看不见值

    clipboard.png

    2.oDiv.setAttribute('bb','456');
console.log(oDiv.bb);

    clipboard.png

    现在DOM中可以看见值了，但是想要打印输出bb的值就要
oDiv.setAttribute('bb','456');
console.log(oDiv.getAttribute('bb'));

    clipboard.png

    建议如果是自定义属性用第1种方法，如果属性的值是自带的，比如id class用第二种方式。

    用jquery的方式写

    1..attr（）和.prop（）都是获取值用的。
$('#div1').attr('aa','123');
console.log($('#div1').attr('aa'));

$div1.prop('bb','456');
console.log($div1.prop('bb'));

注意： .attr和.prop的区别
prop()函数的结果:
  1.如果有相应的属性，返回指定属性值。
  2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
  1.如果有相应的属性，返回指定属性值。
  2.如果没有相应的属性，返回值是undefined。
  
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

    具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()。

    举个例子

    clipboard.png

    <h1>你爱好的运动是？</h1>
<form action="">
    <input type="checkbox" name="hobby">足球
    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">排球
    <input type="checkbox" name="hobby">羽毛球
    <br>
    <button id="all" type="button">全选</button>
    <button id="notall" type="button">全不选</button>
    <button id="reverse" type="button">反选</button>
    <button type="button">提交</button>
</form>
var $hobbys = $('input[name="hobby"]');
//全选
$('#all').on('click',function(){
    $hobbys.prop('checked',true);
});
//全不选
$('#notall').on('click',function(){
     $hobbys.prop('checked',false);
 });
1.出现了一个问题：点击按钮的时候网页回自己提交。
解决办法： form表单中的按钮button要加上一句 type="button"
          <button type="button">全不选</button> 这样
2.反选
 //反选时要知道哪个已经被选了 哪个没被选 要遍历一次
         $('#reverse').on('click',function(){
             for(var i=0; i<$hobbys.length; i++){
                    var elem = $('input[name="hobby"]:eq('+i+'):checked');
                    //表示选中的框
                    console.log(elem);
                }
         });
 //打印输出

    clipboard.png

    选中第二项 点击反选 会遍历输出4个数组

    clipboard.png

    发现数组的length可以区别某个框是否被选上 巴特 我不会写了

    插播forEach用法

    var arr=['a','b','c'];
    arr.forEach(function(elem,index,arr){
        console.log(elem,arr);
    });
   比for循环简单一点

    clipboard.png

    回到刚才

    jquery中有一个循环方法each() 巴特 each(index,elem,arr)
//反选
 $('#reverse').on('click',function(){
      $hobbys.each(function(index,elem,arr){
          console.log(elem);
      });
 });
 现在输出的是原生对象

    clipboard.png

    console.log($(elem).prop('checked'));

    clipboard.png

    现在可以通过判断true/false判断是否被选中

    //反选

    $hobbys.each(function(index,elem,arr){
      if($(elem).prop('checked')){
          $(elem).prop('checked',false);
       }
      else{
          $(elem).prop('checked',true); 
          }
});
也可以用原生的方法写
//反选
$hobbys.each(function(index,elem,arr){
    this.checked = !this.checked;
}
this指当前的对象

    说三遍 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()。

    完整代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>你爱好的运动是？</h1>
    <form action="">
        <input type="checkbox" name="hobby">足球
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">排球
        <input type="checkbox" name="hobby">羽毛球
        <br>
        <button id="all" type="button">全选</button>
        <button id="notall" type="button">全不选</button>
        <button id="reverse" type="button">反选</button>
        <button type="button">提交</button>
    </form>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){
            var $hobbys = $('input[name="hobby"]');
            //全选
             $('#all').on('click',function(){
                $hobbys.prop('checked',true);
             });
             //全不选
             $('#notall').on('click',function(){
                $hobbys.prop('checked',false);
             });
             //反选时要知道哪个已经被选了 哪个没被选 要遍历一次
             $('#reverse').on('click',function(){
            //      for(var i=0; i<$hobbys.length; i++){
            //             var elem = $('input[name="hobby"]:eq('+i+'):checked');
            //             // console.log(elem);
            //             if(elem.length == 0)//没被选中
            //             {
            //                 $hobbys.eq(i).attr('checked',true);
            //             }
            //             else{
            //                 $hobbys.eq(i).attr('checked',false);
            //             }
            //         }
            //  });
            $hobbys.each(function(index,elem,arr){
                // console.log(elem);
                // console.log($(elem).prop('checked'));
                // if($(elem).prop('checked')){
                //     $(elem).prop('checked',false);
                // }
                // else{
                //     $(elem).prop('checked',true);
                // }

                this.checked = !this.checked;
            });
        });


        });
        // var arr=['a','b','c'];
        // arr.forEach(function(elem,index,arr){
        //     console.log(elem,arr);
        // });
    </script>
</body>
</html>
    htmlcssjavascript
    李钢铁
    830 声望47 粉丝

    简单粗暴

    « 上一篇
    jquery选择器 （nth-of-type（） nth-child（）区别内容更新）
    下一篇 »
    vue安装 搭建 在项目中安装elementui

    引用和评论

    推荐阅读
    头像
    picture-in-picture

    李钢铁阅读 3.5k

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新