diff --git "a/\345\276\220\351\252\217\351\271\217/20211207-JQuery\346\223\215\344\275\234DOM/1.MD" "b/\345\276\220\351\252\217\351\271\217/20211207-JQuery\346\223\215\344\275\234DOM/1.MD"
new file mode 100644
index 0000000000000000000000000000000000000000..f64c51382a31be9eade566cc500d4df1a854b35f
--- /dev/null
+++ "b/\345\276\220\351\252\217\351\271\217/20211207-JQuery\346\223\215\344\275\234DOM/1.MD"
@@ -0,0 +1,211 @@
+## 操作DOM
+有了jQuery对象，不需要考虑浏览器差异了，全部统一操作
+
+### 修改Text和HTML
+jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构：
+```
+<!-- HTML结构 -->
+<ul id="test-ul">
+    <li class="js">JavaScript</li>
+    <li name="book">Java &amp; JavaScript</li>
+</ul>
+```
+```
+//Jquery获取文本和HTML
+
+var j1 = $('[name="book"]').text();  //'Java & JavaScript' 获取节点文本
+var j2 = $('[name="book"]').html();  //'Java &amp; JavaScript' 获取节点的原始HTML文本 连结构一起输出
+```
+```
+//无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作
+
+var ref1 = $('#test-ul li.js')
+var ref2 = $('#test-ul li[name="book"]')
+
+ref1.text("我是帅哥")   // 修改文本
+ref2.html('<span style="color:red">你不是</span>')  //设置HTMl
+
+console.log(ref1.text());
+console.log(ref2.html());
+```
+
+一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。在上面的例子中试试：
+```
+//一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。
+
+$('#test-ul li').text('我是大帅哥')  //修改所有li节点的文本 因为未指定具体的某一个li节点 将默认修改所有的li节点
+
+```
+jQuery对象的另一个好处是我们可以执行一个操作，作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点，调用jQuery对象的方法仍然不会报错：
+```
+// 如果不存在id为not-exist的节点：
+$('#not-exist').text('Hello'); // 代码不报错，没有节点被设置为'Hello'
+```
+
+#### 修改css样式
+```
+var pw1 =$("p").css("background-color","red")  
+//获取 所有p元素 修改css("属性名","属性值") 
+
+用到的便是JQuery提供的css方法
+获取style中某个属性的结构为：$(obj).css("属性名")；
+修改属性值的结构为：$(obj).css("属性名", "属性值")；
+
+
+$('#test-css li.dy>span').css('background-color','green').css('color','red')
+//修改background背景颜色 修改字体颜色color
+```
+jQuery对象的css()方法可以这么用：
+```
+var div = $('#test-div');
+div.css('color'); // '#000033', 获取CSS属性
+div.css('color', '#336699'); // 设置CSS属性
+div.css('color', ''); // 清除CSS属性
+
+
+为了和JavaScript保持一致，CSS属性可以用'background-color'和'backgroundColor' 驼峰式两种格式。
+
+```
+
+
+css()方法将作用于DOM节点的style属性，具有最高优先级。如果要修改class属性，可以用jQuery提供的下列方法：
+```
+var div = $('#test-div');
+div.hasClass('highlight'); // false， class是否包含highlight
+div.addClass('highlight'); // 添加highlight这个class
+div.removeClass('highlight'); // 删除highlight这个class
+
+```
+
+#### 练习
+```
+<!-- HTML结构 -->
+<style>
+.highlight {
+    color: #dd1144;
+    background-color: #ffd351;
+}
+</style>
+
+<div id="test-highlight-css">
+    <ul>
+        <li class="py"><span>Python</span></li>
+        <li class="js"><span>JavaScript</span></li>
+        <li class="sw"><span>Swift</span></li>
+        <li class="hk"><span>Haskell</span></li>
+    </ul>
+</div>
+'use strict';
+
+var div = $('#test-highlight-css');
+
+div.css('color','#dd1144').css('background-color','#ffd351')
+//css()方法高亮显示
+
+div.addClass('highlight')
+//addClass()方法高亮显示
+
+```
+
+
+#### 显示和隐藏DOM
+
+```
+jQuery提供show()和hide()方法
+var  li= $('#test-highlight-css .py'); //获取节点 Python
+
+li.hide();   //隐藏
+li.show();   //显示
+
+隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。这和删除DOM节点是不同的
+```
+
+#### 获取DOM信息
+```
+ 利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码：
+
+// 浏览器可视窗口大小:
+$(window).width(); // 800
+$(window).height(); // 600
+
+// HTML文档大小:
+$(document).width(); // 800
+$(document).height(); // 3500
+
+// 某个div的大小:
+var div = $('#test-div');
+div.width(); // 600
+div.height(); // 300
+div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
+div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效
+```
+
+```
+attr()和removeAttr()方法用于操作DOM节点的属性：
+
+// <div id="test-div" name="Test" start="1">...</div>
+var div = $('#test-div');
+div.attr('data'); // undefined, 属性不存在
+div.attr('name'); // 'Test'
+div.attr('name', 'Hello'); // div的name属性变为'Hello'
+div.removeAttr('name'); // 删除name属性
+div.attr('name'); // undefined
+```
+```
+//attr('属性名','值')修改已存在的属性的值 removeAttr('属性名') 删除属性
+
+<li class="name"><input type="text" value=""></li>
+
+var text=$('.form input[type="text"]') //获取DOM节点
+text.attr('value','帅哥')              // attr()修改text的value属性
+
+```
+
+
+prop()方法和attr()类似，但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种，例如：
+```
+<input id="test-radio" type="radio" name="test" checked value="1">
+等价于：
+```
+```
+<input id="test-radio" type="radio" name="test" checked="checked" value="1">
+```
+attr()和prop()对于属性checked处理有所不同：
+```
+var radio = $('#test-radio');
+radio.attr('checked'); // 'checked'
+radio.prop('checked'); // true
+```
+prop()返回值更合理一些。不过，用is()方法判断更好：
+```
+var radio = $('#test-radio');
+radio.is(':checked'); // true
+类似的属性还有selected，处理时最好用is(':selected')。
+```
+#### 操作表单
+```
+对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性：
+
+/*
+    <input id="test-input" name="email" value="">
+    <select id="test-select" name="city">
+        <option value="BJ" selected>Beijing</option>
+        <option value="SH">Shanghai</option>
+        <option value="SZ">Shenzhen</option>
+    </select>
+    <textarea id="test-textarea">Hello</textarea>
+*/
+var
+    input = $('#test-input'),
+    select = $('#test-select'),
+    textarea = $('#test-textarea');
+
+input.val(); // 'test'
+input.val('abc@example.com'); // 文本框的内容已变为abc@example.com
+
+select.val(); // 'BJ'
+select.val('SH'); // 选择框已变为Shanghai
+
+textarea.val(); // 'Hello'
+textarea.val('Hi'); // 文本区域已更新为'Hi'
+```
diff --git "a/\345\276\220\351\252\217\351\271\217/20211208-jQuery\344\272\213\344\273\266/1.MD" "b/\345\276\220\351\252\217\351\271\217/20211208-jQuery\344\272\213\344\273\266/1.MD"
new file mode 100644
index 0000000000000000000000000000000000000000..67937bbcb1f00440829cef5a97a7bbeecacff003
--- /dev/null
+++ "b/\345\276\220\351\252\217\351\271\217/20211208-jQuery\344\272\213\344\273\266/1.MD"
@@ -0,0 +1,169 @@
+## 事件
+
+因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。
+
+浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。
+
+由于不同的浏览器绑定事件的代码都不太一样，所以用jQuery来写代码，就屏蔽了不同浏览器的差异，我们总是编写相同的代码。
+
+```
+/*
+<a id="test-link" href="#0">点我试试</a>
+*/
+```
+```
+on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。
+
+var a = $('#test-link');        //查找到节点 
+a.on('click', function () {     //用on绑定事件 on('事件名称','对应函数')
+    alert('Hello!');
+});
+
+```
+更简化的写法是直接调用click()方法：
+```
+a.click(function () {
+    alert('Hello!');
+});
+```
+
+jQuery能够绑定的事件主要包括：
+
+### 鼠标事件
++ click: 鼠标单击时触发；
++ dblclick：鼠标双击时触发；
++ mouseenter：鼠标进入时触发；
++ mouseleave：鼠标移出时触发；
++ mousemove：鼠标在DOM内部移动时触发；
++ hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
+### 键盘事件
+键盘事件仅作用在当前焦点的DOM上，通常是`<input>`和`<textarea>`。
+
++ keydown：键盘按下时触发；
++ keyup：键盘松开时触发；
++ keypress：按一次键后触发。
+其他事件
++ focus：当DOM获得焦点时触发；
++ blur：当DOM失去焦点时触发；
++ change：当`<input>`、`<select>`或`<textarea>`的内容改变时触发；
++ submit：当`<form>`提交时触发；
++ ready：当页面被载入并且DOM树完成初始化后触发。
+其中，ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。假设我们想给一个`<form>`表单绑定submit事件，下面的代码没有预期的效果：
+```
+<html>
+<head>
+    <script>
+        // 代码有误:
+        $('#testForm).on('submit', function () {
+            alert('submit!');
+        });
+    </script>
+</head>
+<body>
+    <form id="testForm">
+        ...
+    </form>
+</body>
+```
+因为JavaScript在此执行的时候，`<form>`尚未载入浏览器，所以`$('#testForm)`返回`[]`，并没有绑定事件到任何DOM上。
+
+所以我们自己的初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化：
+```
+<html>
+<head>
+    <script>
+        $(document).on('ready', function () {
+            $('#testForm).on('submit', function () {
+                alert('submit!');
+            });
+        });
+    </script>
+</head>
+<body>
+    <form id="testForm">
+        ...
+    </form>
+</body>
+```
+这样写就没有问题了。因为相关代码会在DOM树初始化后再执行。
+
+由于ready事件使用非常普遍，所以可以这样简化：
+```
+$(document).ready(function () {
+    // on('submit', function)也可以简化:
+    $('#testForm).submit(function () {
+        alert('submit!');
+    });
+});
+```
+甚至还可以再简化为：
+```
+$(function () {
+    // init...
+});
+```
+上面的这种写法最为常见。如果你遇到`$(function () {...})`的形式，牢记这是document对象的ready事件处理函数。
+
+完全可以反复绑定事件处理函数，它们会依次执行：
+```
+$(function () {
+    console.log('init A...');
+});
+$(function () {
+    console.log('init B...');
+});
+$(function () {
+    console.log('init C...');
+});
+```
+```
+如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息
+
+<p id="testMouseMoveDiv">鼠标指针位于： <span></span></p>
+
+$(document).ready(function () {
+    $(document).mousemove(function (e) {
+        $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
+    });
+});
+//在<span>中显示鼠标指针的位置
+```
+
+### 取消绑定
+一个已被绑定的事件可以解除绑定，通过off('click', function)实现
+```
+function aclick(){
+    alert('你好')
+}
+
+
+$("#a").click(aclick)           //对jQuery对象 绑定事件
+
+$("#a").off('click',aclick)     //解除绑定 off('click', function)
+```
+```
+// 绑定事件:
+a.click(function () {
+    alert('hello!');
+});
+
+// 解除绑定:
+a.off('click', function () {
+    alert('hello!');
+});                             // 无效解除绑定
+```
+```
+这是因为两个匿名函数虽然长得一模一样，但是它们是两个不同的函数对象，off('click', function () {...})无法移除已绑定的第一个匿名函数。
+
+为了实现移除效果，可以使用off('click')一次性移除已绑定的click事件的所有处理函数。
+
+同理，无参数调用off()一次性移除已绑定的所有类型的事件处理函数。
+```
+$("#a").off('click')        //清空所有绑定的单击事件 
+```
+
+```
+prop('checked'，'true') // 更改为选中
+
+prop('checked'，'false') // 更改为不选中
+```
\ No newline at end of file
diff --git "a/\345\276\220\351\252\217\351\271\217/20211208-jQuery\344\277\256\346\224\271DOM\347\273\223\346\236\204/1.MD" "b/\345\276\220\351\252\217\351\271\217/20211208-jQuery\344\277\256\346\224\271DOM\347\273\223\346\236\204/1.MD"
new file mode 100644
index 0000000000000000000000000000000000000000..f969b84b381a8a246b390f9b38b4bcc3732150f6
--- /dev/null
+++ "b/\345\276\220\351\252\217\351\271\217/20211208-jQuery\344\277\256\346\224\271DOM\347\273\223\346\236\204/1.MD"
@@ -0,0 +1,102 @@
+### 修改DOM结构
+
+#### 添加DOM节点
+添加DOM节点除了jQuery的html()这种方法以外,可以用append()方法
+
+```
+<div id="test-div">
+    <ul>
+        <li><span>JavaScript</span></li>
+        <li><span>Python</span></li>
+        <li><span>Swift</span></li>
+    </ul>
+</div>
+```
+
+```
+// 传入HTML片段 添加DOM节点
+
+var ul=$('#test-div ul')    //拿到 <ul>节点
+
+ul.append('<li><span>帅哥</span></li>')   //调用append()方法传入HTML片段
+除了接受字符串，append()还可以传入原始的DOM对象，jQuery对象和函数对象
+
+
+// 传入DOM对象 添加节点
+
+var c1=document.createElement('li')     //创建一个<li>标签
+c1.innerHTML='<span>Pascal</span>'      //给li标签写入HTML片段内容
+
+ul.append(c1)                           //传入DOM对象
+
+
+// 传入jQuery对象 添加节点
+ul.append($('<li><span>scheme</span></li>'))    // 创建 一个JQuery对象 
+
+// 添加函数对象:
+ul.append(function (index, html) {
+    return '<li><span>Language - ' + index + '</span></li>';
+});
+```
+传入函数时，要求返回一个字符串、DOM对象或者jQuery对象。因为jQuery的append()可能作用于一组DOM节点，只有传入函数才能针对每个DOM生成不同的子节点。
+
+append()把DOM添加到最后，prepend()则把DOM添加到最前。
+
+另外注意，如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点。
+
+如果要把新节点插入到指定位置，例如，JavaScript和Python之间，那么，可以先定位到JavaScript，然后用after()方法：
+```
+var js = $('#test-div>ul>li:first-child');
+js.after('<li><span>Lua</span></li>');
+```
+同级节点可以用after()或者before()方法。
+
+删除节点
+要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery对象包含若干DOM节点，实际上可以一次删除多个DOM节点：
+
+```
+var li = $('#test-div>ul>li');
+li.remove(); // 所有<li>全被删除
+
+
+```
+```
+/*jQuery的插入节点的方式 
+1.父节点插入子节点 append()在子节点末尾插入 prepend()则把DOM添加到最前 
+2.同级节点 after()在某节点后插入 before()在某节点前插入
+3.先获取所有同级节点 :first-child 代表第一个节点 :last-child 最后一个节点
+:nth-child(N) 查找第N个节点序号从1开始 :nth-child(even) 选出序号为偶数的节点 odd代表奇数
+*/
+```
+#### 练习
+```
+
+<div id="test-div">
+        <ul>
+            <li><span>JavaScript</span></li>
+            <li><span>Python</span></li>
+            <li><span>Swift</span></li>
+        </ul>
+    </div>
+
+var js = $('#test-div li:first-child')
+js.after('<li><span>Lua</span></li>')
+
+var py = $('#test-div li:nth-child(3)')
+py.before('<li><span>Pascal</span></li>')
+
+var sf = $('#test-div li:last-child')
+sf.before('<li><span>Ruby</span></li>')
+
+
+    ; (function () {
+        var s = $('#test-div>ul>li').map(function () {
+            return $(this).text();
+        }).get().join(',');
+        if (s === 'JavaScript,Lua,Pascal,Python,Ruby,Swift') {
+            console.log('测试通过!');
+        } else {
+            console.log('测试失败: ' + s);
+        }
+    })();
+```
\ No newline at end of file