JQuery学习17篇(jQuery对象的遍历)

最新推荐文章于 2025-11-27 12:57:01 发布

原创最新推荐文章于 2025-11-27 12:57:01 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #javascript #js #jQuery对象的遍历 #前端开发

本文介绍了一种使用JQuery进行对象遍历的方法，通过具体的示例代码展示了如何实现复选框的反选功能，包括面向过程和函数式的实现思路。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习17篇(jQuery对象的遍历)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
input[type=button] {
	width: 100px;
}

input[type=checkbox] {
	width: 20px;
	height: 20px;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习17篇(jQuery对象的遍历)</h3>
	<input type ="button"value="反选" onclick="opposite()"/><br/>
		<p>令狐冲:
		<input type ="checkbox" value="linghuchong"/></p>
		<p>韦小宝:
		<input type ="checkbox" value="weixiaobao"/></p>
		<p>张无忌:
		<input type ="checkbox" value="zhangwuji"/></p>
		<p>杨过:
		<input type ="checkbox" value="yangguo"/></p>
		<p>郭靖:
		<input type ="checkbox" value="guojing"/></p>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//面向过程的思路
/*
function opposite() {
	var checkboxs = $('input:checkbox');
	for (var index = 0; index < checkboxs.length; index++) {
		if ($(checkboxs[index]).prop('checked')) {
			$(checkboxs[index]).prop('checked', false);
		}else{
			$(checkboxs[index]).prop('checked', true);
		}
	}
}
*/
/*
function opposite() {
	var checkboxs = $('input:checkbox');
	for (var index = 0; index < checkboxs.length; index++) {
		if (checkboxs[index].checked) {
			checkboxs[index].checked = false;
		}else{
			checkboxs[index].checked = true;
		}
	}
}
*/

//面向函数式思路,回调函数
//在回调函数中, this是谁? 
//在循环过程中, 循环到哪个DOM对象, 回调函数中的this就指向哪个DOM对象
/*
function opposite() {
	$('input:checkbox').each(function(){
		console.log(this);
		if ($(this).prop('checked')) {
			$(this).prop('checked', false);
		}else{
			$(this).prop('checked', true);
		}
	});
}
*/

/*
function opposite() {
	$('input:checkbox').each(function() {
		console.log(this);
		if (this.checked) {
			this.checked = false;
		} else {
			this.checked = true;
		}
	});
}
*/


function opposite() {
	$('input:checkbox').each(function() {
		console.log(this);
		//简化写法
		this.checked = !this.checked;
	});
}
</script>
</html>