Résumé de l'utilisation de extend() dans jQuery-js tutoriel-php.cn

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

黄舟

Libérer： 2017-12-04 09:22:12

original

1484 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!