技术小松鼠 2021-10-06 02:05 采纳率: 0%
浏览 28

人人必知的10个jQuery小技巧

Jquery的源码解读网上有很多,基本一搜索就能搜索出一大片,我就不拿过来了,主要就是分享下一些在阅读源码解读时学习到的一些关于ajax插件的理解

(1)调用 jQuery.ajaxSetup( {}, options )让最终options具有jQuery内置的所有的属性,同时也包括用户调用ajax方法的时候传入的所有的属性和方法!

(2)创建jqXHR对象,让该对象具有Deferred的所有属性和方法,该Deferred对象可以绑定用户的success和error方法。

但是用户传入的compelte方法表示任何情况下都会调用,我们就引入了一个Callbacks对象,把complete回调函数存入该Callback中(用fireWith调用)

(3)对URL处理,取出hash加上协议名称,为type赋值,也就是Get/Post方法(用户可以通过method或者type传入该方法);

指定dataTypes说明用户需要要的数据类型(用户通过dataType传入);

如果用户没有明确指定crossDomain,那么自己判断,如果用户传入的URL也就是访问的URL和当前的location.href不相同(包括协议名称,主机名,端口号等),

那么直接把crossDomain设置为true;如果传入了数据,也就是data那么通过 jQuery.param方法把这个数据序列化;

(4)上述步骤完成以后,我们就调用inspectPrefiltersOrTransports,这个方法传入了prefilters,表示对prefilters中所有的预处理函数进行检测,该方法可以修改前面所有的参数,当然也可以添加新的信息(这里是prefilters)

(5)如果用户传入了global参数,那么我们在这个步骤执行"ajaxStart"事件

globalBoolean类型

默认值:true。指示是否触发全局Ajax事件。将该值设为false将阻止全局事件处理函数被触发,例如ajaxStart()和ajaxStop()。

它可以用来控制各种Ajax事件。

(6)如果指定了get/head请求,那么如果有数据那么把数据绑定到URL后面(同时保存这个URL以便缓存URL)。

同时如果是指定了get/head时候还明确指定了不能缓存数据,那么我们把缓存的URL后面添加一个随机数,随机数是当前时间!(一开始设定了缓存URL是用户传入的ur,get/head请求等都会对URL修改)

(7)如果用户指定了ifModified,表示只有数据改变时候才发送请求。

如果这个URL已经访问过了,那么我们取出访问该URL时候服务器给的etag和if-none-match标签,并且把他们通过"If-None-Match和If-Modified-Since形式发送给服务器端,让服务器端去判断数据有没有改变。

这两个头是在done方法中,也就是成功回调时候设置的!

ifModifiedBoolean类型

默认值:false。允许当前请求仅在服务器数据改变时获取新数据(如未更改,浏览器从缓存中获取数据)。它使用HTTP头信息Last-Modified来判断。

从jQuery 1.4开始,他也会检查服务器指定的'etag'来确定数据是否已被修改。

(8)设置数据类型content-type,把content-type的头添加到jqXHR对象上

contentTypeString类型

默认值:'application/x-www-form-urlencoded; charset=UTF-8'。使用指定的内容编码类型将数据发送给服务器。

W3C的规范规定charset始终是UTF-8,你如果将其改为其他字符集,也无法强制浏览器改字符编码。

(9)设置accept头,告诉服务器浏览器能够接受的数据类型

acceptsObject类型

默认值:取决于dataType属性。发送的内容类型请求头,用于告诉服务器——浏览器可以接收服务器返回何种类型的响应。

如果传入的是""结果就是"/",否则就是如格式"text/html,/*;q=0.01"

(10)设置用户通过headers传入的HTTP头

headersObject类型1.5 新增

默认值:{}。以对象形式指定附加的请求头信息。请求头X-Requested-With: 将始终被添加,当然你也可以在此处修改默认的值。headers中的值可以覆盖beforeSend回调函数中设置的请求头(意即beforeSend先被调用)。

(11)调用beforeSend

beforeSendFunction类型

指定在请求发送前需要执行的回调函数。该函数还有两个参数:其一是jqXHR对象,其二是当前settings对象。这是一个Ajax事件,如果该函数返回false,将取消本次ajax请求。

(12)这一步才把我们传入的success,error,compelete放入相应的Deferred对象和Callback对象里面,以备回调!

注意:此处要注意到的顺序问题,如果是写在body之前,那么事件注册要写在初始化方法ready里面,此方法类似于,表示body解析完毕后再运行此处代码,否则会运行错误,因为网页解析是从上至下的,在解析里面的代码时,button标记还未解析出来;如果是写在body之后,则无需写在ready方法中,因为此时button标记已经被解析了。

2.关于样式的相关操作:添加样式用addClass(),删除样式用removeClass(),设置样式中的属性值用css(“属性名”,”属性值”),得到样式中的属性值用css(“属性名”),示例如下: 代码示例:

  • 写回答

1条回答 默认 最新

  • 关注

    总结的不错,但为什么要发在这里?
    你应该去写博客

    评论

报告相同问题?

问题事件

  • 创建了问题 10月6日

悬赏问题

  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?
  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn,请教个问题 flink启动yarn-session.sh连不上hadoop,这个整了好几天一直不行,求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型,搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热(温度不同)的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛