創建新 HTML 元素 管理 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');