toggle的使用、定时显示隐藏广告、表格隔行换色、复选框全选

最新推荐文章于 2022-05-02 16:34:22 发布

birdlun

最新推荐文章于 2022-05-02 16:34:22 发布

阅读量331

点赞数

分类专栏： 05 jquery

本文链接：https://blog.csdn.net/Birdmotianlun/article/details/100888479

版权

05 jquery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

toggle的使用

列：实现显示和隐藏图片

<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
	$(function(){
		$("#btn").click(function(){
			$("#img1").toggle();
		});
	});
</script>
	</head>
	<body>
		<div>
			<input type="button" value="显示/隐藏" id="btn" /><br />|
			<img src="../img/飞机05.gif" width="100%" height="100%" id="img1" />
		</div>
	</body>

定时显示隐藏广告

<script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script>
	$(function() {
		time = setInterval('showAd()', 3000);
	});

	function showAd() {
		$('#img2').show(1000);
		//4.清除显示图片定时操作
		clearInterval(time);
		//5.设置隐藏图片的定时操作
		time = setInterval("hiddenAd()", 3000);
	}

	function hiddenAd() {
		//6.获取广告图片，并让其隐藏
		//$("#img2").hide();
		//$("#img2").slideUp(5000);
		$("#img2").fadeOut(6000);
		//7.清除隐藏图片的定时操作
		clearInterval(time);
	}
</script>
	</head>
<body>
	<div id="father">
		<!-- 设置一张隐藏的广告图片 -->
		<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;" id="img2" />
	</div>
</body>

表格隔行换色

<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr >
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr >
			<td>2</td>
			<td>李四</td>
			<td>25</td>
		</tr>
		<tr >
			<td>3</td>
			<td>王五</td>
			<td>27</td>
		</tr>
		<tr >
			<td>4</td>
			<td>赵六</td>
			<td>29</td>
		</tr>
	</tbody>
</table>

jQuery

<script src="../js/jquery-3.4.1.min.js" type="text/javascript">		
</script>
<script>
	$(function(){
		/*//2.获取tbody下面的偶数行并设置背景颜色
		$("tbody tr:even").css("background-color","yellow");
		//3.获取tbody下面的奇数行并设置背景颜色
		$("tbody tr:odd").css("background-color","green");*/
		
		//2.获取tbody下面的偶数行并设置背景颜色
		$("tbody tr:even").addClass("even");
		$("tbody tr:even").removeClass("even");
		//3.获取tbody下面的奇数行并设置背景颜色
		$("tbody tr:odd").addClass("odd");
	});
</script>

复选框全选和全部选全部选

<table border="1" width="500" height="50" align="center" id="tbl" >
	<thead>
		<tr>
			<td colspan="4">
				<input type="button" value="添加" />
				<input type="button" value="删除" />
			</td>
		</tr>
		<tr>
			<th><input type="checkbox" id="select"></th>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
		</tr>
	</thead>
	<tbody>
		<tr >
			<td><input type="checkbox" class="selectOne"/></td>
			<td>1</td>
			<td>张三</td>
			<td>22</td>
		</tr>
		<tr >
			<td><input type="checkbox" class="selectOne"/></td>
			<td>2</td>
			<td>李四</td>
			<td>25</td>
		</tr>
		<tr >
			<td><input type="checkbox" class="selectOne"/></td>
			<td>3</td>
			<td>王五</td>
			<td>27</td>
		</tr>
		<tr >
			<td><input type="checkbox" class="selectOne"/></td>
			<td>4</td>
			<td>赵六</td>
			<td>29</td>
		</tr>
		<tr >
			<td><input type="checkbox" class="selectOne"/></td>
			<td>5</td>
			<td>田七</td>
			<td>30</td>
		</tr>
		<tr >
			<td><input type="checkbox" class="selectOne"/></td>
			<td>6</td>
			<td>汾九</td>
			<td>20</td>
		</tr>
	</tbody>
</table>

jQuery

<script type="text/javascript" src=../js/jquery-3.4.1.min.js></script>
<script>
	$(function(){
		$("#select").click(function(){
			//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
			//attr方法与JQ的版本有关，在1.8.3及以下有效。
			//$("tbody input").attr("checked",this.checked);
			$("tbody input").prop("checked",this.checked);
		});
	});
</script>

结果：