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()