06-jQuery的文檔操做(重點)

以前js中我們學習了js的DOM操做,也就是所謂的增刪改查DOM操做。經過js的DOM的操做，你們也能發現，大量的繁瑣代碼實現咱們想要的效果。那麼jQuery的文檔操做的API提供了便利的方法供咱們操做咱們的文檔。

看一個以前咱們js操做DOM的例子：

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '趙雲';
oUl.appendChild(oLi);

 

一.插入操做

知識點1：

語法：

父元素.append(子元素)

解釋：追加某元素，在父元素中添加新的子元素。子元素能夠爲：stirng | element（js對象） | jquery元素

代碼以下：

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));

PS:若是追加的是jquery對象那麼這些元素將從原位置上消失。簡言之，就是一個移動操做。

 

知識點2：

語法：

子元素.appendTo(父元素)

解釋：追加到某元素 子元素添加到父元素

$('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')

PS:要添加的元素一樣既能夠是stirng 、element(js對象) 、 jquery元素

 

知識點3：

語法：

父元素.prepend(子元素)；

解釋：前置添加， 添加到父元素的第一個位置

$('ul').prepend('<li>我是第一個</li>')

 

知識點4：

語法：

子元素.prependTo(父元素)；

解釋：前置添加， 添加到父元素的第一個位置

$('<a href="#">路飛學誠</a>').prependTo('ul')

 

知識點5：

語法：

兄弟元素.after(要插入的兄弟元素)；
要插入的兄弟元素.inserAfter(兄弟元素)；

解釋：在匹配的元素以後插入內容 

$('ul').after('<h4>我是一個h3標題</h4>') $('<h5>我是一個h2標題</h5>').insertAfter('ul')

 

知識點6：

語法：

兄弟元素.before(要插入的兄弟元素)；
要插入的兄弟元素.inserBefore(兄弟元素)；

解釋：在匹配的元素以後插入內容 

$('ul').before('<h3>我是一個h3標題</h3>') $('<h2>我是一個h2標題</h2>').insertBefore('ul')

 2、克隆操做

語法：

$(選擇器).clone();

解釋：克隆匹配的DOM元素

$('button').click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其全部的事件處理而且選中這些克隆的副本(簡言之，副本具備與真身同樣的事件處理能力)
  $(this).clone(true).insertAfter(this);
})

3、修改操做

知識點1：

語法：

$(selector).replaceWith(content);

將全部匹配的元素替換成指定的string、js對象、jquery對象。

//將全部的h5標題替換爲a標籤
$('h5').replaceWith('<a href="#">hello world</a>')
//將全部h5標題標籤替換成id爲app的dom元素
$('h5').replaceWith($('#app'));

知識點2：

語法：

$('<p>哈哈哈</p>')replaceAll('h2');

解釋：替換全部。將全部的h2標籤替換成p標籤。

$('<br/><hr/><button>按鈕</button>').replaceAll('h4')

四、刪除操做

知識點1：

語法：

$(selector).remove(); 

解釋：刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）

$('ul').remove();

 

知識點2：

語法：

$(selector).detach(); 

解釋：刪除節點後，事件會保留

var $btn = $('button').detach() //此時按鈕能追加到ul中 $('ul').append($btn)

 

 

知識點3：

語法：

$(selector).empty(); 

解釋：清空選中元素中的全部後代節點

//清空掉ul中的子元素，保留ul $('ul').empty()