jQuery DOM 操作

創建元素

只需要把DOM字元串傳入$方法即可返回一個 jQuery 對象

var obj = $('<div class="test"><p><span>Done</span></p></div>')

添加元素

.append()

在 a 標簽裡面添加內容是b的p標簽

$( "a" ).append( "<p>b</p>" )

JSBin

其他例子

$( ".inner" ).append( "<p>Test</p>" )
$( "p" ).append( "<strong>Hello</strong>" )
$( "p" ).append( $( "strong" ) )

.appendTo()

相反，把對象插入到目標元素尾部。
即在 a 標簽 裡面添加內容是b的p標簽

$( "<p>b</p>" ).appendTo( "a" )

JSBin

.prepend()

向對象頭部追加內容，用法和append類似，內容添加到最開始

$( ".inner" ).prepend( "<p>Test</p>" )

.prependTo()

也是相反，把對象插入到目標元素頭部。用法和prepend類似

$( "<p>Test</p>" ).prependTo( ".inner" )

.before()

在對象前面（不是頭部，而是外面，相當於插入進來變成鄰居）插入內容。傳遞參數和append類似

$( ".inner" ).before( "<p>Test</p>" )

JSBin

.insertBefore()

相反，把<p>Test</p>對象插入到.inner之前（同樣不是頭部，是同級）

$( "<p>Test</p>" ).insertBefore( ".inner" )

JSBin

.after()

和before相反，在對象後面（不是尾部，而是外面，和對象併列同級）插入內容。參數傳遞和append類似

$( ".inner" ).after( "<p>Test</p>" )

JSBin

..insertAfter()

把<p>Test</p>插入到.inner之後，同前面的.insertBefore用法

$( "<p>Test</p>" ).insertAfter( ".inner" )

JSBin

刪除元素

.remove()

刪除被選元素（及其子元素）

$("#div1").remove();

JSBin

也可以添加一個可選的選擇器參數來過濾匹配的元素

$('div').remove('.test')

JSBin

.empty()

清空被選擇元素內所有子元素

$('body').empty()

.detach()

.detach() 和.remove()一樣，但 .detach()保存所有 jQuery 數據和被移走的元素相關聯。
當需要移走一個元素，不久又將該元素插入DOM時，這種方法很有用。

包裹元素

.wrap()

為每個對象包裹一層HTML結構

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">World</div>
</div>

使用包裹元素

$( ".inner" ).wrap( "<div class='new'></div>" )

查看結果

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">World</div>
  </div>
</div>

.wrapAll()

把所有匹配對象包裹在同一個HTML結構中

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">World</div>
</div>

包裹元素

$( ".inner" ).wrapAll( "<div class='new' />")

查看結果

<div class="container">
   <div class="new">
      <div class="inner">Hello</div>
      <div class="inner">World</div>
   </div>
</div>

.wrapInner()

把匹配對象裡層包裹一個HTML結構

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">World</div>
</div>

包裹元素

$( ".inner" ).wrapInner( "<div class='new'></div>")

查看結果

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">World</div>
  </div>
</div>

.unwrap()

把DOM元素的parent移除，但保留HTML內容。

關於 Text 和 Html

.html()

這是一個讀寫兩用的方法，用於獲取/修改元素的innerHTML

• 當沒有傳遞參數的時候，返回元素的innerHTML
• 當傳遞了一個string參數的時候，修改元素的innerHTML為參數值

範例

$('div').html()

$('div').html('123')

JSBin output

.text()

和.html()類似，操作的是對應原生DOM裡面的innerText值

$('div').text()
$('div').text('123')

JSBin output

原生JS操作DOM回顧

.html() 和 .text() 的區別

即和原生DOM操作中innerHTML和innerText的區別類似

innerHTML屬性作用和innerText類似，但是不是返回元素的文本內容，而是返回元素的HTML結構
innerText是一個可寫屬性，返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容。

innerHTML容易產生安全問題，即 xss 攻擊。

jQuery 屬性/CSS操作

屬性相關

.val()

是一個讀寫雙用的方法，用來處理input的value，當方法沒有參數的時候返回input的value值，當傳遞了一個參數的時候，方法修改input的value值為參數值

$('input').val()

$('input').val('newValue')

.attr()

獲取元素特定屬性的值

$( "em" ).attr( "title" )   //獲取em標簽的titile屬性值

為元素屬性賦值

$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

.removeAttr()

為匹配的元素集合中的元素移除一個屬性（attribute）

$('div').removeAttr('id')  //移除div標簽的id屬性

.removeAttr()方法使用原生的 JavaScript removeAttribute()函數,但是它的優點是可以直接在一個 jQuery 對象上調用該方法，並且它解決了跨瀏覽器的屬性名不同的問題。

.prop() / .removeProp()

這兩個方法是用來操作元素的property的，property和attibute是非常相似的概念，詳情參考 jQuery的 attr 與 prop

CSS 操作

.css()

.css(propertyName) / .css(propertyNames)

使用和attr相似，用來處理元素的css
獲取元素style特定property的值

var color = $( this ).css( "background-color" )

var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
])

.css(propertyName,value)

設置元素style特定property的值

$( this ).css( "background-color", "yellow" )

$( this ).css({
  "background-color": "yellow",  //有中橫線的也可以使用駝峰命名法，但不能在外層加""
  "font-weight": "bolder"
})

.addClass() / .removeClass()

.addClass()

為元素添加class，不是覆蓋原class，是追加，也不會檢查重覆

$( "p" ).addClass( "active" )   //給p標簽添加active css樣式

.removeClass()

移除元素單個/多個/所有class

$( "p" ).removeClass( "active" )   //給p標簽移除active css樣式

.hasClass()

檢查元素是否包含某個class，返回true / false

$( "#mydiv" ).hasClass( "active" )  //檢查id為mydiv的元素是否包含active css樣式

.toggleClass()

toggle是切換的意思，方法用於切換

<div class="test">hello world</div>

第一次執行

$( "div.test" ).toggleClass( "new" )

<div class="test new">hello world</div>

第二次執行

$( "div.test" ).toggleClass( "new" )
<div class="test">hello world</div>

使用案例

利用 jQuery 屬性 CSS操作 實現閃爍效果 Demo

實現播放器ICON按鈕切換效果
方法1
方法2