jQuery 1.9.1 소스코드 분석 시리즈 (14) 일반적으로 사용되는 jQuery Tools_jquery

애니메이션 처리 분석의 다음 장을 준비하기 위해 먼저 몇 가지 도구를 살펴보겠습니다. 대기열 도구는 애니메이션 처리에 자주 사용됩니다.

jQuery.fn.queue(([ queueName ] [, newQueue ]) || ([ queueName ,] callback )) (현재 일치하는 요소에서 실행될 함수 대기열을 가져오거나 설정합니다. 현재 jQuery 객체가 일치하는 경우 다중 요소: 대기열을 가져올 때 일치하는 첫 번째 요소에서만 대기열을 가져옵니다. 대기열을 설정할 때(대체 대기열, 추가 기능) 대기열에서 첫 번째 요소를 제거하고 실행해야 하는 경우 일치하는 요소마다 별도로 설정합니다. .함수를 사용하려면 dequeue() 함수를 사용하여 지정된 대기열을 지울 수도 있습니다.

jQuery.fn.dequeue([ dequeueName ])(일치하는 각 요소의 지정된 대기열에서 첫 번째 함수를 제거하고 제거된 함수를 실행합니다. 또한 지정된 대기열을 지우려면 clearQueue() 함수를 사용할 수도 있습니다. 실행되지 않습니다))

jQuery.fn.clearQueue([ dequeueName ])(일치하는 각 요소의 지정된 대기열에서 실행되지 않은 모든 항목 지우기)

jQuery.error(msg) (지정된 문자열 정보가 포함된 예외를 발생시킵니다.)

jQuery.each(object, callback) (지정된 객체와 배열을 순회하고 객체의 각 속성(또는 배열의 각 멤버)을 컨텍스트로 사용하여 지정된 함수를 순회하고 실행합니다. 소위 컨텍스트 함수 내부의 this 포인터는 전역 jQuery 개체에 속합니다. 이는 jQuery 개체(인스턴스)의 각() 함수와 다르지만 jQuery의 각() 구현입니다. 객체(인스턴스)는 jQuery.each )

도 호출합니다.

jQuery.proxy()(함수의 컨텍스트를 변경합니다. 지정된 함수를 이 함수에 전달하면 새 함수가 반환됩니다. 실행 코드는 변경되지 않지만 함수 내부의 컨텍스트(this)는 변경되지 않았습니다. 지정된 값에 대해

　용법 1:

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

함수 function의 context 객체를 지정된 context로 변경합니다.

사용법 2:

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

name이라는 함수의 컨텍스트를 지정된 컨텍스트로 변경합니다. 함수 이름은 컨텍스트 개체의 속성이어야 합니다.

jQuery.map(object, callback) (지정된 함수를 사용하여 배열의 각 요소(또는 객체의 각 속성)를 처리하고, 처리 결과를 새로운 배열로 캡슐화하여 반환합니다. jQuery도 있습니다. 동일한 이름을 가진 라이브러리 인스턴스 메소드 jQuery.fn.map(), 현재 jQuery 객체와 일치하는 요소를 순회하는 데만 사용됨)

jQuery.fn.data([ key [, value ] ]) (현재 jQuery 객체와 일치하는 모든 요소의 데이터에 액세스)

jQuery.fn.removeData(keys)(현재 jQuery 객체와 일치하는 각 요소에 저장된 지정된 키가 있는 데이터 항목을 제거합니다.)

jQuery.support(사용자가 현재 사용하고 있는 브라우저의 기능이나 버그 정보를 반환합니다. 이 속성은 객체입니다. 이 객체의 속성은 불변이 아니며 jQuery는 지정된 속성이 향후 사용 가능함을 보장하지 않습니다. versions. 이러한 속성은 주로 플러그인 또는 커널 개발자가 사용합니다.

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)(지정된 매개변수가 빈 객체인지 여부를 결정합니다. 소위 "빈 객체"에는 열거 가능한(사용자 정의) 속성이 포함되어 있지 않습니다. 즉, 객체에는 속성이 없습니다. ...in)

jQuery.isPlainObject(object) (지정된 매개변수가 순수 객체인지 확인합니다. 소위 "순수 객체"란 객체가 "{}" 또는 "새 객체"를 통해 생성됨을 의미합니다)

jQuery.isFunction(object)(지정된 매개변수가 함수인지 확인)

jQuery.isNumeric(value)(지정된 매개변수가 숫자 값인지 확인)

jQuery.isWindow(object)(지정된 매개변수가 창인지 확인)

jQuery.isXMLDoc(node) (DOM 노드가 XML 문서에 있는지, 아니면 그 자체가 XML 문서인지 결정합니다. 이 함수는 주로 지정된 문서가 XML 문서인지 HTML(또는 XHTML)인지 확인하는 데 사용됩니다. ) 문서)

jQuery.makeArray(object)(배열 유사 객체를 실제 배열 객체로 변환합니다. 소위 "유사 배열 객체"는 일반 Object 객체이지만 배열 객체와 매우 유사합니다. 길이 속성이며 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工具，希望大家喜欢。