jQuery-CSDN博客

本文链接：https://blog.csdn.net/qq_63749263/article/details/134092431

jQuery是基于js而生，对象可以在jQuery和js之间进行转变，jQuery的优点在于它对js的部分代码进行了封装，最典型的特征就是我们无须在进行for循环为一个元素赋值或者设置样式，我们可以一键同时修改和赋值，它较为灵活的可以任意选择操作某个元素。

下面通过两个案例来进行比较

通过js实现

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>08-左到右右到左.html</title>
		<style type="text/css">
			BODY {
				font-family: "宋体";
				font-size: 12px;
				margin: 0px 0px 0px 0px;
				overflow-x: no;
				overflow-y: no;
				background-color: #B8D3F4;
			}

			td {
				font_size: 12px;
			}

			.default_input {
				border: 1px solid #666666;
				height: 18px;
				font-size: 12px;
			}

			.default_input2 {
				border: 1px solid #666666;
				height: 18px;
				font-size: 12px;
			}

			.nowrite_input {
				border: 1px solid #849EB5;
				height: 18px;
				font-size: 12px;
				background-color: #EBEAE7;
				color: #9E9A9E;
			}

			.default_list {
				font-size: 12px;
				border: 1px solid #849EB5;
			}

			.default_textarea {
				font-size: 12px;
				border: 1px solid #849EB5;
			}

			.nowrite_textarea {
				border: 1px solid #849EB5;
				font-size: 12px;
				background-color: #EBEAE7;
				color: #9E9A9E;
			}

			.wordtd5 {
				font-size: 12px;
				text-align: center;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #b8c4f4;
			}

			.wordtd {
				font-size: 12px;
				text-align: left;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #b8c4f4;
			}

			.wordtd_1 {
				font-size: 12px;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #516CD6;
				color: #fff;
			}

			.wordtd_2 {
				font-size: 12px;
				text-align: right;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #64BDF9;
			}

			.wordtd_3 {
				font-size: 12px;
				text-align: right;
				vertical-align: top;
				padding-top: 6px;
				padding-right: 5px;
				padding-bottom: 3px;
				padding-left: 5px;
				background-color: #F1DD34;
			}

			.inputtd {
				font-size: 12px;
				vertical-align: top;
				padding-top: 3px;
				padding-right: 3px;
				padding-bottom: 3px;
				padding-left: 3px;
			}

			.inputtd2 {
				text-align: center;
				font-size: 12px;
				vertical-align: top;
				padding-top: 3px;
				padding-right: 3px;
				padding-bottom: 3px;
				padding-left: 3px;
			}

			.tablebg {
				font-size: 12px;
			}

			.tb {
				border-collapse: collapse;
				border: 1px outset #999999;
				background-color: #FFFFFF;
			}

			.td2 {
				line-height: 22px;
				text-align: center;
				background-color: #F6F6F6;
			}

			.td3 {
				background-color: #B8D3F4;
				text-align: center;
				line-height: 20px;
			}

			.td4 {
				background-color: #F6F6F6;
				line-height: 20px;
			}

			.td5 {
				border: #000000 solid;
				border-right-width: 0px;
				border-left-width: 0px;
				border-top-width: 0px;
				border-bottom-width: 1px;
			}

			.tb td {
				font-size: 12px;
				border: 2px groove #ffffff;
			}

			.noborder {
				border: none;
			}

			.button {
				border: 1px ridge #ffffff;
				line-height: 18px;
				height: 20px;
				width: 45px;
				padding-top: 0px;
				background: #CBDAF7;
				color: #000000;
				font-size: 9pt;
				font-family: "宋体";
			}

			.textarea {
				font-family: Arial, Helvetica, sans-serif, "??";
				font-size: 9pt;
				color: #000000;
				border-bottom-width: 1px;
				border-top-style: none;
				border-right-style: none;
				border-bottom-style: solid;
				border-left-style: none;
				border-bottom-color: #000000;
				background-color: transparent;
				text-align: left
			}
		</style>

		<script type="text/javascript">

		</script>


	</head>
	<body>
		<div
			style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
			<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
				style="margin:15px 0px 0px 15px;">
				<tr>
					<td width="126">
						<select name="first" multiple size="10" class="td3" id="first">
							<option value="选项1">选项1</option>
							<option value="选项2">选项2</option>
							<option value="选项3">选项3</option>
							<option value="选项4">选项4</option>
							<option value="选项5">选项5</option>
							<option value="选项6">选项6</option>
							<option value="选项7">选项7</option>
							<option value="选项8">选项8</option>
						</select>
					</td>

					<td width="69" valign="middle">
						<input name="add" id="add" type="button" onclick="moveAngle('first','second')" class="button"
							value="-->" />
						<input name="add_all" id="add_all" onclick="moveAll('first','second')" type="button"
							class="button" value="==>" />
						<input name="remove" id="remove" type="button" onclick="moveAngle('second','first')"
							class="button" value="&lt;--" />
						<input name="remove_all" id="remove_all" onclick="moveAll('second','first')" type="button"
							class="button" value="&lt;==" />
					</td>
					<td width="127" align="left"><select name="second" size="10" multiple="multiple" class="td3"
							id="second">
							<option value="选项9">选项9</option>
						</select>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
	function moveAll(f, s) {
		var firstObj = document.getElementById(f)
		var secondObj = document.getElementById(s)
		for (var i = 0; i < firstObj.options.length; i++) {
			secondObj.appendChild(firstObj.options[i])
		}
	}

	function moveAngle(f, s) {
		var firstObj = document.getElementById(f)
		var secondObj = document.getElementById(s)
		for (var i = 0; i < firstObj.options.length; i++) {
			if (firstObj.options[i].selected) {
				secondObj.appendChild(firstObj.options[i])
				i--
			}
		}
	}
</script>

jQuery代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			select {
				width: 100px;
				height: 140px;
			}

			div {
				width: 130px;
				float: left;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="left">
			<select multiple="multiple" id="sel01">
				<option value="opt01">选项 1</option>
				<option value="opt02">选项 2</option>
				<option value="opt03">选项 3</option>
				<option value="opt04">选项 4</option>
				<option value="opt05">选项 5</option>
				<option value="opt06">选项 6</option>
				<option value="opt07">选项 7</option>
				<option value="opt08">选项 8</option>
			</select>

			<button>选中添加到右边</button>
			<button>全部添加到右边</button>
		</div>
		<div id="rigth">
			<select multiple="multiple" id="sel02">
			</select>
			<button>选中删除到左边</button>
			<button>全部删除到左边</button>
		</div>
	</body>
</html>
<script src="../js/jquery-1.7.2.js"></script>
<script>
	$(":button:eq(0)").click(function() {
		$("select option:checked").appendTo("#sel02")
	})
	$(":button:eq(1)").click(function() {
		$("select option").appendTo("#sel02")
	})
	$(":button:eq(2)").click(function() {
		$("select option:checked").appendTo("#sel01")
	})
	$(":button:eq(3)").click(function() {
		$("select option").appendTo("#sel01")
	})
</script>