jQuery 플러그인은 매우 간단합니다. jQuery 플러그인_jquery의 메커니즘과 실행

jQuery 플러그인의 종류
1. 캡슐화된 객체 메소드

이 플러그인은 객체 메소드를 캡슐화하며 선택기를 통해 얻은 jQuery 객체를 조작하는 데 사용됩니다. 이러한 유형의 플러그인은 jQuery 선택기의 강력한 이점을 활용할 수 있습니다. parent() 메소드 및 AppendTo(와 같은 jQuery 스크립트 라이브러리 내에서 이 형식으로 커널에 "삽입"됩니다. ) 방법입니다.

2. 전역 함수 캡슐화

jQuery 네임스페이스에 독립적인 함수를 추가할 수 있습니다. 예를 들어 일반적으로 사용되는 jQuery.ajax() 메서드와 앞뒤 공백을 제거하는 jQuery.trim() 메서드는 모두 jQuery 내의 전역 함수로 커널에 첨부된 플러그인입니다.

3. 선택기 플러그인

jQuery의 선택기는 매우 강력하지만 일부 경우에는 선호하는 선택기를 확장하기 위해 선택기 플러그인을 사용해야 합니다.

jQuery 플러그인의 메커니즘
jQuery 플러그인의 메커니즘은 매우 간단합니다. jQuery에서 제공하는 jQuery.fn.extend() 및 jQuery.extend() 메소드를 사용하면 됩니다. jQuery의 기능을 확장합니다.

jQuery.fn.extend()는 위에서 언급한 세 가지 유형 중 첫 번째 유형을 확장하는 데 주로 사용되며, jQuery.extend()는 후자 두 플러그인을 확장하는 데 사용됩니다. 두 메소드 모두 Object 유형의 하나의 매개변수를 허용합니다. Object 개체의 "이름/값 쌍"은 각각 "함수 또는 메서드 이름/함수 본문"을 나타냅니다.

jQuery 플러그인 작성 팁
1. 다른 JS 라이브러리 플러그와 혼동을 피하기 위해 jQuery 플러그인의 파일 이름은 jquery.[플러그인 이름].js로 지정하는 것이 좋습니다. -인.

2. 모든 객체 메소드는 jQuery.fn 객체에 연결되어야 하며, 모든 전역 함수는 jQuery 객체 자체에 연결되어야 합니다.

3. 다른 사람의 불규칙한 코드가 플러그인에 영향을 미치는 것을 방지하기 위해 플러그인 헤드에 세미콜론을 추가합니다.

4. 모든 메소드 또는 함수 플러그인은 압축 중 문제를 방지하기 위해 세미콜론으로 끝나야 합니다.

5. 플러그인이 얻어야 하는 일부 변수를 반환해야 하는 경우를 제외하고, 플러그인은 플러그인의 연결 가능한 작동을 보장하기 위해 jQuery 객체를 반환해야 합니다.

6. jQuery.extend() 메소드에서는 플러그인 메소드의 기본 매개변수를 설정하고 플러그인의 활용도를 높이는 데 도움이 됩니다.

jQuery 플러그인 구조
jQuery 플러그인 구조는

코드 복사 코드는 다음과 같습니다.

;(function($){
/*여기에 플러그인 코드를 넣으면 $를 jQuery의 별칭으로 사용할 수 있습니다*/
} )(jQuery);

캡슐화 jQuery 객체 메소드 플러그인 실용
기능: 선택한 요소의 색상을 설정하고, 처음 선택한 요소의 색상을 가져옵니다.

명명 : jquery.color.js

구조:

코드 복사 코드는 다음과 같습니다.

;(function($){
$.fn.extend( {
//여기에 플러그인 코드를 작성하세요
});
})(jQuery); 🎜>

아이디어: 매개변수 값을 설정합니다. 호출 시 매개변수 값을 전달하면 색상을 설정하고, 그렇지 않으면 색상을 가져옵니다. 색상을 가져오고 설정하려면 jQuery

에서 제공하는 CSS 메서드를 사용할 수 있습니다. 전체 코드:

코드 복사 코드는 다음과 같습니다.

;(function($){
$.fn.extend({
"color":function(value){
if( 값==정의되지 않음){
return this.css("color");
}
else{
return this.css("color",value)
}
}
}) ;
})(jQuery);

색상을 가져올 때 CSS() 메서드가 이미 첫 번째 요소를 결정했으므로 여기서는 직접 this.css를 사용합니다. ("색상") 그게 다입니다.

플러그인 그룹인 경우 다음과 같이 작성하시면 됩니다.

코드 복사 코드는 다음과 같습니다:

;(function($){
$.fn.extend({
"color":function(value){
//Plug -코드
},
" 테두리":함수(값){
//플러그인 코드
},
"배경":함수(값){
/ /플러그인 코드
}
});
})(jQuery)

플러그인 테스트:
http://demo.jb51.net /js/2012/jquery_demo/encapslating jQuery 객체 메소드 플러그인 Demo.html 전역 함수 플러그인 캡슐화 연습
기능: 왼쪽 또는 오른쪽 공백을 개별적으로 제거

이름 : jquery.lrtrim.js

구조:

코드 복사 코드는 다음과 같습니다.

;(function($){
$.extend({
ltrim:function(text){
//플러그인 코드
},
rtrim: function( text){
//플러그인 코드
}
})
})(jQuery)

아이디어: 이 유형의 플러그인 jQuery 네임스페이스 내부에 추가됩니다. 함수의 경우 정규식을 사용하면 됩니다.

전체 코드:

코드 복사 코드는 다음과 같습니다.

;(함수 ($){
$.extend({
ltrim:function(text){
return (text||"").replace(/^s /g,"");
} ,
rtrim:function(text){
return (text||"").replace(/s $/g,"")
}
}); >}) (jQuery);

플러그인 테스트:
http://demo.jb51.net/js/2012/jquery_demo/encapslating 전역 함수 jQuery 플러그인 Demo.html 자체 정의 선택기 플러그인 작동
jQuery는 강력한 선택기로 알려져 있는데, jQuery의 선택기는 어떻게 작동하나요?

jQuery의 선택 파서는 먼저 정규식 세트를 사용하여 선택기를 구문 분석한 다음 구문 분석된 각 선택기에 대해 선택 함수라는 함수를 실행합니다. 마지막으로 선택 함수의 반환 값이 참인지 거짓인지에 따라 요소를 유지할지 여부를 결정하여 일치하는 요소 노드를 찾을 수 있습니다.

예를 들어 $("div:gl(1)"), 이 선택기는 먼저 모든

요소를 얻은 다음 암시적으로 이러한

요소를 순회하고 다음 < ;div> ; 요소는 매개변수로 사용되며 괄호 안의 "1"과 같은 일부 매개변수는 판단을 위해 gt의 해당 선택기 함수에 전달됩니다. true가 반환되면 유지되고, 그렇지 않으면 유지되지 않습니다. 결과는 요구 사항을 충족하는

요소의 컬렉션입니다.

선택기 기능은 총 3개의 매개변수를 허용하며 형식은 다음과 같습니다.

코드 복사 코드

함수(a,i,m){
//...
}

　첫 번째 매개변수는 a입니다. DOM 요소에 대한 현재 순회를 나타냅니다.

두 번째 매개변수는 i로 현재 순회하는 DOM 요소의 인덱스 값을 의미하며 0부터 시작합니다.

세 번째 매개변수는 m이며, 이는 jQuery 일반 구문 분석 엔진의 추가 구문 분석 결과입니다. 이는 배열입니다. 가장 중요한 매개변수는 $("div:gl(1)에 있는 m[3]입니다. )")는 괄호 안의 숫자 "1"입니다.

jQuery에는 이미 lt, gt 및 eq 선택기가 있으므로 여기에 둘 사이의 선택기가 있습니다.

기능: a와 b 사이의 인덱스 값을 가진 요소 선택(a
이름 지정: jquery.between.js

구조:

코드 복사 코드는 다음과 같습니다.

;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//플러그인 코드
}
});
}) (jQuery);

아이디어: 위의 세 매개변수 중 m[3]은 "a, b" 형태이므로 m[3]을 ", " 그런 다음 인덱스 값 i를 비교하고 i가 m[3]으로 표시된 범위 사이에 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

전체 코드:

코드 복사 코드는 다음과 같습니다.

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

참고: 여기서는 temp[0] 및 temp[1]을 사용하여 문자열을 숫자로 변환합니다. 🎜>
플러그인 테스트:
http://demo.jb51.net/js/2012/jquery_demo/jQuery 사용자 정의 선택기 플러그인 DEMO.html
요약 이 글 주로 jQuery 플러그인 유형과 메커니즘, 각 유형별 실제 전투를 소개합니다. 모든 분들께 도움이 되기를 바랍니다. 나는 또한 jQuery의 초보자이므로 누구든지 사용해 볼 수 있습니다.

참고도서 : "Sharp jQuery"(국민포스트통신출판사)