Este método jQuery.fn.extend() se utiliza para fusionar el contenido de un objeto en el prototipo de jQuery para proporcionar nuevos métodos de instancia de jQuery.
Sintaxis:
jQuery.fn.extend( object )
Parámetros: este método acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- objeto: este parámetro contiene el objeto para fusionarlo con el prototipo de jQuery.
Valor devuelto: Devuelve el objeto después de la fusión.
Los siguientes ejemplos ilustran el uso del método jQuery.fn.extend():
Ejemplo 1: en este ejemplo, el método jQuery.fn.extend() se usa para agregar dos métodos al objeto prototipo de jQuery y luego usar uno de ellos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery.fn.extend() method</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color: green">
GeeksForGeeks
</h1>
<h3>jQuery.fn.extend() method</h3>
<p>
Add two methods to the jQuery prototype
object <br>and then use one of them.
</p>
<p><input type="radio" name="Geek_1"> Geek_1</p>
<p><input type="radio" name="Geek_2"> Geek_2</p>
<script>
jQuery.fn.extend({
Gfg1: function () {
return this.each(function () {
this.checked = true;
});
},
Gfg2: function () {
return this.each(function () {
this.checked = false;
});
}
});
// Use the newly created .Gfg1() method
$("input[type='radio']").Gfg1();
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, el método jQuery.fn.extend() se usa para combinar más métodos con el objeto prototipo de jQuery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery.fn.extend() method</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color: green">
GeeksForGeeks
</h1>
<h3>jQuery.fn.extend() method</h3>
<p>
Add two methods to the jQuery prototype
object <br>and then use one of them.
</p>
<p><input type="checkbox" name="Geek_1"> Geek_1</p>
<p><input type="checkbox" name="Geek_2"> Geek_2</p>
<p><input type="checkbox" name="Geek_3"> Geek_3</p>
<p><input type="checkbox" name="Geek_4"> Geek_4</p>
<script>
jQuery.fn.extend({
Gfg1: function () {
return this.each(function () {
this.checked = true;
});
},
Gfg2: function () {
return this.each(function () {
this.checked = false;
});
}
});
// Use the newly created .Gfg1() method
$("input[type='checkbox']").Gfg1();
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA