JQuery中的DOM操作主要對(duì)包括：建【新建】逗堵、增【添加】畏陕、刪【刪除】横媚、改【修改】考赛、查【查找】【像數(shù)據(jù)庫操作】酥泛。
我們通過對(duì)比js創(chuàng)建節(jié)點(diǎn)和jquery創(chuàng)建節(jié)點(diǎn)來分析jquery的方便之處
首先我們來看一下使用原生js來創(chuàng)建標(biāo)簽的方法
// 原生JS
var header = document.createElement('div')
header.className = 'header';
document.querySelector('.container').appendChild(header);
接下來我們使用jQuery來創(chuàng)建標(biāo)簽
var header = $('<div class="header">');? ? // 創(chuàng)建標(biāo)簽
$('.container').append(header);? ? // append() 拼接元素
$('.container').append(header);??? //將創(chuàng)建的標(biāo)簽添加到class名為container的div里
我們可以把以上步驟進(jìn)行簡(jiǎn)化
$('<div class="header">').appendTo('.container')
我們可以對(duì)比今豆，使用原生js創(chuàng)建節(jié)點(diǎn)和使用jquery創(chuàng)建節(jié)點(diǎn)，使用jquery明顯要代碼簡(jiǎn)潔柔袁、體積小呆躲，使用靈巧。
一捶索、添加DOM節(jié)點(diǎn)常用的操作：
1插掂、append（）與appendTo（）???? 拼接元素
// var header = $('<div class="header">');? ? ? //創(chuàng)建標(biāo)簽
// $('.container').append(header);? ? ? ? // append() 拼接元素
// header.appendTo($('.container'));? ? ? // appendTo()拼接元素
// header.appendTo('.container');? ? ? // 可以直接把容器的選擇器寫成參數(shù)，而不添加$()
使用jq創(chuàng)建結(jié)構(gòu)的時(shí)候情组，可以同時(shí)創(chuàng)建多個(gè)標(biāo)簽
//當(dāng)創(chuàng)建的標(biāo)簽結(jié)構(gòu)比較簡(jiǎn)單時(shí)燥筷，我們可以使用下面這種方法
$('<div class="header"><h1>我是標(biāo)題</h1></div>').appendTo('.container');
//當(dāng)創(chuàng)建的標(biāo)簽結(jié)構(gòu)比較復(fù)雜箩祥，代碼比較多時(shí)院崇，可以使用ES6的模板字符串來解決這個(gè)問題
//模板字符串使用``代表結(jié)構(gòu)，所有內(nèi)部?jī)?nèi)容袍祖，都是字符串的內(nèi)容底瓣，可以換行寫
//模板字符串內(nèi)部如果需要使用變量的話，直接使用${}蕉陋，在內(nèi)部編寫就可以解析
var str = '我是內(nèi)容';
?$(`<div>
?? ? ? ?? <div>
? ? ? ? ? ? ? <div>${ str }</div>
? ? ? ? ? </div>
???? </div>`).appendTo('body');
2捐凭、使用after（）和before（）進(jìn)行兄弟元素的拼接，將后面的元素拼接在前面元素的上下
$('<h1>h1</h1>').appendTo('.container');? ? ? //在class名為container的div里創(chuàng)建h1
$('<h2>h2/<h2>').appendTo('.container');????? //在class名為container的div里創(chuàng)建h2
$('h2').before('<hr/>');??? //在h2前面添加橫線
$('h1').after('<hr/>');? ? ? //在h1后面添加橫線
3凳鬓、我們也可以使用insertAfter（）和insertBefore（）進(jìn)行兄弟元素拼接? 將前面的元素拼接在后面的元素上下
$('<hr/>').insertBefore('h2');???? //在h2前面添加橫線
$('<hr/>').insertAfter('h1'); ? ? ?? //在h1后面添加橫線
4茁肠、我們還有2個(gè)方法可以直接在父級(jí)所有的子集前面拼接元素
prepend（）和prependTo（）方法
$('<hr/>').prependTo('.container');
$('.container').prepend('<hr/>');
二、替換DOM節(jié)點(diǎn)常用的操作：
1缩举、替換? 使用replaceWith或者replaceAll
先在頁面中添加4個(gè)h2
$('h2:eq(1)').replaceWith('<h1>標(biāo)題</h1>');???? //使用h1標(biāo)題替換第二個(gè)h2標(biāo)題
$('<h1>標(biāo)題</h1>').replaceAll('h2:eq(1)');
三垦梆、刪除dom節(jié)點(diǎn)匹颤，我們有兩種方式
1、清空元素以及元素內(nèi)容托猩，使用remove（）印蓖；
$('<h1>我是被移除的元素</h1>').appendTo('.container').remove();
2、清空標(biāo)簽內(nèi)所有內(nèi)容
如果使用jq同時(shí)創(chuàng)建了多層的標(biāo)簽結(jié)構(gòu)京腥，則返回值代表最外層
$(`<ul>
????? <li>li1</li>
????? <li>li2</li>
????? <li>li3</li>
</ul>`).appendTo('.container').empty(); ?? //清空標(biāo)簽內(nèi)所有內(nèi)容,但保留標(biāo)簽
四赦肃、復(fù)制節(jié)點(diǎn)
使用clone（）；
$('.container').clone().appendTo('body');
以上為一些jquery里DOM元素節(jié)點(diǎn)的增公浪、刪他宛、改、查的方法欠气，后期有新的堕汞、簡(jiǎn)潔的方法繼續(xù)更新。
五晃琳、操作節(jié)點(diǎn)屬性的一些方法
首先讯检，創(chuàng)建標(biāo)簽并拼接：
1、使用html（）方法卫旱，獲取全部?jī)?nèi)容
div.html();? ??
div.html('<h1>我是h1</h1>');? ? ? //如果html（）方法有參數(shù)人灼，則修改內(nèi)容
2、使用text（）方法獲取文本內(nèi)容
div.text();
div.text('我是修改后的文字');? ? ? //text()有參數(shù)的情況和html()類似
3顾翼、val()方法是為了給表單元素的value屬性使用投放。有參則設(shè)置，無參則取值
$(':input').val('1234567890');???? //設(shè)置input標(biāo)簽的value值
console.log($('input').val()); ? ?? //獲取input標(biāo)簽的value值
4适贸、關(guān)于class的操作
添加class值
$('.container').addClass('c1').addClass('c2');???? //一個(gè)標(biāo)簽可以設(shè)置多個(gè)class值灸芳，一個(gè)class也可以給多個(gè)標(biāo)簽設(shè)置
移除class值
$('.container').removeClass('c1');
切換class值
$('.container').toggleClass('abc');???? //此方法多用于動(dòng)畫切換中，比如在點(diǎn)擊事件中添加此方法拜姿，當(dāng)觸發(fā)點(diǎn)擊事件烙样，先判斷有無此class值，若有則刪除蕊肥，若無則添加谒获，可以多次操作進(jìn)行切換
5、attr（）方法
首先創(chuàng)建一個(gè)a標(biāo)簽
$('.link').attr('href');? ? ? //如果attr方法只有一個(gè)參數(shù)壁却，為屬性名批狱，則獲取對(duì)應(yīng)的屬性值
$('.link').attr('href',"http://blog.lidaze.com");? ? ? //如果attr方法有2個(gè)參數(shù)，分別為名稱值展东，為修改或添加屬性值
$('.link').attr({? ? ? //如果attr方法有一個(gè)參數(shù)赔硫，并且為對(duì)象，則可以同時(shí)添加或修改多個(gè)屬性與其對(duì)應(yīng)的值
href:'http://book.lidaze.com',
title:'我是a標(biāo)簽'
});
$('.link').removeAttr('title')???? //移除屬性可以使用removeAttr（）
6盐肃、css（）方法
//css()方法和attr()方法使用幾乎一樣
//css（）賦值標(biāo)簽的樣式
$('.link').css('color');
$('.link').css('color','yellow');
$('.link').css({
color: 'green',
'font-size': '30px'
});
