jQuery 1.9.1源码分析系列(十四)之常用jQuery工具


Posted in Javascript onDecember 02, 2015

为了给下一章分析动画处理做准备,先来看一下一些工具。其中队列工具在动画处理中被经常使用。

jQuery.fn. queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback ))(获取或设置当前匹配元素上待执行的函数队列. 如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列;设置队列(替换队列、追加函数)时,则为每个匹配元素都分别进行设置。如果需要移除并执行队列中的第一个函数,请使用dequeue()函数。你也可以使用clearQueue()函数清空指定的队列)

jQuery.fn. dequeue([ dequeueName ])(移除每个匹配元素的指定队列中的第一个函数,并执行被移除的函数。你也可以使用clearQueue()函数清空指定的队列(不会执行其中的函数))

jQuery.fn. clearQueue([ dequeueName ])(清空每个匹配元素的指定队列中所有尚未执行的项)

jQuery.error(msg)(抛出一个包含指定字符串信息的异常。)

jQuery.each(object, callback )(遍历指定的对象和数组,并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。所谓的上下文,意即该函数内部的this指针引用了该元素。该函数属于全局jQuery对象。请注意,这与jQuery对象(实例)的each()函数不同,不过jQuery对象(实例)的each()实现也是调用jQuery.each)

jQuery.proxy()(改变函数的上下文。你可以将指定函数传入该函数,该函数将返回一个新的函数,其执行代码不变,但函数内部的上下文(this)已经被更改为指定值

用法一:

jQuery.proxy( function, context [, additionalArguments ] )

将函数function的上下文对象更改为指定的context。

用法二:

jQuery.proxy( context, name [, additionalArguments ] )

将名为name的函数的上下文更改为指定的context。函数name应是context对象的一个属性。

jQuery.map(object, callback)(使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。jQuery库中还有一个同名的实例方法jQuery.fn.map(),它仅用于对当前jQuery对象所匹配的元素进行遍历处理)

jQuery.fn.data([ key [, value ] ])(在当前jQuery对象所匹配的所有元素上存取数据)

jQuery.fn.removeData(keys)(移除在当前jQuery对象所匹配的每一个元素上存储的指定键名的数据项)

jQuery.support(返回用户当前使用的浏览器的特性或bug信息。该属性是一个对象。该对象的属性并不是一成不变的,jQuery也并不保证指定的属性在未来的版本中一定可用,这些属性主要供插件或内核开发人员使用)

jQuery.contains(container, contained)(判断指定元素内是否包含另一个元素。简而言之,该函数用于判断另一个DOM元素是否是指定DOM元素的后代)

jQuery.extend([ deep ], target , object1 [, objectN... ])(将一个或多个对象的内容合并到目标对象。该函数可以将一个或多个对象的成员属性和方法复制到指定的对象上,参数deep用于指示是否深度递归合并)

jQuery.fn.extend(object)(为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法))

jQuery.globalEval(code)(全局性地执行一段JavaScript代码,该函数作用与常规的JavaScript eval()函数相似。不同的是,jQuery.globalEval()执行代码的作用域为全局作用域)

jQuery.grep(array, function [, invert ])(使用指定的函数过滤数组中的元素,并返回过滤后的数组。源数组不会受到影响,过滤结果只反映在返回的结果数组中)

jQuery.inArray(value, array [, fromIndex ])(在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1)

jQuery.isArray(object)(判断指定参数是否是一个数组)

jQuery.isEmptyObject(object)(判断指定参数是否是一个空对象。所谓"空对象",即不包括任何可枚举(自定义)的属性。简而言之,就是该对象没有属性可以通过for...in迭代)

jQuery.isPlainObject(object)(判断指定参数是否是一个纯粹的对象。所谓"纯粹的对象",就是该对象是通过"{}"或"new Object"创建的)

jQuery.isFunction(object)(判断指定参数是否是一个函数)

jQuery.isNumeric(value)(判断指定参数是否是一个数字值)

jQuery.isWindow(object)(判断指定参数是否是一个窗口)

jQuery.isXMLDoc(node)(判断一个DOM节点是否位于XML文档中,或者其本身就是XML文档。该函数主要用于判断指定文档是一个XML文档还是一个HTML(或XHTML)文档)

jQuery.makeArray(object)(将一个类数组对象转换为真正的数组对象。所谓"类数组对象"就是一个常规的Object对象,但它和数组对象非常相似:具备length属性,并以0、1、2、3……等数字作为属性名。不过它毕竟不是数组,没有从数组的原型对象上继承下来的内置方法(例如:push()、 sort()等))

jQuery.noop()(是一个空函数,它什么也不做。当某些时候你需要传入函数参数,而且希望它什么也不做的时候,你可以使用该函数,也无需再新建一个空的函数)

jQuery.now()(返回当前时间距1970年1月1日午夜所经过的毫秒数。该函数的作用类似于new Date().getTime())

jQuery.parseHTML(htmlString [, context ] [, keepScripts ])(将HTML字符串解析为对应的DOM节点数组。该函数将使用原生的DOM元素创建函数把HTML字符串转换为一个DOM元素的集合,你可以将这些DOM元素插入到文档中)

jQuery.parseJSON(jsonString )(将格式完好的JSON字符串转为与之对应的JavaScript对象。所谓"格式完好",就是要求指定的字符串必须符合严格的JSON格式,例如:属性名称必须加双引号、字符串值也必须用双引号。如果传入一个格式不"完好"的JSON字符串将抛出一个JS异常)

jQuery.parseXML(XMLString)(将字符串解析为对应的XML文档。该函数将使用浏览器内置的解析函数来创建一个有效的XML文档,该文档可以传入jQuery()函数来创建一个典型的jQuery对象,从而对其进行遍历或其他操作)

jQuery.trim(str)(去除字符串两端的空白字符。该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止)。它会清除包括换行符、空格、制表符等常见的空白字符)

jQuery.type(object)(确定JavaScript内置对象的类型,并返回小写形式的类型名称。JavaScript也自带有一个typeof运算符,可以确定数据的类型。不过,对于绝大多数对象而言,typeof运算符都返回"object",无法区分具体的类型。jQuery.type()可以更加精确地确定JS内置对象的类型。例如:对于new Number(5),typeof返回"object",jQuery.type()返回"number";对于new Date(),typeof返回"object",jQuery.type()返回"date"。type的返回的结果有"Boolean Number String Function Array Date RegExp Object Error"的小写)

jQuery.unique(array)(根据元素在文档中出现的先后顺序对DOM元素数组进行排序,并移除重复的元素。

注意:该函数仅作用于DOM元素数组,而不是数字、字符串或其他类型。此外,这里的重复指的是两个元素实际上是同一个元素(通过全等"==="来判断),而不是指两个属性相同的元素。

警告:通过实际测试发现,该函数并不能按照预期返回正确的结果。在不同的浏览器中、在不同版本的jQuery中,其返回结果可能不一致(请参考下面的演示代码))

jQuery.fn.promise([type,] obj)(获取已解决的延时对象的promise,并和obj对象合并。并给指定类型的队列清空的时候(默认的类型是FX)添加解决处理)

a.jQuery.trim源码详解

trim函数有两个分支,第一个分支是:如果浏览器支持trim函数,则使用浏览器本地的trim函数;否则走第二个分支使用正则去除前后两边的空白。

//如果可以则使用浏览器支持的trim函数
// core_version.trim
jQuery.trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
function( text ) {
  return text == null ?
  "" :
  core_trim.call( text );
} :
//否则使用正则去除前后两端的空白符
//rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
function( text ) {
  return text == null ?
  "" :
  ( text + "" ).replace( rtrim, "" );
},

b. 队列(queue)详解

jQuery.fn.queue( type, data )
处理步骤如下:

默认队列是fx类型的标准动画效果队列。如果队列类型不是字符串,则需要按默认类型调整数据。
if ( typeof type !== "string" ) {
  data = type;
  type = "fx";
  setter--;
}

根据参数判断是获取还是设置指定类型的队列。

如果是获取直接获取当前jQuery匹配的元素的第一个元素对应类型的队列;

//获取指定类型的队列
if ( arguments.length < setter ) {
  return jQuery.queue( this[0], type );
}

如果是设置,则遍历当前jQuery匹配的元素,给每个元素都设置指定类型的队列,并给每一个元素设置相应的hooks(用来做拓展处理,比如最后清除队列使用)

return data === undefined ?
this :
//每一个jQuery的元素都添加队列
this.each(function() {
  var queue = jQuery.queue( this, type, data );
  //确保队列有一个hooks。执行完这段代码以后保存了一个清空队列的函数empty
  jQuery._queueHooks( this, type );
  //如果为"fx"(表示jQuery中的标准动画效果队列),并且队列中第一个函数没有正在执行
  //则执行队列中第一个函数。可见动画队列添加后会立马执行动画
  if ( type === "fx" && queue[0] !== "inprogress" ) {
    jQuery.dequeue( this, type );
  }
})

函数中使用了低级api jQuery.queue函数,是获取/设置队列的基础接口,源码如下

queue: function( elem, type, data ) {
  var queue;
  if ( elem ) {
    //先获取相应类型的队列
    type = ( type || "fx" ) + "queue";
    queue = jQuery._data( elem, type );
    //在队列末尾添加函数
    if ( data ) {
      if ( !queue || jQuery.isArray(data) ) {
        queue = jQuery._data( elem, type, jQuery.makeArray(data) );
      } else {
        queue.push( data );
      }
    }
    return queue || [];
  }
}

c.jQuery.fn.dequeue

移除每个匹配元素的指定队列中的第一个函数,并执行被移除的函数。内部调用jQuery.dequeue来实现。jQuery.dequeue的源码如下

jQuery.dequeue中需要特别注意的是对FX动画队列的处理

dequeue: function( elem, type ) {
  type = type || "fx";
  var queue = jQuery.queue( elem, type ),
    startLength = queue.length,
    fn = queue.shift(),//取出队列中第一个函数
    hooks = jQuery._queueHooks( elem, type ),
    next = function() {
      jQuery.dequeue( elem, type );
    };
  //如果FX队列中出列,总是取出进度点
  if ( fn === "inprogress" ) {
    fn = queue.shift();
    startLength--;
  }
  hooks.cur = fn;
  if ( fn ) {
    // 添加进度定点,以防止FX队列自动dequeue
    if ( type === "fx" ) {
      queue.unshift( "inprogress" );
    }
    // 清理最后一个队列停止函数
    delete hooks.stop;
    //next和hooks会传递给回调
    fn.call( elem, next, hooks );
  }
  //队列长度为0且hooks存在,则删除队列
  if ( !startLength && hooks ) {
    hooks.empty.fire();
  }
}

注意执行队列中函数传递的参数( elem, next, hooks )。

以上所述就是小编给大家分享的jQuery 1.9.1源码分析系列(十四)之常用jQuery工具,希望大家喜欢。

Javascript 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
jQuery实现全选按钮
Jan 01 jQuery
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 #Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 #Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 #Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 #Javascript
jquery实现简单文字提示效果
Dec 02 #Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 #Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 #Javascript
You might like
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
怎样辨别一杯好咖啡
2021/03/03 新手入门
PHP中的日期处理方法集锦
2007/01/02 PHP
php建立Ftp连接的方法
2015/03/07 PHP
自制PHP框架之设计模式
2017/05/07 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
Linux文件系统类型
2012/09/16 面试题
2014年学生会个人工作总结
2014/11/07 职场文书
Nginx 匹配方式
2022/05/15 Servers
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS