jquery 봉인 플러그인

오늘은 jquery가 플러그인을 봉인하는 방법을 알려드릴게요. 이걸 보면 jquery의 많은 기능의 유래를 알게 될 거예요. 앞으로도 jquery에 대해 그렇게 낯설지 않아도 돼요. 친근감이 생길 거예요. 히히.그러나 우리는 지금도 남이 만들어 놓은 플러그인을 사용하고 있으니 나중에 시간이 있으면 반드시 원본 코드를 한 번 통독해야 한다.자, 본론으로 돌아가서 오늘은 주로 jQuery.extend() jQuery.fn.extend() 두 가지 방법의 용법을 강의하겠습니다.
1. 먼저 jQuery 봉인된 플러그인에 대해 말씀드리겠습니다. 1.대상을 봉인하는 방법의 플러그인 예: $(element).text()2.전역 함수를 봉인하는 플러그인 예: $.trim()3.선택기 플러그인 예: color(red) 모든 빨간색 글자의 요소를 선택합니다.캡슐화된 플러그 인의 요점: 1.jquery 플러그인의 이름은 jquery입니다.[플러그인 이름].js; 2. 모든 대상 방법은 위의 (1)를 jQuery에 추가합니다.fn 대상에 모든 전역 함수를 jQuery 대상 자체에 추가합니다.3. 플러그인 내부,this는 선택기가 가져온 jQuery 대상을 가리키며, 클릭 () 방법이 아니라dom 요소를 가리킨다.4. 모든 방법과 함수 플러그인은 분호로 끝내야 압축하기 편하고 앞에도 분호를 추가할 수 있다.물론 일반적으로 클로즈업으로 해결한다.5. 플러그인은 Jquey 대상을 되돌려야 한다. 한 번의 체인 조작은 체인 조작이다. 즉$(element).css().attr()6.플러그인 내부에서 $를 jQuery 대상의 별명으로 사용하지 말고, 충돌을 피하기 위해 완전한 jQuery를 사용하십시오.7. 이 두 가지 봉인 방법이 전달되는 것은 순수한 Object 형식, 즉'함수 또는 방법명/함수 주체'이어야 한다.비사양:

var cc = 2;
var jQuery = function(cc){
     $ = jQuery;
    alert(cc);
}
$(function(){
    jQuery();
});

사양:

(function($){
    alert(1);
})(jQuery);

2. jquery 플러그인의 메커니즘 이 메커니즘의 주요 장점은 새로운 옵션을 추가해도 이전에 정의된 방법에 영향을 주지 않는다는 것이다.또한 플러그인 방법의 일련의 매개 변수를 설정할 수 있다.

var setting = {id:1,name:"tom",age:"30"};
var options={id:2,name:"Bob"};
var newOptions = jQuery.extend(setting,options);

결과는 new Options={id:2,name:"Bob",age:"30"}입니다.따라서 우리는 앞으로 함수의 매개 변수를 호출할 때 이렇게 사용할 수 있다.

function foo(options){
    options=jQuery.extend({
        name:"",
        id:1,
        age:12//    
    },options);
}

3. jQuery 플러그인 작성 1.jquery 대상을 봉인하는 플러그인 봉인 템플릿

;(function($){

})(jQuery);

구현:

;(function($){
    $.fn.extend({
        "color":function(value){
        return this.css("color",value);
    }
    });
})(jQuery);

//  
$(element).color(red);

2. 전역 함수를 봉인하는 플러그인

;(function($){
    $.extend(){
        "ltrim1":function(text){
            return (text);
        },
        "ltrim2":function(text){
        return (text);
        },
    }
})(jQuery);

//  
$.ltrim1("abc");
$.ltrim2("abc");

3. 사용자 정의 선택기 원리: jquery 선택기 해석기는 먼저 정규 표현식을 사용하여 선택기를 해석한 다음에 해석된 모든 선택자에 대해 하나의 함수를 실행하여 선택기 함수가 된다. 마지막으로 이 선택기 함수의 반환값이true인지false인지에 따라 이 요소를 보존할지 결정한다.그냥 예를 들자.

;(function($){
    $.extend($.expr[":"],{
        between:function(a,i,m){
            var tmp = m[3].split(",");
            return tmp[0]-01]-0;
        }
    });
})(jQuery);

//  
$("div:between(2,5)").css("display","none");

다른$.fn.function 단일 방법을 추가하는 데 사용$.fn.extend 여러 방법을 추가하는 데 사용$.fn은 하나의 명명 공간(명명 공간의 주요 역할은 변수명의 혼동을 방지하는 것이다)이자 대상이다. 사실jQuery.fn =jQuery.fn.init.prototype이기 때문에 그 자체로 방법을 직접 추가할 수 있다. 이것은 js가 규정한 것이다.$.fn.extend는 단지 규범적으로 대상을 추가하는 방법을 봉인했을 뿐이다.(고민할 필요 없음)

$.fn.aaa = function() {}
$.fn.extend({
    aaa: function() {}
});

jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype

이것을 이해해야 한다: 참고:http://www.2cto.com/kf/201506/404398.html http://blog.csdn.net/clerk0324/article/details/22498633