025_元素集合

最新推荐文章于 2021-09-30 13:55:45 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-09-30 13:55:45 发布

阅读量337

点赞数

分类专栏： jQuery学习文章标签： jquery html ajax

本文链接：https://blog.csdn.net/aihiao/article/details/112389028

版权

jQuery学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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> <title>add()方法&l
复制链接

扫一扫