jQuery之DOM操做

DOM操做

本章主要講查找元素、遍歷元素、建立元素、插入元素、刪除元素、替換元素、複製元素、屬性操做、樣式操做、HTML操做。

查找元素

• 定位頁面元素，能夠直接用jQuery的選擇器

html代碼:
<button id='btn'>按鈕</button>

JavaScript代碼:
var $btn=$('#btn');

• 獲取、設置指定元素的文本內容,相似於DOM中textContent屬性

html代碼:
<button id='btn'>按鈕</button>

JavaScript代碼:
var $btn=$('#btn');
//若是不傳遞任何內容則爲獲取
$btn.text();
//若是給text()傳遞內容則爲設置
$btn.text('新按鈕');

• 獲取、設置指定元素的屬性名的屬性值

html代碼:
<button id='btn'>按鈕</button>

JavaScript代碼:
var $btn=$('#btn');
/*只傳遞第一個參數，則爲獲取該元素指定屬性名的屬性值，
若是傳遞的屬性名不存在該元素上，則爲undefined*/
$btn.attr('id');
/*若是傳遞內容則爲設置，第一個參數傳遞要設置的屬性名稱，
第二個參數傳遞要設置的屬性值，若是第一個參數傳遞的屬性名存在，則爲修改屬性值，
若是第一個參數傳遞的屬性名不存在，則爲添加新的屬性名*/
$btn.attr('class','c1');

• 獲取父元素

parent():只能獲取父級元素，並不能獲取祖先元素，就算你在括號指定獲取的元素，該指定元素若是不是你的父級元素，一樣沒法獲得，若是括號不傳遞任何參數，那它自動獲取父級

html代碼：
<div class="container">
    <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>重慶</li>
    </ul>
</div>
JavaScript代碼：
var $bj=$('#bj');
console.log($bj.parent());

parents():能夠獲取父級以及祖先元素，若是在括號指定元素，它會返回符合指定元素的父級元素以及祖先元素，若是括號裏不傳遞任何參數，它會返回該元素的全部父級元素以及祖先元素

html代碼：
<div class="container">
    <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>重慶</li>
    </ul>
</div>
JavaScript代碼：
var $bj=$('#bj');
console.log($bj.parents());

closest():若是括號不傳遞任何參數，它沒法找到任何內容，括號傳遞指定參數，它會返回符合括號指定的內容以及距離改元素最近的父級或者祖先元素

html代碼：
<div class="container">
    <ul>
        <li id="bj">北京</li>
        <li>天津</li>
        <li>重慶</li>
    </ul>
</div>
JavaScript代碼：
var $bj=$('#bj');
console.log($bj.closest('div'));

• 獲取子元素

children():獲取該元素的全部子級元素，可是不包括後代元素

html代碼：
<div class="container">
    <ul>
        <li id="bj">北京
            <ul>
                <li>東城區</li>
                <li>西城區</li>
                <li>朝陽區</li>
            </ul>
        </li>
        <li>天津</li>
        <li>重慶</li>
    </ul>
</div>

JavaScript代碼：
    var $ul=$('ul:first');
    console.log($ul.children());

find():括號裏傳遞參數，指的是獲取該元素指定的元素，包括子級以及後代元素

HTML代碼：
<div class="container">
    <ul>
        <li id="bj">北京
            <ul>
                <li>東城區</li>
                <li>西城區</li>
                <li>朝陽區</li>
            </ul>
        </li>
        <li>天津</li>
        <li>重慶</li>
    </ul>
</div>

JavaScript代碼：
    var $ul=$('ul:first');
    console.log($ul.find('li'));

• 獲取兄弟元素

next():獲取該元素的下一個相鄰兄弟元素

html代碼：
<div class="container">
    <ul>
        <li>南京</li>
        <li>北京</li>
        <li id="tj">天津</li>
        <li>重慶</li>
        <li>長春</li>
    </ul>
</div>

JavaScript代碼：
    var $tj=$('#tj');
    console.log($tj.next());

prev():獲取該元素的上一個相鄰兄弟元素

html代碼：
<div class="container">
    <ul>
        <li>南京</li>
        <li>北京</li>
        <li id="tj">天津</li>
        <li>重慶</li>
        <li>長春</li>
    </ul>
</div>

JavaScript代碼：
    var $tj=$('#tj');
    console.log($tj.prev());

建立元素

html代碼：
<ul>
    <li>北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代碼：
//建立元素
var $li=$('<li></li>');
//設置文本內容
$li.text('深圳');
//設置屬性
$li.attr('id','l1');

//也能夠直接用簡寫方式
var $li=$('<li class='l1'>深圳</li>');
//而後向頁面添加元素
$('ul').append($li);
//插入指定元素的全部子元素列表的最前面
$(ul).prepend($li);
//插入指定元素的全部子元素列表的外部最前面
$('ul').before($li);
//插入指定元素的全部子元素列表的外部最後面
$('ul').after($li);

刪除元素

• remove():那個元素調用，就哪一個元素被刪除

html代碼:
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代碼：
$('#bj').remove();

• empty():元素調用此方法，能夠將該元素全部的子級以及後代所有清除

html代碼:
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代碼：
$('#city').empty();

替換元素

• replaceWith():用被替換的元素調用此方法，參數傳入替換的元素

html代碼：
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代碼：
    $('#bj').replaceWith($('<li id="cc">深圳</li>'));

• replaceAll():用替換元素調用此方法，括號裏面傳入被替換的元素

html代碼：
<ul id="city">
    <li id="bj">北京</li>
    <li>南京</li>
    <li>天津</li>
</ul>

JavaScript代碼：
    $('<li class="bd">保定</li>').replaceAll($('#bj'));

複製元素

• clone()方法:參數傳遞的是布爾值，若是爲true：不但要複製元素，屬性文本，還會將該元素綁定的元素一塊兒複製過來，能夠說是複製一切；若是爲false：那麼只複製元素，文本，屬性，可是不會複製該元素綁定的元素

html代碼：
<button id="btn">按鈕</button>

JavaScript代碼：  

var $btn=$('#btn');
$btn.click(function(){
    console.log('this is clone');
});

var $copy=$btn.clone(true);
$('body').append($copy);

屬性操做

• removeAttr():相似於DOM中的removeAttribute(),元素調用此方法刪除自身存在的屬性，括號裏能夠接收傳入指定要刪除的屬性名稱

樣式操做

• attr():第一個參數是屬性名，第二個參數是屬性值，若是在括號裏只傳遞一個參數，那將是獲取屬性名的值，若是兩個參數都傳入，那就是爲這個元素添加新的屬性名和屬性值，若是該元素存在一樣的屬性名，那麼將替換新的

html代碼:
<button>按鈕</button>

JavaScript代碼:
$('button').attr('id','btn');

• addClass():用來操做class屬性的，爲該元素添加新的class

html代碼:
<button class='btn'>按鈕</button>

JavaScript代碼:
$('button').addClass('btn1');

• removeClass():一樣用來操做class屬性的，刪除該元素已存在的class屬性，括號傳入class屬性的值

html代碼:
<button class='btn'>按鈕</button>

JavaScript代碼:
$('button').removeClass('btn');

• toggleClass():也是操做class屬性的，用於兩個class屬性間的切換，參數傳入指定的class屬性的值，若是該元素存在指定的class，則刪除，若是不存在則添加
• hasClass()：一樣操做class屬性的，括號裏一樣傳入指定class屬性的值，用於判斷該元素是否存在此class屬性

html代碼:
<button class='btn'>按鈕</button>

JavaScript代碼:
$('button').hasClass('btn');//true

• css():操做css樣式，給指定元素添加指定的樣式屬性值

html代碼:
<button class='btn'>按鈕</button>

JavaScript代碼:
//能夠用這種方式來添加css屬性
$('button').css('width','600px');

//也能夠用對象形式來批量添加css屬性
$('button').css({
    width:'600px',
    height:'600px'
});