js

js

DOM

HTML DOM（文档对象模型 Document Object Model）：当网页被加载时，浏览器会创建页面的文档对象模型。

• js 能改变页面中所有元素的 HTML 元素、所有HTML 属性、CSS 样式 ，并能对所有事件做出反应。

---

document 对象

• document对象是文档的根节点
• window.docment属性就指向这个对象
• 只要浏览器开始载入HTML文档，这个对象就开始存在了，可以直接调用
• 文档对象是网页中所有对象的所有者（或根），即如果要访问HTML页面中的对象，则始终访问 document 对象
  实例

document.body.innerHTML = "文本";
由于 body 是 DOM 的元素，因此我们可以使用 document 对象访问它并更改 innerHTML 属性的内容。

---

所有 HTML 对象，且每个对象都有属性和方法。

//通过 id 找元素
document.getElementById(id) 

//通过 类 找元素
document.getElementsByClassName(name) 

//通过 标签 找元素
document.getElementsByTagName(name)

• getElementsByClassName() 方法通过类名查找所有元素，并将其作为数组返回。
• getElementsByTagName 方法返回指定标签名称的所有元素,作为数组返回。
• length 代表长度。

---

改变样式：使用元素的style对象来访问所有样式属性。

• 所有CSS属性都可以使用JavaScript进行设置和修改。请记住，您不能在属性名称中使用破折号（ - ）：这些替换为驼峰写法

JQuery

• ​jQuery​是一个​快速，小巧，功能丰富​的​JavaScript库​。
• jQuery​ 使HTML文档遍历和操作，事件处理和动画等​操作​变得更加​简单​。
• jQuery的所有功能都是通过​JavaScript访问​的。

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作
  ​

异步

Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）

同步：
按任务顺序完成任务。

异步：
每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行。

异步编程的4种方式：
1）回调函数
2）事件监听
3）发布/订阅
4）Promises对象

promise

JavaScript 的 Promise 对象：代表了未来将要发生的事件，用来传递异步操作的消息。

1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

• pending: 初始状态，不是成功或失败状态。
• fulfilled: 意味着操作成功完成。
• rejected: 意味着操作失败。

2、优缺点：
优点

• 有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
• Promise 对象提供统一的接口，使得控制异步操作更加容易。

缺点

• 无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
• 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
• 当处于 Pending 状态时，无法得知目前进展到哪一个阶段。

3、使用方法：

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

//resolve作用是将Promise对象状态由“未完成”变为“成功”，也就是Pending -> Fulfilled，在异步操作成功时调用，并将异步操作的结果作为参数传递出去；

//reject函数则是将Promise对象状态由“未完成”变为“失败”，也就是Pending -> Rejected，在异步操作失败时调用，并将异步操作的结果作为参数传递出去。

JS执行——Promise

Ajax

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
AJAX 是一种用于创建快速动态网页的技术。

• 与服务器交换数据并更新部分页面，在不重新加载整个页面的情况下。
• XMLHttpRequest 对象 (异步的与服务器交换数据)

---

常见写法：

$.ajax({
    url:'',
    type:'',
    dataType:'',
    data:'',
    headers:'',
    success:function(msg){
        
    },
    error: function(msg){
        
    }
});

• url：要求为String类型的参数，（默认为当前页地址）发送请求的地址。
• type：要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持
• dataType：要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包信息返回responseXML或responseText，并作为回调函数参数传递。

可用的类型
xml	返回XML文档，可用JQuery处理
html	返回纯文本HTML信息；包含的script标签会在插入DOM时执行
script	返回纯文本JavaScript代码
json	返回JSON数据
jsonp	JSONP格式
text	返回纯文本字符串

• data： 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。

• success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
  (1)由服务器返回，并根据dataType参数进行处理后的数据。
  (2)描述状态的字符串。 function(data, textStatus)

• error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。

• header：在python框架django中前端发起ajax请求如果是post请求需要传csrf参数就是通过header传的

表单