Maison > Article > interface Web > Résumé de l'utilisation de extend() dans jQuery

Résumé de l'utilisation de extend() dans jQuery

黄舟original: 2017-12-04 09:22:121422parcourir

Dans notre travail de développement quotidien, nous sommes indispensables pour utiliser jQuery, donc je pense que de nombreux amis utiliseront extend() dans jQuery, nous vous le donnerons donc aujourd'hui. Présentons-le en détail le résumé de l'utilisation de extend() dans jQuery !

jQuery fournit deux méthodes pour développer des plug-ins, qui sont :

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

jQuery.extend(object) ; pour étendre la classe jQuery elle-même. méthode de classe.
jQuery.fn.extend(object); Ajouter des méthodes aux objets jQuery. Cela devrait être facile à comprendre. Donnez un exemple.

Le code est le suivant :

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

D'accord, vous avez également vu une petite utilisation de $.extend() ci-dessus.

1. Fusionner plusieurs objets.
Ce qui est utilisé ici est la fonction d'imbrication de plusieurs objets de $.extend().
Ce que l'on appelle l'imbrication de plusieurs objets est quelque peu similaire à l'opération de fusion de tableaux.
Mais voici les objets. Donnez des exemples.

Le code est le suivant :

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

2. Objets profondément imbriqués.

Le code est le suivant :

<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. Vous pouvez ajouter des méthodes statiques à jQuery.

Le code est le suivant :

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

Résumé :

Cet article vous le présente grâce à une introduction détaillée d'exemples, j'ai appris l'utilisation de extend() dans jQuery. Je pense que mes amis comprennent mieux l'utilisation d'extend. J'espère que cela vous sera utile !

Recommandations associées :

Analyse de la méthode d'extension de JQuery

Introduction détaillée et utilisation de l'utilisation étendue dans JQuery

Explication détaillée des exemples d'utilisation de la fonction jQuery.extend

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery dom apprentissageArticle suivant：jquery dom apprentissage

Articles Liés

Voir plus