From 071b931a9808c8ea99092f1c73279ad8f0fdd797 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=AB=8B=E6=99=BA?= <heiwu2003@163.com>
Date: Mon, 28 Nov 2022 04:14:31 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E9=99=88=E7=AB=8B=E6=99=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈立智 <heiwu2003@163.com>
---
 ...36\346\200\247\347\232\204\345\200\274.md" |  9 ++
 ...6&\344\272\213\344\273\266\346\265\201.md" | 94 +++++++++++++++++++
 .../\347\254\224\350\256\260/19.jquery.md"    | 68 ++++++++++++++
 3 files changed, 171 insertions(+)
 create mode 100644 "15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/17DOM\350\216\267\345\217\226\345\261\236\346\200\247\347\232\204\345\200\274.md"
 create mode 100644 "15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/18\344\272\213\344\273\266&\344\272\213\344\273\266\346\265\201.md"
 create mode 100644 "15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/19.jquery.md"

diff --git "a/15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/17DOM\350\216\267\345\217\226\345\261\236\346\200\247\347\232\204\345\200\274.md" "b/15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/17DOM\350\216\267\345\217\226\345\261\236\346\200\247\347\232\204\345\200\274.md"
new file mode 100644
index 0000000..a16136e
--- /dev/null
+++ "b/15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/17DOM\350\216\267\345\217\226\345\261\236\346\200\247\347\232\204\345\200\274.md"
@@ -0,0 +1,9 @@
+# DOM获取属性的值
+
+getAttribute 获取属性的值
+
+setAttribute 获取属性的值
+
+获取表单的值.value
+
+获取单选框的选中状态 .checked
\ No newline at end of file
diff --git "a/15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/18\344\272\213\344\273\266&\344\272\213\344\273\266\346\265\201.md" "b/15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/18\344\272\213\344\273\266&\344\272\213\344\273\266\346\265\201.md"
new file mode 100644
index 0000000..6533ef5
--- /dev/null
+++ "b/15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/18\344\272\213\344\273\266&\344\272\213\344\273\266\346\265\201.md"
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+# 事件
+
+js使我们有能力去创建动态页面，事件就是可以被js侦测到的行为
+简单理解就是用户操作鼠标或者键盘后，触发了js事件，然后产生对应的机制
+比如我们点击一个按钮，弹出对话框
+
+事件源>事件类型>事件处理程序
+
+## 事件流
+
+事件流，说的简单点，就是描述页面中接收事件的顺序
+
+当我们用户在触发一个标签的事件（例如鼠标点击，鼠标移动）时，浏览器就会一些响应比如，我们为一个按钮的点击事件绑定了一个函数，则当我们点击该按钮时浏览器就会去寻找该按钮然后执行该按钮的点击事件。
+
+从我们点击这个按钮到最终执行该按钮的点击事件所绑定的函数，一共经历了三个阶段（事件捕获阶段，处于目标阶段，事件冒泡阶段）JS常用事件
+
+## 常用事件
+
+###### 1.点击事件
+
+onclick：单击事件
+
+ondblclick：双击事件
+
+###### 2.焦点事件
+
+onblur：失去焦点
+
+onfocus:元素获得焦点。
+
+###### 3.加载事件
+
+onload：一张页面或一幅图像完成加载。
+
+###### 4.鼠标事件
+
+onmousedown： 鼠标按钮被按下。
+
+onmouseup： 鼠标按键被松开。
+
+onmousemove： 鼠标被移动。
+
+onmouseover： 鼠标移到某元素之上。
+
+onmouseout ：鼠标从某元素移开。
+
+mouseenter： 
+
+mouseleave：
+
+contextmenu:
+
+鼠标按下时，通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号e.button 事件对象中的 button属性可以获取鼠标按键的编号e.which 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键
+
+DOM3规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键
+
+如何解决mousedown和click的冲突
+
+###### 5.键盘事件
+
+onkeydown ：某个键盘按键被按下。
+
+onkeyup： 某个键盘按键被松开。
+
+onkeypress ：某个键盘按键被按下并松开。
+
+###### 6.选择和改变
+
+onchange ：域的内容被改变。
+
+onselect ：文本被选中。
+
+###### 7.表单事件
+
+onsubmit ：确认按钮被点击。
+
+onreset： 重置按钮被点击
+
+#### 阻止默认行为
+
+默认事件：表单提交，a标签跳转，右键菜单等
+
+ev.perventDefault();//阻止默认行为 DOM浏览器, ie9以下不支持
+ev.returnValue = false //阻止默认行为 DOM与IE
+
+#### 事件委托（代理）
+
+把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件[监听](https://so.csdn.net/so/search?q=监听&spm=1001.2101.3001.7020)的职务。事件代理的原理是DOM元素的事件冒泡。利用事件冒泡，和事件源对象进行处理。
diff --git "a/15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/19.jquery.md" "b/15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/19.jquery.md"
new file mode 100644
index 0000000..7f43369
--- /dev/null
+++ "b/15\351\231\210\347\253\213\346\231\272/\347\254\224\350\256\260/19.jquery.md"
@@ -0,0 +1,68 @@
+# jquery
+
+## JQuery核心
+
+$符号在JQuery中代表对JQuery对象的引用.
+
+## JQuery选择器
+
+1. **基本选择器** 
+2. **层次选择器** 
+3. **属性选择器**
+
+## 1基础选择器
+
+|        选择器        |             名称              |                          举例                           |
+| :------------------: | :---------------------------: | :-----------------------------------------------------: |
+|       id选择器       |              #id              |           $('#testDiv'):选择id为testDiv的元素           |
+| 元素名称(标签)选择器 |            element            |                $('div'):选择所有div元素                 |
+|       类选择器       |            .class             |          $('.blue'):选择所有class=blue的的元素          |
+|     选择所有元素     |               *               |                 $('*'):选择页面所有元素                 |
+|      群组选择器      | selector1,selector2,selector3 | $('#testDiv, span, blue'):同时选择多个选择器匹配的元素. |
+
+##   2层次选择器
+
+| 选择器     | 名称                | 举例                                               |
+| ---------- | ------------------- | -------------------------------------------------- |
+| 后代选择器 | ancestor descendant | $('#parent div'):选择id为parent的元素的所有div元素 |
+| 子代选择器 | parent > child      | $('#parent>div'):选择id为parent的直接div子元素     |
+| 相邻选择器 | prev + next         | $('.blue + img'):选择css类为blue的下一个img元素    |
+| 同辈选择器 | prev ~sibling       | $('.blue ~ img'):选择css类为blue的之后的img元素    |
+
+## 3属性选择器
+
+| **选择器**         | 说明                                                         |
+| ------------------ | ------------------------------------------------------------ |
+| E[attr]            | 选择元素E，其中E元素必须带有attr属性                         |
+| E[attr = “value”]  | 选择元素E，其中E元素的attr属性取值是value                    |
+| E[attr!= “value”]  | 选择元素E，其中E元素的attr属性取值不是value                  |
+| E[attr ^= “value”] | 选择元素E，其中E元素的attr属性取值是以“value”开头的任何字符  |
+| E[attr $=“value”]  | 选择元素E，其中E元素的attr属性取值是以“value”结尾的任何字符  |
+| E[attr *= “value”] | 选择元素E，其中E元素的attr属性取值是包含“value”的任何字符    |
+| E[attr\|="value"]  | 选择元素E，其中E元素的attr属性取值等于“value”或者以“value”开头 |
+| E[attr ~= “value”] | 选择元素E，其中E元素的attr属性取值等于“value”或者包含“value” |
+
+## 4表单属性伪类选择器
+
+|  选择器   |                          说明                          |
+| :-------: | :----------------------------------------------------: |
+| :checked  | 选取所有被选中的表单元素，一般是**单选框**或**复选框** |
+| :selected |     选取被选中的表单元素的选项，一般是**下拉列表**     |
+
+#### 5过滤方法
+
+#####  类名过滤: hasClass()
+
+语法:$().hasClass(“类名”)
+
+1下标过滤: eq()
+
+2判断过滤: is()
+
+3反向过滤: not()
+
+4选择器过滤: filter()
+
+5 has方法
+
+6类名过滤: hasClass()
\ No newline at end of file
-- 
Gitee


From 07e00609d0526d2fe41e952ca5a05e1cc35e710e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=AB=8B=E6=99=BA?= <heiwu2003@163.com>
Date: Mon, 28 Nov 2022 04:14:56 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E9=99=88=E7=AB=8B=E6=99=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈立智 <heiwu2003@163.com>
---
 .../\344\275\234\344\270\232/11.html"         | 69 +++++++++++++++++++
 .../\344\275\234\344\270\232/12.html"         | 31 +++++++++
 .../\344\275\234\344\270\232/13.1.html"       | 46 +++++++++++++
 .../\344\275\234\344\270\232/13.2.html"       | 45 ++++++++++++
 .../\344\275\234\344\270\232/14.1.html"       | 54 +++++++++++++++
 .../\344\275\234\344\270\232/14.2.html"       | 33 +++++++++
 6 files changed, 278 insertions(+)
 create mode 100644 "15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/11.html"
 create mode 100644 "15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/12.html"
 create mode 100644 "15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/13.1.html"
 create mode 100644 "15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/13.2.html"
 create mode 100644 "15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/14.1.html"
 create mode 100644 "15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/14.2.html"

diff --git "a/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/11.html" "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/11.html"
new file mode 100644
index 0000000..d3d691a
--- /dev/null
+++ "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/11.html"
@@ -0,0 +1,69 @@
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>动态添加和删除节点</title>
+    <style type="text/css">
+        .myArea {
+            width: 100%;
+            height: 80px;
+        }
+
+        .myDiv {
+            line-height: 30px;
+        }
+    </style>
+
+</head>
+
+<body>
+    <h2>工作经历</h2>
+    <hr />
+    <div id="myContainer">
+        <div class="myDiv" id="div1">
+            公司名称:<input type="text" />
+            职位:<input type="text" />
+            <a href="#" onclick="del()">删除工作经历</a>
+            <br />
+            工作职责及工作内容描述:
+            <textarea class="myArea"></textarea>
+            <hr />
+        </div>
+    </div>
+
+    <div style="line-height: 30px; text-align: right;">
+        <a href="#" onclick="add()">添加工作经历</a>
+    </div>
+    <script>
+        //获取div
+        var div = document.querySelector("#myContainer");
+        var divArr = document.querySelector("#myContainer").childNodes;
+        var length = divArr.length;
+
+        function add() {
+            //获取内容
+            var textArr = document.querySelectorAll("input");
+            var text = textArr[0].value;
+            var text1 = textArr[1].value;
+            var text2 = document.querySelector(".myArea").value;
+            //添加到div中
+            var div = document.querySelector("#myContainer");
+            var divMode = document.createElement("div");
+            divMode.innerHTML = "公司名称:" + text + "<br/>" + "职位:" + text1 + "<br/>" + "工作职责及工作内容描述:" + text2 + "<br/><hr>";
+            div.appendChild(divMode);
+            //清空表单
+            textArr[0].value = ""; textArr[1].value = ""; document.querySelector(".myArea").value = "";
+            length++;
+
+        }
+        function del() {
+            if (length >= 3) {
+                div.removeChild(divArr[--length]);
+            }
+
+
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/12.html" "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/12.html"
new file mode 100644
index 0000000..c2c5890
--- /dev/null
+++ "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/12.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <button id="but">按钮</button>
+    <script>
+        var but = document.querySelector("#but");
+        but.addEventListener("click",fn);
+        but.addEventListener("dblclick",fn1);
+        var demo;
+        function fn (){
+           clearTimeout(demo)
+            demo = setTimeout(function(){
+                alert(123)
+            },400)
+          
+        }
+        function fn1(){
+            clearTimeout(demo)
+            alert(456)
+            
+        }
+    
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/13.1.html" "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/13.1.html"
new file mode 100644
index 0000000..4f51e32
--- /dev/null
+++ "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/13.1.html"
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    用户名:<input type="text" id="user"value="请输入用户名"><br />
+    <p></p>
+    密码:<input type="text" id="pwd" value="请输入密码"><br />
+    <p></p>
+    <script>
+        var userName = document.querySelector("#user");
+        var pwd = document.querySelector("#pwd");
+        var p = document.querySelectorAll("p");
+        //失去焦点
+        userName.onblur = function () {
+            if (userName.value == "") {
+                p[0].innerText = "用户名为必填项";
+                p[0].style.color = "red"
+                userName.style.backgroundColor = "red"
+            }else{
+                p[0].innerText = "";
+                userName.style.backgroundColor = "white"
+            }
+            userName.style.color = "black"
+        }
+        //被鼠标按下
+        userName.onmousedown = function(){
+            if(userName.value == "请输入用户名"){
+                 userName.style.color = "red"
+            }
+           
+        }
+        var a = userName.onkeydown = function(){
+            userName.value = "";
+        }
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/13.2.html" "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/13.2.html"
new file mode 100644
index 0000000..bb50784
--- /dev/null
+++ "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/13.2.html"
@@ -0,0 +1,45 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="div">
+        <input type="checkbox" name="hobby" value="唱">唱
+        <input type="checkbox" name="hobby" value="跳">跳
+        <input type="checkbox" name="hobby" value="RAP">RAP
+        <input type="checkbox" name="hobby" value="篮球">篮球
+    </div>
+
+    <p></p>
+    <script>
+        var div = document.querySelector("div");
+        var input = document.querySelectorAll("input");
+        var p = document.querySelector("p");
+
+        div.onchange = function () {
+            var arr = []
+            for (let i = 0; i < input.length; i++) {
+                if (input[i].checked) {
+                    arr.push(input[i].value);
+                }
+            }
+            for(var value of arr){
+                
+                p.innerText = "你的爱好="+arr;
+              
+            }  
+        
+        }
+    
+
+
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/14.1.html" "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/14.1.html"
new file mode 100644
index 0000000..7837f15
--- /dev/null
+++ "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/14.1.html"
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+        <table id="tab">
+            <tbody>
+                <tr>
+                    <td>第一行</td><td>第一行</td>
+                </tr>
+                <tr>
+                    <td>第二行</td><td>第二行</td>
+                </tr>
+                <tr>
+                    <td>第三行</td><td>第三行</td>
+                </tr>
+                <tr>
+                    <td>第四行</td><td>第四行</td>
+                </tr>
+                <tr>
+                    <td>第五行</td><td>第五行</td>
+                </tr>
+            </tbody>
+        </table>
+</body>
+<script type="text/javascript">  
+    //设置表格序号为偶数行的文本颜色
+    // var ChangeTabBgcolor = function(){
+        // var myTab = document.getElementById("tab");
+        // var tbody = myTab.getElementsByTagName("tbody")[0];
+        // var trs = tbody.getElementsByTagName("tr");
+        // for (var i = 0; i < trs.length; i++) {
+        //     if((i+1 ) % 2 == 0){
+        //         trs[i].style.color= "red"
+        //     }
+            
+        // }
+        //jq
+        // var $ChangeTabBgcolor = function(){
+        // $("#tab tr").addClass(function(){
+        //     for (let index = 0; index < 5; index++) {
+        //         if (index % 2 == 0) {
+        //         $(this).css("background-color","red");
+        //         }   
+        //     } 
+        // })
+        // }
+        // $ChangeTabBgcolor
+</script>
+</html>
\ No newline at end of file
diff --git "a/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/14.2.html" "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/14.2.html"
new file mode 100644
index 0000000..a7eb5f0
--- /dev/null
+++ "b/15\351\231\210\347\253\213\346\231\272/\344\275\234\344\270\232/14.2.html"
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+</head>
+<body>
+    <div>
+        <input type="checkbox" value="1" name="check" checked="checked1" />
+        <input type="checkbox" value="2" name="check"  />
+        <input type="checkbox" value="3" name="check" checked="checked" />
+        <input type="checkbox" value="4" name="check"   />
+    </div>
+</body>
+<script type="text/javascript">
+    //遍历checkbox控件，输出选中个数
+    var GetCheckBoxNum = function(){
+        var arr = new Array();
+        var sum=0
+        var ckx = document.getElementsByName("check");
+        for (var i = 0; i < ckx.length; i++) {
+            if(ckx[i].checked==true){
+                sum++
+            }
+        }
+        console.log(sum);
+    }
+    GetCheckBoxNum()
+</script>
+</html>
\ No newline at end of file
-- 
Gitee