Zusammenfassung der Verwendung von extension() in jQuery-js-Tutorial-php.cn

Zusammenfassung der Verwendung von extension() in jQuery

黄舟

Freigeben： 2017-12-04 09:22:12

Original

1420 Leute haben es durchsucht

In unserer täglichen Entwicklungsarbeit ist die Verwendung von jQuery unverzichtbar. Ich glaube daher, dass viele Freunde die Verwendung von extension () in jQuery verwenden werden. Deshalb werden wir es Ihnen heute im Detail vorstellen die Zusammenfassung der Verwendung von extension() in jQuery!

jQuery bietet zwei Methoden zum Entwickeln von Plug-Ins:

jQuery.fn.extend(object); 
jQuery.extend(object);

Nach dem Login kopieren

jQuery.extend(object); zum Erweitern der jQuery-Klasse selbst Klassenmethode.
jQuery.fn.extend(object); Methoden zu jQuery-Objekten hinzufügen. Dies sollte leicht zu verstehen sein. Geben Sie ein Beispiel.

Der Code lautet wie folgt:

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<h3 class="ye">new soul</h3> 
<h3 class="ye">new soul</h3> 
<h3 class="ye">new soul</h3> 
<h3 class="ye">new soul</h3> 
<script type="text/javascript" src="jquery.2.0.3.js"></script> 
<script type="text/javascript"> 
jQuery.fn.myPlugin = function(options) { 
$options = $.extend( { 
html: "no messages", 
css: { 
"color": "red", 
"font-size":"14px" 
}}, 
options); 
return $(this).css({ 
"color": $options.css.color, 
}).html($options.html); 
} 
$(&#39;.ye&#39;).myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}}); 
</script> 
</body> 
</html> 
</span>

Nach dem Login kopieren

Okay, Sie haben oben auch eine kleine Verwendung von $.extend() gesehen.

1. Mehrere Objekte zusammenführen.
Was hier verwendet wird, ist die Funktion zum Verschachteln mehrerer Objekte von $.extend().
Die sogenannte Verschachtelung mehrerer Objekte ähnelt in gewisser Weise dem Vorgang des Zusammenführens von Arrays.
Aber hier sind die Objekte. Nennen Sie Beispiele.

Der Code lautet wie folgt:

<span style="font-size:18px;">//用法: jQuery.extend(obj1,obj2,obj3,..) 
var Css1={size: "10px",style: "oblique"} 
var Css2={size: "12px",style: "oblique",weight: "bolder"} 
$.jQuery.extend(Css1,Css2) 
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性 
// Css1 = {size: "12px",style: "oblique",weight: "bolder"} 
</span>

Nach dem Login kopieren

Tief verschachtelte Objekte.

Der Code lautet wie folgt:

<span style="font-size:18px;"> jQuery.extend( 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果: 
// => { name: “John”, last: “Resig”, location: { state: “MA” } } 
// 新的更深入的 .extend() 
jQuery.extend( true, 
{ name: “John”, location: { city: “Boston” } }, 
{ last: “Resig”, location: { state: “MA” } } 
); 
// 结果 
// => { name: “John”, last: “Resig”, 
// location: { city: “Boston”, state: “MA” } } 
</span>

Nach dem Login kopieren

3. Sie können statische Methoden zu jQuery hinzufügen.

Der Code lautet wie folgt:

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
<script type="text/javascript" src="jquery.2.0.3.js"></script> 
<script type="text/javascript"> 
$.extend({ 
add:function(a,b){return a+b;}, 
minus:function(a,b){return a-b}, 
multiply:function(a,b){return a*b;}, 
pide:function(a,b){return Math.floor(a/b);} 
}); 
var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.pide(5,7); 
console.log(sum); 
</script> 
</body> 
</html>
</span>

Nach dem Login kopieren

Zusammenfassung:

Dieser Artikel stellt ihn Ihnen vor Durch die ausführliche Einführung von Beispielen habe ich etwas über die Verwendung von „extend()“ in jQuery gelernt. Ich hoffe, dass es für Ihre Arbeit hilfreich sein wird.

Verwandte Empfehlungen:

JQuerys erweiterte Methodenanalyse

Detaillierte Einführung und Verwendung der Extend-Nutzung in JQuery

Detaillierte Erläuterung von Anwendungsbeispielen der jQuery.extend-Funktion

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von extension() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!