jQuery 도구 기능-JS 튜토리얼-php.cn

jquery는 배열과 객체에 대한 작업을 용이하게 하고 단순화하는 도구 기능을 제공합니다. 오늘은 jQuery의 도구 기능을 리뷰해보겠습니다.

jQuery는 5가지 주요 도구 기능 유형을 제공합니다:

URL
StringOperation
Array and Object Operation
Test Operation
브라우저

예:

var obj ={name:zh,age:20};

alert(jQuery.param(obj))

//alert "name=zh&age=20";

2: 문자열 작업 :

jQuery.trim(str)

반환: 문자열

설명: 문자열에서 앞뒤 공백을 제거합니다.

예:

alert($.trim(" 123 ")))

//alert "123";

3: 배열 및 개체 작업:

(1) :

&.each(obj, 콜백)

설명:

객체와 배열을 반복하는 데 사용할 수 있는 일반적인 반복 방법입니다.

jQuery 객체를 반복하는 $().each() 메서드와 달리 이 메서드는 모든 객체를 반복하는 데 사용할 수 있습니다.

콜백 함수

에는 두 개의 매개변수가 있습니다. 첫 번째는 객체의 멤버 또는 배열의 인덱스이고 두 번째는 해당 변수 또는 콘텐츠입니다.

each 루프를 종료해야 하는 경우 콜백 함수가 false를 반환하도록 하면 다른 반환 값은 무시됩니다.

예:

var a =[0,1,2,3,4,5]

$.each(a,function(i,n){document.write(""+i+" 및 " +n +"
");});//결과:

/*0 및 0

1 및 1

2 및 2

3 및 3

4 및 4
5 및 5I*/

(2):

$.extend(obj,default,option)

Description:

이 함수는 옵션을 처리하는 플러그인을 개발할 때 가장 일반적으로 사용됩니다.

다음은 fancybox를 사용하는 방법입니다. 플러그인은 옵션을 얻습니다. 코드:

settings = $.extend({}, $.fn.fancybox.defaults, settings);

로그인 후 복사

위 코드의 대상은 기본 설정 기본값을 첫 번째 개체로 사용하고 사용자가 전달한 설정을 기본값에 병합합니다. 설정이 전달되지 않습니다. 속성은 기본값인 default를 사용합니다. 그런 다음 병합된 결과가 대상에 복사되고 함수 반환 값으로 반환됩니다.

전체 예를 살펴보세요.

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);

로그인 후 복사

/*result：

로그인 후 복사

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }*/

로그인 후 복사

// 대상 매개변수는 마지막 값이 변경되므로 빈 개체를 전달해야 합니다. 예:

var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(defaults, options);

로그인 후 복사

위 코드에서는 대상 매개변수로 기본값을 사용하지만

값은 동일합니다. 기본값이 변경되었습니다! 플러그인의 기본값이 수정되어야 합니다!

그러므로 사용하시기 바랍니다. 대상 매개변수의 사용법에 주의하세요.

(3): Filter

jQuery.grep( array, callback, [invert])

반환값: Array

설명:

필터 함수를 사용하여 배열 요소를 필터링하세요.

이 함수는 필터링할 배열과 필터 함수라는 두 개 이상의 매개변수를 전달합니다. 필터 함수는 요소를 유지하려면 true를 반환하고 요소를 제거하려면 false를 반환해야 합니다.

설명:

기본 반전은 false입니다. 즉, 필터 함수는 요소를 유지하기 위해 true를 반환합니다. 반전을 true로 설정하면 필터 함수는 요소를 삭제하기 위해 true를 반환합니다. 0보다 작은 인덱스로 배열을 필터링하는 방법 요소:

$.grep( [0,1,2], function(n,i){
return n > 0;
});

로그인 후 복사

//results: [1,2]

(4) Conversion

jQuery.map( array, callback )

Return 값:

Array

설명:

한 배열의 요소를 다른 배열로 변환합니다.

매개변수로 변환 함수가 각 배열 요소에 대해 호출되며, 변환 함수에는 변환되는 요소를 나타내는 매개변수가 전달됩니다.

변환 함수는 변환된 값, null(배열에서 항목 제거) 또는 원래 배열로 확장된 값을 포함하는 배열을 반환할 수 있습니다.

예:

var arr = [ "a", "b", "c", "d", "e" ]

$("p").text(arr.join(", ") );

arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); });

$("p").text(arr.join(", "));

arr = jQuery.map(arr, function (a) { return a + a; });

alert(arr.join(", "));

//alert A0A0, B1B1, C2C2, D3D3, E4E4

(5)

jQuery.makeArray( obj ) ,

jQuery.inArray( value, array )

jQuery.merge( 첫 번째, 두 번째 )

jQuery.unique (array)

하나씩 소개하진 않겠지만, 그리고 JavaScript의 Join(), Split() 메소드도 매우 중요합니다.

4: 테스트 작업: (1):

$.isFunction(fn)

Return: Boolean; 설명: 함수인지 테스트합니다.

예:

var fn =function( ){ };

alert($.isFunction(fn));

//alert true;

(2):

$.isArray(obj);

반환: Boolean;

설명: 배열인지 테스트:

예: 생략;

(3):

JavaScript에는 isNan() 및 isFinite()만 있습니다.

5: 브라우저 개체:

jQuery의 우수성은 일반적으로 브라우저 간 특성에 있습니다. 그러나 jQuery 개발자이거나 플러그인 개발자인 경우 사용자에게 크로스 브라우저 기능을 제공하려면 브라우저 차이를 직접 처리해야 합니다. 브라우저 기능을 얻기 위한 속성:

jQuery.supportjQuery.browserjQuery.browser.version jQuery.boxModel$.support:jQuery 1.3 New. 다양한 브라우저의 기능과 버그를 표시하는 데 사용되는 속성 집합입니다.

버전 1.3 이후의 새로운 기능
Deprecated
반복
Deprecated

jQuery는 일련의 속성을 제공하며, 자신만의 속성을 자유롭게 추가할 수도 있습니다. 이러한 속성 중 다수는 매우 낮은 수준이므로 시간이 지나도 계속 유효한지 여부를 말하기는 어렵지만 주로 플러그인 및 커널 개발자를 위한 것입니다.

지원되는 모든 속성 값은 브라우저 감지가 아닌 기능 감지를 통해 구현됩니다. 다음은 이러한 기능 감지의 작동 방식을 설명하는 몇 가지 훌륭한 리소스입니다.

http://peter.michaux.ca/articles/feature-Detection-state-of-the-art-browser-scripting

http:/ /yura.thinkweb2.com/cft/
http://www.jibbering.com/faq/faq_notes/not_browser_Detect.html
jQuery.support에는 주로 다음 테스트가 포함됩니다.

boxModel

: Equals 이 페이지와 브라우저가 W3C CSS 상자 모델을 사용하여 렌더링되면 true입니다. 일반적으로 이 값은 IE 6 및 IE 7의 특수 모드에서는 false입니다. 문서가 준비될 때까지 이 값은 null입니다.

cssFloat: cssFloat를 사용하여 CSS의 부동 소수점 값에 액세스하는 경우 true를 반환합니다. 현재 IE에서는 false가 반환되고, 대신 styleFloat가 사용됩니다.

hrefNormalized: 브라우저가 getAttribute("href")에서 그대로 결과를 반환하는 경우 true를 반환합니다. IE에서는 URL이 정규화되었기 때문에 false를 반환합니다.

htmlSerialize: innerHTML을 통해 링크 요소를 삽입할 때 브라우저가 이러한 링크를 직렬화하면 현재 IE는 false를 반환합니다.

leadingWhitespace: innerHTML을 사용할 때 브라우저가 선행 공백 문자를 유지하는 경우 true를 반환하지만 현재 IE 6-8에서는 false를 반환합니다.

noCloneEvent: 요소를 복제할 때 브라우저가

이벤트 처리

기능과 함께 요소를 복사하지 않으면 true를 반환합니다. 현재 IE에서는 false를 반환합니다. objectAll: 요소 개체에서

getElementsByTagName

("*")을 실행하면 모든 하위 요소가 반환되며 현재 IE 7에서는 false입니다. opacity: 브라우저가 투명도 스타일 속성을 제대로 해석할 수 있으면 true를 반환합니다. 현재 IE에서는 대신 알파 필터를 사용하기 때문에 false를 반환합니다.

scriptEval: AppendChild/createTextNode 메소드를 사용하여 스크립트 코드를 삽입할 때 브라우저가 스크립트를 실행하는지 여부. 현재 IE에서는 실행할 스크립트 코드를 삽입하기 위해 .text 메소드를 사용합니다.

style: getAttribute("style")이 요소의 인라인 스타일을 반환하는 경우 true입니다. 현재 IE에서는 cssText를 대신 사용하기 때문에 false입니다.

tbody: 브라우저가 테이블 요소에 tbody 요소가 포함되지 않도록 허용하면 true를 반환합니다. 현재 IE에서는 false가 반환되며 누락된 tbody가 자동으로 삽입됩니다.

이 블로그에 비슷한 기사가 있습니다. 다음을 참조하세요. 제 jQuery 시리즈의 목차 요약

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