JQuery - 隔行换色 / 全选 / 分组折叠 / 省市联动 / 左右选择

最新推荐文章于 2023-11-14 23:29:35 发布

原创最新推荐文章于 2023-11-14 23:29:35 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一系列前端开发实用技巧，包括隔行换色、全选/反选、QQ表情选择、分组折叠/显示、省市联动及左右选择等功能的实现方法，通过jQuery库简化操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

隔行换色

奇数行/ 偶数行各有自己的样式 , 表头行不设置样式 , 鼠标悬停为灰色
在这里插入图片描述

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
	//奇数行设置oddTr的类名 : 类名oddTr中设置样式
	$("tr:gt(0):odd").addClass("oddTr");
	//偶数行设置evenTr的类名 : 类名evenTr中设置样式
    $("tr:gt(0):even").addClass("evenTr");
    //鼠标移入变色，移走还原 : 类名activeTr中设置样式
	$("tr:gt(0)").hover(function () {
		$(this).toggleClass("activeTr");
    })
</script>

全选 / 反选

奇数行/ 偶数行各有自己的样式 , 表头行不设置样式 , 鼠标悬停为灰色
在这里插入图片描述

<script src="../js/jquery-3.3.1.min.js"></script>
	<script>
		// 全选: 让每个选项按钮item与全选按钮checkall状态保持一致
		$("#checkall").click(function () {
			$(".item").prop("checked", this.checked);
        });
		// 反选: 点击反选按钮reverse后,再依次点击一次每个选项按钮item
		$("#reverse").click(function () {
			$(".item").click();
       });

       //功能增加：
       //只有所有的选项item全部选中了，才设置全选按钮checkall为选中状态；否则设置为未选中状态
		$(".item").click(function () {
			//判断是否所有的item，全选中了：判断选中的个数是否等于总个数
			var v = $(".item").length === $(".item:checked").length;
			//设置checkall的选中状态
			$("#checkall").prop("checked", v);
        });
	</script>

QQ表情选择

ul里的表情图片被点击时，要把被点击的图片，添加到word内部最后
在这里插入图片描述

<script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $("ul img").click(function () {
            $(this).clone().appendTo(".word");
        });
    </script>

分组折叠 / 显示

点击哪个分组，就把哪个分组的成员显示出来，其它分组的成员要隐藏
在这里插入图片描述

<body>
	<div>
		<span>分组一</span>
		<a>张三</a>
		<a>李四</a>
		<a>王五</a>
	</div>
	<div>
		<span>分组二</span>
		<a>小明</a>
		<a>小红</a>
		<a>小蓝</a>
	</div>
	<div>
		<span>分组三</span>
		<a>tom</a>
		<a>jerry</a>
		<a>john</a>
	</div>
	<script type="text/javascript" src="./jquery-3.3.1.js" ></script>
	<script type="text/javascript">
		$("a").hide();
		$("span").click(function(){
			//被点击的这一分组的成员显示出来了
			$(this).siblings("a").show(200);
			//其它分组的成员要隐藏起来
			$(this).parent().siblings("div").children("a").hide(200);
		});
	</script>
</body>

省市联动

选择一个省，在市的下拉框里列出来这个省对应的市的选项
在这里插入图片描述

<body>
	<select id="province">
		<option value="">--选择省--</option>
		<option value="0">河南省</option>
		<option value="1">河北省</option>
		<option value="2">山东省</option>
		<option value="3">山西省</option>
	</select>
	<select id="city">
		<option value="">--选择市--</option>
	</select>
	
	<script type="text/javascript" src="./jquery-3.3.1.js" ></script>
	<script type="text/javascript">
		var cities = [
			["郑州市","洛阳市","开封市"],//cities[0]---河南省的市
			["石家庄市","保定市","唐山市"],//cities[1]---河北省的市
			["济南市","烟台市","青岛市"],//cities[2]---山东省的市
			["太原市","晋中市","临汾市"]//cities[3]---山西省的市
		];
		
		$("#province").change(function(){
			//清除掉city里原有的下拉选项，留一个提示选项
			$("#city").html("<option value=''>--选择市--</option>");
			
			//获取到省的值，根据省获取市的数据
			var myCities = cities[this.value];//字符串数组
			$(myCities).each(function(){
				//创建标签，把当前市的名称设置到option标签里
				$("<option></option>").html(this).appendTo("#city");
			});
		});
	</script>
</body>

左右选择

在这里插入图片描述

<body>
	<table>
		<tr>
			<td>可选项</td>
			<td></td>
			<td>已选项</td>
		</tr>
		<tr>
			<td>
				<select id="left" multiple="multiple">
					<option>选项0</option>
					<option>选项1</option>
					<option>选项2</option>
					<option>选项3</option>
					<option>选项4</option>
					<option>选项5</option>
				</select>
			</td>
			<td>
				<input type="button" value=">" id="toRight"/><br />
				<input type="button" value=">>>" id="allToRight"/><br />
				<input type="button" value="<" /><br />
				<input type="button" value="<<<" /><br />
			</td>
			<td>
				<select id="right" multiple="multiple">
					<option>选项8</option>
					<option>选项9</option>
				</select>
			</td>
		</tr>
	</table>
	
	<script type="text/javascript" src="./jquery-3.3.1.js" ></script>
	<script type="text/javascript">
		* 左右选择：
	 	* 点击">"按钮时，把左边被选中的option选项，移动到右边
		* 点击">>>"按钮时，反左边全部的option选项，都移动到右边
		*/
		$("#toRight").click(function(){
			$("#left>option:selected").appendTo("#right");
		});
		$("#allToRight").click(function(){
			$("#left>option").appendTo("#right");
		});
	</script>
</body>