总结二：JS和JQ

一：JS中的两个“构造函数“:

$（function（｛｝）是$(document).ready(function(){ })的缩写。

window.onload（）在页面加载完毕之后执行（并且一个页面只能有一个window.onload，这个我没实验，不敢确定）

二：JQuery的坑：

（1）事件绑定的坑：

$( ).click(functin(){ }) 只能绑定已经加载的HTML元素。

$(document).on('click','function(){ }） 该方法是在页面加载完毕之后再执行，因此他可以绑定 JS动态生成的HTML元素。

如果无法理解，请看下面的提示：

一：JS 的执行顺序是至上而下

二：JS可以动态生成HTML元素。

三：页面的加载顺序。

1.解析HTML结构

2.加载外部的脚本和样式文件

3.解析并执行脚本代码。

4.执行$(function(){})内对应代码

5.加载图片等二进制资源

6.页面加载完毕，执行window.onload（）

从以上顺序可以看出，js等脚本会在DOM文档构造之前执行，这样js就无法访问DOM文档对象模型。所以一般把可执行脚本放在页面初始化事件处理函数中，这样能确保文档加载完毕后再执行脚本。

如果你对具体的加载细节还有疑问，可以看下面的链接。

https://www.jianshu.com/p/cfdf1747d30e

看完链接之后，如果你对XSS和编码绕过好奇，请自行百度。

（2）使用class进行定位的坑：

，如果使用JQuery定位，可以这样写$('.class1')或者$('.class2')，但是如果这样写$('.class1 class2')就不对。

因为JQuery把带空格的class 当成了多个class。（元素定位的坑很多，更多的变化请自行查找）

三：发挥你的想象力。

JS可以做到什么？？？

（1）删除（指定）元素节点，元素文本，元素属性。

（2）新建（指定）元素节点，元素文本，元素属性。

（3）修改（指定）元素节点，元素文本，元素属性。

（4）Ajax：向后端传递数据，获取后端传来的数据。

（5）配合一下CSS实现简单的交互效果。

四：Ajax：

（1）选择Get还是Post的传输方式？

https://www.zhihu.com/question/31640769

（2）Get和Post方式的数据类型？

Get默认是String类型。Post默认是FormData类型（后端获取数据的时候，需要根据前端Post提交的数据格式选择不同的方法，坑！）。

（3）异步的特性是与生俱来的，根据返回的数据再配合JS可以达到局部刷新的效果。

（4）Ajax 的contentType是设置提交给服务器的数据格式，dataType是设置从服务器收到的数据格式。

注意： 如果后端Response的响应头已经设置了Content-Type："application/json; charset=UTF-8"，而你的Ajax还使用dataType再次强调接收的数据类型，那么会报错！！！

（5）Ajax跨域问题。（只知道存在这个问题，但是，浏览器具体在哪里做的的限制我不清楚）。