From d04ec41b8c58f16d49042254d018b336248c182a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9E=AB?= <1687425871@qq.com>
Date: Tue, 6 Dec 2022 02:19:02 +0000
Subject: [PATCH 1/3] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈枫 <1687425871@qq.com>
---
 ...36\346\200\247\347\254\224\350\256\260.md" | 344 +++++++++++++++
 ...13\344\273\266\347\254\224\350\256\260.md" | 374 ++++++++++++++++
 ...71\350\261\241\347\254\224\350\256\260.md" |  76 ++++
 ...71\346\263\225\347\254\224\350\256\260.md" | 257 +++++++++++
 ...022-11-29-ajax\347\254\224\350\256\260.md" | 401 ++++++++++++++++++
 ...2-11-30-jqajax\347\254\224\350\256\260.md" | 215 ++++++++++
 ...-12-01-Promise\347\254\224\350\256\260.md" | 143 +++++++
 ...60\347\213\261\347\254\224\350\256\260.md" |  54 +++
 8 files changed, 1864 insertions(+)
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-22-\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.md"
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-23-jquery\344\272\213\344\273\266\347\254\224\350\256\260.md"
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-24-jquery\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md"
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-28-jQuery\346\226\271\346\263\225\347\254\224\350\256\260.md"
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-29-ajax\347\254\224\350\256\260.md"
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-30-jqajax\347\254\224\350\256\260.md"
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-Promise\347\254\224\350\256\260.md"
 create mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\254\224\350\256\260.md"

diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-22-\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-22-\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..5724208
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-22-\346\223\215\344\275\234\345\261\236\346\200\247\347\254\224\350\256\260.md"
@@ -0,0 +1,344 @@
+# DOM操作
+
+jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。
+		常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。**注意：以下的操作方式只适用于jQuery对象。**
+
+jQuery中的DOM操作可分为：
+
+- 样式操作
+- 内容及Value属性值操作
+- 节点操作
+- 节点属性操作
+- 节点遍历
+- CSS-DOM操作
+
+## 获取DOM信息
+
+利用jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码：
+
+```js
+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
+```
+
+**prop()方法和attr()类似，但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种**，例如：
+
+```js
+<input id="test-radio" type="radio" name="test" checked value="1">
+```
+
+等价于：
+
+```js
+<input id="test-radio" type="radio" name="test" checked="checked" value="1">
+```
+
+attr()和prop()对于属性checked处理有所不同：
+
+```js
+var radio = $('#test-radio');
+radio.attr('checked'); // 'checked'
+radio.prop('checked'); // true
+```
+
+prop()返回值更合理一些。不过，用is()方法判断更好：
+
+```js
+var radio = $('#test-radio');
+radio.is(':checked'); // true
+```
+
+类似的属性还有selected，处理时最好用is(':selected')。
+
+### 设置属性
+
+因为prop属性不适用于自定义属性所以设置属性使用attr方法
+
+attr('属性','属性值');
+
+```js
+//设置北京节点的name属性的值为dabeijing
+$("#bj").attr("name", "dabeijing");
+
+//添加自定义属性
+$("#bj").attr("aa", "aabb");
+```
+
+### 移除属性
+
+| 方法                 | 说明                    |
+| -------------------- | ----------------------- |
+| removeAttr('属性名') | 删除属性                |
+| removeProp('属性名') | 删除bool类型的属性,少用 |
+
+```js
+//删除北京节点的name属性并检验name属性是否存在
+$("#bj").removeAttr("name");
+
+//删除hobby的CheckBox属性
+var hobby_type = $("#hobby").removeProp("checkbox");
+```
+
+### attr和prop区别
+
+attr（固有属性，自定义属性） prop（返回值是bool的属性）
+
+-  prop获取返回的值类型是bool的时候，返回的是true或者false
+-  如果是自定义属性，prop获取不到，attr可以
+
+## 修改CSS
+
+jQuery对象有“批量操作”的特点，这用于修改CSS实在是太方便了。考虑下面的HTML结构：
+
+```js
+<!-- HTML结构 -->
+<ul id="test-css">
+    <li class="lang dy"><span>JavaScript</span></li>
+    <li class="lang"><span>Java</span></li>
+    <li class="lang dy"><span>Python</span></li>
+    <li class="lang"><span>Swift</span></li>
+    <li class="lang dy"><span>Scheme</span></li>
+</ul>
+```
+
+要高亮显示动态语言，调用jQuery对象的css('name', 'value')方法，我们用一行语句实现：
+
+```js
+'use strict';
+$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');
+
+ 
+JavaScript
+Java
+Python
+Swift
+Scheme
+```
+
+注意，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。
+
+jQuery对象的css()方法可以这么用：
+
+```js
+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提供的下列方法：
+
+```js
+var div = $('#test-div');
+div.hasClass('highlight'); // false， class是否包含highlight
+div.addClass('highlight'); // 添加highlight这个class
+div.removeClass('highlight'); // 删除highlight这个class
+```
+
+## 修改Text和HTML
+
+jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构：
+
+```js
+<!-- HTML结构 -->
+<ul id="test-ul">
+    <li class="js">JavaScript</li>
+    <li name="book">Java &amp; JavaScript</li>
+</ul>
+```
+
+分别获取文本和HTML：
+
+```js
+$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
+$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'
+```
+
+如何设置文本或HTML？jQuery的API设计非常巧妙：无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作，自己动手试试：
+
+```js
+'use strict';
+var j1 = $('#test-ul li.js');
+var j2 = $('#test-ul li[name=book]');
+j1.html('<span style="color: red">JavaScript</span>');
+j2.text('JavaScript & ECMAScript');
+
+ 
+// JavaScript
+// Java & JavaScript
+```
+
+一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。在上面的例子中试试：
+
+```js
+$('#test-ul li').text('JS'); // 是不是两个节点都变成了JS？
+```
+
+所以jQuery对象的另一个好处是我们可以执行一个操作，作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点，调用jQuery对象的方法仍然不会报错：
+
+```js
+// 如果不存在id为not-exist的节点：
+$('#not-exist').text('Hello'); // 代码不报错，没有节点被设置为'Hello'
+```
+
+这意味着jQuery帮你免去了许多if语句。
+
+*****
+
+## 操作表单
+
+对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性：
+
+```js
+/*
+    <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'
+```
+
+**可见，一个val()就统一了各种输入框的取值和赋值的问题。**
+
+## 修改DOM结构
+
+直接使用浏览器提供的API对DOM结构进行修改，不但代码复杂，而且要针对浏览器写不同的代码。
+
+有了jQuery，我们就专注于操作jQuery对象本身，底层的DOM操作由jQuery完成就可以了，这样一来，修改DOM也大大简化了。
+
+### 添加DOM
+
+要添加新的DOM节点，除了通过jQuery的html()这种暴力方法外，还可以用append()方法，例如：
+
+```js
+<div id="test-div">
+    <ul>
+        <li><span>JavaScript</span></li>
+        <li><span>Python</span></li>
+        <li><span>Swift</span></li>
+    </ul>
+</div>
+```
+
+如何向列表新增一个语言？首先要拿到`<ul>`节点：
+
+```js
+var ul = $('#test-div>ul');
+```
+
+然后，调用append()传入HTML片段：
+
+```js
+ul.append('<li><span>Haskell</span></li>');
+```
+
+除了接受字符串，append()还可以传入原始的DOM对象，jQuery对象和函数对象：
+
+```js
+// 创建DOM对象:
+var ps = document.createElement('li');
+ps.innerHTML = '<span>Pascal</span>';
+// 添加DOM对象:
+ul.append(ps);
+
+// 添加jQuery对象:
+ul.append($('#scheme'));
+
+// 添加函数对象:
+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()方法：
+
+```js
+var js = $('#test-div>ul>li:first-child');
+js.after('<li><span>Lua</span></li>');
+```
+
+也就是说，同级节点可以用after()或者before()方法。
+
+### 删除节点
+
+要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了。如果jQuery对象包含若干DOM节点，实际上可以一次删除多个DOM节点：
+
+```js
+var li = $('#test-div>ul>li');
+li.remove(); // 所有<li>全被删除
+```
+
+清空清除所选元素的内容则用empty()
+
+```html
+
+<ul>
+    <li>列表项1</li>
+    <p>我是段落1</p>
+    <li>列表项2</li>
+    <p>我是段落2</p>
+    <li>列表项3</li>
+</ul>
+
+
+$('ul').empty();//所有ul的子节点都被移除
+
+```
+
+**********
+
+### 遍历元素each()
+
+一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1，其他对象通过其属性名进行迭代。
+
+```js
+//遍历元素each方法格式
+$(selector).each(function(index,element))
+```
+
+- 参数function为遍历时的回调函数
+
+- index 为遍历元素的序列号，从0开始
+
+- element为当前的元素(===this)，此时是dom元素
+
+```js
+//遍历:each()
+    $('span').each(function (index,element){
+        console.log(index);
+        // console.log(element);
+        console.log(this);//g
+    })
+```
+
diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-23-jquery\344\272\213\344\273\266\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-23-jquery\344\272\213\344\273\266\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..ee704dc
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-23-jquery\344\272\213\344\273\266\347\254\224\350\256\260.md"
@@ -0,0 +1,374 @@
+## (八)事件
+
+因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。
+
+**浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。**
+
+由于不同的浏览器绑定事件的代码都不太一样，所以用jQuery来写代码，就屏蔽了不同浏览器的差异，我们总是编写相同的代码。
+
+举个例子，假设要在用户点击了超链接时弹出提示框，我们用jQuery这样绑定一个click事件：
+
+```js
+/* HTML:
+ *
+ * <a id="test-link" href="#0">点我试试</a>
+ *
+ */
+
+// 获取超链接的jQuery对象:
+var a = $('#test-link');
+a.on('click', function () {
+    alert('Hello!');
+});
+```
+
+on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。
+
+**另一种更简化的写法是直接调用click()方法**：
+
+```js
+a.click(function () {
+    alert('Hello!');
+});
+```
+
+==两者完全等价。我们通常用后面的写法。==
+
+jQuery能够绑定的事件主要包括：
+
+********
+
+### 鼠标事件
+
+| 事件      | 说明                                                         |
+| --------- | ------------------------------------------------------------ |
+| click     | 鼠标单击事件                                                 |
+| dblclick  | 鼠标双击事件                                                 |
+| mouseover | 鼠标移入事件                                                 |
+| mouseout  | 鼠标移出事件                                                 |
+| mousedown | 鼠标按下事件                                                 |
+| mouseup   | 鼠标松开事件                                                 |
+| mousemove | 鼠标在DOM内部移动时触发                                      |
+| hover     | 鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。 |
+
+#### click和dblclick
+
+```js
+<!--<div></div>-->
+<script>
+        $(function () {
+            $('div').click(
+                function () {
+                    alert('这个是单击事件');
+                }
+            )
+        })
+
+        $(function () {
+            $('div').dblclick(
+                function () {
+                    alert('这是双击事件');
+                }
+            )
+        })
+    </script>
+```
+
+#### mouseover和mouseout
+
+当用户将鼠标移入到某个元素上面时，就会触发mouseover事件。如果将鼠标移出某个元素时，就 会触发mouseout事件。mouseover和mouseout平常都是形影不离的。
+
+修改字体颜色:
+
+```html
+<style>
+        #box {
+            display: inline-block;
+            width: 80px;
+            height: 24px;
+            line-height: 24px;
+            font-family: "微软雅黑";
+            font-size: 15px;
+            text-align: center;
+            border-radius: 3px;
+            background-color: deepskyblue;
+            color: rgb(0, 0, 0);
+            cursor: pointer;
+        }
+    </style>
+<div>调试代码</div>
+<div>调试代码</div>
+```
+
+```js
+//链式调用
+$(function () {
+            $('div').mouseover(
+                function () {
+                    $(this).css('color', 'red');
+                }
+            ).mouseout(
+                function () {
+                    $(this).css('color', 'rgb(0, 0, 0)');
+                }
+            )
+        })
+```
+
+#### mousedown 和mouseup
+
+当用户按下鼠标时，会触发mousedown事件；当用户松开鼠标时，则会触发mouseup事件。 mousedown表示鼠标按下的一瞬间所触发的事件，而mouseup表示鼠标松开的一瞬间所触发的事 件。当然我们都知道，只有“先按下”才能“再松开”。 
+
+鼠标点击放开改变背景颜色：html代码和上面一样
+
+```js
+<script>
+    $(function () {
+        $('div').mousedown(
+            function () {
+                $(this).css('background-color', 'red');
+            }
+        ).mouseup(
+            function () {
+                $(this).css('background-color', 'deepskyblue');
+            }
+        )
+    })
+</script>
+```
+
+#### hover()
+
+**当鼠标进入div设置背景为红色，当鼠标移出div设置背景为绿色，默认背景为黑色**
+
+```html
+.outer {
+    width: 200px;
+    height: 200px;
+    background: black;
+}
+
+<div class="outer"></div>
+```
+
+```js
+$('.outer').hover(function () {
+    $(this).css('background', 'red');
+}, function () {
+    $(this).css('background', 'green');
+});
+```
+
+*********
+
+### 键盘事件
+
+键盘事件仅作用在当前焦点的DOM上，通常是`<input>`和`<textarea>`。
+
+在jQuery中，常用的键盘事件共有2种。 
+
+- keydown：键盘按下时触发；
+- keyup：键盘松开时触发；
+
+keydown表示键盘按下一瞬间所触发的事件，而keyup表示键盘松开一瞬间所触发的事件。对于键盘来说，都是先有“按下”才有“松开”，也就是keydown发生在keyup之前。
+
+**例题获取字符串长度**:
+
+```html
+<input id="txt" type="text" />
+<div>字符串长度为： <span id="num">0</span> </div>
+```
+
+```js
+ $(function () {
+        $('#txt').keyup(
+            function () {
+                var len = $(this).val().length;
+                $('#num').text(len);
+            }
+        )
+    })
+```
+
+*********
+
+********
+
+### onload事件
+
+在JavaScript中，onload表示文档加载完成后再执行的一个事件。window.onload只能调用一次，如果多次调用，则只会执行最后一个。
+
+```html
+window.onload = function(){
+……
+}
+```
+
+对于JavaScript的onload事件来说，只有当页面所有DOM元素以及所有外部文件（图片、外部 CSS、外部JavaScript等）加载完成之后才会执行。这里的所有DOM元素，指的是HTML部分的代码。
+
+****
+
+### ready事件
+
+在jQuery中，ready也表示文档（document）加载完成后再执行的一个事件。eady仅作用于document对象。
+
+对于jQuery的ready事件来说，只要页面所有DOM元素加载完成就可以执行，不需要再等外部文件 （图片、外部CSS、外部JavaScript）加载完成,且只触发一次，所以非常适合用来写其他的初始化代码。
+
+假设我们想给一个`<form>`表单绑定submit事件，下面的代码没有预期的效果：
+
+```js
+/*<form id="testForm">
+        ...
+</form>*/
+<script>
+        // 代码有误:
+        $('#testForm').submit(
+            function () {
+                alert('submit!');
+            }
+        );
+</script>
+```
+
+因为JavaScript在此执行的时候，`<form>`尚未载入浏览器，所以`$('#testForm)`返回`[]`，并没有绑定事件到任何DOM上。
+
+所以我们自己的初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化：
+
+```js
+<script>
+$(document).ready($('#testForm').submit(
+            function () {
+                alert('submit!');
+            }
+        ));
+</script>
+```
+
+这样写就没有问题了。因为相关代码会在DOM树初始化后再执行。
+
+```js
+//当网页元素加载完毕之后，响应事件
+$(function () {
+    // init...
+});
+```
+
+上面的这种写法最为常见。如果你遇到`$(function () {...})`的形式，牢记这是document对象的ready事件处理函数。
+
+**完全可以反复绑定事件处理函数，它们会依次执行**：
+
+```js
+$(function () {
+    console.log('init A...');
+});
+$(function () {
+    console.log('init B...');
+});
+$(function () {
+    console.log('init C...');
+});
+```
+
+### 表单事件
+
+- focus：当DOM获得焦点时触发；
+- blur：当DOM失去焦点时触发；
+- select:当内容选择时触发所绑定的函数。
+- change：当`<input>`、`<select>`或`<textarea>`的内容改变时触发；
+- submit：当`<form>`提交时触发；
+
+### 事件触发条件change
+
+一个需要注意的问题是，事件的触发总是由用户操作引发的。例如，我们监控文本框的内容改动：
+
+```js
+var input = $('#test-input');
+input.change(function () {
+    console.log('changed...');
+});
+```
+
+当用户在文本框中输入时，就会触发change事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发change事件：
+
+```js
+var input = $('#test-input');
+input.val('change it!'); // 无法触发change事件
+```
+
+有些时候，我们希望用代码触发change事件，可以直接调用无参数的change()方法来触发该事件：
+
+```js
+var input = $('#test-input');
+input.val('change it!');
+input.change(); // 触发change事件
+input.change()相当于input.trigger('change')，它是trigger()方法的简写。
+```
+
+为什么我们希望手动触发一个事件呢？如果不这么做，很多时候，我们就得写两份一模一样的代码。
+
+*******
+
+###  focus和blur
+
+focus表示获取焦点时触发的事件，而blur表示失去焦点时触发的事件，两者是相反操作。 
+
+focus和blur这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时，此时它会获得光标，就会触发focus事件。当文本框失去光标时，就会触发blur事件。 
+
+并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有两种。 
+
+1. **表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）** 
+
+2. **超链接** 
+
+判断一个元素是否具有焦点很简单，我们打开一个页面后按Tab键，能够选中的就是带有焦点特性的元素。在实际开发中，焦点事件（focus和blur）一般用于单行文本框和多行文本框，其他地方比较少见。
+
+**例题**:实现输入框获取焦点后清空内容，输入内容后失去焦点再次获取焦点不会清空内容
+
+```html
+<input type="text" value="百度一下，你就不知道" placeholder="百度一下，你就不知道" style="color: #BBBBBB;"><br>
+```
+
+```js
+$(function(){
+        var a=true;
+        $(':text').focus(function(){
+            if(a){
+                $(':text').val(' ');
+            }
+            var text=$(':text').val();
+            $(':text').css('color','#000000');
+            a=false;
+        }).blur(function(){
+            if($(':text').val()==' '){
+                $(':text').val('百度一下，你就不知道');
+                $(':text').css('color','#BBBBBB');
+                a=true;
+            }
+        });
+    });
+```
+
+**************
+
+### select()
+
+当内容选择时触发所绑定的函数。
+
+```js
+<input type="text" value="123456">
+
+$('input').select(function () {//全选中输出value
+    console.log($(this).val());
+});
+
+//全选功能
+        $(function () {
+            $('#txt1').click(
+                function () {
+                    $(this).select();
+                }
+            )
+        })
+```
+
+**********
\ No newline at end of file
diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-24-jquery\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-24-jquery\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..762fd7f
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-24-jquery\344\272\213\344\273\266\345\257\271\350\261\241\347\254\224\350\256\260.md"
@@ -0,0 +1,76 @@
+### 取消事件off
+
+一个已被绑定的事件可以解除绑定，通过off('click', function)实现：
+
+```js
+a.click(function hello() {
+    alert('hello!');
+}); // 绑定事件
+
+// 10秒钟后解除绑定:
+setTimeout(function () {
+    a.off('click', hello);
+}, 10000);
+```
+
+需要特别注意的是，下面这种写法是无效的：
+
+```js
+// 绑定事件:
+a.click(function () {
+    alert('hello!');
+});
+
+// 解除绑定:
+a.off('click', function () {
+    alert('hello!');
+});
+```
+
+这是因为两个匿名函数虽然长得一模一样，但是它们是两个不同的函数对象，off('click', function () {...})无法移除已绑定的第一个匿名函数。
+
+为了实现移除效果，可以使用off('click')一次性移除已绑定的click事件的所有处理函数。
+
+```js
+$('button').off('click');//一般用这个
+```
+
+同理，无参数调用off()一次性移除已绑定的所有类型的事件处理函数。
+
+*******
+
+### 一次性事件one
+
+当前元素只触发一次该事件one(事件类型,function)
+
+```js
+//实现只能点击一次
+$(function () {
+        $('#btn').one('click',function () {
+            alert('点击');
+        })
+    })
+```
+
+*****
+
+### 事件对象
+
+事件对象是用来记录一些事件发生时的相关信息的对象。事==件对象只有事件发生时才会产生==，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁
+
+event对象里重点关注:
+
+- this
+- trget:源对象,目标
+- currenTarget：返回其监听器触发事件的节点，即当前处理该事件的元素
+
+```js
+
+    $(function () {
+        $('#div').click(
+            function (event) {
+                console.log('div触发了');
+            }
+        )
+    })
+```
diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-28-jQuery\346\226\271\346\263\225\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-28-jQuery\346\226\271\346\263\225\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..da99fac
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-28-jQuery\346\226\271\346\263\225\347\254\224\350\256\260.md"
@@ -0,0 +1,257 @@
+## jQuery方法
+
+### 元素方法
+
+添加删除方法详情请看DOM操作里的修改DOM解构
+
+#### 添加元素
+
+- DOM创建:   var $p = $('<p>这是一段文本</p>>')
+- 插入元素
+- prepend()和prependTo()
+- append()和appendTo()
+- before() 和insertBefore()
+- after() 和 insertAfter() 
+
+#### 删除元素
+
+- remove()
+- detach()
+- empty()
+
+#### 包裹元素
+
+- wrap()
+- wrapAll()
+- wrapInner()
+
+******
+
+### 过滤方法
+
+####  类名过滤: hasClass()
+
+类名过滤，指的是根据元素的class来过滤。在jQuery中，我们可以使用hasClass()方法来实现类名过滤
+
+过滤语法:
+
+```html
+$().hasClass(“类名”)
+```
+
+hasClass()方法一般用于==判断元素是否包含指定的类名==：如果包含，则返回true；如果不包含，则返回false。
+
+**例题:判断p标签是否包含”beauty“的样式**
+
+```js
+<p class="beauty"></p>
+<!--HTML-->
+<!--script-->
+console.log($('p').hasClass('beauty'));//true
+```
+
+********
+
+#### 下标过滤: eq()
+
+​	下标过滤，指的是根据元素集合的下标来过滤。在jQuery中，我们可以使用eq()方法来实现下标过 滤。 
+
+语法：
+
+```js
+$().eq(index|-index)
+```
+
+​		说明： n是一个整数，从0开始。当取值为正整数时，eq(0)获取的是第1个元素，eq(1)获取的是第2个元素，……，以此类推。 当取值为负整数时，eq(-1)获取的是倒数第1个元素，eq(-2)获取的是倒数第2个元素，……，以此类 推。 
+
+**例题:设置ul下第二个li的背景为红色**
+
+```js
+<ul>
+    <li>列表项1</li>
+    <li id="two">列表项2</li>
+</ul>
+<!--HTML-->
+<!--script-->
+$('ul>li').eq(1).css('background', 'red');
+```
+
+*********
+
+#### 判断过滤: is()
+
+判断过滤，指的是根据某些条件进行判断，然后选取符合条件的元素。在jQuery中，我们可以使用is()方法来实现判断过滤。 
+
+语法：
+
+```
+$().is(selector)
+```
+
+说明： 
+
+参数selector是一个选择器。is()方法用于判断当前选择的元素集合中，是否存在符合条件的元素。 
+
+如果存在，则返回true；如果不存在，则返回false。
+
+```js
+//判断元素是否可见 
+$().is(":visible") 
+//判断元素是否处于动画中 
+$().is(":animated") 
+//判断单选框或复选框是否被选中 
+$().is(":checked") 
+//判断当前元素是否第一个子元素 
+$(this).is(":first-child") 
+//判断文本中是否包含jQuery这个词 
+$().is(":contains('jQuery')") 
+//判断是否包含某些类名 
+$().is(".select")
+```
+
+**练习**：全选反选
+
+```js
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script></script>
+</head>
+<body>
+    <div>
+        <p><label><input id="selectAll" type="checkbox" />全选/反选：</label></p> 
+            <label><input type="checkbox" class="fruit" value="苹果" />苹果</label> 
+		   <label><input type="checkbox" class="fruit" value="香蕉" />香蕉</label>
+            <label><input type="checkbox" class="fruit" value="西瓜" />西瓜</label>
+    </div>
+</body>
+<script>
+$('#selectAll').change(function () {
+	var bool = $(this).is(':checked');
+	if(bool){
+//将下面的checkbox全变为选中状态(checked) true/false  attr  prop
+	$("[class='fruit']").prop("checked",true);
+	}else{
+	$("[class='fruit']").prop("checked",false);
+        }
+})
+</script>
+</html>
+```
+
+*****
+
+#### 反向过滤: not()
+
+在jQuery中， 我们还可以使用not()方法来过滤“不符合条件”的元素，并且返回余下符合条件的元素。(就是说从匹配的元素集合中移除指定的元素。) 
+
+其中，not()方法可以使用选择器过滤，也可以使用函数过滤。 
+
+语法：
+
+```
+$().not(selector或fn)
+```
+
+**需求描述：设置ul下li标签的背景为红色，排除第二个li**
+
+```html
+<ul>
+    <li>列表项1</li>
+    <li id="two">列表项2</li>
+    <li>列表项3</li>
+</ul>
+```
+
+```js
+var two = $('ul>li').eq(1);
+$('ul>li').not(two).css('background', 'red');
+```
+
+******
+
+#### 选择器过滤: filter()
+
+filter[选择器]过滤，指的是使用选择器来选取符合条件的元素。
+
+语法：
+
+```js
+$().filter(selector or fn)
+```
+
+****
+
+#### has():过滤子代元素
+
+在jQuery中，表达式过滤除了可以使用filter()访问外，我们还可以使用has()方法。has()方法虽然没有filter()方法那么强大，**但是它的运行速度比较快**。
+
+作用:保留包含特定后代的元素，去掉那些不含有指定后代的元素。
+
+语法：
+
+```
+$().has(selector|element)
+```
+
+说明： 
+
+参数selector是一个选择器。element是一个DOM元素
+
+has()方法与filter()方法功能相似，不过has()方法只有选择器过滤，没有函数过滤。因此我们可以把has() 方法看成是filter()方法的精简版。 
+
+**示例:给含有ul的li加上背景色**
+
+```html
+<ul>
+  <li>list item 1</li>
+  <li>list item 2
+    <ul>//这里开始变颜色
+      <li>list item 2-a</li>
+      <li>list item 2-b</li>
+    </ul>
+  </li>
+  <li>list item 3</li>
+  <li>list item 4</li>
+</ul>
+```
+
+```js
+$('li').has('ul').css('background-color', 'red');
+```
+
+*******
+
+#### index() 
+
+在jQuery中，我们可以使用index()方法来获取当前jQuery对象集合中“指定元素”的索引值。 
+
+```
+$(selector).index()
+```
+
+说明： 
+
+index()方法可以接受一个“jQuery对象”或“DOM对象”作为参数，不过一般情况下，我们很少会使用到参 数。当index()不带参数时，一般指的是当前元素相对于父元素的索引值。 
+
+**示例:**
+
+```html
+	   <ul>
+        <li>1</li>
+        <li class="6">2</li>
+        <li>3</li>
+        </ul>
+```
+
+```js
+var index=  $('li[class=6]').index();
+console.log(index);//1
+```
+
+*****
+
+## 
\ No newline at end of file
diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-29-ajax\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-29-ajax\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..b852070
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-29-ajax\347\254\224\350\256\260.md"
@@ -0,0 +1,401 @@
+![](https://gitee.com/wumingjie0606/tuchuang/raw/master/img/2022-9-1013:51:47-%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202022-08-16%20162151.png)
+
+浏览器发送请求接收响应之后会对网页进行渲染，如果我们不想让网页重新渲染，通过javascript代码触发事件告诉浏览器我们的需求，由于javascript本身没有网络通讯能力，所以得通过浏览器来与服务器联系(由浏览器内建的**XMLHttpRequest[^可扩展超文本传输请求][别称xhr]构造函数**进行规范)
+
+==用javascript来操控xhr==以表示新的网页请求这样子就可以和服务器进行网络沟通！小黄人有很多属性方法和HTTPX相关，**用send()[^发送]方法发送**但是在**发送之前得用open()[^打开]方法知道请求的地址**，再之后呢如果运行出现错误我们很难找出错误，还好**HTTP协议里有规定的状态码(200,304,404)**来表示响应的状态,xhr下有个**readyState[^状态值]属性，这个属性会记录请求响应时候处于哪个过程:**
+
+- 0表示未调用open()方法
+- 1表示调用open()方法，但未调用send()方法
+- 2表示发送请求，还没收到响应
+- 3表示收到了部分响应
+- 4表示响应都接收完了
+
+readyState是从头到尾在变化，我们用onreadystatechange[^状态值改变]来监视readyState属性值的变化，当获取返回的数据再利用javascript对DOM操作实现局部页面刷新，这就是Ajax的基本流程
+
+
+
+如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。
+
+**这就是Web的运作原理：一次HTTP请求对应一个页面。**
+
+如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。
+
+最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。
+
+用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：==AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。==
+
+==在现代浏览器上写AJAX主要依靠XMLHttpRequest对象==
+
+### 实现步骤
+
+##### 1.创建http请求对象
+
+```js
+var xhr = new XMLHttpRequest();
+```
+
+##### 2.连接到服务器
+
+```js
+xhr.open(type,url,bool)
+```
+
+其中，
+
+- type：表示发送的请求类型，通常是：get或者post
+- url：表示请求数据的路径，如果是get方式，大部分时候会带有参数，例如：www.bilibili.com?username=admin&password=123
+- bool:  true：表示异步，false：表示同步。由于AJAX是异步无刷新的方式获取数据，大部分情况下设置为true。
+
+##### 3.发送请求（告诉服务器我要什么文件）
+
+```js
+//get方式
+xhr.send() / xhr.send(null)
+//post方式
+xhr.send(data)
+
+//如果是post方式，建议设置请求头
+xhr.setRequestHeader("Content-type", "application/json" || "application/x-www-form-urlencoded")
+```
+
+如果是get方式，send()中不需要添加任何参数,因为在连接服务器的时候就已经发送
+
+如果是post方式，send()中需要添加参数，例如send(username=admin&password=123);
+
+##### 4.接收返回值 
+
+接收返回值的时候需要监听事件(xhr.onreadystatechange)的状态,其中，状态分为:
+
+0 － （未初始化）还没有调用send()方法
+1 － （载入）已调用send()方法，正在发送请求
+2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
+3 － （交互）正在解析响应内容
+**4 － （完成）响应内容解析完成，可以在客户端调用了**
+
+**注意**:
+
+1. 只有readystate=4时，才表示能调用响应数据
+2. 此外，还需判断访问服务器是否成功，使用xhr.status判断，具体status状态判断可查阅:https://blog.csdn.net/DGMM_/article/details/120641072
+
+```js
+//1.新建XMLHttpRequest对象
+var request = new XMLHttpRequest(); 
+
+//2.请求行设置:
+request.open('GET', '/api/categories.json'，true);
+//(请求方法，URL，是否异步请求ture,false)
+
+//3.发送一个请求
+request.send();//(请求体) ///请求
+
+//HPPT协议里有规定的状态码来表示响应状态(200,304,404)
+request.onreadystatechange = function () { // 状态发生变化时，函数被回调
+    if (request.readyState === 4) { // 成功完成
+        // 判断响应结果:
+        if (request.status === 200) {
+            // 成功，通过responseText拿到响应的文本:
+            return success(request.responseText);
+        } 
+        else {
+             失败，根据响应码判断失败原因:
+           // return fail(request.status);
+        }
+    } else {
+        // HTTP请求还在继续...
+    }
+}
+
+alert('请求已发送，请等待响应...');
+```
+
+
+
+****
+
+### 实例
+
+#### get方式
+
+用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。  
+
+Ajax发送请求: 如果是get请求send(参数)参数：必须是null或xhr.send();  
+
+    get请求就不必要设置 xhr.setRequestHeader(header,value) 
+
+备注：如果xhr.send(参数);参数不为空情况下,在某些浏览器中会自动转换成post请求方式 您可以通过request.getMethod();方法获取请求的方式  
+
+```js
+function getAjax() {
+            //获取xhr对象  
+            var xhr = getXhr();
+            //规定请求类型       
+            xhr.open("get", "test.json?userName=123", true);
+            //发送请求  
+            xhr.send();
+            //处理服务器响应事件  
+            xhr.onreadystatechange = function () {
+                //判读是否处理完毕 与判读服务器是否处理成功！  
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    alert(xhr.responseText);
+                    return JSON.parse(xhr.responseText);
+                }
+                console.log(xhr.readyState);
+                console.log(xhr.status);
+            }
+        }
+```
+
+**使用get方式需要注意 :**
+对于get请求（或凡涉及到url传递参数的），被传递的参数都要先经(预编码处理)encodeURIComponent方法处理.例：var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent(content)+"&id=1" ;  
+
+*****
+
+#### post方式 
+
+当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。
+
+发送请求:如果是post请求send(参数)参数：
+
+- 参数可以是null或者xhr.send()|send(带有参数的)
+- post请求在传递值的情况下必须设置      xhr.setRequestHeader(header,value)  
+
+总之，get方式传送数据量小，效率高，会被缓存，post反之。
+
+```js
+        function postAjax() {
+            //获取xhr对象  
+            var xhr = getXhr();
+            //规定请求类型       
+            xhr.open("post", "main.jsp", true);
+            //设置头信息  
+            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
+            //发送参数  
+            xhr.send("username=345&pass=123");
+            //相应事件处理  
+            xhr.onreadystatechange = function () {
+                //判读是否处理完毕 与判读服务器是否处理成功！  
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    alert(xhr.responseText);
+                }
+            }
+        }  
+```
+
+使用Post方式需注意： 
+
+- 设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www-form-urlencoded;")。例：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")  application/json 
+- 参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18 注意var name=update.php?abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的; 
+- 参数在Send(参数)方法中发送,例：xhr.send(name); 如果是  get  方式，直接 xmlHttp.send(null);  
+- 服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式，则$username =$_POST["username"];  
+
+*****
+
+#### 响应数据处理
+
+将返回的json类型的数据转换成对象
+
+1. 手动转换
+
+```js
+var obj = JSON.parse(xhr.response)//判断处理成功后
+console.log(obj.name)
+```
+
+2. 自动转换
+
+```js
+//创建对象后设置:
+xhr.responseType = 'json';//写open上面
+console.log(xhr.response.name)
+```
+
+******
+
+#### IE缓存
+
+不能实时响应数据，为了解决该问题，可以在open(type,url,bool)中设置
+
+```
+url: 'url?t='+Date.now()
+```
+
+********
+
+#### 解决请求重复发送
+
+一个用户最多只能发送一个请求
+
+```
+isSending = false;
+{
+	if(isSending){
+		xhr.abort()//取消请求
+	}
+	isSending = true;
+	if(xhr.readystate === 4){
+	isSending = false;
+	}
+}
+```
+
+以下是将原生AJAX封装成方法的示例：
+
+https://blog.csdn.net/Shaw_Jie/article/details/127126376
+
+*******
+
+如果你想把标准写法和IE写法混在一起，可以这么写：
+
+```js
+var request;
+if (window.XMLHttpRequest) {
+    request = new XMLHttpRequest();
+} else {
+    request = new ActiveXObject('Microsoft.XMLHTTP');
+}
+```
+
+注意事项:
+
+通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpReques注意，不要根据浏览器的navigator.userAgent来检测浏览器是否支持某个JavaScript特性，一是因为这个字符串本身可以伪造，二是通过IE版本判断JavaScript特性将非常复杂。
+
+**当创建了XMLHttpRequest对象后，==要先设置onreadystatechange的回调函数。==在回调函数中，通常我们只需通过readyState4判断请求是否完成，如果已完成，再根据status200判断是否是一个成功的响应。**
+
+**XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。**
+
+==注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。==如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
+
+==最后调用send()方法才真正发送请求。==GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。
+
+******
+
+### 安全限制(扩展)
+
+上面代码的URL使用的是相对路径。如果你把它改为'http://www.sina.com.cn/'，再运行，肯定报错。在Chrome的控制台里，还可以看到错误信息。
+
+这是因为浏览器的同源策略导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。
+
+完全一致的意思是，域名要相同`（www.example.com和example.com不同）`，协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。有的浏览器口子松一点，允许端口不同，大多数浏览器都会严格遵守这个限制。
+
+那是不是用JavaScript无法请求外域（就是其他网站）的URL了呢？方法还是有的，大概有这么几种：
+
+一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。
+
+二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：
+
+```js
+'/proxy?url=http://www.sina.com.cn'
+```
+
+代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。
+
+第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源：
+
+```js
+<html>
+<head>
+    <script src="http://example.com/abc.js"></script>
+    ...
+</head>
+<body>
+...
+</body>
+</html>
+```
+
+JSONP通常以函数调用的形式返回，例如，返回JavaScript内容如下：
+
+```js
+foo('data');
+```
+
+这样一来，我们如果在页面中先准备好foo()函数，然后给页面动态加一个`<script>`节点，相当于动态读取外域的JavaScript资源，最后就等着接收回调了。
+
+以163的股票查询URL为例，对于`URL：http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice`，你将得到如下返回：
+
+```js
+refreshPrice({"0000001":{"code": "0000001", ... });
+```
+
+因此我们需要首先在页面中准备好回调函数：
+
+```js
+function refreshPrice(data) {
+    var p = document.getElementById('test-jsonp');
+    p.innerHTML = '当前价格：' +
+        data['0000001'].name +': ' + 
+        data['0000001'].price + '；' +
+        data['1399001'].name + ': ' +
+        data['1399001'].price;
+}
+```
+
+最后用getPrice()函数触发：
+
+```js
+function getPrice() {
+    var
+        js = document.createElement('script'),
+        head = document.getElementsByTagName('head')[0];
+    js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
+    head.appendChild(js);
+}
+```
+
+就完成了跨域加载数据。
+
+**********
+
+### CORS(扩展)
+
+如果浏览器支持HTML5，那么就可以一劳永逸地使用新的跨域策略：CORS了。
+
+**CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。**
+
+了解CORS前，我们先搞明白概念：
+
+**Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。**
+
+用一个图来表示就是：
+
+假设本域是my.com，外域是sina.com，只要响应头`Access-Control-Allow-Origin为http://my.com`，或者是*，本次请求就可以成功。
+
+可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的`Access-Control-Allow-Origin`，决定权始终在对方手中。
+
+上面这种跨域请求，称之为“简单请求”。简单请求包括GET、HEAD和POST（POST的Content-Type类型 仅限`application/x-www-form-urlencoded、multipart/form-data和text/plain）`，并且不能出现任何自定义头`（例如，X-Custom: 12345）`，通常能满足90%的需求。
+
+无论你是否需要用JavaScript通过CORS跨域请求资源，你都要了解CORS的原理。最新的浏览器全面支持HTML5。在引用外域资源时，除了JavaScript和CSS外，都要验证CORS。例如，当你引用了某个第三方CDN上的字体文件时：
+
+```js
+/* CSS */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
+}
+```
+
+如果该CDN服务商未正确设置`Access-Control-Allow-Origin`，那么浏览器无法加载字体资源。
+
+对于PUT、DELETE以及其他类型如`application/json`的POST请求，在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受：
+
+```js
+OPTIONS /path/to/resource HTTP/1.1
+Host: bar.com
+Origin: http://my.com
+Access-Control-Request-Method: POST
+```
+
+服务器必须响应并明确指出允许的Method：
+
+```js
+HTTP/1.1 200 OK
+Access-Control-Allow-Origin: http://my.com
+Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
+Access-Control-Max-Age: 86400
+```
+
+浏览器确认服务器响应的`Access-Control-Allow-Methods`头确实包含将要发送的AJAX请求的Method，才会继续发送AJAX，否则，抛出一个错误。
+
+由于以POST、PUT方式传送JSON格式的数据在REST中很常见，所以要跨域正确处理POST和PUT请求，服务器端必须正确响应OPTIONS请求。
+
+需要深入了解CORS的童鞋请移步W3C文档。
\ No newline at end of file
diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-30-jqajax\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-30-jqajax\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..466a4db
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-11-30-jqajax\347\254\224\350\256\260.md"
@@ -0,0 +1,215 @@
+## jQueryAJAX
+
+AJAX
+
+用JavaScript写AJAX前面已经介绍过了，主要问题就是不同浏览器需要写不同代码，并且状态和错误处理写起来很麻烦。
+
+用jQuery的相关对象来处理AJAX，不但不需要考虑浏览器问题，代码也能大大简化。
+
+### $.ajax()
+
+jQuery在全局对象jQuery（也就是$）绑定了ajax()函数，可以处理AJAX请求。
+
+```js
+$.ajax(options)
+```
+
+说明：
+
+$.ajax()方法只有一个参数，这个参数是一个对象。该对象中包含了Ajax请求所需要的各种信息，并且以 “键值对”的形式存在。 options是一个对象，这个对象内部有很多参数可以设置，所有参数都是可选的，如下表所示：
+
+| **参数**    | **说明**                                                     |
+| ----------- | ------------------------------------------------------------ |
+| **url**     | **被加载的页面地址**                                         |
+| **type**    | **数据请求方式，“get"或"post”，默认为"get"**                 |
+| **data**    | 发送到服务器的数据，可以是字符串或对象                       |
+| dataType    | 服务器返回数据的类型，如：text、html、script、json、xml      |
+| beforeSend  | 发送请求前可以修改XMLHttpRequest对象的函数                   |
+| complete    | 请求“完成”后的回调函数                                       |
+| **success** | 请求“成功”后的回调函数                                       |
+| **error**   | 请求“失败”后的回调函数                                       |
+| timeout     | 请求超时的时间，单位为“毫秒”                                 |
+| global      | 是否响应全局事件，默认为true（即响应）                       |
+| async       | 是否为异步请求，默认为true（即异步）                         |
+| cache       | 是否进行页面缓存，true表示缓存，false表示不缓存,千万不要指定为false； |
+| method      | 发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等；         |
+| contentType | 发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json； |
+| headers     | 发送的额外的HTTP头，必须是一个object；                       |
+| jsonp       |                                                              |
+
+下面的例子发送一个GET请求，并返回一个JSON格式的数据：
+
+```js
+$.ajax({
+                url:'data.json',// 发送的路径
+                type:'get',// 发送方式
+                data:{a:100,b:200},// 发送的数据
+                success:(data) => console.log(data),
+    //成功获取到后端返回结果的回调函数
+                error:()=> console.log('请求失败')
+    // 发送失败的回调函数
+            })
+// 请求已经发送了
+```
+
+不过，如何用回调函数处理返回的数据和出错时的响应呢？
+
+还记得Promise对象吗？jQuery的jqXHR对象类似一个Promise对象，我们可以用链式写法来处理各种回调：
+
+```js
+'use strict';
+
+function ajaxLog(s) {
+    var txt = $('#test-response-text');
+    txt.val(txt.val() + '\n' + s);
+}
+
+$('#test-response-text').val('');
+var jqxhr = $.ajax('/api/categories', {
+    dataType: 'json'
+}).done(function (data) {
+    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
+}).fail(function (xhr, status) {
+    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
+}).always(function () {
+    ajaxLog('请求完成: 无论成功或失败都会调用');
+});
+```
+
+****
+
+### $.get()
+
+对常用的AJAX操作，jQuery提供了一些辅助方法。由于GET请求最常见，所以jQuery提供了get()方法，可以这么写：
+
+语法：
+
+```js
+$.get(url, data, fn, type)
+```
+
+| 参数 | 说明                               |
+| :--: | :--------------------------------- |
+| url  | 必选参数，表示被加载的页面地址     |
+| data | 可选参数，表示发送到服务器的数据   |
+|  fn  | 可选参数，表示请求成功后的回调函数 |
+| type | 可选参数，表示服务器返回的内容格式 |
+
+参数type返回的内容格式包括：text、html、xml、json、script或default。
+
+```js
+$.get('data.json',{a:100,b:200},function (data) {
+                console.log(data);
+            },'json');
+```
+
+第二个参数如果是object，jQuery自动把它变成query string然后加到URL后面，实际的URL是：
+
+```
+data.json?a=100&b=200
+```
+
+这样我们就不用关心如何用URL编码并构造一个query string了。
+
+第三个参数是回调函数只有两个参数
+
+```js
+function(){
+//data：返回的内容，可以是XML文档，json文件，XHML片段等等
+//textStatus：请求状态：success  error  notmodified timeout4种
+}
+```
+
+*******
+
+### $.post()
+
+post()和get()类似，但是传入的第二个参数默认被序列化为application/x-www-form-urlencoded：
+
+```js
+$.post('data.json',{a:100,b:200},function (data) {
+                console.log(data);
+            },'json');
+```
+
+实际构造的数据name=Bob%20Lee&check=1作为POST的body被发送。
+
+**get与post区别**
+
+1.post的**安全性高**于get；如果以get方式请求，请求参数会拼接到url后面，安全性性低，以post方式请求，请求参数会包裹在请求体中，安全性更高
+
+2.数量区别：get方式传输的数据量小，规定不能超过2kb，post方式请求**数据量大**，没有限制。
+
+3.传输速度：get的传输速度高于post
+
+**********
+
+### $.getJSON()
+
+由于JSON用得越来越普遍，所以jQuery也提供了getJSON()方法来快速通过GET获取一个JSON对象：
+
+```js
+$.getJSON(url ,data, function(data){
+……
+})
+```
+
+说明： .getJSON()是一个全局方法，所谓“全局方法”，指的是直接定义在jQuery对象（即“$”）下的方法。 参数url表示被加载的文件地址；参数data表示发送到服务器的数据，数据为“键值对”格式；参数fn表示 请求成功后的回调函数，请求失败是不会处理的。
+
+```js
+ $.getJSON('data.json',{name: 'Bob Lee',check: 1
+}，function (data) {
+	console.log(data);// data已经被解析为JSON对象了
+})
+```
+
+**********
+
+### $.getScript()
+
+在jQuery中，我们可以使用.getScript()方法通过AJAX来获取并运行一个外部JavaScript文 件。.getScript()是一个**用于动态加载JavaScript的方法。**当网站需要加载大量JavaScript时，动态加载 JavaScript就是一个比较好的方法。当需要某个功能时再将相应的JavaScript加载进来。
+
+语法：
+
+```js
+$.getScript(url, fn)
+```
+
+| 参数 | 说明                                     |
+| ---- | ---------------------------------------- |
+| url  | 必选参数，表示被加载的JavaScript文件路径 |
+| fn   | 可选参数，表示请求成功后的回调函数       |
+
+准备数据js文件：
+
+```js
+console.log("jQuery AJAX学习");
+```
+
+```js
+$.getScript('test.js');//动态引入jsw
+```
+
+当点击加载时，页面上看不到任何效果，虽然函数加载了JSON文件，但是并没有告知JavaScript对返回的数据如何处理，为此，所以在回调函数里我们可以处理返回的数据
+通常我们需要遍历我们得到的数据，虽然这里我们可以使用传统的for循环，但是我们也可以通过$.each()，可以用来遍历对象和数组
+
+相对传统的加载方式，$.getScript()有以下两个优点：
+
+1. 异步跨域加载JavaScript文件。 
+2. 可避免提前加载JavaScript文件，只有需要的时候才会去加载。这样可以减少服务器和客户端的负 担，加快页面加载速度。
+
+常见问题： 
+
+1.每次执行该功能的时候都会去请求一次这个JavaScript文件，这样不是在帮倒忙吗？ 
+
+其实$.getScript()是对ajax()方法的一个封装，可以使用ajax()方法的缓存来将http的状态从200改变成 304，从而使用客户端的缓存。
+
+******
+
+### 安全限制
+
+jQuery的AJAX完全封装的是JavaScript的AJAX操作，所以它的安全限制和前面讲的用JavaScript写AJAX完全一样。
+
+如果需要使用JSONP，可以在ajax()中设置jsonp: 'callback'，让jQuery实现JSONP跨域加载数据。
+
+关于跨域的设置请参考浏览器 - AJAX一节中CORS的设置。	
\ No newline at end of file
diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-Promise\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-Promise\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..f1223a0
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-Promise\347\254\224\350\256\260.md"
@@ -0,0 +1,143 @@
+**Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一**
+
+**对于几种常见异步编程方案**
+
+- 回调函数
+- 事件监听
+- 发布/订阅
+- Promise对象
+
+Promise 是一个构造函数， new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数, excutor有两个函数类型形参resolve[^解决] reject[^解决]
+
+- resolve:将promise状态从等待转变为成功(pending=>fulfilled),并返回结果
+- reject:将promise状态从等待转变为失败(pending=>rejected),并返回结果
+
+promise的三个状态:
+
+- *待定（pending）*：初始状态，既没有被兑现，也没有被拒绝。
+- *已兑现（fulfilled）*：意味着操作成功完成。--resolve触发
+- *已拒绝（rejected）*：意味着操作失败。--reject触发
+- 注意promsie状态 只能由 pending => fulfilled/rejected, 一旦修改就不能再变
+
+promise 的三个方法 then、catch、finally:
+
+- then[^然后]:用于接收promise的resolve成功回调,返回值也是一个promise对象
+- catch[^接住]:监测代码的错误,用于接收promise的reject失败回调
+- finally[^最后]:不管是成功还是失败一定会执行
+
+***********
+
+古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。
+
+## 我们先看一个最简单的Promise例子：
+
+```js
+//假如有一对情侣在情人节那天承诺要送一个孩子给男生作为情人节礼物，那么就有两种结果成功和失败，不管成功与否还是会在情人节后结婚
+    const isPregnant = true;//成功或者失败
+
+    const promise =new Promise( ( resolve, reject ) => {//新建了一个承诺
+        if ( isPregnant ) {
+            resolve(`孩子他爹`); //成功的话就是解决了承诺resolve(成功回调)
+        }else{
+                reject(`老公`);//失败的话就是拒绝承诺reject(失败回调)
+            }
+    });
+//不论成功与否怀孕是不能马上知道结果的要过一段时间，
+
+//所以Promise其实是回调的升级版，在处理一些需要花费比较长时间的任务时，使用Promise就可以进行异步处理，防止阻塞
+
+//当情人节过后，实际只有女人知道结果，因此女人不告诉男人结果，男人就不得而知，但是这个女人很会玩，成功或者失败会改变对男人的称呼，也就是说我们可以为resolve,reject传入参数，参数可以在后面使用(接收回调)
+
+promise//揭露承诺的结果,可以使用链式调用直接在后面调用
+    .then (name=>{//如果成功用then表示
+        console.log(`男人成为了${name}`);//接收promise的resolve成功回调
+    })
+    .catch(name =>{//失败则用catch表示
+        console.log(`男人成为了${name}!`);//接收promise的reject失败回调
+    })
+    .finally(() =>{//最后结果不管怎么样都是结为夫妻用finally表示(一定会执行)
+        console.log('男人和女人最终结婚了!')
+    });
+```
+
+这个Promise对象有两个参数，这两个参数都是函数，如果执行成功，我们将调用resolve(`孩子他爹`)，如果执行失败，我们将调用reject(`老公`)。可以看出，Promise对象只关心自身的逻辑，并不关心具体的resolve和reject将如何处理结果。
+
+所以代码可以用链式调用简化为:
+
+Promise的链式编程可以保证代码的执行顺序，前提是每一次在than做完处理后，一定要return一个Promise对象，这样才能在下一次then时接收到数据。
+
+```js
+const p = new Promise(function (resolve, reject) {
+        if (//成功) {
+            resolve('成功');//返回成功回调
+        } else {
+            reject('失败');//返回失败回调
+        }
+    }).then(function (data) {//接收成功回调
+    	//如果这里写一个return 123
+        //return的值将作为then方法返回的promise的resolve的值传递出，console将打印出123
+        console.log(data);//返回的是一个promise对象
+    })//.then().then()...
+.catch(function(data){//接收失败回调
+        console.log('请求失败');
+    })
+```
+
+可见Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了
+
+Promise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。
+
+要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写：
+
+```js
+job1.then(job2).then(job3).catch(handleError);//其中，job1、job2和job3都是Promise对象。
+```
+
+## 解决回调地狱
+
+**回调地狱**:
+
+如果一个请求b需要在拿到请求a中返回的参数后，才能正确发起请求，用传统的Ajax处理会有回调地狱的问题，及层层嵌套问题，代码不易读，后期亦不好维护。
+
+前提有3个json文件:
+
+```json
+{
+    "username": "周飘"
+}//data.json
+{
+    "周飘": "Contact"
+}//data1.json
+{
+    "Contact":"10086"
+}//data2.json
+```
+
+```js
+	$.get('data.json', function (data) {
+            //对象解构 username='周飘'
+            const { username } = data;
+            console.log(username);
+            $.get('data1.json', function (data1) {
+                const contact = data1[username]
+                console.log(contact);
+                $.get('data2.json', function (data2) {
+	console.log(username + ':' + data2[contact]);
+                })
+            })
+        })
+//分别打印出:周飘,Contact,10086
+```
+
+Promise是避免回调地狱的一个进步，通过.then( )的链式操作来触发多个异步任务，并且保证执行顺序，使得代码更易于阅读和维护。
+
+首先封装一个Promise,并返回
+
+链式调用then:每一次在than做完处理后，一定要return一个Promise对象，这样才能在下一次then时接收到数据。
+
+但是Promise最大的问题就是代码冗余，原来的异步任务被Promise封装一下，不管什么操作都用than，就会导致一眼看过去全是then…then…then…,这样也是不利于代码维护的。
+
+[所以还可以使用async/await 使代码看起来更像同步代码](https://blog.csdn.net/qq_42698326/article/details/111075519?ops_request_misc=%7B%22request%5Fid%22%3A%22166998360016782428689291%22%2C%22scm%22%3A%2220140713.130102334.pc%5Fall.%22%7D&request_id=166998360016782428689291&biz_id=0&spm=1018.2226.3001.4187)
+
+********
+
diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..de535d1
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\254\224\350\256\260.md"
@@ -0,0 +1,54 @@
+```js
+<!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>
+    
+</body>
+<script>
+      function fn(url, type) {
+        var p = new Promise(function (resolve, reject) {
+            $.ajax({
+                url: url,
+                type: type,
+                success: function (data) {
+                    resolve(data)
+                },
+                error: function (reason) {
+                    reject(reason)
+                }
+            })
+        })
+        return p;
+    }
+
+    fn('data.json', 'get')
+        .then(data => {
+            const { username } = data;
+            console.log(username);
+            return fn('data1.json', 'get');
+        })
+        .then(data => {
+            for (var i in data) {
+                console.log(data[i]);
+            }
+            return fn('data2.json', 'get');
+        })
+        .then(data => {
+            for (var i in data) {
+                console.log(data[i]);
+            }
+        })
+        .catch(data => {
+            console.log('错误' + data);
+        })
+
+</script>
+</html>
+```
+
-- 
Gitee


From 50dca88a95aba0e1d6c740426efcb6ace0accab6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9E=AB?= <1687425871@qq.com>
Date: Tue, 6 Dec 2022 02:20:04 +0000
Subject: [PATCH 2/3] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=2003?=
 =?UTF-8?q?=E9=99=88=E6=9E=AB/=E7=AC=94=E8=AE=B0/2022-12-01-=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E5=9B=9E=E8=B0=83=E5=9C=B0=E7=8B=B1=E7=AC=94=E8=AE=B0?=
 =?UTF-8?q?.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...60\347\213\261\347\254\224\350\256\260.md" | 54 -------------------
 1 file changed, 54 deletions(-)
 delete mode 100644 "03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\254\224\350\256\260.md"

diff --git "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\254\224\350\256\260.md" "b/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\254\224\350\256\260.md"
deleted file mode 100644
index de535d1..0000000
--- "a/03\351\231\210\346\236\253/\347\254\224\350\256\260/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\254\224\350\256\260.md"
+++ /dev/null
@@ -1,54 +0,0 @@
-```js
-<!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>
-    
-</body>
-<script>
-      function fn(url, type) {
-        var p = new Promise(function (resolve, reject) {
-            $.ajax({
-                url: url,
-                type: type,
-                success: function (data) {
-                    resolve(data)
-                },
-                error: function (reason) {
-                    reject(reason)
-                }
-            })
-        })
-        return p;
-    }
-
-    fn('data.json', 'get')
-        .then(data => {
-            const { username } = data;
-            console.log(username);
-            return fn('data1.json', 'get');
-        })
-        .then(data => {
-            for (var i in data) {
-                console.log(data[i]);
-            }
-            return fn('data2.json', 'get');
-        })
-        .then(data => {
-            for (var i in data) {
-                console.log(data[i]);
-            }
-        })
-        .catch(data => {
-            console.log('错误' + data);
-        })
-
-</script>
-</html>
-```
-
-- 
Gitee


From df612f3663efbf6cf3e81f3520c6a1953eeffbca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=9E=AB?= <1687425871@qq.com>
Date: Tue, 6 Dec 2022 02:20:47 +0000
Subject: [PATCH 3/3] =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E7=BB=83=E4=B9=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 陈枫 <1687425871@qq.com>
---
 ...2-11-21-Jquery\347\273\203\344\271\240.md" |  93 +++++++++
 ...36\346\200\247\347\273\203\344\271\240.md" |  47 +++++
 ...13\344\273\266\347\273\203\344\271\240.md" |  65 ++++++
 ...26\350\276\221\344\275\234\344\270\232.md" | 187 ++++++++++++++++++
 ...15\351\200\211\347\273\203\344\271\240.md" |  23 +++
 ...60\347\213\261\347\273\203\344\271\240.md" |  54 +++++
 6 files changed, 469 insertions(+)
 create mode 100644 "03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-21-Jquery\347\273\203\344\271\240.md"
 create mode 100644 "03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-22-jquery\346\223\215\344\275\234\345\261\236\346\200\247\347\273\203\344\271\240.md"
 create mode 100644 "03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-23-jquery\344\272\213\344\273\266\347\273\203\344\271\240.md"
 create mode 100644 "03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-24-\345\234\250\347\272\277\350\241\250\346\240\274\347\274\226\350\276\221\344\275\234\344\270\232.md"
 create mode 100644 "03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-28-\344\270\213\346\213\211\346\241\206\345\222\214\345\217\215\351\200\211\347\273\203\344\271\240.md"
 create mode 100644 "03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\273\203\344\271\240.md"

diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-21-Jquery\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-21-Jquery\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..1baf64f
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-21-Jquery\347\273\203\344\271\240.md"
@@ -0,0 +1,93 @@
+水果练习
+
+```js
+<body>
+    <p>喜欢的水果： <label><input type="checkbox" value="苹果" />苹果</label>
+        <label><input type="checkbox" value="西瓜" checked />西瓜</label>
+        <label><input type="checkbox" value="蜜桃" />蜜桃</label>
+    </p>
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script>
+        // checked
+        var ch = $(':checkbox');
+        ch.click(function () {
+            for (let i = 0; i < ch.length; i++) {
+                if (ch[i].checked) {
+                    console.log(ch[i].value);
+                }
+
+            }
+        });
+
+    </script>
+</body>
+```
+
+输出checkbox选中个数
+
+```js
+<body>
+    <input type="checkbox" value="1" name="check" checked="checked" />
+    <input type="checkbox" value="2" name="check" />
+    <input type="checkbox" value="3" name="check" checked="checked" />
+    <input type="checkbox" value="4" name="check" />
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+
+    <script>
+        var ch = $(':checkbox');
+        ch.click(function () {
+            var a = 0;
+            for (let i = 0; i < ch.length; i++) {
+                if (ch[i].checked) {
+                    a++
+                }
+            }
+            alert(a);
+        });
+
+    </script>
+</body>
+```
+
+偶数改变背景颜色
+
+```js
+<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>
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script>
+        var t = $('tr');
+        for (let i = 0; i < t.length; i++) {
+            if ((i + 1) % 2 == 0) {
+                t[i].style.backgroundColor = 'red';
+            }
+
+        }
+
+    </script>
+</body>
+```
+
diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-22-jquery\346\223\215\344\275\234\345\261\236\346\200\247\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-22-jquery\346\223\215\344\275\234\345\261\236\346\200\247\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..04e52b8
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-22-jquery\346\223\215\344\275\234\345\261\236\346\200\247\347\273\203\344\271\240.md"
@@ -0,0 +1,47 @@
+复制练习
+
+```js
+<input type="text" id="tete">
+    <button >获取</button>
+    <div id="d"></div>
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <script>
+     
+        $('button').click(function(){
+            $('#d').append($('#tete').val());
+            $('#tete').val('');
+        });
+    </script>
+```
+
+搜索
+
+```js
+    <input type="text" id="txt">&nbsp;<button id="btn">获取</button><br>
+    <span
+        id="texts">11月21日0-24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例2225例。其中境外输入病例80例（广东35例，福建12例，重庆6例，云南6例，上海5例，浙江4例，四川3例，陕西3例，天津2例，湖南2例，内蒙古1例，江苏1例），含7例由无症状感染者转为确诊病例（浙江4例，福建1例，
+        四川1例，陕西1例）；本土病例2145例（广东781例，北京274例，四川240例，重庆178例，
+        云南147例，山西89例，内蒙古77例，河南75例，江苏51例，浙江37例，黑龙江28例，
+        陕西23例，辽宁22例，山东22例，新疆19例，甘肃14例，贵州13例，湖南11例，福建10例，
+        湖北9例，河北5例，海南5例，上海4例，广西3例，青海3例，安徽2例，西藏2例，天津1例），
+        含592例由无症状感染者转为确诊病例（广东434例，重庆38例，四川24例，浙江20例，甘肃14例，
+        北京12例，内蒙古7例，湖南7例，江苏6例，陕西6例，山西4例，辽宁4例，黑龙江4例，福建3例，
+        河南3例，广西2例，青海2例，安徽1例，云南1例）。新增死亡病例2例，均为本土病例
+        （河南1例，四川1例）；无新增疑似病例。</span>
+</body>
+
+
+<script>
+    var button = $('#btn');
+    var sptext = $('#texts').text();//文本
+
+    button.click(function () {
+        var txt = $('#txt').val();//输入的文本
+        var exp = new RegExp(txt, 'g');//正则表达式
+        var newhtml = sptext.replace(exp, '<span class="highlight">' + txt + '</span>');
+
+        $('#texts').html(newhtml);
+    });
+</script>
+```
+
diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-23-jquery\344\272\213\344\273\266\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-23-jquery\344\272\213\344\273\266\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..354d78e
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-23-jquery\344\272\213\344\273\266\347\273\203\344\271\240.md"
@@ -0,0 +1,65 @@
+单击双击练习
+
+```js
+ <button>单击</button>
+</body>
+<script>
+    //setTimeout() clearTimeout()
+
+    $(function () {
+        var a;
+        $('button').click(function () {
+            clearTimeout(a);
+            a = setTimeout(function () {
+                alert('这个是单击');
+            }, 300);
+
+        }).dblclick(function () {
+            clearTimeout(a);
+            alert('这个是双击');
+        })
+    })
+</script>
+```
+
+获取字符串长度
+
+```js
+  <input id="txt" type="text" />
+    <div>字符串长度为： <span id="num">0</span> </div>
+</body>
+<script>
+    $(function () {
+        $('#txt').keyup(
+            function () {
+                var len = $(this).val().length;
+                $('#num').text(len);
+            }
+        )
+    })
+</script>
+```
+
+下拉框
+
+```js
+<body>
+    <ul>
+        <li>宝贝</li>
+        <li class="yc"><a href="">天猫</a></li>
+        <li class="yc"><a href="">店铺</a></li>
+    </ul>
+</body>
+<script>
+    $(function(){
+        $('.yc').hide();
+    })
+
+    $('ul').hover(function(){
+        $('.yc').show();
+    },function(){
+        $('.yc').hide();
+    })
+</script>
+```
+
diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-24-\345\234\250\347\272\277\350\241\250\346\240\274\347\274\226\350\276\221\344\275\234\344\270\232.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-24-\345\234\250\347\272\277\350\241\250\346\240\274\347\274\226\350\276\221\344\275\234\344\270\232.md"
new file mode 100644
index 0000000..e49c004
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-24-\345\234\250\347\272\277\350\241\250\346\240\274\347\274\226\350\276\221\344\275\234\344\270\232.md"
@@ -0,0 +1,187 @@
+```js
+<!DOCTYPE html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+    <style type="text/css">
+        /* page styles */
+        body {
+            font-family: "Segoe UI", Frutiger, Tahoma, Helvetica, "Helvetica Neue", Arial, sans-serif;
+            font-size: 62.5%;
+        }
+
+        table {
+            border-collapse: collapse;
+        }
+
+        td,
+        th {
+            text-align: center;
+            border: 1px solid #ddd;
+            padding: 2px 5px;
+        }
+
+        caption {
+            margin: 0 0 .5em;
+            font-weight: bold;
+        }
+
+        /*demo styles*/
+        table {
+            width: 500px;
+            height: 200px;
+            margin-left: 30px;
+        }
+
+        td,
+        th {
+            font-size: 1.2em;
+            padding: 2px;
+            width: 13%;
+        }
+
+        th {
+            background-color: #f4f4f4;
+        }
+
+        caption {
+            font-size: 1.5em;
+        }
+
+        table {
+            float: left;
+            margin: 40px 40px 0 0;
+        }
+
+        .demo {
+            width: 500px;
+            margin: 0 auto;
+        }
+
+        /* input */
+        td input {
+            border: 1px solid orange;
+            background: yellow;
+            -webkit-border-radius: 5px;
+            -moz-border-radius: 5px;
+            border-radius: 5px;
+            position: absolute;
+            padding: 8px 0;
+            text-align: center;
+            width: 60px;
+            margin: -17px 0 0 4px;
+            font-size: 1.4em;
+        }
+
+        td.input {
+            padding: 0;
+            position: relative;
+        }
+
+        td.hover {
+            background: #eee;
+        }
+
+        .aaa {
+            float: right;
+            background: gold;
+            width: 50px;
+            height: 30px;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="demo">
+        <table>
+            <caption>2009年员工产品销售走势图</caption>
+            <thead>
+                <tr>
+                    <td></td>
+                    <th scope="col">food</th>
+                    <th scope="col">auto</th>
+                    <th scope="col">household</th>
+                    <th scope="col">furniture</th>
+                    <th scope="col">kitchen</th>
+                    <th scope="col">bath</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <th scope="row">Mary</th>
+                    <td>190</td>
+                    <td>160</td>
+                    <td>40</td>
+                    <td>120</td>
+                    <td>30</td>
+                    <td>70</td>
+                </tr>
+                <tr>
+                    <th scope="row">Tom</th>
+                    <td>3</td>
+                    <td>40</td>
+                    <td>30</td>
+                    <td>45</td>
+                    <td>35</td>
+                    <td>49</td>
+                </tr>
+                <tr>
+                    <th scope="row">Brad</th>
+                    <td>10</td>
+                    <td>180</td>
+                    <td>10</td>
+                    <td>85</td>
+                    <td>25</td>
+                    <td>79</td>
+                </tr>
+                <tr>
+                    <th scope="row">Kate</th>
+                    <td>40</td>
+                    <td>80</td>
+                    <td>90</td>
+                    <td>25</td>
+                    <td>15</td>
+                    <td>119</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <script>
+
+        $('td').hover(function () {//移入移出改变背景颜色
+            $(this).css('background', 'gray');
+        }, function () {
+            $(this).css('background', '#ffffff');
+        });
+
+        $('td').dblclick(function () {
+            var tdl = $(this);
+            var text = tdl.text();//1.获取td文本内容
+            $(this).text('');//2.清空内容
+
+            $(this).append('<input type="text" id="txt">');//3.添加
+
+            $('#txt').focus(function () {//获取焦点
+                $(this).val(text);//4.获取td文本,设定text的值
+                
+            }).blur(function () {//失去焦点
+                $(this).remove();//6.删除input框
+                txt = $(this).val();//9.如果input没改就恢复
+                tdl.text(txt);//8.修改td文本
+
+            }).keyup(function () {
+                txt = $(this).val();//7.键盘松开获取input的值
+            })
+        })
+        // focus
+
+
+
+    </script>
+</body>
+
+</html>
+```
+
diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-28-\344\270\213\346\213\211\346\241\206\345\222\214\345\217\215\351\200\211\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-28-\344\270\213\346\213\211\346\241\206\345\222\214\345\217\215\351\200\211\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..c716c49
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-11-28-\344\270\213\346\213\211\346\241\206\345\222\214\345\217\215\351\200\211\347\273\203\344\271\240.md"
@@ -0,0 +1,23 @@
+下拉框取值
+
+```js
+  var sel = document.querySelector('#sel');
+    sel.onchange = () => {
+        console.log(sel.value);
+    }
+    // var select = document.getElementById('sel');
+    // select.onchange = function (e) {
+    //     console.dir(e.target.selectedIndex);
+    // }
+```
+
+反向选择
+
+```js
+ $('#selectAll').change(function () {
+        var $che=  $("[class='fruit']").not($(':checked')).prop("checked", true);//找到未选中的修改
+        $("[class='fruit']").not($che).prop("checked", false);
+    })
+
+```
+
diff --git "a/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\273\203\344\271\240.md" "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..de535d1
--- /dev/null
+++ "b/03\351\231\210\346\236\253/\344\275\234\344\270\232/2022-12-01-\350\247\243\345\206\263\345\233\236\350\260\203\345\234\260\347\213\261\347\273\203\344\271\240.md"
@@ -0,0 +1,54 @@
+```js
+<!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>
+    
+</body>
+<script>
+      function fn(url, type) {
+        var p = new Promise(function (resolve, reject) {
+            $.ajax({
+                url: url,
+                type: type,
+                success: function (data) {
+                    resolve(data)
+                },
+                error: function (reason) {
+                    reject(reason)
+                }
+            })
+        })
+        return p;
+    }
+
+    fn('data.json', 'get')
+        .then(data => {
+            const { username } = data;
+            console.log(username);
+            return fn('data1.json', 'get');
+        })
+        .then(data => {
+            for (var i in data) {
+                console.log(data[i]);
+            }
+            return fn('data2.json', 'get');
+        })
+        .then(data => {
+            for (var i in data) {
+                console.log(data[i]);
+            }
+        })
+        .catch(data => {
+            console.log('错误' + data);
+        })
+
+</script>
+</html>
+```
+
-- 
Gitee