大致介紹　　

jQuery作為JavaScript庫，繼承并發(fā)揚了JavaScript對DOM對象操作的特性，使開發(fā)人員能方便的操作DOM對象。

jQuery中的DOM操作

看看DOM操作都有哪些

逐一來看

先寫一份HTML代碼，后面的代碼將操作這份HTML代碼

<p title="選擇你最喜歡的水果">你最喜歡的水果？</p>
<ul>
 <li title="蘋果">蘋果</li>
 <li title="橘子">橘子</li>
 <li title="菠蘿">菠蘿</li>
</ul>

查找節(jié)點

1、查找元素節(jié)點

查找節(jié)點可以用各種各樣的選擇器來查找

$('ul li');

2、查找屬性節(jié)點

可以用attr()方法，參數(shù)是一個的時候是查找屬性，兩個的時候是設(shè)置屬性

console.log($('li:eq(2)').attr('title'));//菠蘿

創(chuàng)建節(jié)點

1、創(chuàng)建元素節(jié)點

var $li_1 = $('<li></li>');

2、創(chuàng)建文本節(jié)點

var $li_1 = $('<li>香蕉</li>');

3、創(chuàng)建屬性節(jié)點

var $li_1 = $('<li title="香蕉">香蕉</li>');

插入節(jié)點

1、向每個匹配的元素追加內(nèi)容

$('li:eq(1)').append('<p>香蕉</p>');

2、將匹配的元素追加到指定元素中

$('<p>香蕉</p>').appendTo('li:eq(1)');

這兩種方法都是進行同一個操作，prepend()和prependTo()與上述方法類似，不同之處就是在元素內(nèi)部前插入內(nèi)容

3、在每個匹配的元素之后插入內(nèi)容

$('li:eq(1)').after('<p>香蕉</p>');

4、將匹配的元素插入到指定的元素后面

$('<p>香蕉</p>').insertAfter('li:eq(1)');

這兩種方法都是進行同一個操作，before()和insertBefore()與上述方法類似，不同之處就是在元素前插入內(nèi)容

刪除節(jié)點

1、remove()方法

當(dāng)某個節(jié)點用了remove()方法之后，該節(jié)點所包含的所有后代節(jié)點都將同時刪除。這個方法的返回值是一個指向已被刪除的節(jié)點的引用，因此可以在后面再使用這些元素

var $li = $('li:eq(1)').remove();
$li.appendTo('ul');

remove（）方法也可以選擇性的刪除元素

$('ul li').remove('li[title="菠蘿"]');

2、detach()方法

detach()方法和remove()方法用法一樣，不同點是detach()方法，所有綁定的事件、附加的數(shù)據(jù)等都會保留下來

$('ul li').click(function(){
 alert($(this).html());
});
 var $li = $('ul li:eq(1)').detach();
$li.appendTo('ul');//點擊事件會保存下來

3、empty()方法

empty()方法并不是刪除節(jié)點而是清空節(jié)點

$('ul li:eq(2)').empty();

復(fù)制節(jié)點

1、clone()方法

$('ul li').click(function(){
$(this).clone(true).appendTo($('ul'));

傳入?yún)?shù)true時，會復(fù)制元素中所綁定的事件

替換節(jié)點

1、replaceWith()和replaceAll()

replaceWith()方法的作用是將所有匹配的元素都替換成指定的元素

$('p').replaceWith('<p>香蕉</p>');

replaceAll()方法只是將replaceWith()方法翻過來了

$('<p>香蕉</p>').replaceAll('p');

包裹節(jié)點

1、wrap()方法

將某個節(jié)點用其他的標記包裹起來，如果是一組節(jié)點，那么就會包裹這一組節(jié)點里的每個節(jié)點

 $('li').wrap('<b></b>');

2、wrapAll()方法

與wrap()方法不同的是，即使是一組節(jié)點，也只會用一個節(jié)點包裹

$('li').wrapAll('<b></b>');

3、wrapInner()方法

將匹配的元素的子內(nèi)容（包括文本節(jié)點）用其他結(jié)構(gòu)化的標記包裹

屬性操作

1、獲取屬性和設(shè)置屬性

attr()方法傳遞一個參數(shù)的時候是獲取屬性，傳遞兩個參數(shù)的時候是設(shè)置屬性

$('p').attr('title','you title');

2、刪除屬性

removeAttr()方法

$('p').removeAttr('title');

樣式操作

1、獲取樣式和設(shè)置樣式

可以用attr()方法

2、追加樣式

addClass()是在原有的樣式上添加樣式

$('p').addClass('another');

3、移除樣式

removeClass()方法可以刪除class屬性，如果有多個需要刪除要用空格將他們分隔，如果不傳入?yún)?shù)則表示移除全部class

$('p').removeClass('another');

4、切換樣式

toggle()方法是交替執(zhí)行代碼

$('p').toggle(function(){
 // 函數(shù)1
},function(){
 // 函數(shù)2
 });

toggleClass()方法控制樣式上的重復(fù)切換，如果類名存在就刪除它，如果不在就添加它　　

$('p').toggleClass('another');

5、判斷是否含有某個樣式

hasClass()可以用來判斷元素中時候含有某個class，如果有，返回true，否則，返回false

$('p').hasClass('another');

設(shè)置和獲取HTML、文本和值

1、html()方法

此方法類似于innerHTML，可以用來讀取或者設(shè)置某個元素中的HTML內(nèi)容

$('p').html('<b>香蕉</b>');

2、text()方法

類似于innerText,可以用來讀取或者設(shè)置某個元素中的文本內(nèi)容

$('p').text('hello');

3、val()方法

類似于value屬性，可以用來設(shè)置和獲取元素的值。如果元素為多選，則返回一個包含所有選擇的值的數(shù)組

遍歷節(jié)點

1、children()方法

該方法用于取得匹配元素的子元素集合，值考慮子元素不考慮其他后代元素

$('ul').children();

2、next()方法

匹配元素后面緊鄰的同輩元素

$('ul').next();

3、prev()方法

匹配元素前面緊鄰的同輩元素

4、siblings()方法

匹配元素前后所有的同輩元素

5、closest()方法

該方法用于取得最近的匹配元素，首先檢查當(dāng)前元素是否匹配，如果匹配直接返回該元素，否則向上查找父級元素，逐級向上查找，如果什么都沒有找到則返回一個空的jQuery對象。

6、parent()與parents()方法

parent()方法獲得集合中每個匹配元素的父級元素

parents()方法獲得集合中每個元素的祖先元素

CSS-DOM操作

1、css()方法

可以獲取元素的屬性也可以設(shè)置元素的屬性

$('p').css({fontSize:'20px',backgroundColor:'green'});

2、height()方法、innerHeight()方法和outerHeight()方法

height()方法是獲取width屬性，innerHeight()方法獲取的是width + padding,outerHeight()方法獲取的是width + padding + border

3、offset()方法

獲取元素在當(dāng)前可視區(qū)的相對偏移

4、position()方法

獲取元素相對于最近的一個position樣式屬性設(shè)置為relative或者absolute的父元素的相對偏移

5、scrollTop和scrollLeft()方法

獲取元素的滾動條距離頂端的距離和左側(cè)的距離

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

最新評論