026_元素执行函数

最新推荐文章于 2025-05-24 12:14:07 发布

原创最新推荐文章于 2025-05-24 12:14:07 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #html5

jQuery学习专栏收录该内容

37 篇文章

订阅专栏

博客主要介绍了jQuery的each()和map()方法。each()方法为每个匹配元素规定运行函数，返回false可停止循环；map()方法将每个元素通过函数传递到匹配集合，生成新的jQuery对象，返回值需用get()处理，还说明了callback函数的返回规则，并给出了两种方法的代码示例及效果图。

1. each()方法

1.1. each()方法规定为每个匹配元素规定运行的函数。返回false可用于及早停止循环。

1.2. 语法

$(selector).each(function(index, element))

1.3. 参数

1.4. 例子

1.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>each()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
				    $("li").each(function(index, element) {
				      	alert('第' + (index + 1) + '元素内容是: ' + $(this).text());
				      	if(index == 1) return false;
				    });
			  	});
			});
		</script>
	</head>
	<body> 
		<button>输出每个列表项的值</button>
		<ul>
			<li>Coffee</li>
			<li>Milk</li>
			<li>Soda</li>
		</ul>
	</body>
</html>

1.4.2. 效果图

2. map()方法

2.1. map()方法把每个元素通过函数传递到当前匹配集合中, 生成包含返回值的新的jQuery对象。

2.2. 语法

$(selector).map(callback(index, domElement))

2.3. 参数

2.4. 由于返回值是jQuery封装的数组, 使用get()来处理返回的对象以得到基础的数组。

2.5. 在callback函数内部, this引用每次迭代的当前DOM元素。该函数可返回单独的数据项, 或者是要被插入结果集中的数据项的数组。如果返回的是数组, 数组内的元素会被插入集合中。如果函数返回null 或undefined, 则不会插入任何元素。

2.6. 例子

2.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>map()方法</title>

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
			    alert($(':checkbox').map(function(index, domElement) {
					return [this.id, domElement.value];
				}).get().join(','));
			
				// jQuery中的get()函数是取得当前页面中所有匹配的DOM元素集合。这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象, 而实际上是元素数组)。如果你想要直接操作DOM 对象而不是jQuery对象, 这个函数非常有用。
				// 其实get()还有一个用处是可以直接通过下标值访问其下标值对应的dom对象, 还记得get()返回的是一个array<element>吧, 已经是一个array对象了, 然可以像操作数组一样以下标去取值了。
				// get()方法的返回值: Array<Element>, 一个DOM数组。
				// get(index)方法的返回值: 数组元素。
			});
		</script>
	</head>
	<body> 
		<form method="post" action="">
	  		<fieldset>
			    <div>
			      	<label for="two">2</label>
			      	<input type="checkbox" value="2" id="two" name="number">
			    </div>
			    <div>
			      	<label for="four">4</label>
			      	<input type="checkbox" value="4" id="four" name="number">
			    </div>
			    <div>
			      	<label for="six">6</label>
			      	<input type="checkbox" value="6" id="six" name="number">
			    </div>
			    <div>
			      	<label for="eight">8</label>
			      	<input type="checkbox" value="8" id="eight" name="number">
			    </div>
	  		</fieldset>
		</form>
	</body>
</html>

2.6.2. 效果图