diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.15dom.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.15dom.md" new file mode 100644 index 0000000000000000000000000000000000000000..76f9dc409b082beb48670964e62eb77ee0676956 --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.15dom.md" @@ -0,0 +1,132 @@ +**Document 对象** + +每个载入浏览器的 HTML 文档都会成为 Document 对象。 + +Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 + +提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。 + +**Document 对象的方法** + +| 方法 | 描述 | +| ------------------------ | ------------------------------------------------------------ | +| addEventListener() | 向文档添加句柄 | +| adoptNode(node) | 从另外一个文档返回 adapded 节点到当前文档。 | +| close() | 关闭用 document.open() 方法打开的输出流，并显示选定的数据。 | +| createAttribute() | 创建一个属性节点 | +| createDocumentFragment() | 创建空的 DocumentFragment 对象，并返回此对象。 | +| createElement() | 创建元素节点。 | +| createTextNode() | 创建文本节点。 | +| getElementsByClassName() | 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 | +| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 | +| getElementsByName() | 返回带有指定名称的对象集合。 | +| getElementsByTagName() | 返回带有指定标签名的对象集合。 | +| importNode() | 把一个节点从另一个文档复制到该文档以便应用。 | +| normalize() | 删除空文本节点，并连接相邻节点 | +| normalizeDocument() | 删除空文本节点，并连接相邻节点的 | +| open() | 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 | +| querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 | +| querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 | +| removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加) | +| renameNode() | 重命名元素或者属性节点。 | +| write() | 向文档写 HTML 表达式 或 JavaScript 代码。 | +| writeln() | 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。 | + + + +```JavaScript +btn1.onclick = () =>{ + console.log(obj.innerHTML); + obj.innerHTML = '

我是h1

'; +} +//innerHTML 可以进行标签的读取 + +btn2.onclick = () =>{ + console.log(obj.innerText); + obj.innerText = '

我是h1

'; +} +//innerHTML 只能进行文本的读取 +``` + + + +querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素,并且找到后就返回节点对象。 +querySelectorAll() 找出所有匹配的节点并返回数组。 + +```JavaScript +cloneNode() 方法可创建指定的节点的精确拷贝。 + +cloneNode() 方法 拷贝所有属性和值。 + +该方法将复制并返回调用它的节点的副本。 + +如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。 + +否则（也就是默认值，或者false），它只复制当前节点。 + +appendChild() 方法可向节点的子节点列表的末尾添加新的子节点 + +``` + +获取输入框的值:obj.value + +获取单选框的状态：checked + +节点都是单个对象，DOM 提供两种节点[集合] NodeList 和 HTMLCollection ,用于容纳多个节点。 + +***\*`NodeList`\****可以包含各种类型的节点，***\*`HTMLCollection`\****只能包含 HTML 元素节点。 + +```JavaScript +//点击变化颜色(隐藏和显示) + + + + +
+ +

+ + + + + + + +``` + + + diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.16\344\272\213\344\273\266.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.16\344\272\213\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..8da083dbdff3d2d94074d704ddf07b482e8b08ed --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.16\344\272\213\344\273\266.md" @@ -0,0 +1,148 @@ +#### 事件 + +##### 1.点击事件： + +onclick：单击事件 + +ondblclick：双击事件 + +##### 2.焦点事件 + +onblur：失去焦点 + +onfocus:元素获得焦点。 + +##### 3.加载事件： + +onload：一张页面或一幅图像完成加载。 + +##### 4.鼠标事件： + +onmousedown： 鼠标按钮被按下。 + +onmouseup： 鼠标按键被松开。 + +onmousemove： 鼠标被移动。 + +onmouseover： 鼠标移到某元素之上。 + +onmouseout ：鼠标从某元素移开。 + +鼠标按下时，通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号e.button 事件对象中的 button属性可以获取鼠标按键的编号e.which 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键 + +##### 5.键盘事件： + +onkeydown ：某个键盘按键被按下。 + +onkeyup： 某个键盘按键被松开。 + +onkeypress ：某个键盘按键被按下并松开。 + +##### 6.选择和改变 + +onchange ：域的内容被改变。 + +onselect ：文本被选中。 + +##### 7.表单事件： + +onsubmit ：确认按钮被点击。 + +onreset： 重置按钮被点击 + + + +`事件捕获（event capturing）`： 当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。 + +`事件冒泡（dubbed bubbling）`： 事件源 =>根节点（由内到外）进行事件传播。 + +dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡 + +**adEventListener的第三个参数** +在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而，addEventListener还可以传入第三个参数： + +```javascript +element.addEventListener(event, function, useCapture); +``` + +第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。 + +### 事件流 + +（微软）事件冒泡:事件会从最内层的元素开始发生，一直向上传播，直到document对象 +（网景）事件捕获:事件会从最外层的元素开始发生，一直向下捕获，直到最内层对象 + +**事件冒泡** + +```javascript + +
+ 父元素 +
+ 子元素 +
+
+ + +``` + +事件触发顺序是由内到外的，这就是事件冒泡。如果点击子元素不想触发父元素的事件，可使用event.stopPropagation();方法： + +```javascript +child.addEventListener("click",function(e){ +　　console.log("click-child"); + 　e.stopPropagation(); +},false); +1234 +``` + + + + + +**事件捕获** +修改事件冒泡的代码： + +```javascript +var parent = document.getElementById("parent"); +var child = document.getElementById("child"); + +document.body.addEventListener("click",function(e){ + console.log("click-body"); + },false); + +parent.addEventListener("click",function(e){ + console.log("click-parent---事件传播"); +},false); + 　　　　 +　　　　 //新增事件捕获事件代码 +parent.addEventListener("click",function(e){ + console.log("click-parent--事件捕获"); +},true); + +child.addEventListener("click",function(e){ + console.log("click-child"); +},false); +``` + +父元素通过事件捕获的方式注册了click事件，所以在事件捕获阶段就会触发，然后到了目标阶段，即事件源，之后进行事件冒泡，parent同时也用冒泡方式注册了click事件，所以这里会触发冒泡事件，最后到根节点（body）。这就是整个事件流程。 + + + + + diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.17\344\272\213\344\273\266.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.17\344\272\213\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..ae95742d7014b6dfa4617031278cfdec3590ad1b --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.17\344\272\213\344\273\266.md" @@ -0,0 +1,147 @@ +## 事件 + +发生在HTML上的事情 + +#### 事件绑定 + +##### 传统事件绑定 + +兼容性好，但是不能绑定多个同类型事件。 + +```js + +
我是div
+
我是div2
+ + + +``` + + + +##### 现代事件绑定 + +绑定多个同类型事件时会依次执行，但是兼容性较差 + +###### addEventListener:DOM事件的绑定 + +```js +//绑定事件 +var fn = fuction(){ + console.log(123) +} +//addEventListener(事件,处理函数,布尔值):支持ie9及以上的浏览器和其他浏览器 +addEventListener('click',fn) + +``` + +#### 事件取消 + +##### 传统事件取消 + +```js +btn.onclick = null +``` + + + +##### 现代事件取消 + +取消现代事件要与绑定事件的参数一模一样 + +```js +//DOM +btn.removeEventListener('click',fn); +//IE +btn.detachEvent('onclick',fn); +``` + + + +1.点击事件： + +onclick：单击事件 + +ondblclick：双击事件 + +2.焦点事件 + +onblur：失去焦点 + +onfocus:元素获得焦点。 + +3.加载事件： + +onload：一张页面或一幅图像完成加载。 + +4.鼠标事件： + +onmousedown： 鼠标按钮被按下。 + +onmouseup： 鼠标按键被松开。 + +onmousemove： 鼠标被移动。 + +onmouseover： 鼠标移到某元素之上。 + +onmouseout ：鼠标从某元素移开。 + +鼠标按下时，通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号e.button 事件对象中的 button属性可以获取鼠标按键的编号e.which 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键 + +5.键盘事件： + +onkeydown ：某个键盘按键被按下。 + +onkeyup： 某个键盘按键被松开。 + +onkeypress ：某个键盘按键被按下并松开。 + +6.选择和改变 + +onchange ：域的内容被改变。 + +onselect ：文本被选中。 + +7.表单事件： + +onsubmit ：确认按钮被点击。 + +onreset： 重置按钮被点击 + +**事件冒泡** + +在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 + +**阻止方法** +event.stopPropagation( ) + + + +```jsx +

段落文本内容

+// 为所有div元素绑定click事件 +$("div").click( function(event){ + alert("div-click"); +} ); //为所有p元素绑定click事件 +$("p").click( function(event){ + alert("p-click"); +} ); + //为所有button元素绑定click事件 +$(":button").click( function(event){ + alert("button-click"); // 阻止事件冒泡到DOM树上 + event.stopPropagation(); // 只执行button的click， +//如果注释掉该行，将执行button、p和div的click （同类型的事件） +} ); +``` + + + diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.20\344\272\213\344\273\266\345\257\271\350\261\241.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.20\344\272\213\344\273\266\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..15fde07d7041d34d4a1f6d1023a9548131a700d2 --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.20\344\272\213\344\273\266\345\257\271\350\261\241.md" @@ -0,0 +1,62 @@ +### 事件委托和事件冒泡 + +一.事件冒泡 + +#### 1.什么是事件冒泡 + +在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 + + + +#### 2.事件冒泡的作用 + + +事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。（事件委托） + + + +#### 3.阻止事件冒泡 + + +事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止。 + + + +#### 4.阻止默认行为 ：event.preventDefault() + +阻止冒泡事件 ： event.stopPropagation() +上述两个操作可以合并为：return false; + + + +（一般动态添加的元素） + +#### 5.事件委托： + +事件委托：就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。 + + +事件委托的关系是将子元素的事件委托到父元素上。 + + + +#### 6.事件取消 + +##### 传统事件取消 + +```js +btn.onclick = null +``` + + + +##### 7.现代事件取消 + +取消现代事件要与绑定事件的参数一模一样 + +```js +//DOM +btn.removeEventListener('click',fn); +//IE +btn.detachEvent('onclick',fn); +``` \ No newline at end of file diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.21jquery.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.21jquery.md" new file mode 100644 index 0000000000000000000000000000000000000000..fb484cb7ad35f00bbacb0704953cef06b76e8fe1 --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.21jquery.md" @@ -0,0 +1,101 @@ +1. JavaScript库 +即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在库中，封装了很多预先定义好的函数在里面，比如animate，hide，show，获取元素等。 + +常见JavaScript库：jQuery，prototype，YUI，Dojo，Ext JS，移动端zepto + +这些库都是对原生JavaScript的封装，内部都是JavaScript实现的，我们主要学习的是jQuery。 + +2. jQuery概述 +jQuery是一个快速，简洁的JavaScript库，其宗旨是“write less，do more”，即提倡写更少的代码，做更多的事情。 + +j就是JavaScript，query是查询。就是把JS中DOM操作做了封装，我们可以快速查询使用里面的功能。 + +jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。 + +学习jQuery的本质：就是学习调用这些函数。 + +3. jQuery优点 + 轻量级。核心文件才即几十kb + 跨浏览器兼容。基本兼容主流浏览器 + 链式编程、隐式迭代 + 对事件、样式、动画支持，大大简化了DOM操作 + 支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等 + 免费、开源 + +4. jQuery的入口函数 + + ```js + 3. //（方法1）等dom加载完再去执行js + $(document).ready(function(){ + …… + }) + + // (方法2)等dom加载完再去执行js + $(function(){ + …… + }) + ``` + + 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕，jQuery帮我们实行 了封装 + 相当于原生js中的DOMContentLoad + 不同于原生load事件，load事件是等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码 + + 5. jQuery的顶级对象 $ + $是jQuery的别称，在代码中jQuery可以代替$，为了方便通常使用$ + $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就是可调用jQuery方法了。 + + 6. jQuery对象和DOM对象 + 用原生JS获取来的对象就是DOM对象 + jquery方法获取的元素就是jquery对象 + jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储） + + ```js + 5. //1.DOM对象：用原生js获取过来的对象就是DOM对象 + var myDiv=document.querySelector('div'); //myDiv 是 DOM 对象 + + //2.jquery对象：用jquery方式获取的对象就是jquery对象。 + $('div'); //$('div')是一个jquery对象 + + //3.jquery对象只能使用jQuery方法，DOM对象只能使用JavaScript属性和方法 + myDiv.style.display="none"; + //$('div').style.display="none"; $('div')是jQuery对象不能使用元素js方法 + ``` + + DOM对象和jQuery对象之间是可以相互转换的。 + + 因为原生js比jquery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。 + + DOM对象转换为jQuery对象：$（DOM对象）不加引号 + $('div') + jQuery转换为DOM对象： + + ```js + $('div')[index] //index是索引号 + $('div').get(index) //index是索引号 + ``` + + + + ```js + + + + + + + + ``` + + + diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.23jQuery\344\272\213\344\273\266.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.23jQuery\344\272\213\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..93c4a5472e6cb90313a90a301ddfce723800003c --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.23jQuery\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/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.24.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.24.md" new file mode 100644 index 0000000000000000000000000000000000000000..1f9d768f0a0c49406ddad94034879d2132c29ebc --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.24.md" @@ -0,0 +1,75 @@ +## jQuery + +### 绑定 + +#### 多个事件绑定一个函数 + +```html +bind('事件类型'，函数) +``` + +#### 多个事件绑定多个函数(键值对) + +```html +bind({'事件类型': 函数,'事件类型':函数}) +``` + +#### on绑定(动态元素绑定) + +```html +//$(父代选择器) +var text = $(''); +$(function () { + $('td').mousedown(function () { + $(this).append(text); + }) + }) +$(function () { + $('td').on('blur','#text',function () { + text.parent().text(text.val()); + }); + }) +``` + +### 解绑 + +```html +$(function () { + $('td').mousedown(function () { + $(this).append(text); + }).off() + //不带参移除所有事件 + }) +//带参移除特定事件 +``` + +### 一次事件(类似立即执行函数) + +```html +$(function () { + $('td').one(function () { + //当前元素只触发一次该事件 + $(this).append(text); + }) + }) +``` + + + +## hover(鼠标移入移出) + +```html +$(function () { + $('div').hover( + function () { + $(this).css('color','red') + }， + function () { + $(this).css('color','white') + } + ) + }) +``` + + + diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.28.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.28.md" new file mode 100644 index 0000000000000000000000000000000000000000..9939e88490bced95a1f162312c20ee8386d854ae --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.28.md" @@ -0,0 +1,61 @@ +## 事件委托 + +**target** :源对象 + +**currenttarget** :当前调用该事件的对象 + +**jquery**.**on**()绑定方法 + +**on**('事件',元素,函数) + +e.**keycode**：键码值 + +dom创建元素 + +插入元素 + +**clone**():如果是true会连同事件一起复制， + +## each遍历元素 + +### $.each方法 + +方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1，其他对象通过其属性名进行迭代。 + +**需求描述：给定一个数组，使用$.each方法进行遍历输出** + +``` +var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50]; +$.each(arr, function (index, element) { + console.log(index, element); +}); +``` + +**需求描述：给定一个对象，使用$.each方法进行遍历输出** + +``` +var obj = { + name: 'Tom', + age: 28, + speak: function () {} +}; +$.each(obj, function (key, value) { + console.log(key, value); +}); +``` + +## + +## 过滤方法 + +**eq**():坐标过滤 + +**is**():p判断当前选择的元素集合中，是否有符合条件的元素有返回true,否则返回false + +**filter**():同辈过滤 + +**has**():子代过滤 + +**find**():查找当前元素的子代 + +**not**():符合条件的排除过滤掉 \ No newline at end of file diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.30ajax.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.30ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..bbebcf10ebcad32f82344e609c20b38a54e22d2d --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/11.30ajax.md" @@ -0,0 +1,38 @@ +**jquery与ajax的区别：** + +**AJAX** + +AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。 + +组成： + +- 基于XHTML和CSS标准的表示； +- 使用Document Object Model进行动态显示和交互； +- 使用XML和XSLT做数据交互和操作； +- 使用XML HttpRequest与服务器进行异步通信； +- 使用JavaScript绑定一切。 + +**jquery与ajax的区别：** + +- Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。 +- jQuery是一个库，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便。 + +区别就在于Ajax是一种异步请求技术，而jQuery对Ajax进行了封装，更方便我们使用。 + + + +使用 AJAX 请求改变 + +元素的文本： + +``` +$("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(result){ $("#div1").html(result); }}); }); +``` + + + +## 定义和用法 + +ajax() 方法用于执行 AJAX（异步 HTTP）请求。 + +所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。 \ No newline at end of file diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/111.29Ajax.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/111.29Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..b602407f5c85ad5d2e968f4bcf6bc8763e82ea93 --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/111.29Ajax.md" @@ -0,0 +1,57 @@ +## Ajax + +核心原理是**异步无刷新** + +实时获取数据 + +### 第一步：发送http请求，创建XMLHttpRequest对象 + +```html +var oAjax = new XMLHttpRequest(); +``` + +### 第二步：请求行设置 + +```html +oAjax.open("GET","",true); +``` + +### 第三步：发送一个请求 + +```html +oAjax.send(); +``` + +### 第四步：接收返回 + +```html +oAjax.onreadystatechange = function () { + if(oAjax.readyState == 4){ + if(oAjax.status == 200){ + console.log(oAjax.responseText); + var obj = JSON.parse(oAjax.responseText); + console.log(obj); + } + } +} +``` + +## JSON + +### JSON.stringify(): + +将对象转发成json数据类型 + +```html +var jsonn = JSON.stringify(obj) +console.log(jsonn); +``` + +### JSON.parse(): + +将json转发成对象 + +```html +var objj = JSON.parse(jsonn); +console.log(objj); +``` \ No newline at end of file diff --git "a/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/12.1Promise.md" "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/12.1Promise.md" new file mode 100644 index 0000000000000000000000000000000000000000..54107b6d0abf53d72fa2aa8e5ce89585474323ba --- /dev/null +++ "b/22\346\235\216\351\233\205\350\212\270/\347\254\224\350\256\260/12.1Promise.md" @@ -0,0 +1,84 @@ +## Promise + +### PromiseState + +1. 一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected） + + + + - 等待态：可以变更为执行态或拒绝态 + - 执行态：不能再去改变状态，必须包含一个最终值（value） + - 拒绝态：不能再去改变状态，必须包含一个拒绝的原因（reason） + +### PromiseResult + +接收**resolve**或者**reject**中的参数 + +```html +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]); + }) + }) + }) +}) +``` + +1. Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。 + +```jsx +promise.then(function(value) { + // success +}, function(error) { + // failure +}) +12345 +``` + +下面我们用promise同样实现一个读取文件a和b之后打印出他们的内容的功能 + +```jsx +let fs = require('fs') +function read(url) { + return new Promise(function (resolve, reject) { + fs.readFile(url, 'utf8', function (err, data) { + if (err) { + reject(err) + } else { + resolve(data) + } + }) + }) +} +read('a.txt').then((data) => { + return read(data) +}).then((data) => { + console.log(data) +}).catch((err) => { + console.log(err) +}) + +``` \ No newline at end of file