jQuery 플러그인이 무엇인가요? 일반적인 jQuery 플러그인은 주로 객체 메소드를 캡슐화하는 플러그인, 전역 기능을 캡슐화하는 플러그인, 선택기 플러그인의 세 가지 유형으로 나뉩니다. 그러면 이 세 가지 jQuery 플러그인을 기반으로 각 jQuery 플러그인을 작성하고 사용하는 방법은 무엇일까요? 다음으로 jQuery 플러그인의 사용법과 작성에 대해 이야기해보겠습니다.
jQuery 플러그인 분류:
1. 객체 메소드를 캡슐화하는 플러그인
이러한 종류의 플러그인은 선택기를 통해 얻은 jQuery 객체를 조작하는 데 사용됩니다. -안에. .
2. 전역 함수를 캡슐화하는 플러그인
jQuery 네임스페이스에 독립적인 함수를 추가할 수 있습니다. 예를 들어 jQuery.noCon conflict() 메서드, 일반적으로 사용되는 jQuery.ajax() 메서드, 첫 번째 공백을 제거하는 jQuery.trim() 메서드는 모두 jQuery 내의 전역 함수로 커널에 첨부되는 플러그인입니다.
3. 선택기 플러그인
어떤 경우에는 선택기 플러그인을 사용해야 합니다.
플러그인 기본 포인트
1. 다른 JavaScript 라이브러리 플러그인과의 혼동을 피하기 위해 jQuery 플러그인의 파일 이름은 jquery.[플러그인 이름].js로 지정하는 것이 좋습니다.
2. 모든 개체 메서드는 jQuery.fn 개체에 연결되어야 하며 모든 전역 함수는 jQuery 개체 자체에 연결되어야 합니다.
3. 내부 this가 DOM 요소를 가리키는 click() 메서드와 같은 일반적인 방법과 달리 플러그인 내부에서 this는 현재 선택기를 통해 얻은 jQuery 객체를 가리킵니다.
4. this.each를 통해 모든 요소를 탐색할 수 있습니다.
5. 모든 메소드나 함수 플러그인은 세미콜론으로 끝나야 합니다. 그렇지 않으면 압축 중에 문제가 발생할 수 있습니다. 보안을 강화하려면 플러그인 헤더에 세미콜론을 추가하여 다른 사람의 불규칙한 코드가 플러그인에 영향을 미치는 것을 방지할 수도 있습니다.
6. 플러그인은 플러그인의 연결 가능한 작업을 보장하기 위해 jQuery 개체를 반환해야 합니다. 플러그인이 문자열이나 배열 등과 같이 얻어야 하는 일부 수량을 반환해야 하는 경우가 아니면
7. 플러그인 내에서 jQuery 객체의 별칭으로 $를 사용하지 말고 대신 전체 jQuery를 사용하여 표현하세요. 물론, 이 문제를 방지하기 위해 폐쇄 기술을 사용할 수도 있습니다. 그러면 플러그인에서 $를 jQuery의 별칭으로 계속 사용할 수 있습니다. 많은 플러그인이 이를 수행합니다.
플러그인의 클로저
클로저와 관련하여 ECMAScript는 이에 대해 간단한 설명을 제공합니다. 내부 함수가 허용되며(즉, 함수 정의 및 함수 표현식이 다른 함수 본문에 위치함) 이러한 내부 함수에 액세스할 수 있습니다. 모든 지역 변수, 매개변수 및 기타 내부 함수가 위치한 외부 함수에 선언된 내부 함수 중 하나가 이를 포함하는 외부 함수 외부에서 호출되면 클로저를 형성합니다. 즉, 외부 함수가 반환된 후에 내부 함수가 실행됩니다. 이 내부 함수가 실행될 때에도 외부 함수의 지역 변수, 매개변수 및 기타 내부 함수에 액세스해야 합니다. 이러한 지역 변수, 매개변수, 함수 선언(초기)의 값은 외부 함수가 반환될 때의 값이지만 내부 함수의 영향도 받게 됩니다.
먼저 익명 함수 function()을 정의합니다.{/*여기에 코드를 배치하세요*/}, 그런 다음 괄호로 묶어 (function(){/*여기에 코드를 배치하세요*/})가 되고 마지막으로 ()를 전달합니다. 연산자가 실행됩니다. 내부 함수에서 사용하기 위해 매개변수를 전달할 수 있습니다.
//더 나은 호환성을 위해 시작하기 전에 세미콜론이 있다는 점에 유의하세요.
;(function($){ //开始时将$作为匿名函数的形参
/*这里放置代码，可以使用$作为jQuery的缩写别名*/
})(jQuery); //这里就将jQuery作为实参传递给匿名函数了위는 일반적인 jQuery 플러그인의 구조입니다.
jQuery 플러그인의 메커니즘
jQuery는 jQuery 기능을 확장하는 두 가지 방법, 즉 jQuery.fn.extend() 메서드와 jQuery.extend() 메서드를 제공합니다. 전자는 앞에서 언급한 세 가지 플러그인 유형 중 첫 번째에 사용되며, 후자는 후자의 두 플러그인을 확장하는 데 사용됩니다. 두 메소드 모두 Object 유형의 매개변수 하나를 허용합니다. Object 개체의 "이름/값 쌍"은 각각 "함수 또는 메서드 이름/함수 본문"을 나타냅니다.
jQuery 객체를 확장할 수 있는 것 외에도 jQuery.extend() 메서드에는 기존 객체 객체를 사용하고 확장하는 강력한 기능도 있습니다.
jQuery 코드는 다음과 같습니다.
jQuery.extend(target,obj1,…….[objN])
用一个或多个其它对象来扩展一个对象，然后返回被扩展的对象。
例如合并settings对象和options对象，修改并返回settings对象。
var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options);결과는 다음과 같습니다.
newOptins={valitdate:true,limit:5,name:”bar”};jQuery.extend() 메서드는 다음 코드에 표시된 대로 플러그인 메서드의 일련의 기본 매개변수를 설정하는 데 자주 사용됩니다.
function foo(options){
options=jQuery.extend({
name:”bar”,
limit:5,
datatype:”xml”
},options);
};foo() 메소드가 호출되면 전달된 매개변수 options 객체에 해당 값이 설정되면 설정된 값이 사용되고, 그렇지 않으면 기본값이 사용됩니다. 코드는 다음과 같습니다.
foo({name:”a”,length:”4”,dataType:”json”});
foo({name:”a”,length:”4”});
foo({name:”a”});
foo();jQuery.extend() 메서드를 사용하면 전달된 매개변수로 기본값을 쉽게 재정의할 수 있습니다. 이 시점에서 메서드에 대한 호출은 매개변수 목록 대신 맵이 전달된다는 점을 제외하면 동일하게 유지됩니다. 이 메커니즘은 각 매개변수를 탐지하는 기존 방법보다 더 유연할 뿐만 아니라 더 간결합니다. 또한 명명된 매개변수를 사용한다는 것은 새로운 옵션을 추가해도 과거에 작성된 코드에 영향을 주지 않으므로 개발자가 더 직관적이고 명확하게 사용할 수 있다는 것을 의미합니다.
jQuery 플러그인 작성
1. jQuery 객체 메소드를 캡슐화하는 플러그인
색상을 설정하고 가져오는 플러그인 작성
먼저 color() 플러그인 작성 방법을 소개합니다. . 이 플러그인은 다음 두 가지 기능을 구현하는 데 사용됩니다.
(1)设置匹配元素的颜色。
(2)获取匹配的元素（元素集合中的第1个）的颜色。
首先将该插件按规范命名为jquery.color.js。
然后再JavaScript文件里搭好框架.由于是对jQuery对象的方法扩展，因此采用第1类方法jQuery.fn.extend()来编写。
;(function($){
$.fn.extend({
“color”:function(value){
//这里写插件代码
}
});
})(jQuery);这里给这个方法提供一个参数value，如果调用了方法的时候传递了value这个参数，那么就是用这个值来设置字体颜色；否则就是匹配元素的字体颜色的值。
首先，实现第1个功能，设置字体颜色。注意，由于插件内部的this指向的是jQuery对象，而非普通的DOM对象。代码如下：
;(function($){
$.fn.extend({
“color”:function(value){
return this.css(“color”,value);
}
});
})(jQuery); 接下来实现第2个功能。如果没用给方法传递参数，那么就是获取集合对象中第1个对象的color的值。由于css()方法本身就具有返回第1个匹配元素样式值的功能，因此此处无需通过eq()来获取第1个元素。只要这两个方法结合起来,判断一下value的值是否是undefined即可。
jQuery代码如下：
;(function($){
$.fn.extend({
“color”:function(value){
if(color===undefined){
return this.css(“color”,value);
}else{
Return this.css(“color”,value);
}
}
});
})(jQuery);这样一来，插件也就完成了。现在来测试一下代码。
<script type=”text/javascript”>
//插件编写
;(function($){
$.fn.extend({
“color”:function(value){
if(color===undefined){
return this.css(“color”,value);
}else{
Return this.css(“color”,value);
}
}
});
})(jQuery);
//插件应用
$(function(){
//查看第一个div的color样式值
alert($(“div”).color()+”\n返回字符串，证明此插件可用。”);
//把所有的div字体颜色都设为红色
alert($(“div”).color(“red”)+”\n返回object证明得到的是jQuery对象。“)；
}）
</script>
<div style=”color:red”>red</div>
<div style=”color:blue”>blue</div>
<div style=”color:green”>green</div>
<div style=”color:yellow”>yellow</div>
另外，如果要定义一组插件，可以使用如下所示的写法：
:(function($){
$.fn.extend({
"color":function(value){
//插件代码
},
"border":function(value){
//插件代码
},
"background":function(value){
//插件代码
}
};
})(jQuery);表格隔行变色插件
表格隔行变色的代码如下：
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
//判断是否选中
var hasSelected=$(this).hasClass('selected');
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected?"removeClass":"addClass"]('selected')
//查找内部的checkbox,设置对应的属性
.find('checkbox').attr('checked'.!hasSelected);
});
//如果复选框默认情况下是选择的，则高色
$('tbody>tr:has(:checked)').addClass('selected');首先把插件方法取名为alterBgColor，然后为该插件方法搭好框架，jQuery代码如下：
;(function($){
$.fn.extend({
"alterBgColor":function(options){
//插件代码
}
});
})(jQuery);框架完成后，接下来就需要为options定义默认值。默认构建这样({odd:"odd",even:"even",selected:"selected"})一个Object。这样就可以通过$("#sometable").alterBgColor({odd:"odd",even:"even",selected:"selected"})自定义奇偶行的样式类名以及选中后的样式类名。同时，直接使用$("#sometable").alterBgColor()就可以应用 默认的样式类名。
jQuery代码如下：
;(function($){
$.fn.extend({
"alterBgColor":function(options){
options=$.extend({
odd:"odd", /*偶数行样式*/
even:"even", /*奇数行样式*/
selected:"selected" /*选中行样式*/
},options);
}
});
})(jQuery);如果在后面的程序中需要使用options对象的属性，可以使用如下的方式来获得：
options.odd; //获取options对象中odd属性的值 options.even; //获取options对象中even属性的值 options.selected; //获取options对象中selected属性的值
接下来就需要把这些值放到程序中，来代替先前程序中的固定值。
最后就是匹配元素的问题了。显然不能直接用$('tbody>tr')选择表格行，这样会使页面中全部的
;(function($){
$.fn.extend({
"alterBgColor":function(options){
//设置默认值
options=$.extend({
odd."odd",
even."even",
selected:"selected"
},options);
$("tbody>tr:odd",this).addClass(options,odd);
$("tbody>tr:even",this).addClass(options,even);
$("tbody>tr",this).click(function(){
//判断是否选中
var hasSelected=$(this).hasClass(options,selected);
//如果选中，则移出selected类，否则加上selected类
$(this)[hasSelected?"removeClass":"addClass"](options,selected)
//查找内部的checkbox,设置对应属性
.find(':checkbox').attr('checked',!hasSelected);
});
//如果单选框默认情况下是选择的，则高色
$('tbody>tr:has(:checkd),this').addClass(options,selected);
rerturn this; //返回this，使方法可链
}
});
})(jQuery);在代码的最后，返回this，让这个插件具有可链性。
此时，插件就完成了。现在来测试这个插件。构造两个表格，id分别为table1和table2，然后使用其中一个
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
