JQuery实现简单的国际象棋棋盘

最新推荐文章于 2022-11-28 10:01:11 发布

原创最新推荐文章于 2022-11-28 10:01:11 发布 · 7.4k 阅读

41 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery #css #js

从零开始的JQuery学习之路专栏收录该内容

1 篇文章

订阅专栏

本文提供了一个使用JQuery实现的基本国际象棋棋盘示例。通过简单的HTML和CSS结构，结合JQuery来设置棋盘格的颜色。适用于初学者理解和实践。

介于网上没有简单的JQuery的国际象棋棋盘在此写了一个，供大家参考

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			ul,
			li {
				list-style: none
			}

			li {
				width: 100px;
				height: 100px;
				float: left;
				border: 1px solid black;
				box-sizing: border-box;
			}

			#container {
				width: 300px;
				height: 300px;
				margin: 100px auto;
				border: 2px solid black;
			}
		</style>
		<script src="../../../../jquery-3.6.0.min.js"></script>
	</head>
	<body>

		<div id="container">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script>
			$("#container>ul").children("li:even").css("background", "black");
			
		</script>
	</body>
</html>