jQuery DOM 遍歷

children()
//查找合集裏面的子元素
$('.violet').children(':last');

find()

$('.violet').find($('span')); //查找後代元素裏的所有 span 元素
$('span', '.violet'); //此寫法和上面的方式等價

parent()

//查找合集裏面的父元素
$('.violet').parent(':last'); //查找所有 .violet 的父元素裏的最後一個

parents()

//查找合集裏的祖輩元素,返回的是包含零個或一個或多個元素的 juery 對象
$('.violet').parents('.violet-gem'); //遍歷要根目錄,查找所有的 .violet-gem

closest()

//和 parents() 方法類似,但遍歷的起始位置是從父元素開始,返回零個或一個 jQuery 對象
$('div.violet').closest($('.violet-gem')); //只查找到一個 .violet-gem ,就停止遍歷

next()

//快速查找指定元素集合中每一個元素緊鄰的後面同輩元素的元素集合
$('.violet').next(); //查找 .violet 的第一個兄弟元素

prev()

//查找指定元素集合中每一個元素緊鄰的前面同輩元素的元素集合
$('.violet').prev(':last'); //查找所有 .violet 上一個兄弟元素合集裏的最後一個

siblings()

//查找指定元素集合中每一個元素的同輩元素,不包括自己
$('.violet').siblings();

add()

// jQuery 是一個合集對象,通過 $() 方法找到指定的元素合集後可以進行一系列的操作。
// $() 之後就意味着這個合集對象已經是確定的,如果後期需要再往這個合集中添加一新的元素要如何處理?
// jQuery 爲此提供 add 方法,用來創建一個新的 jQuery 對象 ,元素添加到匹配的元素集合中
$('div').add('<p>Violet-gem</p>').appendTo('.violet'); //添加完 p ,這後要把它指定到 .violet 處才能顯示出來
$('li').add('p');

each()

//就是一個 for 循環的迭代器,它會迭代 jQuery 對象合集中的每一個 DOM 元素。每次回調函數執行時,會傳遞當前循環次數作爲參數(從0開始計數)
$("li").each(function (index, element) {
    $(this).css('color', 'violet');
});

$("a").each(function (index, element) {
    if(index % 2){
        $(this).css('color', 'MediumPurple');
    }
});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章