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 相关文章推荐
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
RequireJS用法简单示例
Aug 20 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
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
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python安装OpenCV的示例代码
2020/03/05 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
财务经理岗位职责
2013/11/09 职场文书
个人承诺书
2014/03/26 职场文书
兴趣小组活动总结
2014/05/05 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
政治学求职信
2014/06/03 职场文书
预防煤气中毒方案
2014/06/16 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
作风建设剖析材料
2014/10/06 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers