From ca8c42909a92ce09f8a2db64e7d0a6b3b068613b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E9=A3=98?= <2422417047@qq.com>
Date: Wed, 30 Nov 2022 21:41:56 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...\350\257\221\357\274\210AO\357\274\211.md" | 2 +-
...12\202\350\257\276 -jQuery\344\270\213.md" | 14 +-
...257\276-jQuery\346\226\271\346\263\225.md" | 111 ++++++++++++++
...5\205\253\350\212\202\350\257\276-Ajax.md" | 101 +++++++++++++
...\347\224\237ajax\344\270\216jQueryAjax.md" | 143 ++++++++++++++++++
5 files changed, 368 insertions(+), 3 deletions(-)
create mode 100644 "40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.28 \347\254\254\344\272\214\345\215\201\344\270\203\350\212\202\350\257\276-jQuery\346\226\271\346\263\225.md"
create mode 100644 "40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.29 \347\254\254\344\272\214\345\215\201\345\205\253\350\212\202\350\257\276-Ajax.md"
create mode 100644 "40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.30 \347\254\254\344\272\214\345\215\201\344\271\235\350\212\202\350\257\276-\345\216\237\347\224\237ajax\344\270\216jQueryAjax.md"
diff --git "a/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.10.19 \347\254\254\344\270\203\350\212\202\350\257\276-\345\207\275\346\225\260\350\277\233\351\230\266\344\270\216\351\242\204\347\274\226\350\257\221\357\274\210AO\357\274\211.md" "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.10.19 \347\254\254\344\270\203\350\212\202\350\257\276-\345\207\275\346\225\260\350\277\233\351\230\266\344\270\216\351\242\204\347\274\226\350\257\221\357\274\210AO\357\274\211.md"
index 20a72d9..3a099e6 100644
--- "a/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.10.19 \347\254\254\344\270\203\350\212\202\350\257\276-\345\207\275\346\225\260\350\277\233\351\230\266\344\270\216\351\242\204\347\274\226\350\257\221\357\274\210AO\357\274\211.md"
+++ "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.10.19 \347\254\254\344\270\203\350\212\202\350\257\276-\345\207\275\346\225\260\350\277\233\351\230\266\344\270\216\351\242\204\347\274\226\350\257\221\357\274\210AO\357\274\211.md"
@@ -57,7 +57,7 @@ sum(1,2,3,4,5,6,7,8,9)
console.log(arr);//会改变原数组
```
-##### 3，Math.max --返回一个数组中最大的值
+##### 3，Math.max.apply --返回一个数组中最大的值
```js
const arr = [1,2,3,4,5,6,7,8]
diff --git "a/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.24 \347\254\254\344\272\214\345\215\201\345\205\255\350\212\202\350\257\276 -jQuery\344\270\213.md" "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.24 \347\254\254\344\272\214\345\215\201\345\205\255\350\212\202\350\257\276 -jQuery\344\270\213.md"
index 152aa60..e0af8b7 100644
--- "a/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.24 \347\254\254\344\272\214\345\215\201\345\205\255\350\212\202\350\257\276 -jQuery\344\270\213.md"
+++ "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.24 \347\254\254\344\272\214\345\215\201\345\205\255\350\212\202\350\257\276 -jQuery\344\270\213.md"
@@ -2,7 +2,7 @@
#### 1、绑定
-##### 1.1 、bind函数
+##### 1.1 、==bind==函数
```
$('选择器').bind({"事件名称":匿名函数})
@@ -17,7 +17,7 @@ $('选择器').bind({"事件名称":匿名函数})
```
-##### 1.2 、on函数
+##### 1.2 、==on==函数
两个形参
@@ -50,6 +50,16 @@ $(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定
```
+##### 1.3 delegate（）
+
+```js
+$('.parent').delegate('a', 'click', function () {
+ console.log('click event on tag a');
+})
+```
+
+
+
#### 2、解绑函数
##### 2.1、off()
diff --git "a/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.28 \347\254\254\344\272\214\345\215\201\344\270\203\350\212\202\350\257\276-jQuery\346\226\271\346\263\225.md" "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.28 \347\254\254\344\272\214\345\215\201\344\270\203\350\212\202\350\257\276-jQuery\346\226\271\346\263\225.md"
new file mode 100644
index 0000000..aadadd8
--- /dev/null
+++ "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.28 \347\254\254\344\272\214\345\215\201\344\270\203\350\212\202\350\257\276-jQuery\346\226\271\346\263\225.md"
@@ -0,0 +1,111 @@
+### 一，过滤方法
+
+| 过滤器名 | jQuery语法 | 说明 | 返回值 |
+| -------------- | ---------------------- | -------------------------- | -------- |
+| :first | $('li:first') | 选取第一个元素 | 单个元素 |
+| :last | $('li:last') | 选取最后一个元素 | 单个元素 |
+| ==:not== | $('li:not(.red)') | 选取class不是red的li的元素 | 集合元 |
+| :even | $('li:even') | 选取索引是偶数的所有元素 | 集合元素 |
+| ==:eq(index)== | $('li:eq(下标)') | 选取索引等于index的元素 | 单个元素 |
+| ==is()== | $('li').is('.red') | 传递选择器 | 集合元素 |
+| ==filter()== | $('li').filter('.red') | 选取符合条件的元素 | 集合元素 |
+
+#### 1，选择器过滤： ==filter()==；使用选择器来选取符合条件的元素
+
+```js
+$().filter(selector or fn)
+```
+
+#### 2，子代元素过滤：==has()==；运行速度快
+
+```
+$().has(selector)
+```
+
+#### 3，类名过滤: ==hasClass()==；根据元素的class来过滤
+
+* 用于判断元素是否包含指定的类名：返回TRUE或FALSE
+
+```html
+$().hasClass(“类名”)
+```
+
+#### 4，下标过滤: ==eq()==；根据元素集合的下标来过滤
+
+* 下标从0开始，正数表示正数下标第几个元素，负数表示倒数第几个元素
+
+```js
+$().eq(n)
+```
+
+#### 5，判断过滤: ==is()==；根据某些条件进行判断，然后选取符合条件的元素，返回TRUE或FALSE
+
+```
+$().is(selector)
+```
+
+```js
+//判断元素是否可见
+$().is(":visible")
+//判断元素是否处于动画中
+$().is(":animated")
+//判断单选框或复选框是否被选中
+$().is(":checked")
+//判断当前元素是否第一个子元素
+$(this).is(":first-child")
+//判断文本中是否包含jQuery这个词
+$().is(":contains('jQuery')")
+//判断是否包含某些类名
+$().is(".select")
+```
+
+#### 6，反向过滤: ==not()==；过滤“不符合条件”的元素，返回余下符合条件的元素
+
+```
+$().not(selector或fn)
+```
+
+
+
+
+
+### 二、遍历元素（each()）
+
+```js
+$('li').each(function(index, element){ …… })
+```
+
+- each()方法接收一个匿名函数作为参数，该函数有两个参数：index，element。
+
+- index是一个可选参数，它表示元素的索引号（即下标）。通过形参index以及配合this关键字
+
+- element是一个可选参数，它表示当前元素，可以使用(this)代替。也就是说，(element)等价于 $(this)
+
+
+
+### 三、事件委托
+
+```js
+//target:源对象
+//currenttarget:当前调用该事件的对象
+//delegatetarget:委托对象
+ $('ul').click(
+ function (event) {
+ var e = event || window.event;
+ console.log(this==e.currentTarget);
+ }
+ )
+```
+
+
+
+### 四、阻止默认行为（event）
+
+```js
+ $('a').click(
+ function (event) {
+ var e = event || window.event;
+ e.preventDefault();
+ }
+ )
+```
diff --git "a/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.29 \347\254\254\344\272\214\345\215\201\345\205\253\350\212\202\350\257\276-Ajax.md" "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.29 \347\254\254\344\272\214\345\215\201\345\205\253\350\212\202\350\257\276-Ajax.md"
new file mode 100644
index 0000000..c0c8d39
--- /dev/null
+++ "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.29 \347\254\254\344\272\214\345\215\201\345\205\253\350\212\202\350\257\276-Ajax.md"
@@ -0,0 +1,101 @@
+### 一，Ajax
+
+#### 1，概念与特点；
+
+* 一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互
+* 使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载
+
+#### 2. AJAX 的优缺点
+
+- 不需要插件的⽀持，原⽣ js 就可以使用
+- 用户体验好（不需要刷新页面就可以更新数据）
+- 减轻服务端和带宽的负担
+- 缺点：搜索引擎的支持度不够
+
+
+
+### 二，http
+
+#### 1，简述
+
+* 超文本传输协议(HyperText Transfer Protocol)规定了Web浏览器如何从Web服务器获取文档和向Web服务器提交表单内容，以及Web服务器如何响应这些请求和提交
+
+#### 2，属性
+
+##### （1） responseText：作为响应体返回的文本
+
+##### （2） responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档
+
+##### （3） status：响应的 HTTP 状态
+
+##### （4） statusText：响应的 HTTP 状态描述
+
+##### （5） readyState：返回HTTP请求状态
+
+* 0 open()尚未调用 UNSENT
+* 1 open()已调用 OPENED
+* 2 接收到头信息 HEADERS_RECEIVED
+* 3 接收到响应主体 LOADING
+* 4 响应完成 DONE，所有的浏览器都触发该事件
+
+##### （6） readystatechange 请求状态改变事件
+
+
+
+#### 3，http请求
+
+##### （1）创建对象；XMLHttpRequest()
+
+##### （2）请求设置；open("GET","路径",true)
+
+##### （3）发送请求；send()
+
+```js
+var newAj=new XMLHttpRequest();
+ newAj.open("GET","json练习.json",true);
+ newAj.send();
+ newAj.onreadystatechange=function(){
+ if (newAj.readyState==4) {
+ if (newAj.status==200) {
+ var obj=JSON.parse(newAj.responseText);
+ console.log(obj);
+ }
+ }
+ }
+```
+
+
+
+
+
+### 三，JSON与对象之间的转换
+
+#### 1，JSON.stringify(obj):将对象转成json数据格式
+
+#### 2，JSON.parse(json):将json转成对象
+
+```js
+
+```
+
+#### 3，遍历 for in
+
+```js
+
+```
\ No newline at end of file
diff --git "a/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.30 \347\254\254\344\272\214\345\215\201\344\271\235\350\212\202\350\257\276-\345\216\237\347\224\237ajax\344\270\216jQueryAjax.md" "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.30 \347\254\254\344\272\214\345\215\201\344\271\235\350\212\202\350\257\276-\345\216\237\347\224\237ajax\344\270\216jQueryAjax.md"
new file mode 100644
index 0000000..e4654ee
--- /dev/null
+++ "b/40\345\221\250\351\243\230/\347\254\224\350\256\260/2022.11.30 \347\254\254\344\272\214\345\215\201\344\271\235\350\212\202\350\257\276-\345\216\237\347\224\237ajax\344\270\216jQueryAjax.md"
@@ -0,0 +1,143 @@
+### 一，原生AJAX
+
+#### 1，GET方法；传送数据量小，处理效率高，安全性低，会被缓存
+
+* send()中不需要添加任何参数,因为在连接服务器的时候就已经发送
+* get请求就不必要设置 xhr.setRequestHeader(header,value)
+
+```js
+var newAj=new XMLHttpRequest();
+ newAj.open("GET","json练习.json",true);
+ newAj.send();
+ newAj.onreadystatechange=function(){
+ if (newAj.readyState==4) {
+ if (newAj.status==200) {
+ var obj=JSON.parse(newAj.responseText);
+ console.log(obj);
+ }
+ }
+ }
+```
+
+#### 2，post方法;传送数据量大，处理效率低，安全性高，不会被缓存
+
+* send()中需要添加参数，建议设置请求头
+* 参数可以是null或者xhr.send()|send(带有参数的)post请求在传递值的情况下必须 设置 xhr.setRequestHeader(header,value)
+
+```js
+ var xhr = new XMLHttpRequest();
+ xhr.open('post', 'data.json', true);
+ xhr.send({ a: 100, b: 200 });
+ //设置行头
+ xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState == 4 && xhr.status == 200) {
+ console.log(xhr.response['No1']);
+ // 手动转成对象
+ // var obj = JSON.parse(xhr.response);
+ }
+ }
+```
+
+
+
+#### 3.响应数据处理；将返回的json类型的数据转换成对象
+
+##### 1，手动转换
+
+```js
+var obj = JSON.parse(xhr.response)
+console.log(obj.name)
+```
+
+##### 2，自动转换
+
+```js
+//创建对象后设置:
+xhr.responseType = 'json';
+console.log(xhr.response.name)
+```
+
+
+
+
+
+### 二，jQuery Ajax
+
+#### 1，$.get()；执行get请求方式的ajax
+
+```js
+ $('button').eq(0).click(
+ function () {
+ $.get('data.json',{a:100,b:200},function (data) {
+ console.log(data);
+ },'json');
+ }
+ )
+```
+
+
+
+#### 2，$.post()；执行post请求方式的ajax
+
+```js
+ $('button').eq(1).click(
+ function () {
+ $.post('data.json',{a:100,b:200},function (data) {
+ console.log(data);
+ },'json');
+ }
+ )
+```
+
+
+
+#### 3，$.getJSON()
+
+* 通过Ajax获取服务器中JSON格式的数据
+* “全局方法”，直接定义在jQuery对象（即“$”）下的方法
+
+```js
+ $('button').eq(2).click(
+ function () {
+ $.getJSON('data.json',function (data) {
+ console.log(data);
+ })
+ }
+ )
+```
+
+
+
+#### 4，$.getScript()；动态加载JavaScript的方法
+
+* 通过AJAX来获取并运行一个外部JavaScript文件
+* 异步跨域加载JavaScript文件，可避免提前加载JavaScript文件
+* 减少服务器和客户端的负 担，加快页面加载速度
+
+```js
+ $('button').eq(3).click(
+ function () {
+ $.getScript('test.js');
+ }
+ )
+```
+
+#### 5，$.ajax()；核心方法，所有的其他方法都是在内部使用此方法
+
+* 以上方法用ajax（）都能实现
+
+```js
+ $('button').eq(4).click(
+ function () {
+ $.ajax({
+ url:'data.json',
+ type:'get',
+ data:{a:100,b:200},
+ success:(data) => console.log(data),
+ error:()=> console.log('请求失败')
+ })
+ }
+ )
+```
+
--
Gitee