jQuery DOM操作

在沒有jQuery之前，DOM的操作相對來說有點麻煩，尤其是DOM節點的搜尋。目前我們已經學習了jQuery的選擇器，接下帶大家一塊學習jQuery的DOM操作，jQuery對DOM操作的封裝讓我們前端開發工作非常簡便、簡潔、相容性好。比如：屬性操作統一化：直接attr方法既可以設定屬性也可以讀取屬性。

1.jQuery操作DOM的屬性

1.1 讀取屬性值

在DOM時代，我們可以通過DOM.getAttribute('attNamn')獲取DOM的屬性節點。可以通過DOM.setAttribute('title','22');設定屬性內容。

jQuery的包裝物件(jQuery.fn原型物件)提供了attr(name, value)

attr(attrName)方法接受一個字串引數，就是屬性的名稱，返回值是屬性值，如果dom元素沒有此屬性則返回undefined。

<p k="3">3</p>
<p k="4">4</p>
<input type="checkbox" checked name="ckb" id="ckb1">
<input type="checkbox" name="ckb" id="ckb2">
<script>
  $(function(){
    // 讀取第一個p標籤的屬性k的值
    console.log($('p:first').attr('k'));     // 3
    // 讀取第一個p標籤的id屬性值，不存在此屬性返回undefined
    console.log($('p:first').attr('id'));    // undefined
    // 特殊的單獨的屬性：checked、selected、multiple、readOnly、autofocus 返回屬性名字
    console.log($('#ckb1').attr('checked')); // chekced
    console.log($('#ckb2').attr('checked')); // undefined ！！！不是false

    // 應對attr獲取checked屬性為undefined的問題，jQuery新增的prop方法
    // 僅僅用於checked、selected、multiple、readOnly、autofocus 等屬性
    console.log($('#ckb2').prop('checked')); // false
  });
</script>
 

1.2 設定屬性值

設定屬性還是用attr()方法,此方法有多個過載，可以穿兩個引數屬性名和屬性值，也可以傳鍵值對物件，甚至可以傳一個方法進行處理。

• attr(name,value)簡單設定屬性的方法，接受兩個字串引數，第一個是屬性名，第二個是屬性值。

// 設定p1標籤的類為box
$('#p1').attr('class','box');
// 為所有影象設定src屬性。
$("img").attr("src", "test.jpg");// 預設隱式迭代

• attr(Object)鍵值對形式的設定物件引數

// 為所有影象設定src和alt屬性。
$("img").attr({ src: "test.jpg", alt: "Test Image" });// 預設隱式迭代
 

• attr(key, func)函式方式處理設定引數

func回撥函式：一個引數為當前元素的索引值，第二個引數為原先的屬性值。函式的返回值作為新的屬性值。

//把src屬性的值設定為title屬性的值
$("img").attr("title", function(index, oldAttr) {
  return this.src;
});

// 將p標籤的k屬性值加上  當前標籤的索引和-
$('p').attr('k', function(index, attr){
  return index + '-'  + attr;
});

• 特殊的單個屬性的設定（checked、selected、disabled等）

<input type="checkbox" name="ckb" id="ckb2">
<script>
  $(function(){
    $('#ckb2').attr('checked', 'checked');
    console.log($('#ckb2').attr('checked')); // checked
    console.log($('#ckb2').prop('checked')); // true

    $('#ckb2').attr('disabled', 'disabled');
    console.log($('#ckb2').attr('disabled')); // disabled
    console.log($('#ckb2').prop('disabled')); // true

    // prop方法設定 和 讀取的屬性值都是boolean型別
    $('#ckb2').prop('disabled', false);
    $('#ckb2').prop('checked', true);
  });
</script>

1.3 關於prop方法和attr的區別

jQuery為對映DOM自身的固有屬性添加了prop方法，用法跟attr方法用法一致。但是prop方法在處理單個屬性的獲取和設定時非常方便，比如：disabled、checked、selected、multiple、readOnly、autofocus等。

prop 和 attr區別：

• attr可以用於任何的屬性讀寫，包括自定義屬性
• prop用意就是應用於DOM物件固有的屬性，也就是prop用於讀取和設定DOM物件中已經定義的標準屬性。
• prop對於單個屬性返回值是boolean型別，具體型別參考DOM物件的屬性的型別。
• attr返回的值都是string型別

// attr設定樣式類
$('p').attr('class', 'box'); // 預設隱式迭代

// DOM中樣式類是className不是 class關鍵字
$('p').prop('className', 'box');// 預設隱式迭代

以下是官方建議attr(),prop()的使用：【√推薦，○不推薦】

1.4 移除屬性removeAttr(attr)

移除屬性非常簡單直接用下面程式碼

$("img").removeAttr("src");

2. 內容操作html()和text()

2.1 設定標籤內部的html內容html()

DOM時代設定標籤內部的html內容是使用DOM物件的 innerHTML屬性。
jQuery包裝物件封裝了html()方法用於讀取和設定，而且實現了預設隱式迭代機制。

語法：html([val|fn])

• 讀取標籤html內容：html()

<div class="box">
  <a href="https://chuanke.baidu.com/s5508922.html">老馬學校</a>
</div>
<script>
  $(function(){
    $('.box').html(); // 獲取box樣式類裡面的html文字
    //返回： <a href="https://chuanke.baidu.com/s5508922.html">老馬學校</a>
  });
</script>

• 設定標籤html的內容: html(str)

$('#box').html('<p>你好</p>');
// 等價於DOM的innerHTML屬性設定值
$('#box')[0].innerHTML = '<p>你好</p>';

• 回撥函式設定標籤html內容: html(func)

func(index,html)接收兩個引數，index為元素在集合中的索引位置，html為原先的HTML值.返回值作為新的innerHTML的內容。

$("p").html(function (n, oldHTML) {
  return oldHTML + n;
});

動態建立表格案例

<table class="list">
    <thead>
      <th>使用者名稱</th>
      <th>郵箱</th>
      <th>年齡</th>
    </thead>
    <tbody>
      <tr>
        <td>老馬</td>
        <td>[email protected]</td>
        <td>18</td>
      </tr>
    </tbody>
  </table>
  <script>
    var data = [{
      name: 'laoma11',
      mail: '[email protected]',
      age: 19
    },{
      name: 'laoma12',
      mail: '[email protected]',
      age: 20
    },{
      name: 'laoma13',
      mail: '[email protected]',
      age: 12
    },{
      name: 'laoma14',
      mail: '[email protected]',
      age: 99
    },{
      name: 'laoma15',
      mail: '[email protected]',
      age: 19
    }];

    // 思路 : 把上面的陣列進行遍歷，拼接字串把html字串放到tbody中去。
    $(function() {
      var tempStrArray = [];
      for(var i = 0; i < data.length; i++) {
        var tempStr = "";
        tempStr += "<tr>";
        tempStr += "<td>" + data[i].name +"</td>";
        tempStr += "<td>" + data[i].mail +"</td>";
        tempStr += "<td>" + data[i].age +"</td>";
        tempStr += "</tr>";

        // 把拼接的字串放到陣列中
        tempStrArray.push(tempStr);
      }

      // 設定元素的內部的標籤字串， 第二種用法
      $('.list tbody').html(tempStrArray.join(''));

      // 讀取標籤內部的html字串， 第一種用法
      console.log($('.list tbody').html());

      // 第三種用法
      $('.list tbody').html(function(index, oldHtml) {

      });
    });
  </script>

2.2 設定和讀取文字text()

DOM時代獲取和讀取標籤的文字有相容問題，ie需要用innerText而ff等瀏覽器需要用textContext屬性.jQuery做好了相容的處理，直接呼叫text()方法就行了。

• 讀取標籤的text文字方法：text()

$('p').text();

• 設定標籤的text文字text(str)

$("p").text("Hello world!");

• 設定標籤的文字 text(func)

func(index, text)此函式返回一個字串。接受兩個引數，index為元素在集合中的索引位置，text為原先的text值.

$("p").text(function(n){
  return "這個 p 元素的 index 是：" + n;
});

2.3 設定和讀取表單元素的value屬性val()

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選，將返回一個數組，其包含所選的值。此方法物件

• 讀取表單元素的value屬性: $("input").val();

• 設定表單元素的值: $("input").val("hello world!");

• 回撥函式設定值

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

3. 樣式類操作

3.1 樣式型別屬性操作

前面講的attr()和prop()方法都可以直接設定樣式類屬性。

$('p').attr('class', 'box');
$('p').prop('className', 'box');

3.2 新增樣式類方法addClass

語法： addClass(class|fn)
為每個匹配的元素新增指定的類名， 返回值是jQuery包裝物件。

• 新增樣式類，引數為字串情況

$("p").addClass("selected");
// 新增多個樣式類
$("p").addClass("selected1 selected2");

• 引數是回撥函式

<!-- 給li加上不同的class -->
<ul>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
</ul>
<script>
  // jQuery 程式碼:
  $('ul li').addClass(function() {
    return 'item-' + $(this).index();
  });
</script>
<!-- 結果 -->
<!-- 
<ul>
  <li class="item-0">Hello</li>
  <li class="item-1">Hello</li>
  <li class="item-2">Hello</li>
</ul> 
-->

3.3 移除樣式類remvoeClass

語法:removeClass([class|fn])
從所有匹配的元素中刪除全部或者指定的類。 返回值是jQuery包裝物件。

• 引數是字串樣式類 removeClass(str)

// 從匹配的元素中刪除 'selected' 類
$("p").removeClass("selected");
// 刪除匹配元素的所有類
$("p").removeClass();

• 回撥函式的呼叫removeClass(func)

func(index, oldClass)此函式必須返回一個或多個空格分隔的class名。接受兩個引數，index引數為物件在這個集合中的索引值，class引數為這個物件原先的class屬性值。

// 刪除最後一個元素上與前面重複的class
$('li:last').removeClass(function(index, oldClass) {
    return $(this).prev().attr('class');
});

3.4 切換樣式類 toggleClass

語法 toggleClass(class|fn[,sw])
如果存在（不存在）就刪除（新增）一個類。

引數:

• 一個引數：class:CSS類名 String型別

// 如果p標籤有selected樣式就移除掉，如果沒有就新增上。
$("p").toggleClass("selected");

• 兩個引數class,switch

1:要切換的CSS類名.
2:用於決定元素是否包含class的布林值。

var i = 9;
$(this).toggleClass("highlight", i > 3);

• 回撥函式

引數：function(index, class)
用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函式。接收元素的索引位置和元素舊的樣式類作為引數。

// 根據父元素來設定class屬性
$('div.foo').toggleClass(function(index, class) {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

3.5 判斷樣式類是否存在hasClass

語法格式：hasClass(str)，返回值Boolean型別，返回是否擁有某個樣式類。

$('#md').hasClass('box'); // true or false

開關燈案例

  <style>
    .cls {
      background-color: #000;
    }
  </style>
<input type="button" value="關燈" id="btnLight">
  <script>
    $(function() {
      $('#btnLight').on('click', function(e) {
        // 按鈕點選關燈後：文字改成開燈，然後背景色變成黑色
        // 再點選開燈，那麼文字改為關燈，背景變白色
        if($(this).val() == '關燈') {
          $(this).val('開燈');
          // $(document.body).addClass('cls');
        } else {
          // 開燈的效果
          $(this).val('關燈');
          // $(document.body).removeClass('cls');
        }
        // 切換樣式類：如果有則去掉，如果沒有則加上。
        $(document.body).toggleClass('cls');
      });
    });

    // attr() prop()  html() text() val() addClass() removeClass() toggleClass() 
    // hasClass('cls')=> boolean
  </script>

4. 樣式屬性操作css

4.1 讀取CSS的屬性值css(str)

在DOM中我們可以使用DOM物件的style屬性來設定或者讀取樣式的值。jQuery中封裝了css()方法來幫助我們讀取或者設定樣式值。

<p id="md">hi jQuery</p>
<script>
  $('#md').css('color'); // 獲取md標籤的 color樣式值。
</script>

4.2 設定CSS的樣式屬性值

• 接受兩個字串引數css(key,val)

將所有段落字型設為紅色
$("p").css("color","red");

• 接受鍵值對的物件作為引數css(obj)

$("p").css({ "color": "#ff0011", "background": "blue" });

• 接受兩個引數，第一個屬性名，第二個回撥函式。css(prop, func)

  • prop:屬性名.
  • func(index,oldValue) 此函式返回要設定的屬性值。接受兩個引數，index為元素在物件集合中的索引位置，oldValue是原先的屬性值。

  // div 點選後逐漸增加div的大小
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      },
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });