From 7deba5ca023a4e2ff2889bb28323cc131780b98b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=B5=A9=E6=95=8F?= <3127104562@qq.com>
Date: Tue, 22 Nov 2022 15:33:58 +0800
Subject: [PATCH] 11.22

---
 ...\351\200\211\347\273\203\344\271\240.html" | 115 ++++++++++
 ...\345\216\206\347\273\203\344\271\240.html" |  58 ++++++
 ...36\346\200\247\347\232\204\345\200\274.md" | 196 ++++++++++++++++++
 3 files changed, 369 insertions(+)
 create mode 100644 "27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.21\345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html"
 create mode 100644 "27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.21\345\267\245\344\275\234\347\273\217\345\216\206\347\273\203\344\271\240.html"
 create mode 100644 "27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.21js \345\205\250\351\200\211&\345\217\215\351\200\211&\346\223\215\344\275\234style\346\240\267\345\274\217&\350\216\267\345\217\226\350\256\276\347\275\256\345\261\236\346\200\247\347\232\204\345\200\274.md"
diff --git "a/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.21\345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html" "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.21\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..ad17626
--- /dev/null
+++ "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.21\345\205\250\351\200\211\345\217\215\351\200\211\347\273\203\344\271\240.html"	
@@ -0,0 +1,115 @@
+<!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>
+        window.onclick= function () {
+
+            var sele=document.getElementById( 'selAll' ); //获取全选
+            var clear=document.getElementById( 'fan' ); //获取反选
+            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>
+
+</head>
+<body>
+<table cellspacing="1" id="myTable">
+    <tr>
+        <th width="200">
+            <input type="checkbox"  id="selAll" onclick="" />全选
+            <input type="checkbox" id="fan" onclick="" />反选
+        </th>
+
+        <th width="200">姓名</th>
+        <th width="200">性别</th>
+        <th width="200">专业</th>
+        <th width="200">爱好</th>
+    </tr>
+    <tr>
+
+        <td>
+            <input  type="checkbox"/></td>
+        <td>刘备</td>
+        <td>男</td>
+        <td>软件开发</td>
+        <td>抽烟</td>
+    </tr>
+    <tr>
+        <td><input  type="checkbox"/></td>
+        <td>关羽</td>
+        <td>男</td>
+        <td>国际贸易</td>
+        <td>喝酒</td>
+    </tr>
+    <tr>
+        <td><input  type="checkbox"/></td>
+        <td>张飞</td>
+        <td>男</td>
+        <td>园林设计</td>
+        <td>烫头发</td>
+    </tr>
+    <tr>
+        <td><input  type="checkbox"/></td>
+        <td>赵云</td>
+        <td>男</td>
+        <td>平面设计</td>
+        <td>抽烟</td>
+    </tr>
+    <tr>
+        <td><input  type="checkbox"/></td>
+        <td>黄忠</td>
+        <td>男</td>
+        <td>影视制作</td>
+        <td>玩游戏</td>
+    </tr>
+    <tr>
+        <td><input  type="checkbox"/></td>
+        <td>小乔</td>
+        <td>女</td>
+        <td>高级护理</td>
+        <td>唱歌</td>
+    </tr>
+</table>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.21\345\267\245\344\275\234\347\273\217\345\216\206\347\273\203\344\271\240.html" "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.21\345\267\245\344\275\234\347\273\217\345\216\206\347\273\203\344\271\240.html"
new file mode 100644
index 0000000..0e31dd7
--- /dev/null
+++ "b/27 \350\265\265\346\265\251\346\225\217/\344\275\234\344\270\232/11.21\345\267\245\344\275\234\347\273\217\345\216\206\347\273\203\344\271\240.html"	
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>动态添加和删除节点</title>
+		<style type="text/css">
+			.myArea{ width: 100%; height: 80px;}
+			.myDiv{ line-height: 30px;}
+		</style>
+		<script>
+			function RemoveRow(NodeId) {
+				//1.获取块节点
+				var divNode = document.getElementById(NodeId);
+//2.获取子节点，即文本节点
+				var chileNode = divNode.childNodes[0];
+//3.删除，传入一个参数true会删除其下所有子节点
+				divNode.removeChild(chileNode);
+			}
+			function AddRow() {
+				var Input=document.getElementsByTagName('input')
+				var TextArea=document.getElementsByClassName('myArea')
+				var OldDiv=document.getElementById('div')
+				var text1=document.createTextNode(' 公司名称:'+Input[0].value+' ')
+				var text2=document.createTextNode('职位:'+Input[1].value)
+				var text3=document.createTextNode('工作职责及工作内容描述:'+TextArea[0].value)
+				var NewDiv=document.createElement('div')
+				NewDiv.id='div'+DivNum++
+				NewDiv.appendChild(text1)
+				NewDiv.appendChild(text2)
+				NewDiv.appendChild(document.createElement('br'))
+				NewDiv.appendChild(text3)
+				OldDiv.appendChild(NewDiv)
+				console.log(NewDiv.id);
+
+			}
+        </script>
+	</head>
+	<body>
+		<h2>工作经历</h2>
+		<hr/>
+		<div id="myContainer">
+			<div class="myDiv" id="div1">
+				公司名称:<input type="text" />
+				职位:<input type="text" />
+				<a href="javascript:RemoveRow('div1')">删除工作经历</a>
+				<br />
+				工作职责及工作内容描述:
+				<textarea class="myArea"></textarea>
+				<hr />
+			</div>			
+		</div>
+		
+		<div style="line-height: 30px; text-align: right;">
+			<a href="javascript:AddRow();">添加工作经历</a>
+		</div>
+
+	</body>
+</html>
\ No newline at end of file
diff --git "a/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.21js \345\205\250\351\200\211&\345\217\215\351\200\211&\346\223\215\344\275\234style\346\240\267\345\274\217&\350\216\267\345\217\226\350\256\276\347\275\256\345\261\236\346\200\247\347\232\204\345\200\274.md" "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.21js \345\205\250\351\200\211&\345\217\215\351\200\211&\346\223\215\344\275\234style\346\240\267\345\274\217&\350\216\267\345\217\226\350\256\276\347\275\256\345\261\236\346\200\247\347\232\204\345\200\274.md"
new file mode 100644
index 0000000..3b0449d
--- /dev/null
+++ "b/27 \350\265\265\346\265\251\346\225\217/\347\254\224\350\256\260/11.21js \345\205\250\351\200\211&\345\217\215\351\200\211&\346\223\215\344\275\234style\346\240\267\345\274\217&\350\216\267\345\217\226\350\256\276\347\275\256\345\261\236\346\200\247\347\232\204\345\200\274.md"	
@@ -0,0 +1,196 @@
+# 11.21js 全选&反选&操作style样式&获取设置属性的值
+
+## 目录
+
+[TOC]
+
+
+
+
+
+## 1.全选&反选
+
+## 1.1第一步：获取id(全选/反选)获取input(window.onclick =仅函数(事件)不起作用)
+
+```js
+  			var sele=document.getElementById( 'selAll' ); //获取全选
+            var clear=document.getElementById( 'fan' ); //获取反选
+            var checked=document.getElementsByTagName( 'input' ); //获取input
+```
+
+## 1.2第二步: 实现功能全选&反选
+
+```js
+    <script>
+        window.onclick= function () {
+
+            var sele=document.getElementById( 'selAll' ); //获取全选
+            var clear=document.getElementById( 'fan' ); //获取反选
+            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>
+```
+
+## 2.事件
+
+### 2.1事件三要素：事件源,事件类型,事件处理程序
+
+```js
+<button id="btn">唐伯虎</button>
+<script>
+    var btn = document.getElementById('btn');
+    btn.onclick = function () {
+        alert('点秋香');
+    }
+</script>
+```
+
+### 2.2执行事件步骤：
+
+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           |
+|                  |                       |
+
+##  3.3
+
+有一个CSS属性--->float，不能直接转换为JavaScript的属性，因为 float 在Javascript中是保留字。在 IE9+，Firefox、Safari、Opera、Chrome 中是 cssFloat，在同时所有IE也支持 styleFloat 。
+
+```
+var testDiv = document.getElementById("test");
+testDiv.style.backgroundColor = "red";  //所有浏览器都支持属性赋值
+//testDiv.style.cssFloat = "right"; // IE9+，Firefox、Safari、Opera、Chrome
+testDiv.style.styleFloat = "right"; // IE 所有
+testDiv.style.border = "1px solid red";
+console.log(testDiv.style.backgroundColor); // red
+```
+
+以上改变样式，会直接自动更新元素的表现。在标准模式下所有度量值都必须指定一个度量单位，如果没有设置会被忽略。
+
+### **3.4、“DOM2级样式”中为 style 对象新添加的属性和方法**
+
+| cssText                                   | 返回或设置style的CSS代码                                     | `testDiv.style.cssText = "width:25px; height: 100px;background-color:green";console.log(testDiv.style.cssText);` |
+| ----------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| length                                    | CSS属性的数量                                                | console.log(testDiv.style.length);                           |
+| parentRule                                | 返回表示CSS信息的CSSRule对象                                 |                                                              |
+| getPropertyCSSValue(propertyName)         | 返回包含给定属性名的CSSValue对象                             | 返回的对象包含连个属性：cssText -->该属性的的字符串值；cssValueType -->css类型，数字常量，0（继承的值）、1（基本的值）、2（值列表）、3（自定义的值） |
+| getPropertyValue(propertyName)            | 返回给定属性的字符串值                                       | testDiv.style.getPropertyValue("background-color");          |
+| getPropertyPriority(propertyName)         | 如果给定的属性使用了“!important"，返回important，否则返回空字符串 |                                                              |
+| item(index)/方括号语法[index]             | 返回给定索引的CSS属性名称                                    | testDiv.style.item(1); testDiv.style[1];                     |
+| removeProperty(propertyName)              | 删除给定的属性                                               |                                                              |
+| setProperty(propertyaName,value,priority) | 设置属性，及优先级（“important”或空字符串）                  |                                                              |
+|                                           |                                                              |                                                              |
+
+```JS
+var testDiv = document.getElementById("test");
+testDiv.style.backgroundColor = "red";  
+for(var i=0, len=testDiv.style.length;i<len;i++){  
+    var prop = testDiv.style[i];
+    var value = testDiv.style.getPropertyValue(prop);
+    console.log(prop + ": " + value);
+}
+testDiv.style.cssText = "width:25px; height: 100px;background-color:green";
+console.log(testDiv.style.cssText);
+```
+
+## 4.获取设置属性的值
+
+### 4.1setAttribute
+
+- `元素.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>
+
+
+```
+
-- 
Gitee


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