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

论坛 期权论坛 脚本     
niminba   2021-5-23 05:26   1747   0

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

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属性,并仮

  函数中使用了低级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工具,希望大家喜欢。

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:1060120
帖子:212021
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP