总结二: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跨域问题。(只知道存在这个问题,但是,浏览器具体在哪里做的的限制我不清楚)。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180202G19A2G00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券