jQuery 的文檔操做

     在 js 中也有DOM操做,也能夠進行 增刪改查 ,可是經過 js 的DOM操做會發現,個人天哪,代碼好多.可是 jQuery的文檔操做就少了不少.

    js 中 DOM 的示例 : 

var box = document.getElementsByTagName("ul")[0];
var active = document.createElement("li");
active.linnerHTML = "戰神";
box.appendChlid(active);

 

一 . 插入操做

       父子之間   

 1 . append() 

       語法 : 

父元素.append(子元素);

     解釋 : 追加某元素,在父元素中添加新的子元素,子元素能夠是 ; string(字符串)    ,  element(js對象)  , jQuery元素 .

      示例 : 

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

     注意 : 若是追加的是 jQuery 對象(或者js的DOM對象),那麼這些元素將從原位置上消失,其實就是一個移動操做.

    2 . appendTo()

        語法 : 

子元素.appendTo(父元素);

　　解釋 : 追加到某元素 , 子元素添加到父元素.

$('<li>饅頭.嗷嗷嗷</li>').appendTo($('ul')).addClass('active')

　　注意 : 要添加的元素能夠是 string   element(js對象)    jQuery對象.

   3 . prepend() 

        語法 : 

父元素.prepend(子元素);

　　解釋 : 前置添加,添加到父元素的第一個位置.

$('ul').prepend('<li>我最好看</li>');

   4 . prependTo()  

　　語法 : 

子元素.prependTo(父元素);

　　 解釋 : 前置添加,添加到父元素的第一個位置

$('<a href="www.baidu.com">百度一下</a>').prependTo('ul');

       當元素中有 類名 / ID / 地址 ...時,用雙引 " " 那麼$() 中就要用 單引 ' '    - 別誤會,我怕本身忘. 

          兄弟之間     

    1 . after()

        語法 : 

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

　　 解釋 : 在匹配的元素以後插入元素.

$('ul').after('<h4>我是火娃</h4>')
$('<h5>我是水娃</h5>').insertAfter('ul')

       2 . before() 

          語法 : 

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

　　  解釋 : 在匹配元素以後插入內容.

$('ul').before('<h3>我是大娃</h3>')
$('<h2>我是二娃</h2>').insertBefore('ul')

 

 

二 . 克隆操做

          語法 : 

$(選擇器).clone();

　　  解釋 : 克隆匹配的DOM元素

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

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

 

三 . 修改操做

       1 . replaceWitch()

　　   語法 : 

$(selector).replaceWith(content);

　　   解釋 : 將全部匹配的元素替換成指定 string , js對象 , jQuery對象.

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

       2 . replaceAll()

 　　  語法 : 

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

　　   解釋 :  替換全部.將全部的某個標籤替換成另外一個標籤.(將全部的 h2 標籤替換成 p 標籤)

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

 

 

四 . 刪除操做 

　    1 . remove() 

　　  語法 : 

$(selector).remove(); 

　　  解釋 : 刪除節點後,事件也會刪除(就是說,刪除整個標籤)

$('ul').remove();

　  2 . detach()

　　  語法 : 

$(selector).detach(); 

　　  解釋 : 刪除節點後,事件會保留

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

      3 . empty()

　　  語法 :

$(selector).empty(); 

　　  解釋 : 清空選擇元素中全部後代節點 

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