2021-11-17 JavaScript学习, 常用API + ES6语法 + Ajax_js es6 ajax 写法

JavaScript

一.JS基础

1.1 简单算法考察(熟悉Js基础后掌握)

1.1.1 冒泡排序

function bubbleSort(arr) {
	for (var i = 0; i < arr.length; i++) {			//第一层循环: 计算循环层数;
        for (var j = 0; j < arr.length - 1 - i; j++) {	//第二层循环: 计算每层循环的次数;
            // 从小到大 -> 替换
            if (arr[j] > arr[j+1]){
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
	}
    return arr;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

1.1.2 数组去重的方法

function unique(arr){
    var newArr = [];
    for (var i= 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
1
2
3
4
5
6
7
8
9

1.1.3

• 记录写代码时的常见错误以及如何排查.

  1.首先通过Debug模式, 看看错误出现在哪里.(基本能排查完)
  2.$("this").addClass("current"); //不加引号的变量的出错一般能通过程序Debug提示错误, 但是加了引号变量会变成字符串, 此处this不能添加引号.
  1
  2

1.2 JavaScript变量

1.2.1 变量类型

• **值类型 (基本类型 / 简单数据类型) -> **存放到栈里面.

  1.字符串（String）
  2.数字(Number)
  3.布尔(Boolean)
  4.对空（Null）
  5.未定义（Undefined）
  6.Symbol //Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
  // BigInt
  1
  2
  3
  4
  5
  6
  7

• 引用数据类型 (复杂数据类型) -> 存放到堆里面

  7.对象(Object)
  8.数组(Array)
  9.函数(Function)
  10.内置对象: Date, RegExp (JavaScript中的对象分为3种: 自定义对象, 内置对象, 浏览器对象.)
  
  /* 传参: 
  1.简单数据类型传参: 函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在[栈空间]里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
  
  2.复杂数据类型传参: 函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。
  */
  //下面标注的markdown语法: >+空格
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

举例简单数据类型传参如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1shaKFgM-1637815605983)(learnPic\简单数据类型传参.png)]

注：

1. 基本数据类型的数据直接存储在栈中；

2. 而引用数据类型的数据存储在堆中，在栈中保存数据的引用地址，这个引用地址指向的是对应的数据，以便快速查找到堆内存中的对象。

3. 顺便提一句: 栈内存是自动分配内存的；而堆内存是动态分配内存的，不会自动释放。所以每次使用完对象的时候都要把它设置为null，从而减少无用内存的消耗

**1.2.2 常用输出语句 **

//1.输出语句
console.log();
console.dir();



1
2
3
4
5
6

1.2.3 字符串对象

//以下str为字符串对象;
1.1 基本包装类型: JavaScript提供了三个特殊的引用类型-> String, Number, Boolean.

1.2 字符串的不可变性: 指的是里面的值不可变,虽然看上去可以改变内容, 但其实是地址变了, 内存中新开辟了一个内存空间(注意: 不要频繁拼接字符创).

1.3 根据字符返回位置的方法: str.indexOf('要查找的字符', [起始的位置]) / lastIndexOf();
//注意: 字符创所有的方法, 都不会修改字符串本身(字符串是不可变的), 操作完成返回一个新的字符串.

1.4 根据位置返回字符(重点): 
	charAt(index); //
    charCodeAt(index); //获取指定位置字符的ASCII码;
    str[index];

1.5 连接两个或多个字符串: concat(str1, str2, ...); 
           
1.6 字符串截取:  
    substr(start, length); //(重点)从start位置开始, length取截取个数;	   
	slice(start, end);   
	substring(start, end);

1.7 替换字符: replace('被替换的字符', '替换为的字符');
	字符转换为数组: split('分隔符');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.1 函数 ( function ) 形参和实参个数不匹配问题

2.2 函数function的内置对象: arguments

• 所有函数都内置了一个arguments对象, arguments对象中存储了传递的所有实参.
• 伪数组( 它并不是真正意义上的数组. )
  1. 具有数组的length 属性.
  2. 按照数组索引的方式进行存储.
  3. 它没有真正数组的一些方法, 如pop(), push() 等等.

2.3 函数的2种声明方式: ( 特别注意匿名函数! )

// 1.利用函数关键字自定义函数(命名函数)
function fn() {

}
fn();

// 2. 函数表达式(匿名函数) 
// var 变量名 = function() {};
var fun = function(aru) {
    console.log('我是函数表达式');
    console.log(aru);
}
fun('pink老师');
// (1) fun是变量名 不是函数名  
// (2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值 而 函数表达式里面存的是函数
// (3) 函数表达式也可以进行传递参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.4 变量的作用域

• 全局变量: 在全局作用域下声明的变量 (在函数外部定义的变量).
• 局部变量: 在局部作用域下声明的变量 (在函数内部声明的变量).
• 块级作用域: Js在ES6的时候新增的块级作用域.

2.5 预解析

1. JS引擎运行.js文件分为两步: 预解析 -> 代码执行

• (1). 预解析: js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面.

• (2). 代码执行: 按照代码书写的顺序从上往下执行.

2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）

• (1) 变量提升: 就是把所有的变量声明提升到当前的作用域最前面, 但是不提升赋值操作.

• (2) 函数提升: 就是把所有的函数声明提升到当前作用域的最前面, 但是不调用函数.

2.6 创建对象和数组的方法:

• 创建数组

  //1.字面量方式.
  var arr = [];
  
  //2.使用new Array()创建.
  var arr = new Array([选填数组长度]); // 创建一个数组对象
  
  /* 
  3.数组对象API:
  	3.1 检测是否为数组的方法: instanceof / Array.isArray(数组名);
  	3.2 添加数组元素的方法: push(参数...) / unshift(参数...);
  	    删除数组元素的方法: pop() / shift(); 
  	3.3 数组排序的方法: reverse() / sort();
  	3.4 数组索引的方法: indexOf() / lastIndexOf();
  	3.5 数组转为字符串的方法: toString() / join('分隔符');
  	3.6 连接两个或多个数组: concat();
  	3.7 数组截取: slice(begin, end);
  	3.8 删除定量数组元素: splice(第几个开始, 要删除的个数);
  */
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

• 创建对象的三种方式

  // 1.利用对象字面量创建对象 {}
  var obj = {};  // 创建了一个空的对象 
  
  // 2.利用 new Object 创建对象
  var obj = new Object(); // 创建了一个空的对象
  
  // 3.构造函数的语法格式
  function 构造函数名() {
      this.属性 = 值;
      this.方法 = function() {}
  }
  var obj = new 构造函数名();
  /* new关键字在执行时会做四件事情:
  1. new 构造函数会在内存中创建一个新的空对象.
  2. this 会指向这个新的对象.
  3. 执行构造函数里面的代码 给这个新对象添加属性和方法.
  4. 返回这个对象( 所以构造函数里面不需要return ).
  */
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

2.7 循环与遍历

• 循环:

  1. for(){...}
  2. while(){...}
  3. do{...}
  1
  2
  3

• 遍历:

  // 1.for...in 遍历
  for (var k in obj) {
      console.log(k);      // k 变量输出得到的是->属性名
      console.log(obj[k]); // obj[k] 得到是0->属性值
  }
  // 2.
  1
  2
  3
  4
  5
  6

---

二.WebAPI: DOM

• 2.1 获取元素的方法

  1. document.getElementById('id名');  获取并返回唯一标签元素,
  //var timer = document.getElementById('time');
  
  2. document.getElementsByTagName('标签名'); 获取并返回某类标签元素(返回伪数组类型);
  //var lis =  document.getElementsByTagName('li');
  
  3.通过HTML5 新增的方法获取:
  3.1 document.getElementsByClassName('类名'); 根据类名返回元素对象集合(返回伪数组类型);
  var boxs = document.getElementsByClassName('box');
  
  3.2 ⭐document.querySelector('选择器');  根据指定选择器返回*第一个*元素对象:
  /* var firstBox = document.querySelector('.box');
  var nav = document.querySelector('#nav');
  var li = document.querySelector('li'); */
  
  3.3 ⭐document.querySelectorAll('选择器' =>'#id名'/ '.类名'/ '标签名'); 根据指定选择器返回.
  //var allBox = document.querySelectorAll('.box');
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

2.2 获取特殊元素( body, html ):

• 获取body元素: document.body;
• 获取html元素: document.documentElement;

2.3 操作元素

2.3.1 改变元素内容的两个属性

• element.innerText : 从起始位置到终止位置的内容, 但是它去除html标签, 同时空格和换行也会换掉 ;
• element.innerHTML( 重要 ) : 从起始位置到终止位置的全部内容, 包括html标签, 同时保留空格和换行 ;

2.3.2 常用元素的属性操作

1. innerText, innerHTML: 改变元素内容
2. src, href
3. id, alt, title
1
2
3

2.3.3 表单元素(input)的属性操作:

type, value, checked, selected, disabled
1

2.3.4 样式属性操作

//通过JS修改元素的大小, 颜色, 位置等样式: 
1. element.style   	  =>行内样式操作: 推荐样式比较少的情况下使用;
2. element.className  =>类名样式操作: 通过修改类名来调整样式(推荐样式修改较多时使用; 注意:className会直接更改元素的类名, 会覆盖原先的类名;)

/* 修改为多类名, 例如: 
   this.className = 'first change';// 多类名选择器, 保留之前的first类名, 新增change类名; */
1
2
3
4
5
6

2.3.5 排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法︰

1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下我自己)
3.注意顺序不能颠倒, 首先干掉其他人,再设置自己.
1
2
3

2.3.6 自定义属性的操作

//1. 属性的操作
1.1 获取属性值: 
* element.属性: 获取内置属性值( 元素本身自带的属性 ).
* element.getAttribute('属性') :  主要获得程序员自定义的属性( 标准 ).

1.2 设置属性值:
* element.属性 = '值';  //设置内置属性值.
* element.setAttribute('属性','值');  //主要设置自定义的属性.

1.3 移除属性值:
* element.removeAttribute('属性');

//2. 设置H5自定义属性: H5规定自定义属性data-开头做为属性名并且赋值。
比如<div data-index= "1"></div> 
或者使用element.setAttribute('data-index', 2);

//2.1 获取H5自定义属性⭐
1. 兼容性获取element.getAttribute('data-index');
2. H5新增element.dataset.index或者element.dataset['index']; IE11才开始支持.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• 2.3.7 节点操作

  节点概述: 一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值）这三个基本属性。我们在实际开发中，节点操作主要操作的是元素节点.

  • 元素节点nodeType为1.

  • 属性节点nodeType为2.

  • 文本节点 nodeType为3(文本节点包含文字、空格、换行等).

  1.父节点 (亲父亲)
  	node名.parentNode  //⭐parentNode属性可返回某节点的父节点，注意是最近的一个父节点. 如果指定的节点没有父节点则返回null. 
  
  2.子节点 (亲儿子)
  2.1 返回'全部'子节点
      parentNode.childNodes (标准)
  /* parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。
  注意∶返回值里面包含了所有的子节点，包括元素节点，文本节点等。一般不提倡使用childNodes */
      parentNode.children(非标准⭐⭐⭐)
  /* parentNode.children是一个只读属性，返回所有的子元素节点(伪数组)。它只返回子元素节点，其余节点不返回（重点掌握）。虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用 */
  2.2 返回第一个和最后一个子节点
  	parentNode.firstChild//firstChild返回第一个子节点，找不到则返回null(也是包含所有的节点).
  	parentNode.lastChild
  //注意∶以下这两个方法有兼容性问题，IE9以上才支持。
  	parentNode.firstElementChild//firstElementchild返回第一个子元素节点.找不到则返回null.
  	parentNode . lastElementChild
  
  3.兄弟节点
      node.nextSibling  //nextsibling返回当前元素的下一个兄弟节点(包含所有的节点).
      node.previousSibling
  //注意:这两个方法有兼容性问题，IE9以上才支持。
      node.nextElementsibling  //nextElementsibling返回当前元素下一个兄弟元素节点.
      node .previousElementsibling
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23

  4.创建节点
      document.createElement ('tagName');  //document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
  
  5.添加节点(插入节点)
      node.appendchild (child);  //node.appendchild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
      node.insertBefore(child, 指定元素);  //node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。
  
  6.删除节点
  node.removeChild(child);  //node.removechild()方法从DOM中删除一个子节点，返回删除的节点。
  
  7.复制节点
  node.cloneNode();  //1.括号为空或者里面是false为浅拷贝, 只复制标签不复制里面的内容; 2.括号为true, 为深拷贝, 会复制标签和复制里面的内容
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

  8.1 三种动态创建元素与区别
  document.write()
  element.innerHTML
  document.createElement()
  8.2 区别
  1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘.
  2. innerHTM是将内容写入某个 DoM节点，不会导致页面全部重绘.
  3. innerHTMr创建多个元素效率更高(（不要拼接字符串，采取数组形式拼接），结构稍微复杂.
  4. createElement()创建多个元素效率稍低一点点，但是结构更清晰.( 3和4面试常问⭐. )
  总结∶不同浏览器下，innerHTM效率要比 creatElement高
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

  • DOM重点核心总结⭐

  关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
  6.1创建
  1. document.write
  2. innerHTML
  3. createElement
  
  6.2增
  1.appendChild
  2.insertBefore
  
  6.3删
  1.removeChild
  
  6.4改
  主要修改dom的元素属性，dom元素的内容、属性,表单的值等
  1．修改元素属性: src、href、title等.(元素直接属性可以直接修改)
  2．修改普通元素内容:innerHTML、innerText.
  3．修改表单元素: value、type、disabled等.
  4．修改元素样式: style、className.
  
  6.5查
  主要获取查询dom的元素
  1. DOM提供的API方法: getElementByld、getElementsByTagName (古老用法不太推荐.)
  2.H5提供的新方法:querySelector、querySelectorAll(提倡⭐)
  3．利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)(提倡⭐)
  
  6.6属性操作(主要针对于自定义属性。)
  1. setAttribute: 设置dom的属性值
  2. getAttribute: 得到dom的属性值
  3. removeAttribute: 移除属性
  
  6.7事件操作(如下表)
  给元素注册事件，采取事件源.事件类型=事件处理程序
  
  | 鼠标事件    | 触发条件          |
  | ----------- | ----------------- |
  | onclick     | 鼠标点击左键触发⭐ |
  | onmouseover | 鼠标经过触发⭐     |
  | onmouseout  | 鼠标离开触发⭐     |
  | onfocus     | 获得鼠标焦点触发  |
  | onblur      | 失去鼠标焦点触发⭐ |
  | onmousemove | 鼠标移动触发      |
  | onmouseup   | 鼠标弹起触发      |
  | onmousedown | 鼠标按下触发      |
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44

• 2.3.8 注册事件( 绑定事件 )

  1. 注册事件概述
  给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式∶传统方式和方法监听注册方式.
  
  1.2 addEventListener事件监听方式
  eventTarget.addEventListener(type,listener[, useCapture])
  /* 注意:  
  eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
  该方法接收三个参数︰
  type: 事件类型字符串，比如click、mouseover，注意这里不要带on.
  listener: 事件处理函数，事件发生时，会调用该监听函数
  useCapture: 可选参数，是一个布尔值，默认是false。 */
  
  1.3 attachEvent事件监听方式
  eventTarget.attachEvent(eventNamewithon,callback)
  /* 注意:
  该方法接收两个参数:
  eventNameWithOn: 事件类型字符串，比如onclick、onmouseover，这里要带on
  callback: 事件处理函数，当目标触发事件时回调函数被调用. */
  
  1.4//函数封装:  注册事件兼容性解决方案.
  function addEventListener(element,eventName,fn){
      //判断当前浏览器是否支持addEventListener方法
      if (element.addEventListener){
          element.addEventListener(eventName,fn); //第三个参数默认是false
      } else if (element.attachEvent) {
          element.attachEvent ( 'on' + eventName, fn);
      } else {
          //相当于element.onclick = fn;
          element [ 'on'+ eventName] = fn;
      }
  }
  
  2.删除事件（解绑事件)
  删除事件的方式:
  2.1 传统注册方式
  eventTarget.onclick = null;
  2.2 方法监听注册方式
  eventTarget.removeEventListener(type, listener[, useCapture]); eventTarget.detachEvent (eventNamewithon, callback);
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38

2.3.9 事件对象

DOM事件流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mEFjfobm-1637815605984)(learnPic\DOM事件流.png)]

4.1 事件对象的使用方法.
eventTarget.onclick = function (event){} //这个event就是事件对象，我们还喜欢的写成e或者evt.
eventTarget.addEventListener('click', function(event){})
/* 注意:
1.这个event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)。
2.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
3.在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。
解决: e = e || window.event;  */

4.2 事件对象的常见属性和方法
| 事件对象属性方法    | 说明                                                         |
| ------------------- | ------------------------------------------------------------ |
| e.target            | 返回触发事件的对象(标准)⭐                                    |
| e.srcElement        | 返回触发事件的对象(非标准, ie6-8使用)                        |
| e.type              | 返回事件的类型, 比如click mouseover不带on                    |
| e.cancelBubble      | 该属性阻止冒泡 (非标准 ie6-8使用)                            |
| e.returnValue       | 该属性阻止默认事件(默认行为),  非标准 ie6-8使用比如不让链接跳转 |
| e.preventDefault()  | 该方法阻止默认事件(默认行为),  标准比如不让链接跳转          |
| e.stopPropagation() | 阻止冒泡 (标准)                                              |


4.3 阻止事件冒泡的两种方式
事件冒泡: 开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。
阻止事件冒泡
●标准写法∶利用事件对象里面的stopPropagation()方法:  e.stopPropagation ()
●非标准写法:IE6-8利用事件对象cancelBubble属性:  e.cancelBubble = true;


5. 鼠标事件对象MouseEvent 和 键盘事件对象KeyboardEvent。
5.1 禁止鼠标右键菜单: contextmenu事件->主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
//document.addEventListener ('contextmenu ', function(e){e.preventDefault();})
5.2 禁止鼠标选中(selectstart事件->开始选中)
//document.addEventListener('selectstart', function (e){e.preventDefault() ;})
5.3 鼠标事件对象e.clientX /e.clientY /e.pageX /e.pageY /e.screenX /e.screenY
5.4 常用的键盘事件: onkeyup, onkeydown, onkeypress(执行顺序: onkeydown-> onkeypress->onkeyup, 其中onkeypress不识别功能键.)
5.5 键盘事件对象属性: keyCode  ->返回该键的ASCII值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

• 事件委托 (面试常问)⭐⭐

  **事件委托**
  事件委托也称为事件代理，在jQuery里面称为事件委派。
  
  **事件委托的原理**
  不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
  
  **事件委托的作用**
  我们只操作了一次DOM，提高了程序的性能。
  
  如下案例:给ul注册点击事件，然后利用事件对象的target来找到当前点击的li,因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
  var ul = document.querySelector('ul');
  ul.addEventListener('click', function(e) {
      // e.target 这个可以得到我们点击的对象
      e.target.style.backgroundColor = 'pink';
  })
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

---

三.WebAPI: BOM

3.1 BOM概述

1.1什么是 BOM
BOM(BrowserObject Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

2. BOM的构成
window对象是浏览器的顶级对象，它具有双重角色。
1．它是JS访问浏览器窗口的一个接口。
2．它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等。
注意:window下的一个特殊属性window.name
1
2
3
4
5
6
7
8
9

3.2 window 对象的常见事件

1. 窗口加载事件
window.onload = function() {}
或者
window.addEventListener("load", function(){});
或者
document.addEventListener('DOMContentLoaded', function(){})
/* 注意:
1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕(包括图像、脚本文件、CSS文件等) 再去执行处理函数。
2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
3.如果使用addEventListener则没有限制
4.DOMContentLoaded事件触发时，仅当DOM加载完成(不包括样式表，图片，flash等等)。IE9以上才支持. */

2. 调整窗口大小事件
window.onresize = function() {}
window.addEventListener("resize", function (){});
/*注意∶
1.只要窗口大小发生像素变化，就会触发这个事件。
2.我们经常利用这个事件完成响应式布局。window.innerWidth当前屏幕的宽度 */

3.定时器⭐⭐⭐
3.1 设置setTimeout()定时器 与 停止setTimeout()定时器
window.setTimeout(调用函数, [延迟的毫秒数]);
window.clearTimeout(timeoutID);
/* 注意∶
1.window可以省略。
2.这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐. */

3.2 设置setlnterval()定时器 与 停止setInterval()定时器
window.setInterval(回调函数，[间隔的毫秒数]);
window.clearInterval(intervalID);
/* 注意∶
1.window可以省略。
2.这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名()’三种形式。
3.间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。 */


4. this
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象.
// 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
// 2. 方法调用中谁调用this指向谁        
// 3. 构造函数中this指向构造函数的实例

5. JS执行机制.
4.1 同步和异步
同步任务: 同步任务都在主线程上执行，形成一个执行栈。
异步任务: JS的异步是通过回调函数实现的。
/* 一般而言，异步任务有以下三种类型: 
1、普通事件，如click、resize等. 
2、资源加载，如load、error等.
3、定时器，包括setlnterval、setTimeout等.
异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。 */

4.2 执行顺序.
1.先执行执行栈中的同步任务。
2.异步任务（回调函数)放入任务队列中。
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

window ->  包含对象: document, location, navigation, screen, history.

5.1 什么是 location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。(location.href 获取或者设置整个URL⭐, location.search 返回参数)
5.2 URL
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。
5.3 location对象的方法
location.assign(): 跟href一样，可以跳转页面（也称为重定向页面)
location.replace(): 替换当前页面，因为不记录历史，所以不能后退页面
location.reload(): 重新加载页面，相当于刷新按钮或者f5如果参数为true 强制刷新ctrl+f5

6.navigator对象
navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。


7.history对象
//window对象给我们提供了一个history对象，与浏览器历史记录进行交互。
back(): 可以后退功能
forward(): 前进功能
go(参数): 前进后退功能参数如果是1前进1个页面如果是-1后退1个页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

四.WebAPI: jQuery

4.1 jQuery的入口函数

// 1.入口函数1 (简单写法,推荐使用⭐⭐⭐: 相当于在$()里面写一个function(){})
$(function(){
    ...  //此处是页面DOM加载完成的入口
})

// 2.入口函数2
$(document).ready(function(){
    //$('div').方法;...  //此处是页面DOM加载完成的入口
})
    
// 3.JS原生写法: /* 1.优点: 有了window.onload就可以把JS代码写到页面元素的上方.  2.缺点: 因为onload是等页面内容全部加载完毕(包括图像、脚本文件、CSS文件等), 再去执行处理函数。*/
window.onload = function() {}
1
2
3
4
5
6
7
8
9
10
11
12

注:

1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
2. 相当于原生js 中的DOMContentLoaded。
3. 不同于原生js 中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
4. jQuery 的顶级对象是$,在代码中可以使用jQuery代替$.

4.2 jQuery对象 和 DOM对象:

4.2.1 jQuery对象 和 DOM对象的区别:

1.DOM对象: 用原生S获取来的对象就是DOM对象

2.jQuery对象: jQuery方法获取的元素就是jQuery对象.
  //jQuery对象本质是: 利用$对DOM对象包装后产生的对象(伪数组形式存储)。

3.jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScirpt属性和方法
1
2
3
4
5
6

4.2.2 jQuery对象 和 DOM对象的转换:

DOM对象和jQuery对象是可以相互转换的.

1. DOM对象转换为jQuery对象: $(DOM对象);

2. jQuery对象转换为DOM对象(两种方式): //下面的index是索引号.
方式一: $('选择器')[index]      // $('video')[0].play()
方式二: $('选择器').get(index)  // $('video').get(0).play()
1
2
3
4
5

4.3 jQuery常用API

4.3.1 jQuery选择器

1.使用jQuery选择器: $("选择器");  //里面选择器直接写CSS选择器即可, 但是要加引号.

2.jQuery设置样式: $('div').css('属性', '值');  //默认给匹配的所有元素进行隐式迭代.
* (重要)隐式迭代: 遍历内部DOM元素（伪数组形式存储)的过程就叫做隐式迭代。 *
1
2
3
4

• jQuery基础选择器

• jQuery筛选选择器

• jQuery筛选方法 (重点)

注:

一. $(this).children("ul").show();//$(this): this指 jQuery当前元素, this不要加引号.

二. parents(‘选择器’)可以返回指定祖先元素.

4.4 jQuery入门:

• jQuery 链式编程

  // $(this).css("color", "red");
  // $(this).siblings().css("color", "");
  // 链式编程(效果同以上代码):
  $(this).css("color", "red").siblings().css("color", "");
  1
  2
  3
  4

• jQuery样式操作

2.1 操作css方法. //jQuery可以使用css方法来修改简单元素样式; 也可以操作类，修改多个样式。
1.参数只写属性名，则是返回属性值
$(this).css("color");
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加号，值如果是数字可以不用跟单位和引号.
$(this).css("color", "red");
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号.
$(this).css( "color": "white", "font-size": "20px");

2.2 设置类样式方法
/* 1.作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。
   2.jQuery里面类操作只是对指定类进行操作，不影响原先的类名。 */
1.添加类 $("div").addClass("current");
2.移除类 $("div").removeClass("current");
3.切换类 $("div").toggleClass("current");
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• jQuery效果

1.jQuery给我们封装了很多动画效果，最为常见的如下:
显示隐藏: show();  hide();  toggle(); //show([speed, [easing], [fn]]); 以下函数参数类似.
滑动: slideDown();  slideUp();  slideToggle();
淡入淡出: fadeln();  fadeOut();  fadeToggle();  fadeTo( speed, opacity, [easing],[fn]);
自定义动画: animate();

2. 事件切换
hover([over,]out)
(1) over: 鼠标移到元素上要触发的函数(相当于mouseenter)
(2) out: 鼠标移出元素要触发的函数(相当于mouseleave)

3.动画队列及其停止排队方法
3.1 动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
3.2 停止排队
(1) stop()方法用于停止动画或效果。
(2) 注意: stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• jQuery属性操作

1.1 设置或获取元素固有属性值prop(),比如<a>元素里面的href，比如<input>元素里面的type。
prop("属性");
prop("属性","属性值");

1.2 设置或获取元素自定义属性值attr(),比如给div添加index = "1"。
attr("属性"); //类似原生getAttribute()
attr("属性","属性值"); //类似原生setAttribute()

1.3 数据缓存data()//可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。


2.1 jQuery文本属性值
// 1. 获取设置元素内容 html()
console.log($("div").html());  //设置: $("div").html("123");
// 2. 获取设置元素文本内容 text()
console.log($("div").text());  //设置: $("div").text("123");
// 3. 获取设置表单值 val()
console.log($("input").val());  //设置: $("input").val("123");



3. jQuery 元素操作
主要是遍历、创建、添加、删除元素操作。
3.1 遍历元素//jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法1:
$("div").each(function (index,domEle) { xxx; })
/* 1.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调函数有2个参数: index是每个元素的索引号; demEle是每个DOM元素对象，不是jquery对象
3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle) */

语法2∶
$.each(object, function (index, element) { xxx; })
/* 1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象.
2.里面的函数有2个参数: index是每个元素的索引号; element遍历内容. */

3.2创建元素
$("<li></li>");  //动态的创建了一个<li>

3.3添加元素
element.append("内容"); //内部添加
element.prepend("内容");//内部添加元素，生成之后，它们是父子关系。
element.after("内容");  //外部添加
element.before("内容"); //外部添加元素，生成之后，他们是兄弟关系。
3.4删除元素
element.remove();//删除匹配的元素（本身)
element.empty(); //删除匹配的元素集合中所有的子节点
element.html("");//清空匹配的元素内容

4. jQuery尺寸, 位置操作
4.1.尺寸
	width() / height() //获取设置元素 width和height大小 
    innerWidth() / innerHeight()  //获取设置元素 width和height + padding 大小 
    outerWidth()  / outerHeight()  //获取设置元素 width和height + padding + border 大小 
    outerWidth(true) / outerHeight(true) //获取设置 width和height + padding + border + margin

4.2.位置操作
    获取或设置距离文档的位置(偏移): offset()/ offset().top
    获取距离带有定位父级位置(偏移): position()   //如果没有带有定位的父级，则以文档为准;
    scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

4.5 jQuery事件

1.jQuery事件注册: 
2.1 事件处理on()绑定事件:
on()方法优势1: ①可以绑定多个事件，多个处理事件处理程序。
$("div").on( {
	mouseover: function(){ },
    mouseout : function() { },
    click: function() { }
});
②如果事件处理程序相同
$("div").on("mouseover mouseout", function() {
    $(this).toggleclass("current");
});

on()方法优势2∶
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
(在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。)
$('ul').on('click', 'li', function() {
	alert('hello world!');
});


2.jQuery事件处理:
2.1 事件处理off()解绑事件:
off()方法可以移除通过on()方法添加的事件处理程序。
$("p").off() //解绑p元素所有事件处理程序.
$("p").off("click")  //解绑p元素上面的点击事件后面的foo是侦听函数名.
$("ul").off("click"，"li"); //解绑事件委托.
如果有的事件只想触发一次，可以使用one()来绑定事件。

2.2 自动触发事件trigger()
element.click()  //第一种简写形式.
element.trigger("type")  //第二种自动触发模式.

3.jQuery事件对象:
事件被触发，就会有事件对象的产生: element.on (events, [selector], function (event){})
阻止默认行为: event.preventDefault()或者return fals;
阻止冒泡: event.stopPropagation;

4.jQuery其他方法:
4.1 jQuery对象拷贝: 把某个对象拷贝（合并）给另外一个对象使用，可以使用$.extend()方法.
$.extend([deep], target, object1, [objectN])
/*	1.deep: 如果设为true为深拷贝，默认为false浅拷贝.
	2.target: 要拷贝的目标对象.
	3.object1: 待拷贝到第一个对象的对象。
	4.objectN:待拷贝到第N个对象的对象。
    5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。*/

4.2 jQuery多库共存
解决方案∶
1.把里面的$符号统一改为jQuery。比如jQuery("'div")
2.jQuery变量规定新的名称, 使用$.noConflict():   var xx = $.noConflict();

4.3 jQuery插件
4.3.1 jQuery插件常用的网站:
1.jQuery插件库 http://www.jq22.com/
2.jQuery之家 http://www.htmleaf.com/jQuery
/* 插件使用步骤∶
1.引入相关文件。(jQuery文件和插件文件)
2.复制相关html、css、js(调用插件)。 */

4.3.2 jQuery插件演示∶
1.瀑布流
2.图片懒加载 (图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)
当我们页面滑动到可视区域，再显示图片。
3.全屏滚动( fullpage.js )
gitHub: https://github.com/alvarotrigo/fullPage.js
中文翻译网站:http://www.dowebok.com/demo/2014/77/


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

---

五.ES6语法

5.1 变量声明

5.1.1 ES6中新增的用于声明变量的关键字: let

• let声明的变量只在所处于的块级有效.

  注意: 使用let关键字声明的变量才具有块级作用域, 使用var声明的变量不具备块级作用域.

• 不存在变量提升.

• 暂时性死区.

5.1.2 用于声明常量的关键字: const

作用: 声明常量, 常量就是值 (内存地址) 不能变化的量.

• 具有块级作用域.

• 声明常量时必须赋值.(否则会报错.)

  const PI;
  const PI = 3.14;
  1
  2

• 常量赋值后, 值不能修改.

5.1.3 var, let, const的区别

5.2 解构赋值

注: ES6中允许从数组中提取值, 按照对应位置, 对变量赋值. 对象也可以实现解构.

• 数组解构:

  let ary = [1, 2, 3];
  let [a, b, c] = ary;
  1
  2

• 对象解构:

  let person = { name: "zhangsan", age: 20};
  // 方法一: 
  let { name, age} = person;
  // 方法二: 
  let { name: myName, age: myAge} = person;
  1
  2
  3
  4
  5

5.3 箭头函数

• ES6 中新增的定义函数的方式: () => {}

  () => {}
  const fn = () => {};
  
  //1. 函数体中只有一句代码, 且代码的执行救过就是返回值, 可以省略大括号.
  function sum(num1, num2) {
      return num1 + num2;
  }
  等价于: const sum = (num1, num2) => num1 + num2;
  
  //2. 如果形参只有一个, 可以省略小括号.
  function fn (v) {
      return v;
  }
  等价于: const fn = v => v;
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

• 箭头函数不绑定this关键字, 箭头函数中的this, 指向的是 函数定义位置的上下文this.

  //注: call()方法可以改变function函数的内部的this指向;
  const obj = { name: '张三'};
  function fn () {
  	console.log(this); //name: '张三'
      return () =>{
  		console.log(this); //name: '张三'
      }
  }
  const resFn = fn.call(obj);
  resFn();
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

5.4 剩余参数

• 剩余参数语法允许我们将一个不定数量的参数表示为一个数组

  // 1.例子
  function sum(first, ...args) {
  	console.log(first); //10
  	console.log(args); //[20, 30]
  }
  sum(10, 20, 30);
  
  // 2.写一个求和函数(注: 箭头函数里没有内置arguments参数):
  const sum = (...args) => {
      let total = 0;
      args.forEach(item => total += item);
      return total;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

5.5 ES6 的内置对象扩展

5.5.1 Array 的扩展方法

• 扩展运算符(展开语法): ...数组名

  //1.扩展运算符可以将数组或者对象转为用逗号分隔的参数序列.
  let ary = [1, 2, 3];  
  // ...ary -> 相当于: 1, 2, 3
  console.log(...ary);  //1 2 3
  
  //2. 扩展运算符可以应用于合并数组.
  //方法一:
  let ary1 = [1, 2, 3];
  let ary2 = [4, 5, 6];
  let ary3 = [...ary1, ary2];
  //方法二:
  ary.push(...ary2);
  
  //3.将伪数组或可遍历对象 转换为 真正的数组: 
  let oDivs = document.getElementsByTagName('div');
  oDivs = [...oDivs];
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

• 构造函数方法: Array.from()

  //1.用法一: 将伪数组或可遍历对象转换为真正的数组. 
  let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
  };
  let arr2 = Array.from(arrayLike);  // ['a','b','c']
  
  //2.用法二: Array.from()方法还可以接收第二个参数, 作用类似于数组的map方法, 用来对每个元素进行处理, 将处理后的值放入返回的数组.
  let arrayLike = {
      '0': 'a',
      '1': 'b',
      "length": 2
  };
  let newArray = Array.from(arrayLike, item => item * 2);
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

• 实例方法: 实例数组名.find()

  //1.用于找出第一个符合条件的数组成员, 如果没有找到返回undefined.
  let ary = [{
  	id: 1,
  	name: '张三'
  },{
  	id: 2,
  	name: '李四'
  }];
  let target = ary.find ((item,index) =>item.id == 2);//item为当前循环的值,index为当前循环的索引;
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 实例方法: 实例数组名.findIndex();

  //1.用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1.
  let ary = [1, 5, 10, 15];
  let index = ary.findIndex((value, index) => value > 9);
  console.log(index); //2
  1
  2
  3
  4

• 实例方法: 实例数组名.includes();

  //1. 表示某个数组是否包含给定的值, 返回布尔值.
  [1, 2, 3].includes(2);    //true
  [1, 2, 3].includes(4);    //false
  1
  2
  3

5.5.2 String的扩展方法

• 模板字符串

  //1. ES6新增的创建字符串的方式, 使用反引号定义;
  let name = `zhangsan`;
  
  //2. 模板字符串中可以直接解析变量.
  let name = `张三`;
  let sayHello = `hello, 我是 ${name}`;  //hello, 我是张三.
  
  //3. 模板字符串可以换行.(例子省略)
  
  //4. 模板字符串可以调用函数.
  const fn = () => {
      return '我是fn函数.';
  }
  let html = `我是模板字符串.${fn()}`;
  console.log(html);
  
  //5.1 startsWith(): 表示参数字符串是否在原字符串的头部，返回布尔值.
  //5.2 endsWith(): 表示参数字符串是否在原字符串的尾部，返回布尔值.
  let str = 'Hello world!' ;
  str.startswith( 'Hello') //true;
  str.endswith( '!');   //true
  
  //6. 实例方法: 字符串实例.repeat() -> repeat()方法表示将原字符串重复n次, 返回一个新字符串.
  'hello'repeat(2);  //"hellohello"
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24

5.6 set数据结构

• ES6提供了新的数据结构Set。它类似于数组(含有属性size, 可查询set数据结构的大小)，但是成员的值都是唯一的，没有重复的值。

  //1. Set本身是一个构造函数，用来生成Set 数据结构。
  const s = new Set();
  
  //2. Set函数可以接收一个数组作为参数，用来初始化。
  const set = new Set( [1，2，3，4，4]);
  
  //3. 用处: 数组去重
  const s3 = new Set(["a","a","b","b"]);
  const ary = [...s3];
  console.log(ary);  //["a","b"]
  
  //4. 常用的实例方法: 
  //4.1 add(value): 添加某个值，返回Set结构本身.
  //4.2 delete(value): 删除某个值，返回一个布尔值，表示删除是否成功.
  //4.3 has(value): 返回一个布尔值，表示该值是否为Set的成员.
  //4.4 clear(): 清除所有成员，没有返回值.
  
  
  //5. Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
  //注意: forEach方法内接收一个函数作为参数, forEach方法会对set数据结构中的数据进行循环, 每次循环的时候都会调用这个函数 并传递一个参数过来(即当前循环的值).
  s.forEach( value => console.log(value));
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21

六.AJAX 和 cookies

6.1 Ajax请求限制

1.什么是同源: 
如果两个页面拥有相同的协议、域名和端口，则这两个页面就属于同一个源.// (其中只要有一个不相同，就是不同源.)

2.同源政策的目的: 
同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置Cookie，B网站是不能访问的。
随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax请求，如果请求，浏览器就会报错。

3.使用JSONP解决同源限制问题
jsonp是json with padding的缩写，它不属于Ajax请求，但它可以模拟Ajax请求。
3.1．将不同源的服务器端请求地址写在script标签的src属性中
<script src="www.example .com"></script>
<script src="https://cdn.bootcss.comn/jquery/3.3.1/jquery.nin.js"></script>
3.2．服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
const data = 'fn ( {name: "张三", age: "20"} )';
res.send(data);
3.3．在客户端全局作用域下定义函数fn
function fn (data) { }
3.4．在fn 函数内部对服务器端返回的数据进行处理
function fn (data) { console.log(data); }


4.withCredentials属性
在使用Ajax技术发送跨域请求时，默认情况下不会在请求中携带cookie信息。
withCredentials:指定在涉及到跨域请求时，是否携带cookie信息，默认值为false.
Access-Control-Allow-Credentials: true允许客户端发送请求时携带cookie.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

6.2 cookie 和 session

//1.
1

6.3 jQuery中的Ajax

1.$.ajax()方法概述
1.1 作用:发送Ajax请求。
$.ajax({
    type:'get',
    url: 'http:// www.example.com',
    data: { name: ' zhangsan', age: '20' },
    contentType: 'application/x-www-form-urlencoded',
    beforeSend: function () {
    	return false
    },
    success: function (response) {},
    error: function (xhr) {}
});

1.2 作用:发送jsonp请求。
$.ajax ({
    url: 'http://www.example.com',
    //指定当前发送jsonp请求
    dataType: 'jsonp',
    //修改callback参数名称
    jsonp: 'cb',
    //指定函数名称
    jsoncallback: 'fnName' ,
    success: function (response) { }
})


2. $.get()、$.post()方法概述
作用: $.get方法用于发送get请求，$.post方法用于发送post请求。
$.get('http://www.example.com',{name: 'zhangsan', age: 30}, function (response){})

$.post('http://www.example.com',{name: 'lisi', age: 22]，function (response){})


3. 全局事件
只要页面中有Ajax请求被发送，对应的全局事件就会被触发.
.ajaxStart()  //当请求开始发送时触发.
.ajaxComplete()  //当请求完成时触发.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39