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員工的任性之源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。