Jquery 플러그인 작성 노트-JS 튜토리얼-php.cn

Jquery 플러그인 작성 노트

WBOY

풀어 주다： 2016-05-16 17:50:11

원래의

890명이 탐색했습니다.

jQuery 플러그인 유형:
1. jQuery 메소드:
대부분의 jQuery 플러그인은 이 유형입니다. 이 유형의 플러그인은 객체 메소드를 캡슐화하므로 jQuery는 jQuery에서 얻습니다. 선택기: 객체 프로세스 내에서 작동하여 jQuery의 강력한 선택기를 활용합니다.
2. 전역 함수:
또한 jQuery 네임스페이스에 독립적으로 사용자 정의 함수 함수를 연결하고 jQuery 범위에서 공용 함수로 사용할 수도 있습니다. 그러나 전역 함수는 jQuery 객체에 바인딩되지 않으므로 선택기로 얻은 jQuery 객체에 대해 호출할 수 없습니다. jQuery.fn() 또는 $.fn()을 통해 참조되어야 합니다.
3. 선택기:
jQuery에서 제공하는 선택기가 부족하거나 불편하다고 생각되면 선택기를 사용자 정의하는 것을 고려해 볼 수 있습니다.
jQuery 플러그인 메커니즘:
① jQuery.extend() 메서드: 전역 함수 또는 선택기를 생성할 수 있습니다.
By: 소위 전역 함수는 실제로 jQuery 네임스페이스 내에 있는 함수입니다. 어떤 사람들은 이러한 유형의 함수를 유틸리티 함수라고 부릅니다. , DOM을 직접 작동하지는 않지만 Javascript의 요소가 아닌 객체를 작동하거나 jQuery의 Each() 함수 및 noConflect() 함수와 같은 기타 비객체 특정 작업을 수행합니다.
예: 2개의 공용 함수를 생성합니다. jQuery 네임스페이스

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

jQuery.extend({
minValue : 함수(a,b){
return a},
maxValue : function(a,b){
return a}
})
$(function(){
$("input").click(function(){
var a = 프롬프트("값을 입력하세요. ");
var b = 프롬프트("다른 값을 입력하시겠습니까?");
var c = jQuery.minValue(a,b);
var d = jQuery.maxValue(a,b);
alert("입력한 최대값: " d "n입력한 최소값: " c)
})
})

※ 플러그인 생성 외에도 jQuery.extend() 메서드를 사용하여 jQuery 객체를 확장할 수도 있습니다.
예: jQuery.extend() 메서드를 호출하여 객체 a와 객체 b를 새 객체로 병합하고 병합된 객체를 반환하여 변수 c에 할당합니다.

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

 
var a = {name : "zhu",pass : 123} 
var b = { 이름 : "wang", 패스 : 456, 나이 : 1} 
var c = jQuery.extend(a,b) 
$(function(){ 
for(var name in c){ 
$("div ").html($("div").html() "
" name ":" c[name]) 
} 
}) 

예: jQuery 전역 함수 만들기

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

 
jQuery.css8 = { 
minValue : 함수(a,b){ 
return a}, 
maxValue : 함수(a,b){ 
return a} 
} 
$(function(){ 
$("input").click(function(){ 
var a = 프롬프트("값을 입력하세요?"); 
var b = 프롬프트("다른 값을 입력하세요.") 
var c = jQuery.css8.minValue(a,b); d = jQuery.css8.maxValue( a,b); 
alert("입력한 최대값:" d "n입력한 최소값:" 
}); ) 

 
By: jQuery 네임스페이스에 함수를 추가하려면 새 함수를 jQuery 개체의 속성으로 지정하기만 하면 됩니다. jQuery 객체 이름은 $, jQuery.css8==$.css8 

② jQuery.fn.extend() 메소드: jQuery 객체를 생성하는 메소드입니다.
예: 가장 간단한 jQuery 개체 방법을 살펴보겠습니다

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

jQuery.fn.test = function(){

alert("jQuery 객체 메서드입니다!") 
} 
$(function(){ 
$("div ").click (function(){ 
$(this).test(); 
}); 
}) 