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. 效果图