Jquery综合案例小练习——巩固jquery基础知识

最新推荐文章于 2024-07-05 16:41:23 发布

it春和

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量1.2k

点赞数 3

分类专栏：前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_66947873/article/details/123328392

版权

学习玩jquery的基础知识做一些小的案例练习巩固一下基础知识的运用
在学了jquery后对比发现jquery的功能十分的强大！

一、隔行换色

1.1、原生js实现隔行换色

原生js实现隔行换色首先要获取到表格在获取到表格中的每一行
通过%2判断是奇数行还是偶数行
再通过控制样式实现背景色的变换

准备一个表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>

		<style>
			tr td{
    
				text-align: center;
			}

		</style>
		
		<script>

			
		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >

			<tr style="background-color: #999999;">
				<th><input type="checkbox"></th>
				<th>学号</th>
				<th>姓名</th>
				<th>地址</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>1</td>
				<td>张无忌</td>
				<td>广东</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2</td>
				<td>孙悟空</td>
				<td>花果山</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>3</td>
				<td>徐凤年</td>
				<td>北凉</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>4</td>
				<td>陈平安</td>
				<td>泥瓶巷</td>
				<td><a href="">修改</a>|<a href="">删除</a

最低0.47元/天解锁文章

it春和

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Jquery综合案例小练习——巩固jquery基础知识

学习玩jquery的基础知识做一些小的案例练习巩固一下基础知识的运用在学了jquery后对比发现jquery的功能十分的强大！一、隔行换色1.1、原生js实现隔行换色原生js实现隔行换色首先要获取到表格在获取到表格中的每一行通过%2判断是奇数行还是偶数行再通过控制样式实现背景色的变换准备一个表格<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&g.
复制链接

扫一扫