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);
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);
}
$('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}});
</script>
</body>
</html>
</span>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>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>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>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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
