From 9028aaf3d4ccb1156e5159cd0cb6e16694f7098b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9C13067078163=E2=80=9D?= <“921978039@qq.com”> Date: Wed, 30 Nov 2022 23:48:01 +0800 Subject: [PATCH] 0 --- .../11.24 JQuery(3).md" | 70 ++++++++ ...07\346\273\244\346\226\271\346\263\225.md" | 95 ++++++++++ .../\347\254\224\350\256\260/11.29 ajax.md" | 166 ++++++++++++++++++ .../11.30 ajax(2).md" | 60 +++++++ 4 files changed, 391 insertions(+) create mode 100644 "05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.24 JQuery(3).md" create mode 100644 "05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.28 \350\277\207\346\273\244\346\226\271\346\263\225.md" create mode 100644 "05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.29 ajax.md" create mode 100644 "05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.30 ajax(2).md" diff --git "a/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.24 JQuery(3).md" "b/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.24 JQuery(3).md" new file mode 100644 index 0000000..6da13f3 --- /dev/null +++ "b/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.24 JQuery(3).md" @@ -0,0 +1,70 @@ +## JQuery + +### 绑定 + +#### 多个事件绑定一个函数 + +```js +bind('事件类型'，函数) +``` + +#### 多个事件绑定多个函数(键值对) + +``` +bind({'事件类型': 函数,'事件类型':函数}) +``` + +#### on绑定(动态元素绑定) + +```js +//$(父代选择器) +var text = $(''); +$(function () { + $('td').mousedown(function () { + $(this).append(text); + }) + }) +$(function () { + $('td').on('blur','#text',function () { + text.parent().text(text.val()); + }); + }) +``` + +### 解绑 + +```js +$(function () { + $('td').mousedown(function () { + $(this).append(text); + }).off() + //不带参移除所有事件 + }) +//带参移除特定事件 +``` + +### 一次事件(类似立即执行函数) + +```js +$(function () { + $('td').one(function () { + //当前元素只触发一次该事件 + $(this).append(text); + }) + }) +``` + +## hover(鼠标移入移出) + +```js +$(function () { + $('div').hover( + function () { + $(this).css('color','red') + }， + function () { + $(this).css('color','white') + } + ) + }) +``` \ No newline at end of file diff --git "a/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.28 \350\277\207\346\273\244\346\226\271\346\263\225.md" "b/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.28 \350\277\207\346\273\244\346\226\271\346\263\225.md" new file mode 100644 index 0000000..6dbfe0b --- /dev/null +++ "b/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.28 \350\277\207\346\273\244\346\226\271\346\263\225.md" @@ -0,0 +1,95 @@ +# 过滤方法 + +**JS中数组的迭代方法forEach、map、filter、reduce、every、some** + +在日常处理JS的数组过程中, 我们通常是采用for循环的方式来实现. 下面总结一些常用的除for循环之外的数组迭代方法. + +#### **forEach (循环)** + +让数组的每一项分别去做一件事情 + +```js +let a = [1,2,3]; +a.forEach(function(value,i){ + console.log("第" + (i + 1) + "项 :" + value) + }) +// 第1项 :1 +// 第2项 :2 +// 第3项 :3 +``` + +#### **map (映射)** + +跟forEach功能类似, 但是map有返回值，产生一个新的数组，不改变原来数组 + +```js +let a = [1,2,3]; +a.map(function(value,i){ + return value * 2 +}) +// 第1项 :2 +// 第2项 :4 +// 第3项 :6 +``` + +#### **reduce (累计)** + +reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 + +reduce() 可以作为一个高阶函数，用于函数的 compose。 + +#### 注意: reduce() 对于空数组是不会执行回调函数的。 + +前项和后项做计算 + +```js +let a = [1, 2, 3]; +a = a.reduce(function (prev, next) { + return prev + next // 1+2+3 = 6 +}) +``` + +#### **filter (过滤)** + +过滤掉不符合条件的值, 返回新数组 + +```js +let a = [1, 2, 3]; +a = a.filter(function (value, i) { + return value > 2 +}) +console.log(a) // 3 +``` + +#### **every (全部)** + +判断每一个元素是否全部满足条件, 有的话返回true, 否则false + +```js +let a = [1, 2, 3]; +a = a.every(function (value, i) { + return value > 2 +}) +console.log(a) // false +``` + +#### **some (任意)** + +判断每一个元素是否有任意一个满足条件, 有的话返回true, 否则false + +```js +let a = [1, 2, 3]; +a = a.every(function (value, i) { + return value > 2 +}) +console.log(a) // true +``` + +#### **has**() + +has方法和filter相似，但是他只有选择器过滤，比较精简，所以运行速度比较块 + +```js +$().has(selector) +``` + diff --git "a/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.29 ajax.md" "b/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.29 ajax.md" new file mode 100644 index 0000000..b340b07 --- /dev/null +++ "b/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.29 ajax.md" @@ -0,0 +1,166 @@ +# 一、概念 + +### 1.什么是Ajax + +Ajax（Asynchronous Javascript And XML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式 + +### 异步的JavaScript + +它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。 + +### XML + +是前后端数据通信时传输数据的一种格式，现在已经不怎么用了，现在比较常用的是 JSON + +所以归纳上述的概念，Ajax就是在浏览器不重新加载网页的情况下，对页面的某部分进行更新。 + +### 2.应用场景 + +**注册页面** + +**搜索提示** + +# 二、实现Ajax + +```js +//test.josn的代码 +{ + "reply":"我收到啦！" +} +``` + +```js +const xhr = new XMLHttpRequest(); +xhr.onreadystatechange = () => { + if (xhr.readyState !== 4) return; + if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { + console.log(xhr.responseText); + } +}; +xhr.open('GET', 'text.json', true); +xhr.send(null); +``` + +## 执行步骤 + +### **1.创建xhr对象** + +```js +const xhr = new XMLHttpRequest(); +``` + +### **2.利用onreadystatechange属性，封装一个函数，用于监听 readyState的变化。** + +```JS +xhr.onreadystatechange = () => { +if (xhr.readyState !== 4) return; +if (xhr.status >= 200 && xhr.status < 300 ){ + console.log(xhr.responseText); + } +}; +``` + +**2.1在xhr对象执行收发数据的时候，它会经历五种状态：** + +| Ajax状态码 | 状态 | +| ---------- | ------------------------------------------------------------ | +| 0 | （**未初始化**）未启动 | +| 1 | （**启动**）已经调用 open()，但尚未调用 send() | +| 2 | （**发送**）发送状态，已经调用 send()，但尚未接收到响应 | +| 3 | （**接收**）已经接收到部分响应数据 | +| 4 | （**完成**）已经接收到全部响应数据，而且已经可以在浏览器中使用了 | + +**2.2判断HTTP状态码是否为200-299** + +Ajax状态码为4是不够的，这仅仅表明收到服务器端响应的全部数据，并不能保障数据都是正确的。 + +所以，我们还需要判断HTTP的状态码，判断xhr对象的status属性值是否在200到300之间（200-299 用于表示请求成功） + +```JS +if (xhr.status >= 200 && xhr.status < 300 ){ + console.log(xhr.responseText); +} +``` + +**所以要想请求成功完成****，**必须要满足上面两个条件。** + +### **3.准备发送请求** + +```JS +xhr.open('GET','text.json', true); +``` + +参数1：选用"GET"或者“POST”的请求方式 + +参数2：发送请求的地址 + +参数3：是否异步 + +### 4.发送请求 + +```JS +xhr.send(null) +``` + + 注意：send() 的参数是通过请求体携带的数据，而GET请求是通过请求头携带数据的，所以要把send的参数置为null + +# 三、跨域 + +### 概念 + +什么是跨域？为什么会有跨域这种问题存在？ + +跨域的字面意思来说，就是向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域 + +#### https（协议）://a.xxx.com（域名）:8080（端口号）/flie/list（路径） + +##### --**只要协议、域名、端口号，只要有任何一个不一样，都是不同域** + +### 同源策略 + +同源策略限制了跨域，同源策略是浏览器核心的安全机制，如果没有了同源策略，浏览器的正常功能就会受到影响，所以web是构建在同源策略的基础之上。 + +如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。 + +以下就是不同源： + +``` +前端： http://a.com:8080/ + +服务端：https//b.com/api/xxx +``` + +所以同源就是协议、域名、 端口号都要一样。 + +### **跨域解决方法** + +**1.CORS 跨域资源共享** + +**2.JSONP** + +# 四、写一个简易的Ajax + +```js +function ajax(url) { + const p = new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open('GET', url, true) + xhr.onreadystatechange = () => { + if(xhr.readyState === 4){ + if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){ + resolve( + JSON.parse(xhr.response) + ) + }else{ + reject(new Error('Response error')) + } + } + } + xhr.send(null) + }) + return p +} +const url = 'text.json' +ajax(url).then(res => console.log(res)).catch(err => console.log(err)) +``` + diff --git "a/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.30 ajax(2).md" "b/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.30 ajax(2).md" new file mode 100644 index 0000000..30f1657 --- /dev/null +++ "b/05 \351\273\204\347\202\234\346\235\260/\347\254\224\350\256\260/11.30 ajax(2).md" @@ -0,0 +1,60 @@ +# ajax - get() 方法 + +## 定义和用法 + +get() 方法通过远程 HTTP GET 请求载入信息。 + +这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。 + +### 语法 + +``` +$(selector).get(url,data,success(response,status,xhr),dataType) +``` + +| 参数 | 描述 | +| :----------------------------- | :----------------------------------------------------------- | +| *url* | 必需。规定将请求发送的哪个 URL。 | +| *data* | 可选。规定连同请求发送到服务器的数据。 | +| *success(response,status,xhr)* | 可选。规定当请求成功时运行的函数。额外的参数：response - 包含来自请求的结果数据status - 包含请求的状态xhr - 包含 XMLHttpRequest 对象 | +| *dataType* | 可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型："xml""html""text""script""json""jsonp" | + +# post() + +## 实例 + +请求 test.php 网页，忽略返回值： + +```js +$.post("test.php"); +``` + +### TIY 实例 + +通过 AJAX POST 请求改变 div 元素的文本： + +```js +$("input").keyup(function(){ + txt=$("input").val(); + $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){ + $("span").html(result); + }); +}); +``` + +## 定义和用法 + +post() 方法通过 HTTP POST 请求从服务器载入数据。 + +### 语法 + +``` +jQuery.post(url,data,success(data, textStatus, jqXHR),dataType) +``` + +| 参数 | 描述 | +| :--------------------------------- | :----------------------------------------------------------- | +| *url* | 必需。规定把请求发送到哪个 URL。 | +| *data* | 可选。映射或字符串值。规定连同请求发送到服务器的数据。 | +| *success(data, textStatus, jqXHR)* | 可选。请求成功时执行的回调函数。 | +| *dataType* | 可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。 | \ No newline at end of file -- Gitee