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

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

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工具,希望大家喜欢。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery1.9.1
jquery工具
jquery源码分析系列、jquery源码分析、jquery源码、jquery源码解析、jquery 源码解读,以便于您获取更多的相关知识。

时间: 2024-11-03 21:58:31

jQuery 1.9.1源码分析系列(十四)之常用jQuery工具_jquery的相关文章

jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween_jquery

在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. 仔细查看createTweens函数,实际上就是遍历调用了tweeners ["*"]的数组中的函数(实际上就只有一个元素). function createTweens( animation, props ) { jQuery.each( props, function( prop, v

jQuery 1.9.1源码分析系列(十五)之动画处理_jquery

首先需要有队列(queue)的基本知识.见上一章. 相关教程:jQuery下的动画处理总结: http://www.jb51.net/article/42000.htm jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween  :http://www.jb51.net/article/75821.htm a.动画入口jQuery.fn.animate函数执行流程详解 ------------------------------------------------------

jQuery 1.9.1源码分析系列(十三)之位置大小操作_jquery

先给大家展示谢 jQuery.fn.css (propertyName [, value ]| object )(函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值.如果需要删除指定的css属性,请使用该函数将其值设为空字符串("") 注意:1.如果省略了value参数,则表示获取属性值:如果指定了该参数,则表示设置属性值.2.css()函数的所有"设置"操作针对的是当前jQuery对象所匹配的每一个元素:所有"读取"操作只针对

Jquery 1.9.1源码分析系列(十二)之筛选操作_jquery

废话不多说了直接奔入主题了. jQuery.fn.find( selector ) find接受一个参数表达式selector:选择器(字符串).DOM元素(Element).jQuery对象.分两种情况处理: 第一种,如果传入的参数是非字符串,则先通过jQuery选择器将selector查找出来,然后过滤出包含于当前jQuery对象所匹配的元素的节点. if ( typeof selector !== "string" ) { self = this; return this.pus

jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理_jquery

发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ) { e.stopPropagation(); } jQuery重载stopPropagation函数调用的本地事件对象的stopPropagation函数阻止冒泡.也就是说,阻止冒泡的是当前节点,而不是事件源. 说到触发事件,我们第一反应是使用$(...).click()这种方式触发click事

jQuery 2.0.3 源码分析之core(一)整体架构_jquery

拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 例如: 复制代码 代码如下: $().find().

Jquery1.9.1源码分析系列(十五)动画处理之外篇_jquery

a.动画兼容Tween.propHooks Tween.propHooks提供特殊情况下设置.获取css特征值的方法,结构如下 Tween.propHooks = { _default: { get: function(){...}, set: function(){...} }, scrollTop: { set: function(){...} } scrollLeft: { set: function(){...} } } Tween.propHooks.scrollTop 和Tween.

Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready_jquery

还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){-}) } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } 所以$(fn)===$(document).ready(fn). 来看一下jQuery.fn.ready的源码 ready: function( fn ) { // Add t

jQuery-1.9.1源码分析系列(十)事件系统之事件包装_jquery

在上篇文章给大家介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请看下文吧. 首先需要明白,浏览器的原生事件是只读的,限制了jQuery对他的操作.举个简单的例子就能明白为什么jQuery非要构造一个新的事件对象. 在委托处理中,a节点委托b节点在a被click的时候执行fn函数.当事件冒泡到b节点,执行fn的时候上下文环境需要保证正确,是a节点执行了fn而非b节点.如何保证执行fn的上下文环境是a节点