<!DOCTYPE html><html lang="ko"><head><meta charset="utf-8"/><script src="js/jquery.js"></script></head><body><div>나를클릭해봐</div><div>나를클릭해봐</div><div>나를클릭해봐</div><div>나를클릭해봐</div><script>// $.fn.extend() 는 $.fn 객체를 확장(extend) 하는데 사용된다.(플러그인 작성)// fn객체는 자바스크립트의 prototype객체를 의미한다.// JQuery 소스 코드를 열어보면 위와 같이 jQuery.fn 객체(Object)가 생성 되어 있다.// 아래 예제처럼 'myMethod()' 함수를 추가(확장)하여 메서드로 사용이 가능하다./* $.fn.extend({myMethod : function(){//alert("내가만든 메서드")$(this).css("background", "orange")}})또는 아래 형식처럼...*/$.fn.myMethod = function() {//alert("내가만든 메서드")$(this).css("background", "pink").text("내가 만든 메서드 실행");return this; //메서드체인을 위해 this를 반환};$("div").click(function(e) {$(this).myMethod(); // $(selecter).myMethod();});//---------------------------------------------------------------------------------------// fn객체 없이 메서드 작성법$.extend({myMethod2: function() {alert("hello")}});$.myMethod2(); // $.myMethod2(); // selecter없이 메서드 실행</script></body></html>
<!DOCTYPE HTML><html lang="ko"><head><meta charset="UTF-8"></head><body><script src="lib/jQuery/2.2.3/jquery.min.js"></script><script type="text/javascript">(function($) {$.fn.test = function(callback) {$(this).each(function() {console.log(typeof callback); // function// callback(10, 20) // 이렇게 쓰면 this는 윈도우가 되므로callback.call(this, 10, 20); // this 바인딩});};})(jQuery);// 콜백형식의 플러그인 호출$("body").test(function(a, b){// a, b를 매개변수로 넘겨받기console.log(this);console.log(a);console.log(b);});</script></body></html>
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] $.merge() 두개의 배열 합치기 (0) | 2015.02.11 |
|---|---|
| [jQuery] 박스모델 margin, padding, border 포함 사이즈 얻어오기 (0) | 2015.02.11 |
| [jQuery] $.grep - 확장집합 특정 요소 제거(필터) (0) | 2015.02.10 |
| [jQuery] :contains - 특정 텍스트를 포함한 요소찾기, index찾기 (0) | 2015.02.09 |
| [jQuery] $.fn.reverse - 확장집합 역순으로 정렬 (0) | 2015.02.05 |
