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);