jquery属性

时间 2019-11-10

标签 jquery 属性栏目 JQuery 繁體版

原文原文链接

原生方法给对象加属性

<div id="div1">div</div>html

<script src="jquery-3.3.1.js"></script>
<script>jquery
```
var oDiv = document.getElementById('div1');
 oDiv.aa = '123';
 console.log(oDiv.aa);
```
</script>数组

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

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

如今DOM中能够看见值了，可是想要打印输出bb的值就要
oDiv.setAttribute('bb','456');
console.log(oDiv.getAttribute('bb'));

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

用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()。this

举个例子

<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);
                }
         });
 //打印输出

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

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

插播forEach用法spa

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

回到刚才3d

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

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

如今能够经过判断true/false判断是否被选中

//反选code

$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()。orm

完整代码

<!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>

1. jQuery Event.which 属性
2. jquery 属性
3. jQuery属性操做
4. jQuery属性操作
5. jQuery Mobile Data 属性
6. jQuery--属性和CSS
7. jquery——4属性-css-
8. jQuery之CSS属性
9. jQuery---属性操作
10. jQuery 属性操做
更多相关文章...
• jQuery Mobile Data 属性 - jQuery Mobile 教程
• WebSecurity 属性 - CurrentUserName - ASP.NET 教程
• JDK13 GA发布：5大特性解读
• 互联网组织的未来：剖析GitHub员工的任性之源