025_元素集合
1. add()方法
1.1. add()方法將元素添加到匹配元素的集合中。
1.2. 語法 1
$(selector).add(selector)1.3. 語法 2
$(selector).add(elements)1.4. 語法 4
$(selector).add(jQueryObject)1.5. 例子
1.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>add()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('ul.first').find('.foo').add('.bar').add(document.getElementById('sl1')).add($('span')).css('background-color', 'green');});</script></head><body> <span>列表1:</span><ul class="first"><li class="foo">list item 1</li><li>list item 2</li><li class="bar">list item 3</li></ul><span>列表2:</span><ul class="second"><li id="sl1">list item 1</li><li>list item 2</li><li class="bar">list item 3</li></ul></body> </html>1.5.2. 效果圖
2. has()方法
2.1. has()方法將匹配元素集合縮減為擁有匹配指定選擇器或DOM元素的后代的子集。
2.2. 語法
$(selector).has(selector)2.3. 參數
2.4. 如果給定一個表示DOM元素集合的jQuery對象, .has()方法用匹配元素的子集來構造一個新的jQuery對象。所使用的選擇器用于檢測匹配元素的后代; 如果任何后代元素匹配該選擇器, 該元素將被包含在結果中。
2.5. 例子
2.5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>has()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("ul").has("#sl1").css('background-color', 'red');});</script></head><body> <span>列表1:</span><ul class="first"><li class="foo">list item 1</li><li>list item 2</li><li class="bar">list item 3</li></ul><span>列表2:</span><ul class="second"><li id="sl1">list item 1</li><li>list item 2</li><li class="bar">list item 3</li></ul></body> </html>2.5.2. 效果圖
3. is()方法
3.1. is()方法根據選擇器、元素或jQuery對象來檢測匹配元素集合, 如果這些元素中至少有一個元素匹配給定的參數, 則返回true。
3.2. 語法
$(selector).is(selector)3.3. 參數
3.4. 實例
<ul><li>list <strong>item 1</strong></li><li><span>list item 2</span></li><li>list item 3</li> </ul>$("ul").click(function(event) {var $target = $(event.target);if ($target.is("li")) {$target.css("background-color", "red");} });3.5. 上例, 當用戶點擊的是第一個列表項中的單詞"list"或第三個列表項中的任何單詞時, 被點擊的列表項會被設置為紅色背景。不過, 當用戶點擊第一個列表項中的item 1 或第二個列表項中的任何單詞時, 都不會有任何變化, 這是因為這上面的情況中, 事件的目標分別是<strong>是<span>。
3.6. 使用函數
3.6.1. is()方法的第二種用法是, 對基于函數而非選擇器的相關元素的表達式進行求值。對于每個元素來說, 如果該函數返回true, 則.is()也返回true。
3.7. 例子
3.7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>is()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("ul").click(function(event) {var $target = $(event.target);if ($target.is("li")) {$target.css("background-color", "red");}});$("td").click(function() {var $td = $(this),isWithTwo = $td.is(function() {return $('strong', this).length === 2;});if(isWithTwo) {$td.css("background-color", "green");} else {$td.css("background-color", "red");}});});</script></head><body> <ul><li>list <strong>item 1</strong></li><li><span>list item 2</span></li><li>list item 3</li></ul><table border="1"><tr><td><strong>table</strong> item 1 - one strong tag</td></tr><tr><td><strong>table</strong> item <strong>2</strong> - two <span>strong tags</span></td></tr><tr><td>table item 3</td></tr><tr><td>table item 4</td></tr><tr><td>table item 5</td></tr></table></body> </html>3.7.2. 效果圖
4. slice()方法
4.1. slice()方法把匹配元素集合縮減為指定的指數范圍的子集。
4.2. 語法
$(selector).slice(start,end)4.3. 參數
4.4. 如果給定一個表示DOM元素集合的jQuery對象, .slice()方法用匹配元素的子集構造一個新的jQuery對象。已應用的index參數集合中其中一個元素的位置; 如果省略end參數, 則index之后的所有的所有元素都會包含在結果中。
4.5. jQuery的.slice()方法模仿了JavaScript數組對象的.slice()方法。它所模仿的特性之一是向start或end參數傳遞負數的能力。如果提供負數, 則指示的是從集合結尾開始的一個位置, 而非從開頭。
4.6. 例子
4.6.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>slice()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('.first li').slice(2).css('background-color', 'red');$('.second li').slice(2, 4).css('background-color', 'green');$('.third li').slice(-3, -1).css('background-color', 'yellow');});</script></head><body> <span>列表1:</span><ul class="first"><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li><li>list item 6</li></ul><span>列表2:</span><ul class="second"><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li><li>list item 6</li></ul><span>列表3:</span><ul class="third"><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li><li>list item 6</li></ul></body> </html>4.6.2. 效果圖
總結
- 上一篇： 024_堆栈元素
- 下一篇： 026_元素执行函数