Jquery 플러그인_jquery 작성에 대한 간결한 튜토리얼

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

/*
1. jQuery 플러그인 파일 이름은 다른 JavaScript 라이브러리 플러그인과의 혼동을 피하기 위해 jquery .[플러그인 이름].js로 지정하는 것이 좋습니다. 예를 들어 이름을 jquery.color.js
로 지정합니다. 2. 모든 개체 메서드 이름은 jQuery.fn 개체에 연결되어야 하며 모든 전역 함수는 jQuery 개체 자체에 연결되어야 합니다.
3. 병아리() 메소드와 같은 일반적인 방법과 달리 플러그인 내부에서 this는 현재 선택기를 통해 얻은 jquery 객체를 가리킵니다.
4. 할 수 있습니다. 이 .each를 사용하여 모든 요소를 ​​탐색하세요
5. 모든 메서드나 함수 플러그인은 세미콜론으로 끝나야 합니다. 그렇지 않으면 압축 중에 문제가 발생할 수 있습니다. 보안을 강화하려면 플러그 헤드에 세미콜론을 추가할 수도 있습니다. -in.,
다른 사람의 비표준 코드가 쿼리에 영향을 미치지 않도록 합니다.
6. 플러그인이 연결될 수 있도록 플러그인은 jquery 객체를 반환해야 합니다. 플러그인이 문자열이나 배열과 같이 반환해야 하는 일부 양을 반환해야 하는 경우가 아니면
7. 플러그인 내부에서 jquery 객체에 대한 별칭으로 $를 사용하지 말고 완전한 jquery를 사용하여 표현하세요. 충돌을 피하기 위해서입니다. 물론
의 문제를 피하기 위해 폐쇄 기술을 사용할 수도 있으므로 플러그인은 $를 jquery의 별칭으로 계속 사용할 수 있습니다.
*/

//;호환성을 높이기 위해 앞에 세미콜론을 넣습니다
;(function($){//여기서 $는 익명 함수의 형식 매개변수로 사용됩니다.
//$.fn.extend 확장 플러그인
$.fn.extend({
"color":function(value){//color 자체 작성 플러그인 메소드 이름
/ /jQuery는 CSS를 제공합니다. 이 메서드는 this.css("property","value");
return this.css("color",value);
}
});

}) (jQuery);//여기서 jquery는 익명 함수


function red(){
Alert($("#div"에 실제 매개변수로 전달됩니다. ).color() "플러그인을 사용할 수 있음을 증명합니다.");
Alert($("#div").color("red") "플러그인이 Jquery 객체를 반환했음을 증명합니다.");
$("#div").color("red") ;
}

HTML에서 플러그인 사용 예:

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

 

dddddddddddddd