From 44b6fcfd38e9ee649de6caef4872fe726949025b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8D=8E=E4=BC=9F?= <1931626338@qq.com>
Date: Tue, 22 Nov 2022 23:00:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E9=80=89,=E5=8F=8D=E9=80=89=E6=93=8D;?=
 =?UTF-8?q?=E4=BD=9Cstyle=E6=A0=B7=E5=BC=8F;=E8=8E=B7=E5=8F=96=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=B1=9E=E6=80=A7=E7=9A=84=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\351\200\211\347\273\203\344\271\240.html" | 174 ++++++++++++++++++
 .../\347\254\224\350\256\260/2022-11-21 .md"  | 140 ++++++++++++++
 2 files changed, 314 insertions(+)
 create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-21 \347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232 \345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html"
 create mode 100644 "12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md"
diff --git "a/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-21 \347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232 \345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html" "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-21 \347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232 \345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html"
new file mode 100644
index 0000000..90de405
--- /dev/null
+++ "b/12 \351\231\210\345\215\216\344\274\237/\344\275\234\344\270\232/2022-11-21 \347\254\254\345\215\201\344\270\203\346\254\241\344\275\234\344\270\232 \345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html"	
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>getElementsByTagName获取checkbox进行全选</title>
+		<style type="text/css">
+			#myTable{ width: 900px; margin: 0px auto; background-color: #008000;}
+			#myTable td,#myTable th{ background-color: white;}
+			#myDiv{width: 900px; margin: 0px auto; height: 30px; line-height: 30px; 
+			text-align: center;}
+		</style>
+		<!-- <script>======代码======</script> -->
+		
+		
+	</head>
+	<body>
+		
+		<table cellspacing="1" id="myTable">
+		
+			<tr>
+				<th width="200">
+                  <input type="checkbox" id="all" onchange="change1()" />全选
+				<input type="checkbox" id="Selonall" onchange="change()" />反选
+            </th>
+				<th width="200">姓名</th>
+				<th width="200">性别</th>
+				<th width="200">专业</th>
+				<th width="200">爱好</th>
+			</tr>
+		
+			<tr>
+				<td><input type="checkbox" name="cb" class="item"></td>
+				<td>刘备</td>
+				<td>男</td>
+				<td>软件开发</td>
+				<td>抽烟</td>
+			</tr>
+			<tr>
+				<td><input type="checkbox" name="cb" class="item"/></td>
+				<td>关羽</td>
+				<td>男</td>
+				<td>国际贸易</td>
+				<td>喝酒</td>
+			</tr>
+			<tr>
+				<td><input type="checkbox" name="cb" class="item"/></td>
+				<td>张飞</td>
+				<td>男</td>
+				<td>园林设计</td>
+				<td>烫头发</td>
+			</tr>
+			<tr>
+				<td><input type="checkbox" name="cb" class="item"/></td>
+				<td>赵云</td>
+				<td>男</td>
+				<td>平面设计</td>
+				<td>抽烟</td>
+			</tr>
+			<tr>
+				<td><input type="checkbox" name="cb" class="item"/></td>
+				<td>黄忠</td>
+				<td>男</td>
+				<td>影视制作</td>
+				<td>玩游戏</td>
+			</tr>
+			<tr>
+				<td><input type="checkbox" name="cb" class="item"/></td>
+				<td>小乔</td>
+				<td>女</td>
+				<td>高级护理</td>
+				<td>唱歌</td>
+			</tr>
+	
+		</table>
+
+
+		<script type="text/javascript">
+		
+			var input = document.querySelectorAll('input')
+			// function change1(){
+			// var input = document.querySelectorAll('input')
+			// var count = 0
+			// for (let index = 2; index < input.length; index++){
+			// 	if (input[index].checked) {
+			// 		input[index].checked=false
+			// 	count++
+			// }else{
+			// 	input[index].checked=true
+			// 	}
+			// }
+			// if (count ==input.length -2) {
+			// 	input[0].checked=false
+			// }else if(count==0){
+			// 	input[0].checked=true
+			// }
+		
+			// }
+
+			//全选
+			function change1() {
+				var a = document.querySelector('#all').checked
+				if (a== false ){
+				for (let index = 2; index < input.length; index++){
+					input[index].checked =false
+				}
+			   }else{
+					for (let index = 2; index < input.length; index++){
+						input[index].checked =true
+				}
+			}
+		}
+			
+			//反选
+			function change(){
+				for (let index = 2; index < input.length; index++){
+					if (input[index].checked) {
+						input[index].checked=false
+					}else{
+						input[index].checked=true
+					}
+				}
+				// if (a==input.length -2) {
+				// 	change1();
+				// }
+			}
+
+
+
+
+
+
+		// 	var all = document.querySelector('#all')
+		// 	var item = document.querySelectorAll('.item')
+		// 	all.onclick = function () {
+		// // 遍历所有单独项，全选反选被点击后把值赋值给所有单独项实现全选反选
+		// for(var i = 0; i < item.length; i++) {
+		// 	item[i].checked = all.checked
+		// }
+		// }
+	
+		// // 遍历每一个单独项，为每个单独项绑定点击事件
+		// for(var i = 0; i < item.length; i++) {
+		// item[i].onclick = function () {
+		// 	// 设置统计变量
+		// 	var count = 0
+		// 	// 遍历每一个单独项，如果有其中一个被选中，统计变量加1
+		// 	for(var j = 0; j < item.length; j++) {
+		// 	if (item[j].checked) {
+		// 		count++
+		// 	}
+		// 	}
+		// 	// 根据选中数量决定是否全选
+		// 	if (count === item.length) {
+		// 	all.checked = true
+		// 	}else {
+		// 	all.checked = false
+		// 	}
+		// }
+		// }
+
+
+	
+		// 	document.getElementById("Selonall").onclick = function () {
+		// 	var cbs = document.getElementsByName("cb");
+		// 	for (var i = 0; i < cbs.length; i++) {
+		// 		cbs[i].checked = !cbs[i].checked;
+		// 	}
+		// }
+
+
+
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git "a/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md" "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md"
new file mode 100644
index 0000000..13c3339
--- /dev/null
+++ "b/12 \351\231\210\345\215\216\344\274\237/\347\254\224\350\256\260/2022-11-21 .md"	
@@ -0,0 +1,140 @@
+# 2022-11-21
+
+## 全选&反选&操作style样式&获取设置属性的值
+
+第一步：获取id(全选/反选)获取input(window.onclick =仅函数(事件)不起作用)
+
+```js
+  			var sele=document.getElementById( 'selAll' ); //获取全选
+            var clear=document.getElementById( 'fan' ); //获取反选
+            var checked=document.getElementsByTagName( 'input' ); //获取input
+```
+
+第二步: 实现功能全选&反选
+
+```js
+  <script>
+        window.onclick= function () {
+
+            var sele=document.getElementById( 'selAll' ); //获取全选
+            var clear=document.getElementById( 'selonAll' ); //获取反选
+            var checked=document.getElementsByTagName( 'input' ); //获取input
+            //全选
+            sele.onclick= function (){
+                for (var i=0;i<checked.length;i++){
+                    checked[i].checked= true
+                }
+            }
+            //反选
+            clear.onclick= function (){
+                for (var j=0;j<checked.length;j++){
+                    if (checked[j].checked== true ){
+                        checked[j].checked= false
+                    }
+                    else {
+                        checked[j].checked= true
+                    }
+                }
+            }
+        }
+    </script>
+```
+
+## 事件
+
+### 事件三要素：事件源,事件类型,事件处理程序
+
+```js
+<button id="btn">你好</button>
+<script>
+    var btn = document.getElementById('btn');
+    btn.onclick = function () {
+        alert('不好');
+    }
+</script>
+```
+
+### 执行事件步骤：
+
+1.获取事件源
+
+```js
+var div =document.querySelector('div');
+```
+
+2.绑定事件，注册事件
+
+```js
+ div.onclick
+```
+
+3.添加事件处理程序
+
+```js
+ div.onclick = function () {
+        console.log('选中了')
+    }
+```
+
+## 3.操作style样式
+
+### 3.1
+
+任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性，指向一个 CSSStyleDeclaration 的一个实例对象，包含该元素的内嵌style样式（直接定义在HTML元素上的style）。
+
+对于使用短线分割的CSS属性，在JavaScript中转为驼峰式。
+
+几个常见的属性：
+
+| CSS属性          | JavaScript属性        |
+| ---------------- | --------------------- |
+| background-image | style.backgroundImage |
+| color            | style.color           |
+| display          | style.display         |
+| font-family      | style.fontFamily      |
+| height           | style.height          |
+| width            | style.width           |
+
+## 获取设置属性的值
+
+### setAttribute
+
+- `元素.setAttribute('属性名',属性值)`
+- 设置元素的行间属性，如果原来有这个行间属性会覆盖原来的行间属性
+- 可以通过该方法给元素新增自定义行间属性
+
+例如：
+
+```js
+var oBox = document.getElementById("box");
+oBox.setAttribute("width","200px");//给oBox对象新增行间属性width="200px"，不能覆盖css样式中的width属性值
+oBox.setAttribute("class","myDiv");//给oBox对象新增行间属性class="myDiv"
+```
+
+### getAttribute
+
+- `元素.getAttribute('属性名')`
+- 获取元素的行间属性对应的属性值，不能获取css样式对应的属性值
+- 如果获取的属性不存在返回null 例如：
+
+```js
+var oBox = document.getElementById("box");
+console.log(oBox.getAttribute("width"));//null
+
+
+<body>
+    <button id="btn1" onclick="changeAttr()">点击获取属性</button>
+    <h2 id="myH2" class="mybox" title="我是h2">我是h2</h2>
+
+    <script>
+        function changeAttr() {
+            var h2 = document.getElementById('myH2');
+            if(h2.getAttribute('class')=='mybox'){
+                h2.setAttribute('class','mybox1');
+            }else{
+                h2.setAttribute('class','mybox');
+            }
+        }
+    </script>
+</body>
+```
\ No newline at end of file
-- 
Gitee


姓名	性别	专业	爱好
刘备	男	软件开发	抽烟
关羽	男	国际贸易	喝酒
张飞	男	园林设计	烫头发
赵云	男	平面设计	抽烟
黄忠	男	影视制作	玩游戏
小乔	女	高级护理	唱歌