第四十一天：又到周末了，复习一下上周做的js

最新推荐文章于 2024-06-20 21:05:15 发布

迷失的夜行者

最新推荐文章于 2024-06-20 21:05:15 发布

阅读量451

点赞数 2

分类专栏： javaScript技术

本文链接：https://blog.csdn.net/java_wht/article/details/73351221

版权

javaScript技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

全选框的总结：

------布局方面：

1.一个大的 body标记选择器，全局进行文字大小的设置

2.类选择器，定义一个类选择器，利用div划分一个区域，类选择器定义这个区域的大小和边框，margin，padding属性

可以利用border的属性进行外边框的美化，这里用到的属性包括： border里面的 solid，radius

3.类选择器：定义一个类选择器，利用在2中划分出来的区域，再次划分出一个div区域，类选择器定义这个区域的大小margin，padding属性

----3.1标记选择器，在3中划分的区域可以再次利用标记选择器，对3中的标签进行美化，text--decoration超链接无下划线属性（默认有下划线）

border-bottom相当于hr的分割线的作用，相当于border，只管底部就可以。可以将大div中的小div进行分隔，看起来更加的美观。

4.类选择器：定义一个类选择器，利用2中划分出来的区域，再次划分一个div区域，类选择器定义这个区域的大小margin，padding属性

--------javascript方面：

1.格式：定义变量结尾用分号，多个赋值语句结尾用分号分隔，循环语句中不需要分号

2.直接可以在js中给某个标签下的某个事件绑定执行函数，不需要在body中的标签上绑定，分层思想

3.&&的用法很巧妙，以及只关注按钮，在js中绑定事件，很奇妙的做法！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>全选框</title>
		<style>
			body{
				font-size: 14px;
			}
			a{
				text-decoration: none;
				color: deepskyblue;
			}
			.dd{
				border: 1px solid #999;
				border-radius: 10px;
				width: 130px;
				margin: 20px;
			}
			.d1{
				border-bottom: 1px solid #999;
				width: 110px;
				margin: 5px 10px;
				padding: 5px 0;
			}
			.d2{
				width: 110px;
				margin: 5px 10px;
				padding: 5px 0;
				line-height: 28px;
			}
		</style>
		
		<script>
		window.onload = function(){
			var ch=document.getElementsByTagName("input");
			var fx=document.getElementsByTagName("a");
			
			var all=function(){
				for(var i=1, n=0; i< ch.length; i++){
					ch[i].checked && n++
				}
				
				ch[0].checked = n == ch.length-1;
				ch[0].nextSibling.innerHTML = ch[0].checked ? "全不选" : "全选"
			};
			
			ch[0].onclick = function(){
				for(var i=1; i<ch.length; i++){
					ch[i].checked = this.checked
				}
				all()
			}
			
			fx[0].onclick = function(){
				for(var i=1; i<ch.length; i++){
					ch[i].checked = !ch[i].checked
				}
				all()
			}
			
			for(var i=1; i<ch.length; i++){
				ch[i].onclick = function(){
					all()
				}
			}
		}
		</script>
	</head>
	<body>
		<div class="dd">
			<div class="d1">
				<input type="checkbox" value="all" id="all"><lable>全选</lable>
				<a href="javascript: ;">反选</a>
			</div>
			<div class="d2">
				<input type="checkbox" name="a" value="1">选项一<br />
				<input type="checkbox" name="a" value="2">选项二<br />
				<input type="checkbox" name="a" value="3">选项三<br />
				<input type="checkbox" name="a" value="4">选项四<br />
				<input type="checkbox" name="a" value="5">选项五<br />
				<input type="checkbox" name="a" value="6">选项六<br />
				<input type="checkbox" name="a" value="7">选项七<br />
				<input type="checkbox" name="a" value="8">选项八<br />
				<input type="checkbox" name="a" value="9">选项九<br />
				<input type="checkbox" name="a" value="10">选项十
			</div>
		</div>
	</body>
</html>