jquery屬性

zhangqh 發布于2019-08-29 16:44 / 1000人閱讀

摘要：函數的結果如果有相應的屬性，返回指定屬性值。如果沒有相應的屬性，返回值是。對于元素本身就帶有的固有屬性，在處理時，使用方法。

原生方法給對象加屬性

div

打印輸出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用第二種方式。

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

舉個例子

你愛好的運動是？

    足球
    籃球
    排球
    羽毛球
    

    
    
    
    

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"
           這樣
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用法

var arr=["a","b","c"];
    arr.forEach(function(elem,index,arr){
        console.log(elem,arr);
    });
   比for循環簡單一點

回到剛才

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判斷是否被選中

//反選

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

完整代碼




    
    
    
    Document


    你愛好的運動是？
    
        足球
        籃球
        排球
        羽毛球

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113947.html

jQuery源碼分析2-JQ對象添加一些方法和屬性

摘要：節點修改對象的屬性，這就相當于把對象轉成了一個類數組，最后返回，可用于鏈式調用。如果傳入的是單標簽，且第二個參數是一個純對象例如則把后面對象的屬性一一添加到創建的這個節點的屬性上。我們先看看jQuery的原型中初始化了哪些屬性和方法： jQuery.fn = jQuery.prototype = { jquery: core_version, //jquery版本號 ...

TANKING 2019-08-21 11:26 評論0 收藏0
jQuery源碼分析3-jQuery對象的擴展--extend

摘要：的指向的是對象，所以此時擴展的是對象，可以直接通過的方式調用。寫過jquery插件的人都知道可以通過jquery提供的extend可以對jquery對象進行擴展，而且該方法不僅可以對jquery對象擴展，還能給一個對象添加新的屬性和方法，這個在后面會介紹。通過不同的方式調用extend擴展的方法也不同：通過 $.extend() 擴展的是靜態方法；而通過 $.fn.exten...

MonoLog 2019-08-20 13:53 評論0 收藏0
JQuery基礎修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

_Dreams 2019-08-02 15:55 評論0 收藏0
JQuery基礎修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

luck 2019-08-19 18:24 評論0 收藏0
20170621-jQuery總體結構分析

摘要：利用了這一特性，通過在構造函數內部用運算符創建并返回另一個構造函數的實例，因此當我們創建對象的時候，可以使用的形式，也可以省略運算符，直接通過的形式得到對象。 jQuery總體結構 1 (function(window, undefined){ 2 3 var jQuery = (function(){ 4 var jQuery = f...

dinfer 2019-08-21 15:55 評論0 收藏0
淺析jQuery整體框架與實現（上）

摘要：通常的做法是，為它們指定回調函數。請求返回請求返回請求返回異步隊列解耦異步任務和回調函數為模塊隊列模塊事件提供基礎功能。前言 jQuery整體框架甚是復雜，也不易讀懂，這幾日一直在研究這個笨重而強大的框架。jQuery的總體架構可以分為：入口模塊、底層模塊和功能模塊。這里，我們以jquery-1.7.1為例進行分析。 jquery的總體架構 16 (function( window,...

VEIGHTZ 2019-08-21 10:20 評論0 收藏0