jQuery 實戰讀書筆記之第三章：操做 jQuery 集合

建立新 HTML 元素

$('<div>Hello</div>');

/*
建立等價的空 div 元素
*/
$('<div>');
$('<div />');
$('<div></div>');

/*
建立帶屬性的 圖片元素
*/
$('<img>', 
{
    src: '../images/little.bear.png',
    alt: 'Little Bear',
    title: 'I woof in your general direction',
    click: function(){
        alert($(this).attr('title'));
    }
}).appendTo('body');

 

管理 jQuery 集合

/*
jQuery 容許把 jQuery 集合當作 JavaScript 數組進行處理，因此能夠用簡單的數組索引來讀取集合中的元素。
*/
var $imgAlt = $('img[alt]');
console.log('數組長度爲：' + $imgAlt.length);
var firstImgAlt = $('img[alt]')[0];  //獲取到的是一個原始的 DOM 元素
console.log('返回第一個元素：');
console.log(firstImgAlt);

/*
使用 get([index]) 方法
*/
var imageElement = $('img[alt]').get(0);  //和上面的用索引讀取的代碼效用一致
/*
使用負數作索引，就會從集合尾部開始計算。-1 查找倒數第一個元素
*/
var lastImageElement = $('img[alt]').get(-1);
console.log('返回最後一個元素：');
console.log(lastImageElement);
/*
沒有索引參數，那麼返回的就是 JavaScript 數組
*/
var imageArray = $('img[alt]').get();
console.log(imageArray);

/*
想得到一個包含特定元素的 jQuery 對象，而不是原始對象
*/
console.log('獲取同一個特定元素（做爲 jQuery 對象而不是原始對象）的三種寫法的結果：');
var $obj1 = $($('img[alt]').get(2));
console.log($obj1 instanceof jQuery);  //判斷是否爲 jQuery 對象
console.log($obj1);
var $obj2 = $('img[alt]:eq(2)');
console.log($obj2);
var $obj3 = $('img[alt]').eq(2);  //推薦使用這種方法，使用 eq() 方法的性能比使用 :eq 篩選器的性能高，返回包含一個或多個元素的 jQuery 集合
console.log($obj3);

/*
first() 函數，對比 :first 篩選器
*/
var $firstObj = $('img[alt]').first();
console.log('first() 函數：');
console.log($firstObj);

/*
last() 函數，對比 :last 篩選器
*/
var $lastObj = $('img[alt]').last();
console.log('last() 函數：');
console.log($lastObj);

/*
做爲數組返回 DOM 元素的集合
*/
var allPUL = $('p + ul').toArray();  //返回 ul 標籤，且 ul 標籤緊鄰的兄弟節點爲 p 標籤
console.log('toArray 返回 DOM 元素數組集合：')
console.log(allPUL);

/*
index() 函數，獲取索引，索引從 0 開始
*/
var index = $('.levels > li').index($('#li2'));
console.log('#li2 的索引是（以對應的 jQuery 對象做爲參數）： ' + index);
index = $('.levels > li').index(document.getElementById('li2'));
console.log('#li2 的索引是（以對應的 JavaScript 對象做爲參數）： ' + index);
index = $('.levels > li').index('#li2');
console.log('#li2 的索引是（以對應的 selector 做爲參數）： ' + index);  //結果爲 -1，傳 selector 字符串做爲參數不能夠嗎？？？

index = $('#li3').index();
console.log('無參 index() 方法返回的 #li3 的 index：' + index);

index = $('.levels > li[data-level=4]').index();
console.log('無參 index() 方法返回的.leves > li[data-level=4] 的 index：' + index);



/*
使用關係獲取集合
*/
/*
返回集合中全部元素的祖先，既包含直接父節點也包含更高層的祖先節點，可是不包含文檔根節點（document），但選中的祖先節點只會出現一次
*/
var $parents = $('#hibiscus').parents();
console.log('id爲 #hibiscus 的全部祖先節點：');
console.log($parents);

/*
經過 parents(selector) 對返回的祖先節點進行篩選
*/
$parents = $('#hibiscus').parents('div');
console.log('id爲 #hibiscus 的全部祖先節點且節點標籤爲 div：');
console.log($parents);

/*
返回集合中全部元素的直接父節點元素，重複的父節點元素只返回一次
*/
var $parent = $('img, li').parent();
console.log('"img, li" 的父元素：');
console.log($parent);

/*
返回集合中全部元素的子元素，參數 selector 能夠用於篩選
返回的是直接子元素
*/
var $bodyChildren = $('body').children();
console.log('body 的全部子元素，不包括文本節點：')
console.log($bodyChildren);

/*
children() 方法不返回文本節點，要處理文本節點使用 contents() 方法，參數 selector 能夠用於篩選
*/
var $bodyContent = $('body').contents();
console.log('body 的全部子元素，包括文本節點：')
console.log($bodyContent);

/*
搜索遍歷集合中的全部元素的子節點（深度優先算法）
*/
var $set = $('#sample-dom').find('[title]');
console.log('find() 方法深度優先搜索：');
console.log($set);

/*
返回集合中的直接兄弟節點
若是是最後一個節點，那麼返回的集合長度爲0
*/
var $nextImg = $('#hibiscus').next();
console.log('next() 方法返回集合中的直接兄弟節點：');
console.log($nextImg);

var $nextAllImg = $('#hibiscus').nextAll();
console.log('nextAll() 方法返回集合中的全部兄弟節點：');
console.log($nextAllImg);

/*
返回集合中的前直接兄弟節點
若是是第一個節點，那麼返回的集合長度爲0
*/
var $prevImg = $('#cozmo').prev();
console.log('prev() 方法返回集合中的前直接兄弟節點：');
console.log($prevImg);

/*
返回的集合能夠注意下順序，是從下往上
*/
var $prevAllImg = $('#cozmo').prevAll();
console.log('prevAll() 方法返回集合中的前全部兄弟節點：');
console.log($prevAllImg);

/*
返回集合中元素的兄弟節點
*/
var $siblings = $('#cozmo').siblings();
console.log($siblings);


/*
集合中添加新元素
add(selector[, context]): selector 參數能夠是包含選擇器的字符串、HTML 片斷、DOM 元素、DOM 元素數組或者 jQuery 對象
*/
$('img[alt]').addClass('red-border').add('img[title]').addClass('opaque');

/*
刪除集合元素
使用 not() 方法鏈式調用選擇器來剔除某些元素
not(selector)：建立不包含選擇器 selecotr 參數匹配元素的新集合，注意這裏是把符合條件的篩選去掉了
*/
var $not = $('img[title]').not('[title*="puppy"]');  //等同的單個選擇器  img[title]:not([title*='puppy'])
console.log('not 方法：');
console.log($not);

/*
not() 方法中傳入函數，用於複雜的或者沒法用單個選擇器表達式描述的狀況
符合函數條件的會被篩選掉
*/
var $notWithFunction = $('div').not(function(index){
    return $(this).children().length > 2 && index % 2 === 0;
});
console.log('not() 方法中傳入函數：');
console.log($notWithFunction);


/*
filter(selector) 方法和 not(selector) 方法相反，符合條件的會被篩選出來
*/
var $filtered = $('td').filter(function(){
    return this.innerHTML.match(/^\d+$/);
});
console.log('filter() 方法返回只包含純數字的 td ：');
console.log($filtered);

/*

slice(start[, end])

start：首元素位置爲0

end：返回元素的最後位置，若是爲負數，則表示偏移從末尾開始

*/

var $slice = $('*').slice(0, 4);

console.log('slice() 方法獲取前4個元素：');

console.log($slice);

/*

has(selector)

測試全部 jQuery 集合中的子元素，返回只包含匹配 selector 選擇器的子元素的新集合

*/

var $has = $('div').has('img[alt]');

console.log('has() 方法返回匹配 selector 選擇器的子元素的新集合：');

console.log($has);

/*

map(callback)

須要轉換集合的元素，根據一個集合計算出另外一個集合

在集合中的每一個元素上調用 callback 函數，而後返回值到一個 jQuery 對象中

函數傳遞兩個參數，第一個是集合中元素的索引，第二個是元素自己，元素自己做爲函數的上下文（this）

*/

var $allIds = $('div').map(function(){

return this.id;

});

console.log('map() 方法獲得元素的 id 的集合：');

console.log($allIds);

/*

each(iterator)

遍歷集合中的全部元素，爲每一個元素調用 iterator 函數

函數傳遞兩個參數，第一個是集合中元素的索引，第二個是元素自己，元素自己做爲函數的上下文（this)

返回的集合是原來的 jQuery 集合

*/

var $imgAlts = $('img').each(function(i){

this.alt = 'This is image[' + i + '] with an id of ' + this.id;

});

console.log('each() 方法修改 img 元素的 alt：');

console.log($imgAlts);

/*

is(selector)

肯定集合中是否有元素匹配給定的選擇器

有匹配的返回 true，沒有返回 false

*/

var hasImage = $('*').is('img');

console.log('is() 方法判斷全文元素中是否包含 img 元素：');

console.log(hasImage);

/*

end()

在 jQuery 鏈式調用中使用該方法，在當前調用鏈中結束最近的過濾操做，而後返回匹配元素的集合到以前的狀態

jQuery 對象維護了一個內部棧來保存針對匹配元素集合的修改

*/

$('img').filter('[title]').hide().end().addClass('my-class');

/*

addBack([selector])

把棧上前一個元素集合的元素添加到當前集合裏

*/

$('div').addClass('my-class').find('img').addClass('red-border').addBack().addClass('opaque');