From 3d03ca6e7787bcef6fc9b63294fc0b44b0f66046 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?19=E9=99=88=E5=BF=97=E6=A2=81?= <2864599615@qq.com> Date: Sun, 4 Dec 2022 23:22:32 +0800 Subject: [PATCH] 0 --- ...22-10-21\344\275\234\344\270\232JQuery.md" | 90 ++++++ ...13\344\273\266\345\217\226\346\266\210.md" | 0 ...22-11-21\344\275\234\344\270\232JQuery.md" | 90 ++++++ ...260jQuery Dom \346\223\215\344\275\234.md" | 259 ++++++++++++++++ ...\256\260jQuery\344\272\213\344\273\266.md" | 39 +++ ...22-11-24\347\254\224\350\256\260jQuery.md" | 70 +++++ ...22-11-28\347\254\224\350\256\260jQuery.md" | 70 +++++ ...1-29\347\254\224\350\256\260jQueryAJAX.md" | 278 ++++++++++++++++++ ...\260jQuery\345\216\237\347\224\237AJAX.md" | 130 ++++++++ ...1\347\254\224\350\256\260jQueryPromise.md" | 48 +++ 10 files changed, 1074 insertions(+) create mode 100644 "19\351\231\210\345\277\227\346\242\201/\344\275\234\344\270\232/2022-10-21\344\275\234\344\270\232JQuery.md" rename "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-17\347\254\224\350\256\260\344\272\213\344\273\266.md" => "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-17\347\254\224\350\256\260\344\272\213\344\273\266\345\217\226\346\266\210.md" (100%) create mode 100644 "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-21\344\275\234\344\270\232JQuery.md" create mode 100644 "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-22\347\254\224\350\256\260jQuery Dom \346\223\215\344\275\234.md" create mode 100644 "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-23\347\254\224\350\256\260jQuery\344\272\213\344\273\266.md" create mode 100644 "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-24\347\254\224\350\256\260jQuery.md" create mode 100644 "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-28\347\254\224\350\256\260jQuery.md" create mode 100644 "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-29\347\254\224\350\256\260jQueryAJAX.md" create mode 100644 "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-30\347\254\224\350\256\260jQuery\345\216\237\347\224\237AJAX.md" create mode 100644 "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-12-01\347\254\224\350\256\260jQueryPromise.md" diff --git "a/19\351\231\210\345\277\227\346\242\201/\344\275\234\344\270\232/2022-10-21\344\275\234\344\270\232JQuery.md" "b/19\351\231\210\345\277\227\346\242\201/\344\275\234\344\270\232/2022-10-21\344\275\234\344\270\232JQuery.md" new file mode 100644 index 0000000..9b1a9eb --- /dev/null +++ "b/19\351\231\210\345\277\227\346\242\201/\344\275\234\344\270\232/2022-10-21\344\275\234\344\270\232JQuery.md" @@ -0,0 +1,90 @@ +# JQuery + +主要包括： 1. 代码简洁 2. 完美兼容 3. 轻量级 4. 强大的选择器 5. 完善的AJAX 6. 丰富的插件 “简洁与高效”是jQuery最大的特点。 + +#### JQuery安装 + + jQuery文件，说白了就是一个“外部JavaScript文件”。所谓的安装jQuery，其实就是把这个外部 JavaScript文件引入后，就可以使用jQuery语法了。 对于1.x版本来说，现在最新版本是jquery-1.12.4.min.js。 + +语法： + +``` + + +``` + +说明： 我们必须先把jQuery库文件引入，才能够使用jQuery语法。也就是说，你写的jQuery代码必须放在 jQuery库文件下面才能生效。 + +``` + + +``` + +#### JQuery对象 + +##### JQuery核心: + +``` +$符号在JQuery中代表对JQuery对象的引用. + $ <===> JQuery +``` + +**DOM对象**:通过js代码获取到的对象都是DOM对象，原始的DOM对象只有DOM接口提供的方法和属性； + +``` +var div = document.getElementById('testDiv'); +var divs = document.getElementsByTagName('div') +``` + +**JQuery包装集对象**:简称JQuery对象，通过JQuery框架获取的对象，注意：只有JQuery对象才能使用JQuery提供的方法。 + +JQuery可以说是DOM对象的补充，JQuery规定：无论是一个还是一组，都封装成一个JQuery包装集，比如获取包含一个元素的JQuery包装集。 + +``` +var jqObj = $('#testDiv'); +``` + +#### JQuery选择器 + +##### 基础选择器 + +| 选择器名称 | 用法（例子演示） | 描述 | +| -------------------- | ---------------- | ------------------------------------------------------------ | +| id选择器 | $(“#id”) | 获取指定的id的元素 | +| 类选择器 | $(“.class”) | 获取指定的class的元素 | +| 标签选择器 | $(“标签”) | 获取指定的标签的元素 | +| 全选选择器 | $("*) | 获取所有的元素 | +| 通过this获得html标签 | $(this) | 获取当前的html元素 | +| 属性选择器 | $(“[href]”) | 选取带有 href 属性的元素。还可以如此用 ( " a [ t a r g e t = b ′ l a n k ′ ] " ) : 选取所有 t a r g e t 属性值等于 " b l a n k " 的 < a > 元素 < b r > ("a[target='_blank']") : 选取所有 target 属性值等于 "_blank" 的 元素 ("a[target=b′lank′]"):选取所有target属性值等于"blank"的元素 (“a[target!=‘_blank’]”) : 选取所有 target 属性值不等于 “_blank” 的 元素 | +| 并集选择器 | $(“div,p,li”) | 获得div p li 的元素标签集合 | +| 并集选择器 | $(“p.intro”) | 选取 class 为 intro 的元素 | + +##### 伪元素或伪标签选择器 + +当然可以使用伪属性或者伪标签。 + +| 伪元素或伪属性 | 语法 | 描述 | +| -------------- | ------------------------ | -------------------------------------------------------- | +| :first | $(“p:first”) | 选取第一个元素 | +| :last | $(“p:last”) | 选取最后一个元素 | +| :not(selector) | $(“input:not(:checked)”) | 选取input 不带有checked属性的元素 | +| :even | $(“tr:even”) | 选取偶数位置的 | +| :odd | $(“tr:odd”) | 选取奇数位置的 | +| :eq(index) | $(“tr:eq(1)”) | 匹配一个给定索引值的元素,选取t标签第二个元素 （从0开始） | +| :gt(index) | $(“tr:gt(0)”) | 选取t标签第一个元素后面的元素 （从0开始，所以大于0） | +| | $(“:button”) | 选取所有 type=“button” 的 元素 和 元素 | + +##### 层级选择器 + +当然还可以使用层级选择器： + +| 选择器名字 | 用法（例子） | 描述 | +| ---------- | ------------ | ------------------------------------------------------------ | +| 子代选择器 | $(“div >p”) | 使用>获得子级的元素， 不会获得孙子级以及更内层的元素，例子：获取div标签内嵌的第一层标签为p的元素 | +| 后代选择器 | $(“div p”) | 使用空格，是后代选择器就是获得div中无论内嵌的任何层p元素 | +| 紧邻选择器 | $(“#id +p”) | 使用+号， 匹配所有 紧接在 id为di 元素后的 p 元素。（好好理解这句话，不是所id后面所有的p标签哦，而复合id后面紧邻p的所有o标签） | +| 兄弟选择器 | $(“#id ~ p”) | 使用~号，匹配 id为id 元素之后的所有 p 元素。 | \ No newline at end of file diff --git "a/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-17\347\254\224\350\256\260\344\272\213\344\273\266.md" "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-17\347\254\224\350\256\260\344\272\213\344\273\266\345\217\226\346\266\210.md" similarity index 100% rename from "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-17\347\254\224\350\256\260\344\272\213\344\273\266.md" rename to "19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-17\347\254\224\350\256\260\344\272\213\344\273\266\345\217\226\346\266\210.md" diff --git "a/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-21\344\275\234\344\270\232JQuery.md" "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-21\344\275\234\344\270\232JQuery.md" new file mode 100644 index 0000000..9b1a9eb --- /dev/null +++ "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-21\344\275\234\344\270\232JQuery.md" @@ -0,0 +1,90 @@ +# JQuery + +主要包括： 1. 代码简洁 2. 完美兼容 3. 轻量级 4. 强大的选择器 5. 完善的AJAX 6. 丰富的插件 “简洁与高效”是jQuery最大的特点。 + +#### JQuery安装 + + jQuery文件，说白了就是一个“外部JavaScript文件”。所谓的安装jQuery，其实就是把这个外部 JavaScript文件引入后，就可以使用jQuery语法了。 对于1.x版本来说，现在最新版本是jquery-1.12.4.min.js。 + +语法： + +``` + + +``` + +说明： 我们必须先把jQuery库文件引入，才能够使用jQuery语法。也就是说，你写的jQuery代码必须放在 jQuery库文件下面才能生效。 + +``` + + +``` + +#### JQuery对象 + +##### JQuery核心: + +``` +$符号在JQuery中代表对JQuery对象的引用. + $ <===> JQuery +``` + +**DOM对象**:通过js代码获取到的对象都是DOM对象，原始的DOM对象只有DOM接口提供的方法和属性； + +``` +var div = document.getElementById('testDiv'); +var divs = document.getElementsByTagName('div') +``` + +**JQuery包装集对象**:简称JQuery对象，通过JQuery框架获取的对象，注意：只有JQuery对象才能使用JQuery提供的方法。 + +JQuery可以说是DOM对象的补充，JQuery规定：无论是一个还是一组，都封装成一个JQuery包装集，比如获取包含一个元素的JQuery包装集。 + +``` +var jqObj = $('#testDiv'); +``` + +#### JQuery选择器 + +##### 基础选择器 + +| 选择器名称 | 用法（例子演示） | 描述 | +| -------------------- | ---------------- | ------------------------------------------------------------ | +| id选择器 | $(“#id”) | 获取指定的id的元素 | +| 类选择器 | $(“.class”) | 获取指定的class的元素 | +| 标签选择器 | $(“标签”) | 获取指定的标签的元素 | +| 全选选择器 | $("*) | 获取所有的元素 | +| 通过this获得html标签 | $(this) | 获取当前的html元素 | +| 属性选择器 | $(“[href]”) | 选取带有 href 属性的元素。还可以如此用 ( " a [ t a r g e t = b ′ l a n k ′ ] " ) : 选取所有 t a r g e t 属性值等于 " b l a n k " 的 < a > 元素 < b r > ("a[target='_blank']") : 选取所有 target 属性值等于 "_blank" 的 元素 ("a[target=b′lank′]"):选取所有target属性值等于"blank"的元素 (“a[target!=‘_blank’]”) : 选取所有 target 属性值不等于 “_blank” 的 元素 | +| 并集选择器 | $(“div,p,li”) | 获得div p li 的元素标签集合 | +| 并集选择器 | $(“p.intro”) | 选取 class 为 intro 的元素 | + +##### 伪元素或伪标签选择器 + +当然可以使用伪属性或者伪标签。 + +| 伪元素或伪属性 | 语法 | 描述 | +| -------------- | ------------------------ | -------------------------------------------------------- | +| :first | $(“p:first”) | 选取第一个元素 | +| :last | $(“p:last”) | 选取最后一个元素 | +| :not(selector) | $(“input:not(:checked)”) | 选取input 不带有checked属性的元素 | +| :even | $(“tr:even”) | 选取偶数位置的 | +| :odd | $(“tr:odd”) | 选取奇数位置的 | +| :eq(index) | $(“tr:eq(1)”) | 匹配一个给定索引值的元素,选取t标签第二个元素 （从0开始） | +| :gt(index) | $(“tr:gt(0)”) | 选取t标签第一个元素后面的元素 （从0开始，所以大于0） | +| | $(“:button”) | 选取所有 type=“button” 的 元素 和 元素 | + +##### 层级选择器 + +当然还可以使用层级选择器： + +| 选择器名字 | 用法（例子） | 描述 | +| ---------- | ------------ | ------------------------------------------------------------ | +| 子代选择器 | $(“div >p”) | 使用>获得子级的元素， 不会获得孙子级以及更内层的元素，例子：获取div标签内嵌的第一层标签为p的元素 | +| 后代选择器 | $(“div p”) | 使用空格，是后代选择器就是获得div中无论内嵌的任何层p元素 | +| 紧邻选择器 | $(“#id +p”) | 使用+号， 匹配所有 紧接在 id为di 元素后的 p 元素。（好好理解这句话，不是所id后面所有的p标签哦，而复合id后面紧邻p的所有o标签） | +| 兄弟选择器 | $(“#id ~ p”) | 使用~号，匹配 id为id 元素之后的所有 p 元素。 | \ No newline at end of file diff --git "a/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-22\347\254\224\350\256\260jQuery Dom \346\223\215\344\275\234.md" "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-22\347\254\224\350\256\260jQuery Dom \346\223\215\344\275\234.md" new file mode 100644 index 0000000..46ccbf7 --- /dev/null +++ "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-22\347\254\224\350\256\260jQuery Dom \346\223\215\344\275\234.md" @@ -0,0 +1,259 @@ +## jQuery Dom 操作 + + jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。 常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。**注意：以下的操作方式只适用于jQuery对象。** + +#### 1.操作元素的属性 + +###### 1.1 获取属性 + +| 方法 | 说明 | 举例 | +| -------------- | ------------------------------------------------------------ | ---------------------------- | +| attr(属性名称) | 获取指定的属性值，操作checkbox时 选中返回checked，没有选中返回undefined。 | attr('checked') attr('name') | +| prop(属性名称) | 获取具有true和false两个属性的属性值 | prop('checked') | + +属性的分类： + +- 固有属性： +- 返回值是bool的属性: checked ,selected, disabled +- 自定义属性 + +attr与prop在用法上有什么区别？ + +``` + + + + + + + Document + + + + + + + +``` + +###### 1.2 设置属性 + +``` +attr('属性名','属性值') +``` + +###### 1.3 移除属性 + +``` +removeAttr('属性名') +``` + +#### 2. 操作元素的样式 + + 对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。 + +| 方法 | 说明 | +| ---------------------- | --------------------------- | +| attr('class') | 获取属性的值，即样式名称 | +| attr('class','样式名') | 修改class属性的值，修改样式 | +| addClass('样式名') | 添加样式名称 | +| css() | 添加具体的样式 | +| removeClass(class) | 移除样式名称 | + +其中，css()表示增加具体样式： + +``` +1) css('样式名','样式值') + 例: css('color','red') + +2) css({'样式名':'样式值','样式名2':'样式值2'}) + 例: css({'background-color':'red','color':'red'}) + + + + + + + Document + + + +
背景天蓝色
+
红色
+
背景天蓝色
+ + + +``` + +#### 3. 操作元素内容 + +| 方法 | 说明 | +| ----------------- | ---------------------------------- | +| html() | 获取元素的html内容 | +| html('html,内容') | 设定元素的内容 | +| text() | 获取元素的内容，不识别html标签 | +| text('text 内容') | 设置元素的文本内容，不识别html标签 | +| val() | 获取元素的值（表单元素） | +| val('值') | 设定元素的值 | + +常见的表单元素(可以操作的):文本框，密码框，单选框，复选框，隐藏域，文本域，下拉框 + +非表单元素:div,span,h1~h6,table,tr,td,li,p等 + +``` + + + + + + + + Document + + + +
龙岩
+
龙岩
+ + + + + +``` + +#### 4. 创建元素 + + 在jQuery创建元素很简单，直接使用核心函数即可 + +``` +$('元素内容'); +$('

this is a paragraph!!!

') +``` + +#### 5. 添加元素 + +| 方法 | 说明 | +| ------------------------------ | ------------------------------------------------------------ | +| prepend(content) | 在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符，HTML元素标记。 | +| $(content).prependTo(selector) | 把content元素或内容加入selector元素开头 | +| append(content) | 在被选元素内部的结尾插入元素或内容， 被追加的content参数，可以是字符，HTML元素标记。 | +| $(content).appendTo(selector) | 把content元素或内容插入slector元素内，默认是在尾部 | +| before() | 在元素前插入指定的元素或内容: $(selector).before(content) | +| after() | 在元素后插入指定的元素或内容: $(selector).after(content) | + +``` + + + + + + + + Document + + + +

prepend()方法前追加内容

+

prependTo()方法前追加内容

+

append()方法后追加内容

+

appendTo()方法后追加内容

+ 靓仔 + 靓女 +
+ 小鲜肉 +
+ + + + +``` + +#### 6. 删除元素 + +| 方法 | 说明 | +| -------- | ---------------------------------------------------- | +| remove() | 删除所选元素或指定的子元素，包括整个标签和内容一起删 | +| empty() | 清除所选元素的内容 | + +``` + + + + + + + + Document + + + +

删除元素

+ jquery + javascript + linux + java + + + + +``` + +#### 7. 遍历元素 + +each() + +$(selector).each(function(index,element)):遍历元素 + +参数function为遍历时的回调函数 + +index 为遍历元素的序列号，从0开始 + +element为当前的元素(===this)，此时是dom元素 \ No newline at end of file diff --git "a/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-23\347\254\224\350\256\260jQuery\344\272\213\344\273\266.md" "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-23\347\254\224\350\256\260jQuery\344\272\213\344\273\266.md" new file mode 100644 index 0000000..93c4a54 --- /dev/null +++ "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-23\347\254\224\350\256\260jQuery\344\272\213\344\273\266.md" @@ -0,0 +1,39 @@ +# jQuery事件 + +在文档加载后激活函数(常用写法) + +``` +$(function(){ + $('#txt').keyup( + function () { + $('#num').text($('#txt').val().length); + } + ) +}); +``` + +### 常用事件 + +**click()**：鼠标单击 + +**contextmenu()**:右键单击菜单（右键菜单按钮时间，可以拒绝右键菜单。） + +**dblclick()**:双击触发 + +**mousedown()**:鼠标按下 + +**mouseup()**:鼠标松开 + +**mousemove()**:鼠标移动 + +**mouseout()**:鼠标移出元素 + +**mouseover()**:鼠标移入元素 + +**keydown()**:按下键盘 + +**keyup()**:按下键盘松开 + +**focus()**:获得焦点 + +**blur()**:失去焦点 \ No newline at end of file diff --git "a/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-24\347\254\224\350\256\260jQuery.md" "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-24\347\254\224\350\256\260jQuery.md" new file mode 100644 index 0000000..483b25d --- /dev/null +++ "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-24\347\254\224\350\256\260jQuery.md" @@ -0,0 +1,70 @@ +## jQuery + +### 绑定 + +#### 多个事件绑定一个函数 + +``` +bind('事件类型'，函数) +``` + +#### 多个事件绑定多个函数(键值对) + +``` +bind({'事件类型': 函数,'事件类型':函数}) +``` + +#### on绑定(动态元素绑定) + +``` +//$(父代选择器) +var text = $(''); +$(function () { + $('td').mousedown(function () { + $(this).append(text); + }) + }) +$(function () { + $('td').on('blur','#text',function () { + text.parent().text(text.val()); + }); + }) +``` + +### 解绑 + +``` +$(function () { + $('td').mousedown(function () { + $(this).append(text); + }).off() + //不带参移除所有事件 + }) +//带参移除特定事件 +``` + +### 一次事件(类似立即执行函数) + +``` +$(function () { + $('td').one(function () { + //当前元素只触发一次该事件 + $(this).append(text); + }) + }) +``` + +## hover(鼠标移入移出) + +``` +$(function () { + $('div').hover( + function () { + $(this).css('color','red') + }， + function () { + $(this).css('color','white') + } + ) + }) +``` \ No newline at end of file diff --git "a/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-28\347\254\224\350\256\260jQuery.md" "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-28\347\254\224\350\256\260jQuery.md" new file mode 100644 index 0000000..483b25d --- /dev/null +++ "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-28\347\254\224\350\256\260jQuery.md" @@ -0,0 +1,70 @@ +## jQuery + +### 绑定 + +#### 多个事件绑定一个函数 + +``` +bind('事件类型'，函数) +``` + +#### 多个事件绑定多个函数(键值对) + +``` +bind({'事件类型': 函数,'事件类型':函数}) +``` + +#### on绑定(动态元素绑定) + +``` +//$(父代选择器) +var text = $(''); +$(function () { + $('td').mousedown(function () { + $(this).append(text); + }) + }) +$(function () { + $('td').on('blur','#text',function () { + text.parent().text(text.val()); + }); + }) +``` + +### 解绑 + +``` +$(function () { + $('td').mousedown(function () { + $(this).append(text); + }).off() + //不带参移除所有事件 + }) +//带参移除特定事件 +``` + +### 一次事件(类似立即执行函数) + +``` +$(function () { + $('td').one(function () { + //当前元素只触发一次该事件 + $(this).append(text); + }) + }) +``` + +## hover(鼠标移入移出) + +``` +$(function () { + $('div').hover( + function () { + $(this).css('color','red') + }， + function () { + $(this).css('color','white') + } + ) + }) +``` \ No newline at end of file diff --git "a/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-29\347\254\224\350\256\260jQueryAJAX.md" "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-29\347\254\224\350\256\260jQueryAJAX.md" new file mode 100644 index 0000000..ce2dd9b --- /dev/null +++ "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-29\347\254\224\350\256\260jQueryAJAX.md" @@ -0,0 +1,278 @@ +# 1. AJAX + +ajax是浏览器提供的一系列[api](https://gitee.com/link?target=https%3A%2F%2Fso.csdn.net%2Fso%2Fsearch%3Fq%3Dapi%26spm%3D1001.2101.3001.7020)，可供javascript调用，实现代码控制请求与相应，实现网络2编程 + +## 1.1 AJAX 的工作原理 + +``` +其工作原理基本经过以下几个步骤： + +客户端发送请求，请求交给 xhr。 +xhr 把请求提交给服务。 +服务器进行业务处理。 +服务器响应数据交给 xhr 对象。 +xhr 对象接收数据，由 JavaScript 把数据写到页面上。 +AJAX 工作原理 + +AJAX 的创建步骤 +根据 AJAX 的工作原理，它的创建步骤主要包括： + +创建 XMLHttpRequest 对象，即创建一个异步调用对象。 +创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息。 +设置响应 HTTP 请求状态变化的函数。 +发送 HTTP 请求。 +获取异步调用返回的数据。 +使用 JavaScript 和 DOM 实现局部刷新。 +AJAX 的具体使用 +以下是 使用 AJAX 的完整流程。 + +1. 创建 XMLHttpRequest 对象 + const request = new XMLHttpRequest(); +2. 创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息 + 创建 HTTP 请求可以使用 XMLHttpReques t对象的 open() 方法,其语法代码如下： + +request.open(method, url, async, user, password); +参数解析： + +method 要使用的HTTP方法，比如 "GET"、"POST"、"PUT"、"DELETE" 等。 +url 表示要向其发送请求的 URL 地址。 +async (可选) 一个可选的布尔参数，表示是否异步执行操作，默认为 true。如果值为 false，send() 方法直到收到答复前不会返回。如果 true，已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true，否则将引发异常。 +user (可选 用于认证用途的用户名，默认值为 null。 +password (可选) 用于认证用途的密码，默认值为 null。 +\3. 设置响应 HTTP 请求状态变化的函数和服务端返回信息函数 +创建完 HTTP 请求之后，应该就可以将 HTTP 请求发送给 Web 服务器了。然而，发送 HTTP 请求的目的是为了接收从服务器中返回的数据。从创建 XMLHttpRequest 对象开始，到发送数据、接收数据、XMLHttpRequest 对象一共会经历以下 5 种状态： + +未初始化状态。在创建完 XMLHttpRequest 对象时，该对象处于未初始化状态，此时 XMLHttpRequest 对象的 readyState 属性值为 0。 +初始化状态。在创建完 XMLHttpRequest 对象后使用 open() 方法创建了 HTTP 请求时，该对象处于初始化状态。此时 XMLHttpRequest 对象的readyState属性值为 1。 +发送数据状态。在初始化 XMLHttpRequest 对象后，使用 send() 方法发送数据时，该对象处于发送数据状态，此时XMLHttpRequest 对象的 readyState 属性值为 2。 +接收数据状态。Web 服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。此时，XMLHttpRequest 对象处于接收数据状态，XMLHttpRequest 对象的 readyState 属性值为 3。 +完成状态。XMLHttpRequest 对象接收数据完毕后，进入完成状态，此时 XMLHttpRequest 对象的 readyState 属性值为 4。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用 responseText 属性或 responseXml 属性来获取数据。 +总的来说，readyState 属性的值有以下几种： + +0 (未初始化) or (请求还未初始化) +1 (正在加载) or (已建立服务器链接) +2 (加载成功) or (请求已接受) +3 (交互) or (正在处理请求) +4 (完成) or (请求已完成并且响应已准备好) +只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前，status 的值为 0。值得注意的是，如果 XMLHttpRequest 出错，浏览器返回的 status 也为0： + +UNSENT（未发送） 0 +OPENED（已打开） 0 +LOADING（载入中） 200 +DONE（完成） 200 +var xhr = new XMLHttpRequest(); +console.log('UNSENT', xhr.readyState); // readyState 为 0 + +xhr.open('GET', '/api', true); +console.log('OPENED', xhr.readyState); // readyState 为 1 + +xhr.onprogress = function () { +console.log('LOADING', xhr.readyState); // readyState 为 3 +}; + +xhr.onload = function () { +console.log('DONE', xhr.readyState); // readyState 为 4 +}; + +xhr.send(null); +只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态： + +const xhr = new XMLHttpRequest(); +xmlHttpRequest.onreadystatechange = function () { +if (xhr.readyState === 4 && xhr.status === 200) { +// do something here +} +} +\4. 发送HTTP请求 +XMLHttpRequest.send(data); +结束 +最后，附上一个简单的完整 AJAX 实例： +``` + +## 2.快速上手 + +``` +let xhr = new XMLHttpRequest() //类似于开启用户代理 +//初始化，请求了代理对象 +console.log(xhr.readyState) //0, UNSENT +xhr.open('get', '/text.php') //类似于输入地址与方法 +//调用了open方法，建立了客户端与服务端的特定端口的连接 +console.log(xhr.readyState) //1, OPENED +xhr.send(null) // 类似于按下确认键, 参数为请求体 +//由于ajax请求可能需要花费比较长时间来获取响应数据，但是不能让用户等待，因此设计初衷就是异步，即类似用事件的形式 +xhr.onreadystatechange = function(){ + switch(this.readyState){ + case 2: + //已经获取到了响应报文的响应头 + console.log(xhr.readyState) //2, HEADERS_RECEIVED + console.log(xhr.getAllResponseHeaders) + console.log(xhr.responseText) //没有数据 + break + case 3: + //正在下载响应体中的数据 + console.log(xhr.readyState) //3, LOADING + console.log(xhr.responseText) //数据有可能完整也有可能不完整，与响应体大小跟网速有关 + break + case 4: + //响应体中的数据下载完成 + console.log(xhr.readyState) //4, LOADED + console.log(xhr.responseText) //数据完整 + } +} +xhr.onload = function(){ //HTML5, XHR v2.0发布事件 + console.log(xhr.readyState) //4 +} +//xhr.responseText`永远只会获取字符串形式的响应体 +//xhr.response`根据content-type的变化而变化 +``` + +## 3.遵循http协议 + +``` +let xhr = new XMLHttpRequest() + +console.log(xhr.readyState) +xhr.open('post', '/text.php') +//响应头中的content-type必须与请求体中的格式相同，否则服务端无法解析 +xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded') //设置响应头 +xhr.send('name1=value1&name2=value2') //设置urlencoded的请求体 + +xhr.onreadystatechange = function(){ + if(this.readyState != 4) return + console.log(this.status) //状态码 + console.log(this.responseText) + +} +``` + +## 4.同步与异步 + +``` +* `xhr.open`的第三个参数是async，默认为true，用来控制xhr是否以异步形式发送请求 +* 当以同步形式调用时，javascript会在`xhr.send`执行后直到收到响应为止进行等待 + +## 响应数据格式 + +* 影响到客户端的javascript如何对服务端返回的数据进行解析 +* 服务端需要设置合理的content-type来决定客户端如何对其进行解析 + +### XML + +* 响应头为application/xml +* 从responseXML中获取，且能通过dom操作来操作xml + +### JSON + +* 响应头为application/json + +## 兼容方案 + +* 对于IE5/6需要使用兼容方案 + `xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('microsoft.XMLHTTP')` + +``` + +## 5.jQuery中的封装 + +``` + +``` + +## 6.同源策略 + +``` +两个url必须协议，域名，端口都相等才属于同源，由于安全问题，默认只有同源的地址才能通过ajax来访问 + +* 不同源地址之间如果需要相互请求，必须服务端与客户端配合 +``` + +## 6.1跨域请求 + +``` +跨域请求 ++ JSONP + ++ 配置代理 + ++ jsonp 代表传给后端回调函数名称的参数 + ++ jsonpCallback 具体回调函数名称 +``` \ No newline at end of file diff --git "a/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-30\347\254\224\350\256\260jQuery\345\216\237\347\224\237AJAX.md" "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-30\347\254\224\350\256\260jQuery\345\216\237\347\224\237AJAX.md" new file mode 100644 index 0000000..0334864 --- /dev/null +++ "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-11-30\347\254\224\350\256\260jQuery\345\216\237\347\224\237AJAX.md" @@ -0,0 +1,130 @@ +### 一，原生AJAX + +#### 1，GET方法；传送数据量小，处理效率高，安全性低，会被缓存 + +- send()中不需要添加任何参数,因为在连接服务器的时候就已经发送 +- get请求就不必要设置 xhr.setRequestHeader(header,value) + +``` +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) + +``` + 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，手动转换 + +``` +var obj = JSON.parse(xhr.response) +console.log(obj.name) +``` + +##### 2，自动转换 + +``` +//创建对象后设置: +xhr.responseType = 'json'; +console.log(xhr.response.name) +``` + +### 二，jQuery Ajax + +#### 1，$.get()；执行get请求方式的ajax + +``` + $('button').eq(0).click( + function () { + $.get('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + +#### 2，$.post()；执行post请求方式的ajax + +``` + $('button').eq(1).click( + function () { + $.post('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + +#### 3，$.getJSON() + +- 通过Ajax获取服务器中JSON格式的数据 +- “全局方法”，直接定义在jQuery对象（即“$”）下的方法 + +``` + $('button').eq(2).click( + function () { + $.getJSON('data.json',function (data) { + console.log(data); + }) + } + ) +``` + +#### 4，$.getScript()；动态加载JavaScript的方法 + +- 通过AJAX来获取并运行一个外部JavaScript文件 +- 异步跨域加载JavaScript文件，可避免提前加载JavaScript文件 +- 减少服务器和客户端的负 担，加快页面加载速度 + +``` + $('button').eq(3).click( + function () { + $.getScript('test.js'); + } + ) +``` + +#### 5，$.ajax()；核心方法，所有的其他方法都是在内部使用此方法 + +- 以上方法用ajax（）都能实现 + +``` + $('button').eq(4).click( + function () { + $.ajax({ + url:'data.json', + type:'get', + data:{a:100,b:200}, + success:(data) => console.log(data), + error:()=> console.log('请求失败') + }) + } + ) +``` \ No newline at end of file diff --git "a/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-12-01\347\254\224\350\256\260jQueryPromise.md" "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-12-01\347\254\224\350\256\260jQueryPromise.md" new file mode 100644 index 0000000..d418e82 --- /dev/null +++ "b/19\351\231\210\345\277\227\346\242\201/\347\254\224\350\256\260/2022-12-01\347\254\224\350\256\260jQueryPromise.md" @@ -0,0 +1,48 @@ +## Promise + +### PromiseState + +在每个**promise**对象中，状态只会改变一次 + +**pending**：准备中 + +**fulfilled \**(成功) ：调用了\**resolve**函数，将状态改为成功 + +**rejected** (失败) ：调用了**reject**函数，将状态改为失败 + +### PromiseResult + +接收**resolve**或者**reject**中的参数 + +``` +const p = new Promise((resolve, reject) => { + // resolve('这是成功'); + reject('这是失败'); +}).then(data =>{ + console.log('成功then调用'); + return 123 + //catch:捕获异常 +}).catch( + function (e) { + console.log(e); + } +) +//then(成功时调用的函数,失败时调用的函数),返回值也是一个promise对象,pending +console.log(p) +``` + +## GET + +``` +$('div').eq(0).one('mousemove', function () { + $.get('data.json', function (data) { + const { username } = data; + $.get('data1.json', function (data1) { + const contact = data1[username] + $.get('data2.json', function (data2) { + console.log(username + ':' + data2[contact]); + }) + }) + }) +}) +``` \ No newline at end of file -- Gitee