jQuery Plug-in_jquery로 만든 전역 함수 사용 예

이 기사의 예에서는 jQuery 플러그인 제작에서 전역 함수를 사용하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1. 새로운 전역 기능 추가

소위 전역 함수라고 불리는 것은 실제로는 jQuery 객체의 메서드이지만, 실용적인 관점에서 보면 jQuery 네임스페이스 내부에 위치한 함수입니다.

(1) 함수를 추가하려면 새 함수를 jQuery 개체의 속성으로 지정하면 됩니다.

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
}

전화:

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

$.five();

(2)다양한 기능 추가

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
} 
jQuery.six =function(){ 
 alert("直接继承方式不一样2"); 
}

전화:

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

$.five();$.six( );

위 방법은 네임스페이스 충돌의 위험에 직면하게 됩니다. 이 문제를 피하려면 다음과 같이 이 플러그인에 속하는 모든 전역 기능을 객체로 캡슐화하는 것이 가장 좋습니다.

//命名空间继承
jQuery.myPlugin ={ 
 one : function(obj){ 
  var object = obj; 
  var id = object.attr("id"); 
  alert(id); 
 }, 
 two : function(){ 
  alert(22); 
 } 
}

이것은 실제로 전역 함수에 대한 또 다른 네임스페이스인 jQuery.myPlugin을 생성합니다.

2. jQuery 객체 메소드 추가

jQuery에 내장된 대부분의 기능은 객체 메서드를 통해 제공됩니다.

jQuery.fn.myMethod= function(){ 
 alert(11); 
}

전화:

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

$.fn.myMethod();

참고: jQuery.fn은 jQuery.prototype의 별칭입니다.

예: 다음은 잘못 동작하는 메소드입니다

<ul> 
  <li>11111111111111111111111111</li> 
  <liclass="this">22222222222222222222</li> 
  <li>333333333333333</li> 
  <liclass="that">44444444444444444</li> 
  <liclass="this">55555555555555</li> 
  <li>6666666666666666</li> 
  <li>777777777777777777</li> 
  <liclass="that">777777777777777777</li> 
</ul> 
<inputtype="button" value="swap" id="swap" />

jQuery.fn.swapClass= function(class1,class2){ 
 if(this.hasClass(class1)){ 
  this.removeClass(class1).addClass(class2); 
 } 
 if(this.hasClass(class2)){ 
  this.removeClass(class2).addClass(class1); 
 } 
} 
 $("#swap").click(function(){ 
  $("li").swapClass("this","that"); 
  return false; 
})

모두 그 스타일을 사용합니다.

(1)은둔 반복

여러 요소 일치 여부에 관계없이 올바른 동작을 보장하기 위한 가장 간단한 방법은 항상 메서드 환경에서 .each() 메서드를 호출하여

은둔 반복을 수행하며, 은둔 반복을 수행하는 것은 플러그인과 내장 메서드 간의 일관성을 유지하는 데 중요합니다. 호출된 .each() 메서드 내에서 이

은 각 DOM 요소를 차례로 참조합니다. 위 코드는 다음과 같이 수정됩니다.

jQuery.fn.swapClass= function(class1,class2){ 
 this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

전화:

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

$("li").swapClass("this","that ")

(2) 메소드 연결

메서드 연결을 사용하려면 모든 플러그인 메소드에서 jQuery 객체를 반환해야 합니다. 반환된 jQuery 객체는 일반적으로 이것에 의해 참조되는 객체입니다.

jQuery.fn.swapClass= function(class1,class2){ 
 return this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

전화:

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

$("li").swapClass("this","that ").css("텍스트 장식","밑줄");

3. 새로운 약어 방식 추가

//添加新的简写方法 
jQuery.fn.slideFadeOut= function(speed,callback){ 
 return this.animate({ 
  height : "hide", 
  opacity : "hide" 
 },speed,callback) 
} 
jQuery.fn.slideFadeIn= function(speed,callback){ 
 return this.animate({ 
  height : "show", 
  opacity : "show" 
 },speed,callback) 
} 
jQuery.fn.slideFadeToggle= function(speed,callback){ 
 return this.animate({ 
  height : "toggle", 
  opacity : "toggle" 
 },speed,callback) 
}

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.