jQuery 공통 도구 방법

앞의 말

　jQuery는 요소와 관련이 없는 몇 가지 도구 메서드를 제공하며, 요소를 선택하지 않고도 이러한 메서드를 직접 사용할 수 있습니다. 네이티브 JavaScript의 상속 원리를 이해하면 도구 메서드의 본질을 이해할 수 있습니다. jQuery 생성자, 즉 jQuery.method()에 정의된 메소드이므로 직접 사용할 수 있다. 이러한 요소 조작 메소드는 생성자의 프로토타입 객체, 즉 jQuery.prototype.method()에 정의된 메소드이므로 사용하기 전에 인스턴스를 생성(즉, 요소 ​​선택)해야 합니다. 도구 메서드를 JavaScript 기본 함수처럼 직접 사용할 수 있는 메서드라고 생각하세요. 다음은 jQuery

Element 관련

【each()】

　 객체와 배열을 원활하게 반복하는데 사용할 수 있는 일반적인 반복 함수입니다. 배열 및 배열 유사 객체는 0에서 길이 - 1까지의 숫자 인덱스를 사용하여 길이 속성(예: 함수의 인수 객체)을 반복합니다. 다른 객체는 속성 이름을 통해 반복됩니다

jQuery.each( collection, callback(indexInArray, valueOfElement) )

　jQuery.each() 함수는 특별히 jQuery 객체를 반복하는 데 사용되는 jQuery(selector).each()와 다릅니다. jQuery.each() 함수는 "이름/값" 개체(JavaScript 개체)이든 배열이든 상관없이 모든 컬렉션을 반복하는 데 사용할 수 있습니다. 배열을 반복하는 경우 콜백 함수에는 매번 하나의 배열 인덱스와 해당 배열 값이 인수로 전달됩니다. (이 키워드에 액세스하여 값을 얻을 수도 있지만 JavaScript는 this 값이 단순한 문자열이나 숫자 값이더라도 항상 객체로 처리합니다.) 메서드는 첫 번째 인수를 반환합니다.

$.each( ['a','b','c'], function(index,value){//Index #0: a//Index #1: b//Index #2: cconsole.log( "Index #" + index + ": " + value );
});

$.each( { name: "John", lang: "JS" }, function(index,value){//Index #name: John//Index #lang: JSconsole.log( "Index #" + index + ": " + value );
});

【contains()】

DOM 요소가 다른 DOM 요소의 자손인지 확인

jQuery.contains( container, contained )

$.contains( document.documentElement, document.body ); // true

【extend()】

첫 번째 개체에 병합

jQuery.extend( target [, object1 ] [, objectN ] )

target: Object 一个对象，如果附加的对象被传递给这个方法将那么它将接收新的属性，如果它是唯一的参数将扩展jQuery的命名空间。
object1: Object 一个对象，它包含额外的属性合并到第一个参数
objectN: Object 包含额外的属性合并到第一个参数

$.extend({}, object1, object2);

jQuery.extend( [deep ], target, object1 [, objectN ] )

deep: Boolean 如果是true，合并成为递归（又叫做深拷贝）。
target: Object 对象扩展。这将接收新的属性。
object1: Object 一个对象，它包含额外的属性合并到第一个参数.
objectN: Object 包含额外的属性合并到第一个参数

$.extend(true, object1, object2);

Data 관련

【data()】

지정된 요소에 임의의 데이터를 저장하거나 설정된 값을 반환

jQuery.data( element )

type() ) 메소드를 사용합니다. 자바스크립트 객체의 유형을 감지합니다

　객체가 정의되지 않았거나 null인 경우 해당 "정의되지 않음" 또는 "null"을 반환합니다

element:Element 要关联数据的DOM对象
key: String 存储的数据名
value:Object 新数据值

　객체에 내부 [[클래스]]가 있고 브라우저에 내장된 객체의 [[ Class]]는 동일하며 해당 [[Class]] 이름을 반환합니다

$.data(document.body, 'foo', 52);
$.data(document.body, 'bar', 'test');
console.log($.data( document.body, 'foo' ));//52console.log($.data( document.body ));//{foo: 52, bar: "test"}

　그래서 이 메서드는 네이티브 javascript

jQuery.removeData( element [, name ] )

의 캡슐화된 Object.prototype.toString() 메서드와 유사합니다. ()】

기본 JavaScript에서 배열 감지는 웹 페이지에 여러 프레임이 포함된 경우 더 이상 배열 감지가 쉽지 않습니다.

　jQuery는 배열을 감지하기 위해 isArray() 메서드를 제공합니다

var div = $("div");
$.data(div, "test1", "VALUE-1");
$.data(div, "test2", "VALUE-2");
console.log($.data(div));//{test1: "VALUE-1", test2: "VALUE-2"}$.removeData(div, "test1");
console.log($.data(div));//{test2: "VALUE-2"}

【isFunction ( )】

　isFunction() 메소드는 들어오는 매개변수가 함수인지 감지하는 데 사용됩니다

jQuery.type( undefined ) === "undefined"jQuery.type() === "undefined"jQuery.type( window.notDefined ) === "undefined"jQuery.type( null ) === "null"

　네이티브 자바스크립트를 사용하는 경우 typeof를 사용하여

jQuery.type( true ) === "boolean"jQuery.type( 3 ) === "number"jQuery.type( "test" ) === "string"jQuery.type( function(){} ) === "function"jQuery.type( [] ) === "array"jQuery.type( new Date() ) === "date"jQuery.type( new Error() ) === "error" jQuery.type( /test/ ) === "regexp"

【isNumeric()】

　isNumeric( ) 메소드 들어오는 매개변수가 숫자인지 감지하는 데 사용됩니다

　　[참고] 매개변수는 순수 숫자 또는 숫자 문자열일 수 있습니다

function type(obj){return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
}

　 네이티브 자바스크립트를 사용하는 경우 typeof를 사용할 수 있지만 결과는 약간 다릅니다

console.log($.isArray([]));//true

【isEmptyObject()】

　isEmptyObject() 메소드는 객체가 빈 객체인지 감지하는 데 사용됩니다.

console.log($.isFunction(function(){}));//true

【isPlainObject()】

　isPlainObject() 메소드는 객체가 네이티브인지 감지하는 데 사용됩니다. 즉, " {}" 또는 "새 개체"에 의해 개체 생성

console.log(typeof function(){});//"function"

Array 관련

【inArray()】

　　inArray(value, array [, fromIndex]) 메서드는 다음과 유사합니다. 기본 자바스크립트의 indexOf() 메소드는 일치하는 요소가 없으면 -1을 반환합니다. 배열의 첫 번째 요소가 매개변수와 일치하면 $.inArray()는 0

　을 반환합니다. fromIndex 매개변수는 검색을 시작할 위치를 나타내는 배열 인덱스 값입니다. 기본값은 0

$.isNumeric("-10");  // true$.isNumeric(-10);  // true

【makeArray()】

　makeArray() 메소드는 배열류 객체를 실제 자바스크립트 배열로 변환하는 데 사용됩니다

console.log(typeof 10);//"number"console.log(typeof '10');//"string"

　네이티브 자바스크립트를 사용하는 경우 다음을 사용할 수 있습니다. Slice() 메소드 배열과 유사한 객체가 실제 배열이 됩니다

jQuery.isEmptyObject({}) // truejQuery.isEmptyObject({ foo: "bar" }) // false

【unique()】

　　unique()方法用于数组去重

var $arr = [document.body,document.body];
console.log($.unique($arr));//[body]var $arr = [1,2,1];
console.log($.unique($arr));//[2,1]

　　使用原生javascript实现如下

Array.prototype.norepeat = function(){var result = [];for(var i = 0; i < this.length; i++){if(result.indexOf(this[i]) == -1){
            result.push(this[i]);
        }
    }return result;
}

var arr = [1,2,1];
console.log(arr.norepeat());//[1,2]var arr = [document.body,document.body];
console.log(arr.norepeat());//[body]

【grep()】

　　查找满足过滤函数的数组元素。原始数组不受影响

jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )
array: Array 用于查询元素的数组。function: Function() 该函数来处理每项元素的比对。第一个参数是正在被检查的数组的元素，第二个参数是该元素的索引值。该函数应返回一个布尔值。this将是全局的window对象。
invert: Boolean 如果“invert”为false，或没有提供，函数返回一个“callback”中返回true的所有元素组成的数组，。如果“invert”为true，函数返回一个“callback”中返回false的所有元素组成的数组。

　　$.grep()方法会删除数组必要的元素，以使所有剩余元素通过过滤函数的检查。该测试是一个函数传递一个数组元素和该数组内这个的索引值。只有当测试返回true，该数组元素将返回到结果数组中。

　　该过滤器的函数将被传递两个参数：当前正在被检查的数组中的元素，及该元素的索引值。该过滤器函数必须返回'true'以包含在结果数组项

var result = $.grep( [0,1,2], function(n,i){   return n > 0;
 });
console.log(result);//[1, 2]

var result = $.grep( [0,1,2], function(n,i){   return n > 0;
 },true);
console.log(result);//[0]

【merge()】

　　合并两个数组内容到第一个数组

jQuery.merge( first, second )

console.log($.merge( [0,1,2], [2,3,4] ));//[0, 1, 2, 2, 3, 4]

 

其他

【proxy()】

　　proxy()方法接受一个函数，然后返回一个新函数，并且这个新函数使用指定的this

　　proxy()方法类似于bind()，但并不相同。区别在于，bind()方法是改变原函数的this指向，而proxy()方法是新建一个函数，并使用参数中的this指向，原函数的this指向并无变化

var a = 0;function foo(){
    console.log(this.a);
}var obj = {
    a:2};
foo();//0$.proxy(foo,obj)();//2foo();//0

　　proxy()方法支持多种参数传递方式

function foo(a,b){
    console.log(a+b);   
}

$.proxy(foo,document)(1,2);//3$.proxy(foo,document,1,2)();//3$.proxy(foo,document,1)(2);//3

　　在绑定事件时一定要合理使用proxy()方法的参数传递方式，否则事件还没有发生，可能函数已经被调用了

$(document).click($.proxy(foo,window,1,2))

【trim()】

　　jQuery.trim()函数用于去除字符串两端的空白字符

　　这个函数很简单，没有多余的参数用法

console.log($.trim("    hello, how are you?    "));//'hello, how are you?'

 【noop()】

　　一个空函数

jQuery.noop() 此方法不接受任何参数

　　当你仅仅想要传递一个空函数的时候，就用他吧

　　这对一些插件作者很有用，当插件提供了一个可选的回调函数接口，那么如果调用的时候没有传递这个回调函数，就用jQuery.noop来代替执行

【now()】

　　返回一个数字，表示当前时间

jQuery.now() 这个方法不接受任何参数

　　$.now()方法是表达式(new Date).getTime()返回数值的一个简写

【parseHTML()】

　　将字符串解析到一个DOM节点的数组中

jQuery.parseHTML( data [, context ] [, keepScripts ] )
data : String 用来解析的HTML字符串
context (默认: document): Element DOM元素的上下文，在这个上下文中将创建的HTML片段。
keepScripts (默认: false): Boolean 一个布尔值，表明是否在传递的HTML字符串中包含脚本。

　　jQuery.parseHTML 使用原生的DOM元素的创建函数将字符串转换为一组DOM元素，然后，可以插入到文档中。

　　默认情况下，如果没有指定或给定null or undefined，context是当前的document。如果HTML被用在另一个document中，比如一个iframe，该frame的文件可以使用

var result = $.parseHTML( "hello, my name is jQuery");
$('div').append(result);

【parseJSON()】

　　接受一个标准格式的 JSON 字符串，并返回解析后的 JavaScript 对象

jQuery.parseJSON( json )

var obj = jQuery.parseJSON('{"name":"John"}');
console.log(obj.name === "John");//true

 

위 내용은 jQuery 공통 도구 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!