Jquery 사용자 정의 플러그인을 작성하는 방법

jquery 플러그인을 작성하는 것은 재사용 목적을 달성하기 위해 일부 기존 기능을 캡슐화하는 것입니다.

JQuery 플러그인에는 세 가지 주요 유형이 있습니다.

1.
Write this type 플러그인은 JQuery에서 제공하는 jQuery.fn.extend() 메서드를 사용해야 합니다. 색상을 쿼리하는 사용자 정의 기능을 구현하는 단계는 다음과 같습니다
1.1 작성된 플러그인 파일의 이름을 jquery.color.js로 지정합니다.
1.2 플러그인 내용 작성

;(function($){
    jQuery.fn.extend({//这里也可以写成$.fn.extend
        "color":function(value){//value是颜色值
            return this.css("color",value);
        },        "border":function(value){
            //插入代码
        }
    });
})(jQuery);

2. 전역 기능을 캡슐화하는 플러그인
이 유형의 플러그인은 jQuery 네임스페이스 내에 기능을 추가합니다. 이러한 플러그인을 작성하려면 JQuery에서 제공하는 jQuery.extend() 메서드를 사용해야 합니다. 문자열 왼쪽의 공백을 제거하는 함수를 작성하세요.

;(function($){
    $.extend({
        ltrim:function(text){//需要去除空格的字符串
            return (text || "").replace(/^\s+/g, "");
        },
        rtrim:function(text){
            return (text || "").replace(/\s+$/g, "");
        }
    });
})(jQuery);

그런 다음 $.rtrim(" test ") 또는 jQuery.ltrim(" test ")를 사용하여 공백이 제거된 문자열을 반환할 수 있습니다. 이 함수는 jQuery의 Trim() 함수와 유사합니다.

3. 선택기 플러그인

("p:gt(1)")을 예로 들어 선택기 간 플러그인 작성 지침을 따르세요
jQuery의 :gt() 선택기 소스 코드는

gt:function(a,i,m){
    return i > m[3]-0;
}

입니다. 여기서
a는 현재 탐색되는 DOM 요소를 가리킵니다.
i는 현재 탐색되는 DOM 요소의 인덱스 값을 나타냅니다.
m은 특수 배열입니다.
m[0] = :gt(1) 구문 분석할 표현식
m[1] = :
m[2] = gt
m[3] = 1

이를 참조하면 이 선택기를 작성하는 코드는 다음과 같습니다.

;(function($){
    $.extend(jQuery.expr[":"], {
        between : function(a, i, m){
            var tmp = m[3].split(",");//m[3]值为[2,5];
            return tmp[0]-0 < i && i < tmp[1]-0;
        }
    });
})(jQuery);

jquery 플러그인을 작성하는 것은 재사용 목적을 달성하기 위해 일부 기존 기능을 캡슐화하는 것입니다

위 내용은 Jquery 사용자 정의 플러그인을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!