Was sind die jQuery-Plug-ins? Teilen Sie, wie Sie ein jQuery-Plug-in schreiben

Was ist das jQuery-Plug-in? Gängige jQuery-Plug-Ins werden hauptsächlich in drei Typen unterteilt: Plug-Ins, die Objektmethoden kapseln, und Plug-Ins, die globale Funktionen kapseln. Was ist also das Schreiben und die Verwendung jedes jQuery-Plug-Ins basierend auf diesen drei jQuery-Plug-Ins? Lassen Sie uns als Nächstes über die Verwendung und das Schreiben von jQuery-Plug-Ins sprechen.

jQuery-Plug-in-Klassifizierung:

1. Plug-ins, die Objektmethoden kapseln

Diese Art von Plug-in kapselt Objekte Methoden und werden verwendet, um Es ist das am häufigsten verwendete Plug-In zum Bearbeiten von jQuery-Objekten, die über Selektoren erhalten werden.

2. Plug-in, das globale Funktionen kapselt

Sie können dem jQuery-Namespace unabhängige Funktionen hinzufügen. Beispielsweise sind die jQuery.noConflict()-Methode, die häufig verwendete jQuery.ajax()-Methode und die jQuery.trim()-Methode, die das erste Leerzeichen usw. entfernt, allesamt Plugins, die als globale Funktionen innerhalb von jQuery an den Kernel angehängt sind .

3． Auswahl-Plug-in

In manchen Fällen müssen Sie ein Auswahl-Plug-in verwenden.

Grundlegende Punkte des Plug-Ins

1. Es wird empfohlen, den Dateinamen des jQuery-Plug-Ins jquery.[Plug-In-Name] zu nennen. .js, um Verwechslungen mit anderen JavaScript-Bibliotheks-Plug-Ins zu vermeiden.

2. Alle Objektmethoden sollten an das jQuery.fn-Objekt angehängt werden, und alle globalen Funktionen sollten an das jQuery-Objekt selbst angehängt werden.

3. Innerhalb des Plug-Ins zeigt dies auf das jQuery-Objekt, das aktuell über den Selektor abgerufen wird, im Gegensatz zu allgemeinen Methoden, wie z. B. der click()-Methode, bei der das interne This auf das DOM-Element verweist.

4. Sie können alle Elemente durchqueren.

5. Alle Methoden oder Funktions-Plugins sollten mit einem Semikolon enden, da es sonst zu Problemen bei der Komprimierung kommen kann. Um die Sicherheit zu erhöhen, können Sie dem Header des Plug-Ins sogar ein Semikolon hinzufügen, um zu verhindern, dass der unregelmäßige Code anderer Personen das Plug-In beeinträchtigt.

6. Das Plug-in sollte ein jQuery-Objekt zurückgeben, um sicherzustellen, dass das Plug-in verkettet werden kann. Es sei denn, das Plug-in muss eine Menge zurückgeben, die abgerufen werden muss, z. B. eine Zeichenfolge oder ein Array usw.

7. Vermeiden Sie die Verwendung von $ als Alias ​​für jQuery-Objekte innerhalb des Plug-Ins, sondern verwenden Sie vollständiges jQuery, um es darzustellen. Dadurch können Konflikte vermieden werden. Natürlich können Sie dieses Problem auch mit Abschlusstechniken umgehen, sodass das Plug-in weiterhin $ als Alias ​​für jQuery verwenden kann. Viele Plugins tun dies.

Abschlüsse in Plug-Ins

In Bezug auf Abschlüsse gibt es in ECMAScript eine einfache Beschreibung: Sie ermöglichen die Verwendung interner Funktionen (d. h. Funktionsdefinitionen und Funktionsausdrücke). in einer anderen innerhalb des Rumpfes einer Funktion), außerdem haben diese inneren Funktionen Zugriff auf alle lokalen Variablen, Parameter und andere innere Funktionen, die in der äußeren Funktion, in der sie enthalten sind, deklariert sind, wenn eine dieser inneren Funktionen außerhalb der äußeren Funktion aufgerufen wird Wenn man sie enthält, wird ein Abschluss gebildet. Das heißt, die innere Funktion wird ausgeführt, nachdem die äußere Funktion zurückgekehrt ist. Wenn diese interne Funktion ausgeführt wird, muss sie dennoch auf die lokalen Variablen, Parameter und andere interne Funktionen ihrer externen Funktion zugreifen. Die Werte dieser lokalen Variablen, Parameter und Funktionsdeklarationen sind (zunächst) die Werte, wenn die äußere Funktion zurückkehrt, werden aber auch von der inneren Funktion beeinflusst.

Definieren Sie zunächst eine anonyme Funktion function(){/*Place code here*/} und umgeben Sie sie dann in Klammern, um sie zu erhalten (function(){/*Place code here*/}). wird über den ()-Operator ausgeführt. Parameter können zur Verwendung durch interne Funktionen übergeben werden.

//Beachten Sie, dass aus Gründen der besseren Kompatibilität vor dem Start ein Semikolon steht:

;(function($){ //开始时将$作为匿名函数的形参
 
/*这里放置代码，可以使用$作为jQuery的缩写别名*/
 
})(jQuery); //这里就将jQuery作为实参传递给匿名函数了

Das Obige ist die Struktur eines gängigen jQuery-Plug-Ins.

Der Mechanismus des jQuery-Plug-ins

jQuery bietet zwei Methoden zum Erweitern von jQuery-Funktionen, nämlich die Methode jQuery.fn.extend() und die Methode jQuery.extend() . Ersteres wird für den ersten der drei zuvor genannten Plug-In-Typen verwendet, und Letzteres dient zur Erweiterung der beiden letztgenannten Plug-Ins. Beide Methoden akzeptieren einen Parameter vom Typ Objekt. Die „Name/Wert-Paare“ des Objektobjekts stellen jeweils „Funktions- oder Methodenname/Funktionskörper“ dar.

Neben der Möglichkeit, jQuery-Objekte zu erweitern, verfügt die Methode jQuery.extend() auch über eine leistungsstarke Funktion, nämlich die Verwendung und Erweiterung vorhandener Objektobjekte.

jQuery-Code lautet wie folgt:

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);

Das Ergebnis ist:

newOptins={valitdate:true,limit:5,name:”bar”};

Die jQuery.extend()-Methode wird häufig verwendet, um eine Reihe von Standardparametern des Plug-Ins festzulegen Methoden wie der folgende Code werden angezeigt:

function foo(options){
 
options=jQuery.extend({
 
name:”bar”,
 
limit:5,
 
datatype:”xml”
 
},options);
 
};

Wenn beim Aufruf der foo()-Methode der entsprechende Wert im übergebenen Parameteroptionsobjekt festgelegt wird, wird der festgelegte Wert verwendet, andernfalls wird der Standardwert verwendet gebraucht. Der Code lautet wie folgt:

foo({name:”a”,length:”4”,dataType:”json”});
 
foo({name:”a”,length:”4”});
 
foo({name:”a”});
 
foo();

Mit der Methode jQuery.extend() können Sie den Standardwert einfach mit den übergebenen Parametern überschreiben. An dieser Stelle bleibt der Aufruf der Methode derselbe, mit der Ausnahme, dass anstelle einer Parameterliste eine Karte übergeben wird. Dieser Mechanismus ist nicht nur flexibler, sondern auch präziser als die herkömmliche Methode zur Erkennung jedes Parameters. Darüber hinaus bedeutet die Verwendung benannter Parameter, dass das Hinzufügen neuer Optionen keine Auswirkungen auf den in der Vergangenheit geschriebenen Code hat, was die Verwendung für Entwickler intuitiver und klarer macht.

Ein jQuery-Plug-in schreiben

1. Plug-in, das jQuery-Objektmethoden kapselt

Ein Plug-in schreiben, das das setzt und abruft color

Stellen Sie zunächst vor, wie Sie ein color()-Plug-in schreiben. Mit diesem Plug-In werden die folgenden zwei Funktionen implementiert.

(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')选择表格行，这样会使页面中全部的a34de1251f0d9fe1e645927f19a896e8元素都隔行变色。应该使用选择器选中某个表格，执行alterBgColor()方法后，将对应的表格内a34de1251f0d9fe1e645927f19a896e8元素进行隔行变色。因此，需要把所有通过$('tbody>tr')选择的对象改写成$('tbody>tr',this)，表示在匹配的元素内（当前表格内）查找，并应用上一步中的默认值。jQuery代码如下：

;(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，然后使用其中一个f5d188ed2c074f8b944552db028f98a1调用alterBgColor()方法，以便查看是否能独立工作，并且具有可链性。
jQuery代码如下：

$('#table2')
.alterBgColor() //应用插件
 
.find("th").css("color","red"); //可链式操作

需要注意的是，jQuery的选择符可能会匹配1个或者多个元素。因此，在编写插件时必须考虑到这些情况。可以在插件内部调用each()方法来遍历匹配元素，然后执行相应的方法，this会依次引用每个DOM元素。如下jQuery代码所示：

 ;(function($)){
 
$.fn.extend({
 
"SomePlugin":function(options){
 
return this.each(function(){
 
//这里置放代码
 
});
 
}
 
});
 
})(jQuery);

相关推荐：

jQuery简单滚动插件

jquery.tmpl JQuery模板插件_jquery

Das obige ist der detaillierte Inhalt vonWas sind die jQuery-Plug-ins? Teilen Sie, wie Sie ein jQuery-Plug-in schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!