jQuery 함수(새로운 jQuery 메서드 또는 플러그인)를 만드는 방법
JavaScript의 구문은 다음과 같습니다.
function myfunction(param){
//some code
}
요소에 추가할 수 있는 함수를 jQuery에서 선언하는 방법이 있습니까?예를 들어 다음과 같습니다.
$('#my_div').myfunction()
문서에서:
(function( $ ){
$.fn.myfunction = function() {
alert('hello world');
return this;
};
})( jQuery );
그럼 네가 해
$('#my_div').myfunction();
이미 모든 답변을 받았음에도 불구하고 함수에서 jQuery를 사용하기 위해 플러그인을 쓸 필요는 없습니다.물론 간단한 일회성 기능이라면 플러그인 작성은 오버킬이라고 생각합니다.이는 셀렉터를 함수에 매개 변수로 전달하기만 하면 훨씬 더 쉽게 수행할 수 있습니다.코드는 다음과 같습니다.
function myFunction($param) {
$param.hide(); // or whatever you want to do
...
}
myFunction($('#my_div'));
에 주의:$ '''로$param을 사용하다변수에는 jQuery 셀렉터가 포함되어 있다는 것을 쉽게 기억할 수 있도록 하는 것이 저의 습관입니다. 쓰면 돼요.param뿐만 아니라.
많은 문서/튜토리얼이 있지만, 질문에 대한 간단한 답변은 다음과 같습니다.
// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)
$.fn.myfunction = function () {
// blah
};
기능에서는, 「」는thisjQuery는 jQuery를 사용합니다.예를 들어 다음과 같습니다.
$.fn.myfunction = function () {
console.log(this.length);
};
$('.foo').myfunction();
는 수를 .는 클래스의 요소 수를 콘솔에 플러시합니다.foo.
물론 의미론에는 그것(베스트 프랙티스, 재즈 등)이 조금 더 있습니다.그러니까 꼭 읽어보세요.
jQuery 개체에서 함수를 사용하려면 다음과 같이 jQuery 프로토타입에 추가합니다(fn은 jQuery에서 프로토타입의 바로 가기임).
jQuery.fn.myFunction = function() {
// Usually iterate over the items and return for chainability
// 'this' is the elements returns by the selector
return this.each(function() {
// do something to each item matching the selector
}
}
이것은 보통 jQuery 플러그인이라고 불립니다.
예 - http://jsfiddle.net/VwPrm/
네 - 설명하시는 것은 jQuery 플러그인입니다.
플러그인을하려면 JavaScript에서 jQuery의 합니다.jQuery.fn.
예.
jQuery.fn.myfunction = function(param) {
// Some code
}
기능에서는, 「」를 참조해 주세요.this키워드는 플러그인이 호출된jQuery 오브젝트로 설정됩니다. 이렇게할 때: 아, 아, 아, 아, 아, 아, 아, 아, 아, 하다.
$('#my_div').myfunction()
★★★★★★★★★★★★★★★.this에 inside inside inside myfunction는 jQuery가 됩니다.$('#my_div').
상세한 것에 대하여는, http://docs.jquery.com/Plugins/Authoring 를 참조해 주세요.
$(function () {
//declare function
$.fn.myfunction = function () {
return true;
};
});
$(document).ready(function () {
//call function
$("#my_div").myfunction();
});
확장(jQuery 플러그인을 작성하는 방법)을 사용할 수도 있습니다.
$.fn.extend(
{
myfunction: function ()
{
},
myfunction2: function ()
{
}
});
사용방법:
$('#my_div').myfunction();
다음과 같이 jQuery 플러그인(선택한 요소에서 호출할 수 있는 함수)을 직접 작성할 수 있습니다.
(기능($ ){$.fn.m.yFunc = 함수(param1, param2){//this - jquery 객체에 선택한 요소가 저장됩니다.}}"( jQuery );
나중에 다음과 같이 호출:
$('div').myFunc(1, null);예. jquery를 사용하여 선택한 요소에 적용하는 메서드를 jquery 플러그인이라고 하며 jquery 문서 내 작성에 대한 많은 정보가 있습니다.
jquery는 javascript일 뿐이므로 jquery method는 특별한 것이 없습니다.
"colorize" 메서드를 만듭니다.
$.fn.colorize = function custom_colorize(some_color) {
this.css('color', some_color);
return this;
}
사용방법:
$('#my_div').colorize('green');
이 간단한 예시는 jQuery 문서의 How to Create a Basic Plugin과 @Candide, @Michael의 답변을 조합한 것입니다.
- 명명된 함수식은 스택 트레이스 등을 개선할 수 있습니다.
- 반환되는 사용자 지정 메서드
this묶여 있을 수 있습니다.@Potheik 감사합니다.
언제든지 이 작업을 수행할 수 있습니다.
jQuery.fn.extend({
myfunction: function(param){
// code here
},
});
OR
jQuery.extend({
myfunction: function(param){
// code here
},
});
$(element).myfunction(param);
jQuery 오브젝트의 프로토타입(jQuery 플러그인 작성)을 통해 jQuery 오브젝트를 확장하고 싶은 것 같습니다.이는 jQuery 함수를 호출하여 작성된 모든 새로운 오브젝트가 있음을 의미합니다($(selector/DOM element))는 이 방법을 사용합니다.
다음으로 매우 간단한 예를 제시하겠습니다.
$.fn.myFunction = function () {
alert('it works');
};
jQuery에서 함수를 만드는 가장 간단한 예는 다음과 같습니다.
jQuery.fn.extend({
exists: function() { return this.length }
});
if($(selector).exists()){/*do something here*/}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Define a function in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$.fn.myFunction = function() {
alert('You have successfully defined your function!');
}
$(".call-btn").click(function(){
$.fn.myFunction();
});
});
</script>
</head>
<body>
<button type="button" class="call-btn">Click Here</button>
</body>
</html>
언급URL : https://stackoverflow.com/questions/12093192/how-to-create-a-jquery-function-a-new-jquery-method-or-plugin
'programing' 카테고리의 다른 글
| 나눗셈에 사용할 때 '/'와 '//'의 차이점은 무엇입니까? (0) | 2022.11.27 |
|---|---|
| 대소문자를 구분하지 않는 문자열 비교 (0) | 2022.11.27 |
| Regex 플러스 대 스타의 차이? (0) | 2022.11.27 |
| Prepared Statement IN 조항의 대안? (0) | 2022.11.27 |
| MariaDB의 인덱스 키 크기 제한은 얼마입니까? (0) | 2022.11.27 |