jQuery既然是為了幫助你能從js的繁瑣中解脫出來，自然在DOM操作上也有自己的一套。

1、修改Text和HTML

之前我們提到過，如果用JS的話，你要修改Text或者HTML需要用到其innerHTML和innerText屬性，但是放在jQuery里面，你需要用到的是html()方法和text()方法，而且這兩個方法很巧妙，如果你不傳參，就是獲取值；傳參，就是更改值：<!-- HTML結構 --> <ul id="test-ul"><li class="js">JavaScript</li><li name="book">Java &amp; JavaScript</li> </ul>//jQuery操作 $('#test-ul li[name=book]').text(); // 'Java & JavaScript' $('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'91<!-- HTML結構 --> 2<ul id="test-ul">3 ? ?<li class="js">JavaScript</li>4 ? ?<li name="book">Java &amp; JavaScript</li>5</ul>67//jQuery操作8$('#test-ul li[name=book]').text(); // 'Java & JavaScript'9$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'
一個jQuery對象是可以包含0個或者多個DOM對象的，所以實際上它的方法會作用到每個DOM的節點上。

2、修改CSS

jQuery中可以使用css()方法對其CSS進行批量修改，比如高亮顯示：$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');11$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');
同樣地，如果css方法的第二個參數不傳值，那么默認會返回現有屬性：var div = $('#test-div'); div.css('color'); // '#000033', 獲取CSS屬性21var div = $('#test-div');2div.css('color'); // '#000033', 獲取CSS屬性

3、新增class?

var div = $('#test-div'); div.hasClass('highlight'); // false， class是否包含highlight div.addClass('highlight'); // 添加highlight這個class div.removeClass('highlight'); // 刪除highlight這個class41var div = $('#test-div');2div.hasClass('highlight'); // false， class是否包含highlight3div.addClass('highlight'); // 添加highlight這個class4div.removeClass('highlight'); // 刪除highlight這個class
新增class屬性可以很好地配合CSS用來進行效果展示：<!-- HTML結構 --> <style> .highlight {color: #dd1144;background-color: #ffd351; } </style><div id="test-highlight-css"><ul><li class="py"><span>Python</span></li><li class="js"><span>JavaScript</span></li><li class="sw"><span>Swift</span></li><li class="hk"><span>Haskell</span></li></ul> </div>//你可以這樣使用jQuery配置css var div = $('#test-highlight-css'); div.addClass('highlight');211<!-- HTML結構 -->2<style>3.highlight {4 ? ?color: #dd1144;5 ? ?background-color: #ffd351;6}7</style>89<div id="test-highlight-css">10 ? ?<ul>11 ? ? ? ?<li class="py"><span>Python</span></li>12 ? ? ? ?<li class="js"><span>JavaScript</span></li>13 ? ? ? ?<li class="sw"><span>Swift</span></li>14 ? ? ? ?<li class="hk"><span>Haskell</span></li>15 ? ?</ul>16</div>171819//你可以這樣使用jQuery配置css20var div = $('#test-highlight-css');21div.addClass('highlight');

4、隱藏和顯示DOM

var a = $('a[target=_blank]'); a.hide(); // 隱藏 a.show(); // 顯示31var a = $('a[target=_blank]');2a.hide(); // 隱藏3a.show(); // 顯示

5、獲取DOM信息

//獲取DOM的高寬等信息 // HTML文檔大小: $(document).width(); // 800 $(document).height(); // 3500//操作DOM節點的屬性 <div id="test-div" name="Test" start="1">...</div> var div = $('#test-div'); div.attr('data'); // undefined, 屬性不存在 div.attr('name'); // 'Test' div.attr('name', 'Hello'); // div的name屬性變為'Hello' div.removeAttr('name'); // 刪除name屬性 div.attr('name'); // undefined//獲取和設置對應value值 input.val(); // 'test' input.val('abc@example.com'); // 文本框的內容已變為abc@example.com191//獲取DOM的高寬等信息2// HTML文檔大小:3$(document).width(); // 8004$(document).height(); // 3500567//操作DOM節點的屬性8<div id="test-div" name="Test" start="1">...</div>9var div = $('#test-div');10div.attr('data'); // undefined, 屬性不存在11div.attr('name'); // 'Test'12div.attr('name', 'Hello'); // div的name屬性變為'Hello'13div.removeAttr('name'); // 刪除name屬性14div.attr('name'); // undefined151617//獲取和設置對應value值18input.val(); // 'test'19input.val('abc@example.com'); // 文本框的內容已變為abc@example.com
還要提一下的是，jQuery中還有一個方法叫做prop()，和attr()是類似的，但是對于某些可以沒有值的屬性來說，處理方式兩者有所不同，例如：<input id="test-radio" type="radio" name="test" checked value="1">11<input id="test-radio" type="radio" name="test" checked value="1">
以上代碼中的checked，通常我們寫作?checked="checked"，但是在HTML5中是可以直接寫 checked 這種方式的，兩者對于其的處理方式是：var radio = $('#test-radio'); radio.attr('checked'); // 'checked' radio.prop('checked'); // true31var radio = $('#test-radio');2radio.attr('checked'); // 'checked'3radio.prop('checked'); // true
prop()的返回值更合理一些，不過，用 is() 方法判斷更好：var radio = $('#test-radio'); radio.is(':checked'); // true21var radio = $('#test-radio');2radio.is(':checked'); // true
類似的屬性還有selected，處理時最好用is(':selected')。

6、添加DOM

之前我們提到過，要添加DOM的話可以使用html()這種方式，原始簡單粗暴。
實際上有個更好的方法 append()，它不僅像html()一樣可以直接添加片段，還可以傳入原始的DOM對象、jQuery對象和函數對象：// 創建DOM對象: var ps = document.createElement('li'); ps.innerHTML = '<span>Pascal</span>'; // 添加DOM對象: ul.append(ps);// 添加jQuery對象: ul.append($('#scheme'));// 添加函數對象: ul.append(function (index, html) {return '<li><span>Language - ' + index + '</span></li>'; });x1// 創建DOM對象:2var ps = document.createElement('li');3ps.innerHTML = '<span>Pascal</span>';4// 添加DOM對象:5ul.append(ps);67// 添加jQuery對象:8ul.append($('#scheme'));910// 添加函數對象:11ul.append(function (index, html) {12 ? ?return '<li><span>Language - ' + index + '</span></li>';13});
append() 把DOM添加到最后，相應的 prepend() 把DOM添加到最前。
特別注意：如果要添加的DOM節點已經存在于HTML文檔中，它會首先從文檔移除，然后再添加，換句話說，對于已經存在于HTML中的DOM節點，可以使用append()方法達到移動的目的。
和append方法很類似的有個方法叫做 after()，其作用是在被選元素后插入指定的內容，仔細看看區別在于：

• append() 是在被選元素的結束標簽前面(即改被選元素的內部)插入指定內容
  
• after() 是在被選元素的結束標簽后面（即該被選元素的外部）插入指定的內容
  

也就是說，append() 實際上是類似于在某個節點中添加其子節點，而after()是某個節點之后添加兄弟節點，也就是說，after()是用于同級節點的，對應的，還有before()方法。

7、刪除DOM

拿到對應的DOM節點的jQuery對象以后，直接調用 remove() 方法就可以刪除了，如果該jQuery對象包含多個DOM節點，還可以實現批量刪除。

轉載于:https://www.cnblogs.com/deng-cc/p/6684044.html

總結

以上是生活随笔為你收集整理的06jQuery-04-DOM操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。