¿Qué es jQuery?
jQuery es una biblioteca de JavaScript de código abierto y rica en funciones, diseñada para simplificar el recorrido y la manipulación de documentos HTML, el manejo de eventos, la animación y Ajax con una API fácil de usar que admite múltiples navegadores. Facilita la interacción entre el documento HTML y CSS, el modelo de objeto del documento (DOM) y JavaScript. Con la ayuda de jQuery, las múltiples líneas de código se pueden envolver en métodos que, a su vez, se pueden llamar con una sola línea de código para realizar una tarea en particular. Esto, a su vez, jQuery facilita el uso de Javascript en el sitio web, además de mejorar el rendimiento general del sitio web.
¿Qué es la hoja de trucos de jQuery?
La hoja de trucos de jQuery le dará ideas rápidas relacionadas con temas como selectores, atributos, manipulación, desplazamiento, eventos, efectos y muchos más, lo que le proporcionará una idea general de jQuery con una implementación básica. El propósito de la Hoja de trucos es brindarle el contenido de un vistazo con algunos fragmentos de código rápidos y precisos listos para usar que lo ayudarán a crear una página web completamente funcional.
Tabla de contenidos
Conceptos básicos de jQuery: jQuery es una biblioteca Javascript liviana y rica en funciones que ayuda a simplificar la complejidad general del código mediante la implementación de selectores, atributos, eventos, efectos, etc., con el uso de la API requerida para realizar la tarea en particular.
Enlace CDN:
<secuencia de comandos src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></secuencia de comandos>
jQuery
<!DOCTYPE html>
<html>
<head>
<!-- CDN link of jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic Example code -->
<script>
$(document).ready(function() {
$("h1").hover(function() {
$(this).css("color", "green");
}, function() {
$(this).css("color", "aliceblue");
});
});
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
</center>
</body>
</html>
Selectores de jQuery : El selector en jQuery es una función que selecciona Nodes, es decir, elementos del modelo de objeto del documento. En palabras simples, es una función que se usa para seleccionar/manipular uno o más elementos HTML usando jQuery. La lista de selectores con su descripción básica y sintaxis se proporciona a continuación:
Selectores |
Descripción |
Sintaxis |
|---|---|---|
|
Selecciona todos los elementos del documento, incluidos HTML, cuerpo y encabezado. |
ps |
|
|
Especifica la clase de un elemento a seleccionar. |
$(“.clase”) |
|
|
Se utiliza para seleccionar y modificar elementos HTML en función del nombre del elemento. |
$(“nombre_elemento”) |
|
|
Especifica una identificación para que un elemento sea seleccionado. |
$(“#id”) |
|
|
Selecciona elementos ocultos para trabajar. |
$(“:oculto”) |
|
|
Se utiliza para seleccionar todos los elementos que están actualmente visibles en el documento. |
$(“:visible”) |
|
|
Este selector se utiliza para seleccionar todos los elementos que son hijos directos de su elemento principal. |
(“padre > hijo”) |
|
|
Este selector selecciona todos los elementos que son descendientes de un elemento específico (padre). |
$(“padre descendiente”) |
|
|
Este es un método incorporado en jQuery que se usa para cambiar el estado del elemento con estilo CSS. |
(selector).animate({estilos}, para1, para2, para3); |
|
|
Se utiliza para seleccionar el primer elemento del tipo especificado. |
$(“:primero”) |
|
|
Se utiliza para seleccionar el último elemento del tipo especificado. |
$(“:último”) |
|
|
Se utiliza para seleccionar un índice de número par de los elementos. |
$(“:par”) |
|
|
Se utiliza para seleccionar un índice de número impar de los elementos. |
$(“:impar”) |
|
|
Se utiliza para seleccionar elementos de entrada. Este selector también se usa con el elemento de botón. |
$(“:entrada”) |
|
|
Su selector selecciona elementos de botón y elementos de entrada con type=”button”. |
$(“:botón”) |
|
|
Se utiliza para seleccionar todos los elementos que son el padre de otro elemento, incluidos los Nodes de texto. |
$(“:padre”) |
|
|
Se utiliza para seleccionar elementos que contienen la string especificada. |
$(“:contiene(texto)”) |
|
|
Se utiliza para seleccionar cada elemento que es el primer hijo de su padre. |
$(“:primer hijo”) |
|
|
Selecciona todos los elementos que son el enésimo hijo de su padre. |
$(“Elemento:nth-child(Índice/par/impar/ecuación)”) |
|
|
Se utiliza para seleccionar cada elemento que no tiene el atributo y el valor especificados. |
$(“[atributo!=’valor’]”) |
|
|
Se utiliza para seleccionar todos los elementos que son hermanos del elemento especificado. |
(«elemento ~ hermanos») |
|
|
Este selector se utiliza para seleccionar el elemento «siguiente» justo del «elemento» especificado. |
$(“elemento + siguiente”) |
jQuery
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("*").css("background-color", // Universal(*)
"green");
$(".geeks").css("font-family", "sans-serif"); // class
$("#w1:parent").css("color", "white"); // parent
$("h4:contains(Course)").css("font-family", "cursive"); // contains
});
$(document).ready(function() {
$("button").click(function() { // element
$("ul").toggle();
});
});
$(document).ready(function() {
$("#wrap").css("font-weight", "bold"); // id
});
$(document).ready(function() {
$("h1:hidden").show(1000); // hidden
});
$(document).ready(function() {
$("a:visible").css( // visible
"color", "aqua");
});
$(document).ready(function() {
$("div > span").css( // parent > child
"background-color", "violet");
});
$(document).ready(function() {
$("div span").css("color", // ancestor-descendant
"white");
});
$(document).ready(function() {
$("#btn1").click(function() {
$("#box").animate({ // animate
width: "300px"
});
$("#box").animate({
height: "300px"
});
});
});
$(document).ready(function() {
$("#lid:first").css( // first
"font-size", "large").css("list-style-type", "none");
$("#lid2:last").css("color", "white"); // last
});
$(document).ready(function() {
$("tr:even").css("font-family", // even
"Times New Roman");
$("tr:odd").css("color", // odd
"white");
});
$(document).ready(function() {
var allInputs = $(":input"); // input
$("#GFG").text("Found "
+ allInputs.length
+ " elements selected.");
$("#clkbtn").css("font-weight", "bold"); // button
});
$(document).ready(function() {
$("h4:first-child").css( // first-child
"color", "white");
$("h4[id!='sid2']").css( // [attribute!=value]
"color", "white");
});
$(document).ready(function() {
$("h5:nth-child(2n-1)").css("font-family", // :nth-child()
"system-ui");
$(document).ready(function() {
$("div ~ h5").css("color", "blue"); // element ~ siblings
});
$("div + h4").css("word-spacing", // element + next
"15px");
});
</script>
<style>
#box {
width: 100px;
height: 100px;
border: 2px solid black;
}
</style>
</head>
<body class="geeks">
<h1 style="display:none;">
jQuery Universal(*) Selector
</h1>
<h4>Course List:</h4>
<ul type="circle">
<li id="w1">jQuery Parent Selector</li>
<li>Web Technology</li>
<li>Data Structures & Algorithms</li>
<li>Apttitude & Reasoning Course</li>
</ul>
<p id="wrap">jQuery id Selector</p>
<a href="https://www.geeksforgeeks.org/">
Click Here
</a>jQuery visible Selector
<br>
<button>Click me to hide</button>
<br>
<div style="border:1px solid pink;">
<p>GeeksforGeeks
<br>
<span>
jQuery parent > child Selector
</span>
</p>
</div>
<br>
<div style="border:1px solid pink;">
<p>GeeksforGeeks</p>
<span>
jQuery parent > child Selector
</span>
</div>
<hr>
<div id="box">jQuery Animate Selector</div>
<br>
<button id="btn1">
Click Here !
</button>
<hr>
<ol>
<li id="lid">jQuery first Selector</li>
<li>jQuery selectors</li>
<li id="lid2">jquery Last Selectors</li>
</ol>
<hr>
<table border="1">
<tr>
<th>Company</th>
<th>Country</th>
</tr>
<tr>
<td>reliance</td>
<td>India</td>
</tr>
<tr>
<td>flipkart</td>
<td>India</td>
</tr>
<tr>
<td>walmart</td>
<td>American</td>
</tr>
</table>
<hr>
<input type="text"
value="jQuery input Selector">
<button id="clkbtn"
type="button">
button Selector
</button>
<br>
<select>
<option>Option</option>
</select>
<textarea></textarea>
<h4 id="GFG"></h4>
<hr>
<div>
<h4 id="sid">GeeksforGeeks</h4>
<h4 id="sid2">Learning Platform</h4>
<h4>First Child Selector</h4>
</div>
<hr>
<h5>GeeksforGeeks</h5>
<h5>GeeksforGeeks</h5>
<h5>GeeksforGeeks</h5>
<h5>GeeksforGeeks</h5>
</body>
</html>
Métodos jQuery: los métodos en jQuery se pueden utilizar para establecer o devolver los atributos DOM para los elementos específicos. La lista de métodos con su descripción y sintaxis se proporciona a continuación:
Métodos |
Descripciones |
Sintaxis |
|---|---|---|
| .apuntalar() |
Este es un método incorporado en jQuery que se usa para establecer o devolver propiedades y valores para los elementos seleccionados. |
$(selector).prop(parámetros) |
| .removeAttr() |
Este es un método incorporado en jQuery que se usa para eliminar uno o más atributos de los elementos seleccionados. |
$(selector).removeAttr(atributo) |
| .removeProp() |
Este es un método incorporado en jQuery que se usa para eliminar la propiedad establecida por el método prop(). |
$(selector).removeProp(propiedad) |
| .val() |
Este es un método incorporado en jQuery que se usa para devolver o establecer el valor del atributo para los elementos seleccionados. |
$(selector).val() |
| .removeData() |
Este es un método incorporado en jQuery que se utiliza para eliminar los datos que se establecieron previamente con el método data(). |
$(selector).removeData(argumentos); |
| jQuery.datos() |
Este es un método incorporado en jQuery que se usa para adjuntar datos u obtener datos para los elementos seleccionados. |
$(selector).datos(parámetros); |
| jQuery.hasData() |
Se utiliza para determinar si un elemento tiene datos jQuery asociados. |
jQuery.hasData(elemento) |
| .altura() |
Este es un método incorporado que se usa para verificar la altura de un elemento, pero no verificará el relleno, el borde y el margen del elemento. |
$(“parámetro”).altura() |
| .innerHeight() |
Se utiliza para comprobar la altura interior del elemento, incluido el relleno. |
$(“parámetro”).innerHeight() |
| .alturaexterior() |
Esto se usa para encontrar la altura exterior del elemento especificado, que incluye el relleno y el borde de un elemento. |
$(selector).outerHeight(includeMargin) |
| .ancho() |
Esta es una función incorporada en JavaScript que se usa para verificar el ancho de un elemento. |
$(“parámetro”).ancho() |
| .innerWidth() |
Este método establece o devuelve el ancho interior del elemento incluye relleno. |
$(“parámetro”).innerWidth() |
| .outerWidth() |
Este método se utiliza para devolver el valor del ancho exterior de un elemento que incluye borde y relleno. |
$(selector).outerWidth(incluye margen) |
| .css() |
Este método se utiliza para cambiar la propiedad de estilo del elemento seleccionado. |
$(selector).css(propiedad) |
| .addClass() |
Este es un método incorporado en jQuery que se usa para agregar más propiedades a cada elemento seleccionado. |
$(selector).addClass(nombreDeClase); |
| .removeClass() |
Este es un método incorporado en jQuery que se usa para eliminar uno o más nombres de clase del elemento seleccionado. |
$(selector).removeClass(nombre_de_clase, función(índice, nombre_de_clase_actual)) |
| .hasClass() |
Este es un método incorporado en jQuery que verifica si los elementos con el nombre de clase especificado existen o no. |
$(selector).hasClass(nombreDeClase); |
| .toggleClass() |
Este es un método incorporado en jQuery que se usa para alternar o cambiar la clase que se adjunta con el elemento seleccionado. |
$(selector).toggleClass(clase, función, interruptor) |
| .scrollTop() |
Este es un método incorporado en jQuery que se usa para devolver la posición superior vertical de la barra de desplazamiento. |
$(selector).scrollTop(posición) |
| .desplazarse hacia la izquierda() |
Este es un método incorporado en jQuery que se usa para devolver o establecer la posición horizontal de la barra de desplazamiento. |
$(selector).scrollLeft(posición) |
jQuery
<!DOCTYPE html>
<html>
<head>
<script
src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
var $x = $("i");
$x.prop("color", "green");
$x.append("<br> Property is color and its value: "
+ $x.prop("color")); // prop()
});
});
$(document).ready(function() {
$("#btn2").click(function() {
$("p").removeAttr("style"); // removeAttr()
});
});
$(document).ready(function() {
$("#btn3").click(function() {
var $GFG = $("#division3");
$GFG.prop("color", "green");
$GFG.append("<br>The value of color: "
+ $GFG.prop("color"));
$GFG.removeProp("color"); // removeProp()
$GFG.append("<br>The value of color after removeProp: "
+ $GFG.prop("color") + "<br>");
});
});
$(document).ready(function() {
$("#btn4").click(function() {
$("input:text").val("GeeksforGeeks!"); // val()
$("input:text").css("color", "green");
$("input:text").css("font-size", "40px"); // css()
$("input:text").css("font-weight", "bold");
$("input:text").css("font-family", "times new roman");
});
});
$(document).ready(function() {
$("#b1").click(function() {
// jQuery.data()
$("#division5").data("greeting", "Hello Everyone !");
alert("GeeksforGeeks says : " + $("#division5").
data("greeting"));
});
$("#b2").click(function() {
$("#division5").removeData("greeting"); // removeData()
alert("Greeting is: " + $("#division5").
data("greeting"));
});
});
$(document).ready(function() {
$("#btn7").click(function() {
var msg = "";
msg += "jQuery height() Method<br>height of div: "
+ $("#demo").height(); // height()
$("#demo").html(msg);
});
});
$(document).ready(function() {
$("#btn8").click(function() {
var msg = "";
msg += "InnerHeight() Method<br>Inner Height of div: " + $("#demo").
innerHeight() + "</br>"; // innerHeight()
$("#demo2").html(msg);
});
});
$(document).ready(function() {
$("#btn9").click(function() {
alert("Outer height of div: "
+ $("div").outerHeight()); // outerHeight()
});
});
$(document).ready(function() {
$("#btn10").click(function() {
var msg = "";
msg += "width() Method<br>Width of div: "
+ $("#demo3").width(); // width()
$("#demo3").html(msg);
});
});
$(document).ready(function() {
$("b").click(function() {
document.getElementById("try").innerHTML = "innerWidth = "
+ $("#division6").innerWidth(); // innerWidth()
});
});
$(document).ready(function() {
$("#btn12").click(function(){
alert("Outer width of div: "
+ $("div").outerWidth(true)); // outerWidth()
});
});
$(document).ready(function() {
$("p").click(function() {
$("p").removeClass(); // removeClass()
});
});
$(document).ready(function() {
$("#btn13").click(function() {
alert($("p").hasClass("find")); // hasClass()
});
});
$(document).ready(function() {
$("#geek_btn").click(function() {
$("section").toggleClass("style1"); // toggleClass()
});
});
$(document).ready(function() {
$("#btnClick").click(function() {
alert($("main").scrollTop() + " px"); // scrollTop()
});
});
$(document).ready(function() {
$("#btnCheck").click(function() {
$("aside").scrollLeft(100);
});
});
</script>
<style>
#division1 {
width: 250px;
padding: 10px;
height: 130px;
border: 2px solid green;
}
#division2 {
width: 300px;
min-height: 250px;
border: 2px solid green;
padding: 20px;
text-align:center;
}
#division3 {
width: 400px;
min-height: 60px;
padding: 15px;
border: 2px solid green;
margin-bottom: 10px;
}
#division4 {
background-color: lightgreen;
padding: 20px;
width: 41%;
min-height: 150px;
border: 2px solid green;
}
input {
border: 2px solid green;
padding-left: 15px;
width: 350px;
height: 80px;
}
#b1,
#b2 {
padding: 10px;
margin: 20px;
background-color: green;
}
#demo, #demo2, #demo3{
height: 150px;
width: 350px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightgreen;
}
.geeks {
height: 80px;
width: 200px;
padding: 5px;
margin: 5px;
border: 2px solid black;
background-color: green;
text-align: center;
}
.contain {
height: 200px;
width: 350px;
padding: 20px;
margin: 3px;
border: 3px solid green;
background-color: lightgreen;
}
em {
margin: 8px;
font-size: 35px;
}
.selected {
color:auqa ;
display: block;
border: 2px solid green;
width: 160px;
height: 60px;
background-color: lightgreen;
padding: 20px;
}
.GFG_Stuff {
font-size: 25px;
color: green;
font-weight: bold;
/* font-size: 35px; */
}
#stuff {
width: 300px;
height: 200px;
padding: 20px;
border: 2px solid green;
}
.find {
font-size: 120%;
color: green;
}
#division7 {
width: 50%;
height: 200px;
border: 2px solid green;
padding: 20px;
}
.style1{
font-size: 25px;
background-color: yellow;
min-height:120px;
}
section {
width: 200px;
min-height: 120px;
background-color: lightgreen;
padding: 20px;
font-weight: bold;
font-size: 20px;
}
main, aside {
border: 1px solid black;
width: 100px;
height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<div id="division1">
<i>Jquery Prop()</i>
<br><br>
<button id="btn1">Click Here!</button>
</div>
<hr>
<div id="division2">
<h6>JQuery removeAttr() Method</h6>
<p style="font-size:35px;
font-weight:bold;
color:green;">
Welcome to
</p>
<p style="font-size:35px;
font-weight:bold;
color:green;">
GeeksforGeeks!.
</p>
<button id="btn2">Click Here!</button>
</div>
<hr>
<div id="division3">
jQuery removeProp() Method
</div>
<button id="btn3">Click Here!</button>
<hr>
<div id="division4">
jQuery val() & css() Methods
<p>
<input type="text" name="user">
</p>
<button id="btn4">Click Here!</button>
</div>
<hr>
<h6>JQuery removeData() & data() Method</h6>
<button id="b1">Click here to add data to
div element</button>
<br>
<button id="b2">Click here to Remove data
from div element</button>
<div id="division5"></div>
<hr>
<p id="GFG_UP"></p>
<h3>This is Heading 3</h3>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN"></p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var $h3 = jQuery( "h3" ), h3 = $h3[ 0 ];
el_up.innerHTML = "JQuery | hasData() method";
$h3.on( "click", function() {} );
function Geeks() {
el_down.innerHTML = jQuery.hasData(h3); // hasData()
}
</script>
<hr>
<div id="demo"></div>
<button id="btn7">Click Me!!!</button>
<h6>
Click on the button and check the
height of the element(excluding padding).
</h6>
<hr>
<div id="demo2"></div>
<button id="btn8">Click Me!!!</button>
<h6>
Click on the button and check
the innerHeight of an element
(includes padding).
</h6>
<hr>
<div class="geeks">
GeeksforGeeks
</div>
<button id="btn9">
Click Here to display outer height
</button>
<hr>
<div id="demo3"></div>
<button id="btn10">Click Me!!!</button>
<p>
Click on the button and check
the width of the element (excluding padding).
</p>
<hr>
<h3>innerWidth() Method</h3>
<div id="division6" style="height: 100px;
width: 200px;
background-color: blue">
</div>
<b>Click here to know innerWidth</b><br>
<b id="try"></b>
<hr>
<h5>
Outerwidth() Method
</h5>
<button id="btn12">outerwidth</button>
<div class="contain"></div>
<hr>
<em>GeeksforGeeks</em>
<em>jQuery</em>
<em>addClass() Method</em>
<script>
$("em").last().addClass("selected"); // addClass()
</script>
<hr>
<div id="stuff">
<p class="GFG_Stuff">Welcome to GeeksforGeeks!</p>
<p class="GFG_Stuff">jQuery removeClass() Method</p>
</div>
<hr>
<div id="division7">
<h1>Heading 1</h1>
<p class="find">GeeksforGeeks !.</p>
<p>This is hasClass() Method</p>
<button id="btn13">Click me!</button>
</div>
<hr>
<section>
<p>JQuery toggle() Method</p>
<p>Welcome to GeeksforGeeks.!</p>
<button id="geek_btn">Click Here!</button>
</section>
<hr>
<h6>jQuery scrollTop() method</h6>
<main>
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
</main>
<br>
<button id="btnClick">Click Here !</button>
<hr>
<h6>jQuery scrollLeft() Method</h6>
<aside>
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
Welcome to GeeksforGeeks!. Welcome to GeeksforGeeks!.
</aside>
<br>
<button id="btnCheck">Click Here !</button>
</body>
</html>
Manipulación de jQuery: los diferentes tipos de métodos en jQuery se pueden usar para manipular el DOM. Estos métodos se pueden clasificar de 2 maneras, a saber:
- Establecedores: en este caso, algunos tipos de métodos se pueden usar para simplemente cambiar los atributos de un elemento, mientras que otros tipos de métodos establecen las propiedades de estilo del elemento. Todavía hay algunos otros tipos de métodos que se pueden usar para modificar elementos completos o grupos de elementos, insertando, copiando, eliminando, etc., para cambiar los valores de las propiedades.
- Captadores: en este caso, algunos de los métodos que actúan como captadores, como .attr(), .html() y .val() , etc., se pueden utilizar para recuperar la información de los elementos DOM para su uso posterior.
La lista de métodos utilizados para manipular el DOM se proporciona a continuación:
Métodos |
Descripciones |
Sintaxis |
|---|---|---|
| .adjuntar() |
Se utiliza para insertar algún contenido al final de los elementos seleccionados. |
$(selector).append(contenido, función(índice, html) ) |
| .appendTo() |
Es un método incorporado en jQuery que se usa para insertar un elemento HTML al final del elemento seleccionado. |
$(contenido).appendTo(selector) |
| .html() |
Se utiliza para establecer o devolver el contenido HTML interno del elemento seleccionado. |
$(selector).html(función(índice, contenido actual)) |
| .prependTo() |
Es un método incorporado en jQuery que se usa para insertar elementos HTML o algún contenido al comienzo del elemento seleccionado. |
$(contenido).prepend(selector) |
| .texto() |
Se utiliza para establecer o devolver el contenido de texto del elemento. |
$(selector).texto(función(índice, contenido actual)) |
| .clon() |
Es un método incorporado en jQuery que se usa para hacer una copia de los elementos seleccionados, incluidos sus Nodes secundarios, texto y atributos. |
$(selector).clonar() |
| .insertarAntes() |
Es un método incorporado en jQuery que se usa para insertar contenido HTML antes de un elemento específico. |
$(contenido).insertarAntes(objetivo) |
| .insertarDespués() |
Se utiliza para insertar algún contenido HTML después de un elemento específico. |
$(contenido).insertAfter(objetivo) |
| .despegar() |
Es un método incorporado en jQuery que elimina los elementos seleccionados del árbol DOM, incluido todo el texto y los Nodes secundarios, pero conserva los datos y los eventos. |
$(selector).separar() |
| .vacío() |
Es un método incorporado en jQuery que se usa para eliminar todos los Nodes secundarios y su contenido para los elementos seleccionados. |
$(selector).vacío() |
| .retirar() |
Se utiliza para eliminar todos los elementos seleccionados, incluido todo el texto. |
$(selector).remove() |
| .reemplazar con() |
Es un método incorporado en jQuery que se usa para reemplazar el elemento seleccionado con el nuevo. |
$(selector).replaceWith(contenido, función) |
| .envolverTodo() |
Es un método incorporado en jQuery que se usa cuando el elemento especificado se ajustará a todos los elementos seleccionados. |
$(selector).wrapAll(envolver_elemento) |
jQuery
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to append content -->
<script>
$(document).ready(function () {
$("#btn2").click(function () {
$("ol").append("<li>Append Gfg</li>"); // append()
});
});
$(document).ready(function () {
$("#btn4").click(function () {
$("<span>jQuery </span>").prependTo("#pid");// prependTo()
});
});
$(document).ready(function () {
$("#btn6").click(function () {
$("i").text(function (n) { // text()
return "Index No. of Element: " + n;
});
});
});
$(document).ready(function () {
$("#division3").click(function () {
// insertBefore()
$("<p>You should follow GeeksforGeeks</p>").insertBefore("#pid5");
});
});
$(document).ready(function () {
$("#division5").click(function () {
// insertAfter
$("<p>You should follow GeeksforGeeks</p>").insertAfter("#pid7");
});
});
$(document).ready(function() {
$("#btn9").click(function() {
$("h4").detach(); // detach()
});
});
$(document).ready(function() {
$("#btn12").click(function() {
$("article").empty(); // empty()
});
});
$(document).ready(function() {
$("#btnchk1").click(function() {
$("#pid10").remove(); // remove()
});
});
$(document).ready(function() {
$("#wrapBtn").click(function() {
$("#wrapContent").wrapAll("<h3></h3>"); // wrapAll()
});
});
</script>
<style>
#hel {
background: lightgreen;
display: block;
border: 2px solid green;
padding: 10px;
width: 300px;
}
#division1 {
width: 350px;
min-height: 180px;
font-weight: bold;
padding: 20px;
font-size: 25px;
border: 2px solid green;
}
main{
display: block;
width: 400px;
height: 250px;
padding: 20px;
border: 2px solid green;
font-size: 25px;
}
#paragraph {
width: 200px;
height: 100px;
margin: 10px;
padding: 20px;
background-color: lightgreen;
font-weight: bold;
font-size: 20px;
}
.btnchange {
display: block;
margin: 10px;
color: red;
width: 200px;
padding: 3px;
}
h5 {
color: green;
border: 2px solid green;
width: 200px;
margin: 3px;
padding: 5px;
font-size: 20px;
text-align: center;
}
h3 {
background-color: lightgreen;
padding: 20px;
width: 200px;
font-weight: bold;
height: 60px;
border: 2px solid green;
}
</style>
</head>
<body>
<h1 style="margin-left: 150px;">Geeks</h1>
<p>GeeksforGeeks</p>
<p>jQuery append() Method</p>
<ol>
<li>Gfg 1</li>
<li>Gfg 2</li>
<li>Gfg 3</li>
</ol>
<button id="btn2">Append Gfg</button>
<hr>
<span>appendTo() Method</span>
<div id="hel">jQuery </div>
<script>
$("span").appendTo("#hel"); // appendTo()
</script>
<hr>
<h2>
jQuery html() Method
</h2>
<button id="btnclk">Click</button>
<script>
$(document).ready(function () {
$("#btnclk").click(function () {
$("h2").html("Hello <b>GEEKS!</b>"); // html()
});
});
</script>
<hr>
<p id="pid">prependTo() Method</p>
<button id="btn4">Click Here!</button>
<hr>
<i>GeeksforGeeks</i>
<i>jQuery text() Method</i>
<button id="btn6">Click me</button>
<hr>
<script>
$(document).ready(function () {
$("#btn7").click(function () {
$("em").clone().appendTo("section"); // clone()
});
});
</script>
<section>
<em>jQuery </em>
<em>clone() Method</em>
<button id="btn7">Click Me!</button>
</section>
<hr>
<p id="pid5">To learn jQuery insertBefore() Method </p>
<div id="division3">Click here to complete</div>
<hr>
<p id="pid7">To learn jQuery insertAfter() Method </p>
<div id="division5">Click here to complete</div>
<hr>
<main>
<div> This is the div part !</div>
<br>
<h4>jQuery detach() Method</h4>
<h4>This is the heading tag</h4>
<button id="btn9">Click Me</button>
</main>
<hr>
<article>
<p id="paragraph">jQuery <span> empty() Method</span>.</p>
<button id="btn12">Click here</button>
</article>
<hr>
<p id="pid10">jQuery remove() Method</p>
<button id="btnchk1">Click</button>
<hr>
<button class="btnchange">Geeks</button>
<button class="btnchange">for</button>
<button class="btnchange">Geeks</button>
<script>
$(".btnchange").click(function() {
$(this).replaceWith("<h5>" + $(this).text() + "</h5>"); // replaceWith()
});
</script>
<hr>
<p id="wrapContent">jQuery wrapAll() Method<br><br>
<button id="wrapBtn">Click Here!</button>
</p>
</body>
</html>
jQuery Traversing : en jQuery, atravesar significa moverse a través o sobre los elementos HTML para buscar, filtrar o seleccionar un elemento en particular o completo. Según el recorrido, a continuación se proporciona la lista de los siguientes métodos:
Métodos |
Descripciones |
Sintaxis |
|---|---|---|
| .niños() |
Es un método incorporado en jQuery que se usa para encontrar todos los elementos secundarios relacionados con ese elemento seleccionado. |
$(selector).niños() |
| .Siguiente() |
Es una función incorporada en jQuery que se usa para devolver el siguiente hermano del elemento seleccionado. |
$(selector).siguiente() |
| .más cercano() |
Es un método incorporado en jQuery que devuelve el primer ancestro del elemento seleccionado en el árbol DOM. |
$(selector).más cercano(parámetros); |
| .padre() |
Es un método incorporado en jQuery que se usa para encontrar el elemento principal relacionado con el elemento seleccionado. |
$(selector).padre() |
| .prevHasta() |
Es un método incorporado en jQuery que se usa para encontrar todos los elementos hermanos anteriores entre dos elementos dados. |
$(selector1).nextUntil(selector2) |
| .hermanos() |
Es un método incorporado en jQuery que se usa para encontrar todos los elementos hermanos del elemento seleccionado. |
$(selector).hermanos(función) |
| .primero() |
Es una función incorporada en jQuery que se usa para seleccionar el primer elemento de los elementos especificados. |
$(selector).primero() |
| .ultimo() |
Es una función incorporada en jQuery que se usa para encontrar el último elemento de los elementos especificados. |
$(selector).último() |
| .es() |
Se utiliza para comprobar si uno de los elementos seleccionados coincide con el selectorElement. |
$(selector).is(selectorElement, función(índice, elemento)) |
| .mapa() |
Se utiliza para traducir todos los elementos de una array u objeto a una nueva array de elementos. |
jQuery.map (array/objeto, devolución de llamada) |
| .filtrar() |
Se utiliza para filtrar todos los elementos que no coinciden con los criterios seleccionados y se devolverán esas coincidencias. |
$(selector).filtro(criterios, función(índice)) |
| .no() |
Es una función incorporada en jQuery que devolverá todo el elemento que no coincida con el elemento seleccionado con la «id» o «clase» particular. |
$(selector).no(A) |
| .ySelf() |
Es un método incorporado en jQuery que se usa para agregar el conjunto anterior de elementos al conjunto actual. |
y Self( )(selector); |
| .cada() |
Se utiliza para especificar la función que se ejecutará para cada elemento coincidente. |
$(selector).each(función(índice, elemento)) |
| .encontrar() |
Es un método incorporado en jQuery que se usa para encontrar todos los elementos descendientes del elemento seleccionado. |
$(selector).buscar() |
jQuery
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- CSS is used to decorate the output -->
<style>
.descendants *{
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
.next * {
display: block;
border: 2px solid lightgrey;
color: black;
padding: 5px;
margin: 15px;
}
.main *, .main_div * {
display: block;
border: 2px solid lightgrey;
color: grey;
padding: 5px;
margin: 15px;
}
.sib1 *, .sib2 * {
display: block;
border: 2px solid lightgrey;
color: black;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function() {
$(".descendants").children("p.first").css({ // children()
"color": "green",
"border": "2px solid green"
});
});
$(document).ready(function() {
$("h3").next().css({ // next()
"color": "black",
"border": "2px solid green"
});
});
$(document).ready(function() {
$("span").closest("ul").css({ // closest()
"color": "green",
"border": "2px solid green"
});
});
$(document).ready(function() {
$("#inner").parent().css({ // parent()
"color": "green",
"border": "2px solid green"
});
});
$(document).ready(function() {
$("li.start").prevUntil("li.stop").css({ // prevUntil()
"color": "black",
"border": "2px solid green"
});
});
$(document).ready(function() {
$("h2").siblings().css({ // siblings()
"color": "black",
"border": "2px solid green"
});
});
$(document).ready(function() {
$("#division1").first().css("background-color",// first()
"lightgreen");
});
$(document).ready(function(){
$("#division2").last()
.css("background-color", "lightblue"); // last()
});
$(document).ready(function() {
$("h6").click(function() {
if ($("h6").parent().is("#division3")) { // is()
alert("Parent of <h6> is <section>");
}
});
});
$(document).ready(function() {
$("li").filter("#first, #last")
.css("color", "red"); // filter()
});
$(document).ready(function() {
$("h5").not("#main_content")
.css("color", "green")
.css("font-size","25px"); // not()
});
</script>
</head>
<body>
<h3>jQuery children() Method</h3>
<div class="descendants"
style="width:500px;">
This is the current element !!!
<p class="first">
This is the first paragraph element !!!
<span>This is grandchild</span>
</p>
<p class="second">
This is the second paragraph element !!!
<span>This is grandchild</span>
</p>
</div>
<hr>
<div class="next">
This is parent element !
<p>This is first paragraph </p>
<span>first span box </span>
<h2>heading 2 !</h2>
<h3>jQuery next() Method</h3>
<p>This is the second paragraph and next
sibling to h3 !
</p>
</div>
<hr>
<div class="main" style="width:600px;">
This is great grand parent element !
<ul>
This is the second ancestor element !
<ul>
This is first ancestor element !
<li>This is direct parent !
<span>jQuery closest() Method</span>
</li>
</ul>
</ul>
</div>
<hr>
<div class="main_div">
<div style="width:500px;">
div (Great-Grandparent)
<ul>
This is the grand-parent of the
selected span element.!
<li>
This is the parent of the
selected span element.!
<span>jQuery parent() Method</span>
</li>
</ul>
</div>
</div>
<hr>
<div style="width:400px;" class="sib1">
<ul>
This is parent !!!
<li class="stop">list 1 !!!</li>
<li>jQuery prevUntil() Method</li>
<li>first list !</li>
<li>second list !</li>
<li class="start">list 5 !!!</li>
<li>other sibling</li>
<li>other sibling</li>
</ul>
</div>
<hr>
<div class="sib2">
This is parent!!!
<p>This is paragraph!!!</p>
<span>This is span box!!!</span>
<h2>jQuery siblings() Method</h2>
<h3>This is heading 3!</h3>
</div>
<hr>
<div id="division1"
style="border: 1px solid green;">
<p>jQuery first() Method</p>
</div>
<br>
<div style="border: 1px solid green;">
<p>This is the second statement.</p>
</div>
<br>
<div id="division2"
style="border: 1px solid green;">
<p>jQuery last() Method</p>
</div>
<hr>
<section id="division3">
<h6 id="pid">
jQuery is() Method - Click me to
find out if I my parent is a section
element.
</h6>
</section>
<hr>
<h3>jQuery map() method</h3>
<b>String = "GeeksforGeeks"</b>
<br>
<br>
<button onclick="geek()">Click</button>
<br>
<br>
<b id="root"></b>
<script>
function geek() {
var el = document.getElementById('root');
var name = "GeeksforGeeks";
name = name.split("");
var newName = jQuery.map(name, function(item) { // map()
return item + 'G<br>';
})
el.innerHTML = newName;
}
</script>
<hr>
<ul>
<li id="first">jQuery filter() Method</li>
<li id="middle">GeeksforGeeks</li>
<li id="last">GeeksforGeeks</li>
</ul>
<hr>
<h5 id="main_content">GeeksforGeeks.!!!</h5>
<h5>This is jQuery not() Method.</h5>
<hr>
</body>
</html>
Eventos de jQuery : el evento se refiere a las acciones realizadas por el visitante del sitio durante su interactividad con el sitio web (o página web). Un evento puede ser cualquiera de los tipos que pueden incluir los clics de botones, el movimiento del puntero del mouse sobre la imagen, cualquier tecla presionada desde el teclado, etc. La lista de los siguientes eventos con sus descripciones se proporciona a continuación:
Eventos |
Descripciones |
Sintaxis |
|---|---|---|
| .error() |
Se utiliza cuando un elemento encuentra un error que indica que el elemento no se ha cargado correctamente. También adjunta una función para ejecutar cuando ocurre un evento de error o desenstring el evento de error. |
$(selector).error() |
| .redimensionar() |
Es un método incorporado en jQuery que se usa cuando la ventana del navegador cambia de tamaño. |
$(selector).redimensionar(función) |
| .Desplazarse() |
Es un método incorporado en jQuery que se utiliza para que el usuario se desplace en el elemento especificado. |
$(selector).scroll(función) |
| .Listo() |
Es un método incorporado en jQuery que ayuda a cargar toda la página y luego ejecutar el resto del código. |
$(documento).listo(función) |
| .descargar() |
Se utiliza para realizar un evento de descarga cuando el usuario intenta navegar fuera de la página web actual. |
$(selector).descargar(función) |
| .carga() |
Es un método AJAX simple pero muy poderoso. Ayuda a cargar datos del servidor y devolverlos al elemento seleccionado sin cargar toda la página. |
$(selector).load(URL, datos, devolución de llamada); |
| .morir() |
Este método agregado con el método live() , utilizado para eliminar uno o más controladores de eventos, para elementos seleccionados. |
$(selector).die(evento, función) |
| .unir() |
Es un método incorporado en jQuery que se usa para adjuntar uno o más controladores de eventos para elementos seleccionados y este método especifica una función para ejecutar cuando ocurre un evento. |
$(selector).bind(evento, datos, función); |
| .generar() |
Es un método en jQuery que se utiliza para activar un controlador de eventos específico en el elemento seleccionado. |
$(selector).trigger(evento,parámetros) |
| .triggerHandler() |
Se utiliza para desenstringr un evento específico para el elemento seleccionado. |
$(selector).triggerHandler(evento, param1, param2, …) |
| .en() |
Es un método incorporado en jQuery que se usa para adjuntar uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios en el árbol DOM. |
$(selector).on(evento, childSelector, datos, función) |
| .apagado() |
Se utiliza para eliminar los controladores de eventos adjuntos con el método on() . |
$(selector).off(evento, selector, función(eventObj), mapa) |
| .una() |
Es un método incorporado en jQuery que adjunta uno o más controladores de eventos para el elemento seleccionado. |
$(selector).uno(evento, datos, función) |
| .desatar() |
Es un método incorporado en jQuery que se usa para eliminar cualquier controlador de eventos seleccionado. Este método se puede usar para eliminar un controlador de eventos en particular o detener funciones específicas. Funciona en cualquier controlador de eventos usando un objeto de evento. |
$(selector).unbind(evento, función, eventObj) |
| .difuminar() |
Es un método incorporado es jQuery que se usa para eliminar el foco del elemento seleccionado. |
$(selector).desenfoque(función) |
| .enfoque() |
Es un método incorporado en jQuery que se usa para enfocarse en un elemento. |
$(selector).enfoque(función) |
| .concéntrate en() |
Es un método incorporado en jQuery que se utiliza para enfocarse en el elemento seleccionado. |
$(selector).focusin(función); |
| .focusout() |
Es un método incorporado en jQuery que se usa para eliminar el foco del elemento seleccionado. |
$(selector).focusout(función); |
| .cambio() |
Es un método incorporado en jQuery que se usa para detectar el cambio en el valor de los campos de entrada. |
$(selector).cambio(función) |
| .keydown() |
Es un método incorporado en jQuery que se usa para desenstringr el evento keydown cada vez que el usuario presiona una tecla en el teclado. |
$(selector).keydown(función) |
| .presionar tecla() |
Este método en jQuery activa el evento de pulsación de tecla cada vez que el navegador registra una entrada de teclado. |
$(selector).presionar tecla() |
| .tecla Arriba() |
Es un método incorporado en jQuery que se utiliza para activar el evento keyup cada vez que el usuario suelta una tecla del teclado. |
$(selector).keyup(función) |
| .hacer clic() |
Es un método incorporado en jQuery que inicia el evento de clic o adjunta una función para ejecutar cuando ocurre un evento de clic. |
$(selector).click(función); |
| .flotar() |
Es un método incorporado en jQuery que se usa para especificar dos funciones para comenzar cuando el puntero del mouse se mueve sobre el elemento seleccionado. |
$(selector).hover(Función_entrada, Función_salida); |
| .palanca() |
Se utiliza para verificar la visibilidad de los elementos seleccionados para alternar entre ocultar() y mostrar() para los elementos seleccionados. |
$(selector).toggle(velocidad, aceleración, devolución de llamada) |
| .ratón sobre() |
Es un método incorporado en jQuery que funciona cuando el puntero del mouse se mueve sobre los elementos seleccionados. |
$(selector).mouseover(función) |
| evento.stopPropagation() |
Es un método incorporado en jQuery que se usa para detener la propagación de Windows. En el árbol DOM , al configurar un evento con el elemento secundario y el elemento principal también, si presiona el evento del elemento secundario, también llamará al elemento secundario y al elemento principal. |
evento.stopPropagation() |
| evento.preventDefault() |
Se utiliza para evitar que se produzca la acción predeterminada del elemento seleccionado. También se utiliza para comprobar si se llama al método preventDefault() para el elemento seleccionado o no. |
evento.preventDefault() |
jQuery
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
section {
width: 50%;
height: 40%;
padding: 20px;
border: 2px solid green;
font-size: 20px;
}
.main {
border:1px solid green;
padding:20px;
width:60%;
}
main {
width: 280px;
padding: 40px;
height: 30px;
border: 2px solid green;
font-weight: bold;
font-size: 20px;
}
#gfg_content {
color: green;
border: 5px solid black;
width: 200px;
text-align: center;
}
h5 {
width: 35%;
height: 90px;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 50px;
text-align: center;
}
#division4 {
border: 2px solid black;
width: 50%;
padding: 20px;
}
#intak {
padding: 5px;
margin: 10px;
}
span {
display: none;
}
#division8 {
width: 35%;
height: 50px;
border: 2px solid green;
padding: 35px;
margin: 10px;
}
.para {
margin: auto;
width: 80%;
border: 3px solid green;
padding: 10px;
text-align:justify;
}
.gfg_content1 {
font-size:40px;
color:green;
font-weight:bold;
text-align:center;
}
.geeks_content1 {
font-size:17px;
text-align:center;
}
#division15 {
width: 300px;
height: 100px;
border: 1px solid green;
text-align: center;
}
#press_id {
display: block;
padding: 50px;
width: 280px;
border: 2px solid green;
}
.gfg_style {
font-size:40px;
font-weight: bold;
color: green;
}
#div_content {
font-size: 40px;
font-weight: bold;
color: green;
}
aside {
width: 150px;
height: 150px;
padding: 20px;
border: 2px solid green;
font-size: 20px;
}
</style>
<script>
$(document).ready(function() {
$("a").click(function(event) {
event.preventDefault(); // preventDefault()
alert("The required page will not be open");
});
});
$(document).ready(function() {
$(".main").click(function() {
alert("Main div element");
});
$(".GFG").click(function(event) {
event.stopPropagation(); // stopPropagation()
alert("Nested div element");
});
$(".geeks").click(function(event) {
alert("Second nested div element");
});
});
$(document).ready(function() {
$("#pid2").mouseover(function() { // mouseover()
$("#pid2").css("color", "lightgreen");
});
});
$(document).ready(function() {
$("#btn2").click(function() {
$("#gfg_content").toggle(); // toggle()
});
});
$(document).ready(function() {
$("h5").hover(function() { // hover()
$(this).css("color", "green");
}, function() {
$(this).css("color", "yellow");
});
});
$(document).ready(function() {
$("h5").click(); // click()
});
$(document).keyup(function(event) { // keyup
alert('You released a key');
});
$(document).keypress(function(event){ // keypress
alert('You pressed a key');
});
$(document).keydown(function(event) { // keydown
alert('You pressed down a key');
});
$(document).ready(function() {
$("#btn6").click(function() {
$("input").change(); // change()
});
});
$(document).ready(function() {
$("#division4").focusin(function() { // focusin()
$(this).css("font-size", "20px");
});
$("#division4").focusout(function() { // focusout()
$(this).css("font-size", "35px");
});
});
$(document).ready(function() {
$("#blur_intak").blur(function() { // blur()
$(this).css("font-weight", "bold");
});
});
$(document).ready(function() {
$("em").one("click", function() { // one()
$(this).animate({
fontSize: "+=14px"
});
});
});
$(document).ready(function() { // ready()
$("h3").on("click", function() { // on()
$(this).css("font-size", "25px");
});
$("#btn12").click(function() {
$("h3").off("click"); // off()
});
});
$(document).ready(function() {
$("#press_id").bind("click", function() { // bind()
alert("Given paragraph was clicked.");
});
});
$(document).ready(function(){
$("#chngtxt").click(function(){
$("#div_content").load("demo.txt"); // load()
});
});
x = 0;
$(document).ready(function() {
$(window).resize(function() { // resize()
$("#chngnum").text(x += 1);
});
});
</script>
</head>
<body>
<section>
<a href=
"https://www.geeksforgeeks.org/jquery-event-preventdefault-method/">
jQuery event.preventDefault() Method
</a>
</section>
<hr>
<div class="main">
GeeksforGeeks
<div class="GFG">
A computer science portal
<div class="geeks">
jQuery event.stopPropagation() Method
</div>
</div>
</div>
<hr>
<main>
<p id="pid2">jQuery mouseover() Method</p>
</main>
<hr>
<div id="gfg_content">jQuery toggle() Method</div>
<button id="btn2">
Click to hide() and show() the above div
</button>
<hr>
<h5 onclick="alert('heading was clicked')">
jQuery hover() & click() Method
</h5>
<hr>
<i id="press">
jQuery keyup(), keypress(), Keydown() Method
</i>
<hr>
<b>jQuery change() Method</b>
Enter value:
<input value="Donald" onchange="alert(this.value)"
type="text">
<button id="btn6">Click Me!</button>
<hr>
<div id="division4">
<h6>jQuery focusout() & focusin() Method</h6>
Enter name:
<input id="intak" type="text">
<br>
</div>
<hr>
<div id="division8">
<h6>jQuery focus() Method</h6>
<p>
<input id="infocus" type="text">
<span>focused</span>
</p>
</div>
<script>
$("#infocus").focus(function() { // focus()
$(this).next("span").css("display", "inline");
});
</script>
<hr>
<div id="division12">
<h6>jQuery blur() Method</h6>
Enter Value:
<input id="blur_intak"
type="text"
name="fullname">
</div>
<hr>
<h1 style = "color:green;" >
jQuery unbind() Method
</h1>
<button id="btn8">
Click Here
</button>
<script>
$(document).ready(function() {
$("h1").click(function() {
$(this).slideToggle();
});
$("#btn8").click(function() {
$("h1").unbind(); // unbind()
});
});
</script>
<hr>
<div class = "para">
<h6>jQuery one() Method</h6>
<div class = "gfg_content1">
GeeksforGeeks
</div>
<div class = "geeks_content1">
A computer science portal for geeks
</div>
<em>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course.
</em>
<em>
An extensive Online Test Series for GATE 2019
to boost the preparation for GATE 2019 aspirants.
Test series is designed considering the pattern
of previous years GATE papers and ensures to
resemble with the standard of GATE.
</em>
</div>
<hr>
<h3>jQuery off(), on() & ready() Method</h3>
<button id="btn12">
Click to remove event handler
</button>
<hr>
<h4 style = "color:green;" >
GeeksforGeeks
</h4>
<h6>jQuery triggerHandler() Method</h6>
<input id="clk"
type="text"
value="HELLO GEEKS">
<br><br>
<button id="btnchk">Click</button>
<script>
$(document).ready(function(){
$("#clk").select(function(){
$("#clk").after(" TRIGGERED!");
});
$("#btnchk").click(function(){
$("#clk").triggerHandler("select"); // triggerHandler()
});
});
</script>
<hr>
<div id="division15">
<input id="change" type="text"
placeholder="Input text..."/>
<br/>
<strong>
jQuery trigger() Method -
click anywhere inside div to
focus input element.
</strong>
</div>
<script>
$(document).ready(function() {
$("#division15").click(function() {
$("#change").trigger("focus"); // trigger()
})
});
</script>
<hr>
<p id="press_id">
jQuery bind() Method - Click Me
</p>
<hr>
<div id="div_content">
<div class = "gfg_style">
jQuery load() Method
</div>
</div>
<button id="chngtxt">Change Content</button>
<hr>
<aside>
jQuery resize() Method
<br>
<p id="chngnum">0</p>
times.
</aside>
</body>
</html>
Efectos jQuery : existen varias técnicas a través de las cuales se puede implementar la animación en una página web, las cuales son facilitadas por la biblioteca jQuery. Estos pueden incluir animaciones simples o estándar para personalizar con sofisticados efectos personalizados. Hay varios efectos jQuery que se pueden implementar para personalizar el efecto, que se enumeran a continuación:
Efectos |
Descripciones |
Sintaxis |
|---|---|---|
| .ocultar() |
Es un método incorporado en jQuery que se utiliza para ocultar el elemento seleccionado. |
$(selector).hide(duración, aceleración, call_function); |
| .mostrar() |
Este método en jQuery se usa para mostrar los elementos ocultos y seleccionados. |
$(selector).show(velocidad, aceleración, devolución de llamada) |
| .palanca() |
Se utiliza para verificar la visibilidad de los elementos seleccionados para alternar entre ocultar() y mostrar() para los elementos seleccionados. |
$(selector).toggle(velocidad, aceleración, devolución de llamada) |
| .animar() |
Es un método incorporado en jQuery que se usa para cambiar el estado del elemento con estilo CSS. |
(selector).animate({estilos}, para1, para2, para3); |
| .demora() |
Es un método incorporado en jQuery que se usa para configurar un temporizador para retrasar la ejecución del siguiente elemento en la cola. |
$(selector).delay(para1, para2); |
| .finalizar() |
Es un método incorporado en jQuery que se utiliza para detener la ejecución de las animaciones en este momento. |
$(selector).finish(); |
| .clearQueue() |
Este método elimina todos los elementos de la cola que aún no se han ejecutado. Tenga en cuenta que cuando una función ha comenzado a ejecutarse, se ejecuta hasta que se completa. |
$(selector).clearQueue(nombre); |
| .dequeue() |
Es un método incorporado en jQuery que se usa para eliminar la siguiente función de la cola y luego ejecutará la función. |
$(selector).dequeue(nombre); |
| .fundirse() |
Este método se utiliza para cambiar la opacidad de los elementos seleccionados de ocultos a visibles. Los elementos ocultos no se mostrarán. |
$(selector).fadeIn(velocidad, aceleración, devolución de llamada) |
| .desaparecer() |
Este método en jQuery se usa para cambiar el nivel de opacidad del elemento seleccionado de visible a oculto. |
$(selector).fadeOut(velocidad, aceleración, devolución de llamada) |
| .desvanecerse hacia() |
Este es un método incorporado en jQuery que se usa para cambiar la opacidad del elemento seleccionado. |
$(selector).fadeTo(velocidad, opacidad, aceleración, call_function) |
| .fadeToggle() |
Este método en jQuery alterna entre los métodos fadeIn() y fadeOut(). |
$(selector).fadeToggle(velocidad, aceleración, devolución de llamada) |
| .cola() |
Este método es un método incorporado en jQuery que se utiliza para mostrar la cola de funciones que se ejecutarán en los elementos seleccionados. |
$(selector).cola(nombre_cola) |
| .deténgase() |
Este método es un método incorporado en jQuery que se usa para detener las animaciones que se están ejecutando actualmente para el elemento seleccionado. |
$(selector).stop(stopAll, goToEnd); |
jQuery
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function() {
$(".b1").click(function() {
$("h3").hide();
});
});
$(document).ready(function() {
$("#btn1").click(function() {
$("#gfg_toggle").toggle();
});
});
$(document).ready(function() {
$("#b1").click(function() {
$("#box").animate({
width: "300px"
});
$("#box").animate({
height: "300px"
});
});
});
$(document).ready(function() {
$("#btn3").click(function() {
$("#d1").delay("slow").fadeIn();
$("#d2").delay("fast").fadeIn();
$("#d3").delay(1000).fadeIn();
$("#d4").delay(4000).fadeIn();
});
});
$(document).ready(function() {
$("#b12").click(function() {
$("#division5").animate({
height: 200
}, 4000);
$("#division5").animate({
width: 200
}, 4000);
});
$("#b22").click(function() {
$("#division5").finish();
});
});
$(document).ready(function() {
$(".clk1").click(function() {
$(".pid").animate({
borderRightWidth: "5px"
});
$(".pid").animate({
borderTopWidth: "5px"
});
$(".pid").animate({
borderLeftWidth: "5px"
});
$(".pid").animate({
borderBottomWidth: "5px"
});
});
$(".clk2").click(function() {
$(".pid").clearQueue();
});
});
$(document).ready(function() {
$("#btnclk").click(function() {
$("#pid7").fadeTo(2000, 0.2, function() {
alert("The fadeTo effect has finished!");
});
});
});
</script>
<style>
#division1 {
width: 50%;
height: 80px;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 30px;
}
.b1 {
margin: 10px;
}
#Outer {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
#gfg_toggle {
color: green;
border: 5px solid black;
width: 200px;
text-align: center;
}
#box {
width: 100px;
height: 100px;
background-color: green;
}
#b1 {
margin-top: 10px;
}
#division5 {
background: green;
height: 100px;
width: 100px;
padding: 30px;
}
.pid {
display: block;
width: 150px;
border: 1px solid green;
padding: 10px;
}
#container {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
section {
width: 40%;
height: 100px;
border: 2px solid green;
padding: 20px;
}
#division11 {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
</style>
</head>
<body>
<div id="division1">
<h3>jQuery hide() Method</h3>
</div>
<button class="b1">Click me !</button>
<hr>
<div id= "Outer">
<h1 style = "color:white;" >
jQuery Effect show() Method
</h1>
</div>
<br>
<button id = "btn">
Show
</button>
<script>
$(document).ready(function() {
$("#btn").click(function() {
$("#Outer").show(1000);
});
});
</script>
<hr>
<div id="gfg_toggle">jQuery toggle() Method</div>
<button id="btn1">
Click to hide() and show() the above div
</button>
<hr>
<div id="box">jQuery animate() Method</div>
<button id="b1">Click Here !</button>
<hr>
<h6>jQuery delay() Method</h6>
<button id="btn3">Click Me!</button>
<br>
<br>
<div id="d1"
style="width:50px;
height:50px;
display:none;
background-color:lightgreen;">
</div>
<br>
<div id="d2"
style="width:50px;
height:50px;
display:none;
background-color:green;">
</div>
<br>
<div id="d3"
style="width:50px;
height:50px;
display:none;
background-color:orange;">
</div>
<br>
<div id="d4"
style="width:50px;
height:50px;
display:none;
background-color:yellow;">
</div>
<hr>
<h6>jQuery finish() Method</h6>
<div id="division5"></div>
<p>
<button id="b12">Start </button>
<button id="b22">Stop</button>
</p>
<hr>
<p class="pid">jQuery clearQueue() Method</p>
<button class="clk1">Start</button>
<button class="clk2">Stop</button>
<hr>
<h2>jQuery fadeOut() & fadeIn() Method</h2>
<button class="btn11">Fade out</button>
<button class="btn13">Fade in</button>
<script>
$(document).ready(function(){
$(".btn11").click(function(){
$("h2").fadeOut(1000);
});
$(".btn13").click(function(){
$("h2").fadeIn(1000);
});
});
</script>
<hr>
<section>
<p id="pid7">jQuery fadeTo() Method</p>
<button id="btnclk">Click me</button>
</section>
<hr>
<div id= "division11">
<h1 style = "color:white;" >
jQuery fadeToggle() Method
</h1>
</div>
<br>
<button id = "btn21">
Fade Toggle
</button>
<script>
$(document).ready(function() {
$("#btn21").click(function() {
$("#division11").fadeToggle(1000);
});
});
</script>
</body>
</html>
jQuery AJAX : la biblioteca jQuery proporciona varios métodos y funciones para la funcionalidad AJAX que permite la carga de datos desde el servidor sin actualizar la página del navegador. AJAX opera en el lado del cliente para crear aplicaciones web asincrónicas. Hay algunos de los métodos jQuery AJAX que se utilizan para solicitar texto, HTML, XML o JSON desde un servidor remoto mediante HTTP Get y HTTP Post, que se enumeran a continuación:
Métodos |
Descripciones |
Sintaxis |
|---|---|---|
| jQuery.ajax() | Se utiliza para realizar una solicitud AJAX o una solicitud HTTP asíncrona. | $.ajax({nombre:valor, nombre:valor, … }) |
| jQuery.ajaxSetup() | Se utiliza para establecer los valores predeterminados para futuras requests de AJAX. | $.ajaxSetup( {nombre:valor, nombre:valor, … } ) |
| jQuery.get() | Este método carga datos del servidor mediante la solicitud GET HTTP. Este método devuelve el objeto XMLHttpRequest. | $.get(url, [datos], [devolución de llamada], [tipo]) |
| jQuery.getJSON() | Este método en jQuery obtiene datos codificados en JSON del servidor mediante una solicitud GET HTTP. | $(selector).getJSON(url,datos,éxito(datos,estado,xhr)) |
| jQuery.getScript() | Este método en jQuery se usa para ejecutar JavaScript usando la solicitud AJAX HTTP GET. | $(selector).getScript(url, éxito(respuesta, estado)) |
| jQuery.param() | Este método en jQuery se usa para crear una representación serializada de un objeto. | $.param(objeto, comercio) |
| jQuery.post() | Este método en jQuery carga la página desde el servidor mediante una solicitud POST HTTP y devuelve un objeto XMLHttpRequest. | $.post(url, datos, callback_function, data_type) |
| .ajaxComplete() | Este método se usa para especificar las funciones que se ejecutarán cuando se complete una solicitud AJAX. | $(documento).ajaxComplete(función(evento, xhr, opciones)) |
| .ajaxError() | El método en jQuery se usa para especificar funciones que se ejecutarán cuando falla una solicitud AJAX. | $(documento).ajaxError( función(evento, xhr, opciones, exc) ) |
| .ajaxStart() | Este método se usa para especificar las funciones que se ejecutarán cuando se inicie una solicitud AJAX. | $(documento).ajaxStart(función()) |
| .ajaxStop() | Este método se utiliza para especificar las funciones que se ejecutarán cuando se hayan completado las requests de AJAX. | $(documento).ajaxStop(función()) |
| .carga() | Este método en jQuery ayuda a cargar datos del servidor y devolverlos al elemento seleccionado sin cargar toda la página. | $(selector).load(URL, datos, devolución de llamada); |
| .publicar por fascículos() | Es un método incorporado en jQuery que se usa para crear una string de texto en notación estándar codificada en URL. | $(selector).serializar() |
| .serializeArray() | Es un método incorporado en jQuery que se usa para crear una array de objetos de JavaScript que está lista para codificarse como una string JSON. | $(selector).serializeArray() |
jQuery
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#driver").click(function (event) {
$.get( //get() Method
"result.php", {
name: "GFG"
},
function (data) {
$('#stage').html(data);
});
});
});
$(document).ready(function () {
$("#fetch").click(function (event) {
$.getJSON('empData.json', function (cmp) { // getJSON()
$('#display').html('<p> Name: ' + cmp.name + '</p>');
$('#display').append('<p>Location : ' + cmp.location + '</p>');
$('#display').append('<p> Industry Type: ' + cmp.industrytype + '</p>');
});
});
});
$(document).ready(function () {
$("#show").click(function (event) {
$.getScript('test.js', function () { // getScript()
testCode();
});
});
});
$(document).ready(function () {
$(document).ajaxError(function () { // ajaxError()
alert("AJAX request fails.");
});
$("#chkbtn").click(function () {
$("#paragraph").load("test.txt");
});
});
$(document).ready(function () {
$("#work").click(function () {
$("#div_content").load("demo.txt"); // load()
});
});
$(document).ready(function () {
$("#btn6").click(function () {
$("#d").text($("form").serialize());
});
});
$(document).ready(function () {
$("#btn9").click(function () {
var x = $("form").serializeArray();
$.each(x, function (i, field) {
$("#d10").append(field.name + ":"
+ field.value + ":::");
});
});
});
</script>
<style>
.gfg {
font-size: 40px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 17px;
color: black;
}
#div_content {
font-size: 40px;
font-weight: bold;
color: green;
}
#d1 {
width: 300px;
height: 150px;
padding: 20px;
border: 2px solid green;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>jQuery ajax() Method</h2>
<h4 id="h11"></h4>
<button id="btn1">Click</button>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$.ajax({ //ajax()
url: "geeks.txt",
success: function (result) {
$("#h11").html(result);
}
});
});
});
</script>
<hr>
<h2 id="geeks2">jQuery ajaxSetup() Method</h2>
<h3></h3>
<button id="btn2">Click</button>
<script>
$(document).ready(function () {
$("#btn2").click(function () {
$.ajaxSetup({ // ajaxSetup()
url: "random.txt",
success: function (progress) {
$("h3").html(progress);
}
});
$.ajax();
});
});
$(document).ready(function () {
$("#render").click(function (event) {
$.post( // post()
"submit.php",
function (data) {
$('#division1').html(data);
}
);
});
});
</script>
<hr>
<p>jQuery get() Method</p>
<span id="stage" style="background-color: lightgreen;">
GeeksforGeeks
</span>
<div>
<input type="button" id="driver"
value="Load Data" />
</div>
<hr>
<h5>
jQuery getJSON() Method - Click on the
button to fetch employee data
</h5>
<div id="display"
style="background-color:#39B54A;">
</div>
<input type="button" id="fetch"
value="Fetch Employee Data" />
<hr>
<p>jQuery getScript() Method - Click the below button</p>
<button id="show">
Get JavaScript using an AJAX HTTP GET request.
</button>
<hr>
<h2>jQuery param() Method</h2>
<section></section>
<button id="checkbtn">Click</button>
<script>
$(document).ready(function () {
personObj = new Object();
personObj.Firstword = "Geeks";
personObj.Secondword = "for";
personObj.Thirdword = "Geeks";
personObj.Wordcolor = "Green";
$("#checkbtn").click(function () {
$("section").text($.param(personObj)); // param()
});
});
</script>
<hr>
<p>
jQuery post() Method - Click the button
</p>
<div id="division1"
style="background-color:#39B54A;">
Data will change here
</div>
<button id="render" type="button">
Change Data
</button>
<hr>
<p id="paragraph" style="font-size: 20px;">
jQuery ajaxError() Method
</p>
<button id="chkbtn">
Change Content
</button>
<hr>
<div id="div_content">
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
jQuery load() Method
</div>
</div>
<button id="work">
Change Content
</button>
<hr>
<div id="d1">
<h6>jQuery serialize() Method</h6>
<form action="">
Site Name:
<input type="text" name="SiteName"
value="GeeksforGeeks">
<br>
<br> Contributor name:
<input type="text" name="ContributorName"
value="geeks">
<br>
</form>
<button id="btn6">Click here!</button>
</div>
<div id="d"></div>
<hr>
<h6>jQuery serializeArray() Method</h6>
<div id="d1">
<form action="">
Site Name:
<input type="text" name="SiteName"
value="GeeksforGeeks">
<br>
<br> Contributor name:
<input type="text" name="ContributorName"
value="geeks">
<br>
</form>
<!-- click on this button -->
<button id="btn9">
Click here!
</button>
</div>
<div id="d10"></div>
</body>
</html>
jQuery Core: jQuery facilita los métodos de elemento DOM, las propiedades, las utilidades, el objeto jQuery, el objeto diferido, el objeto de devolución de llamada, etc., para agregar las funcionalidades con opciones de personalización que ayudan a mejorar la interactividad general del sitio web. La lista de varios métodos y propiedades con sus descripciones se da a continuación:
Métodos/Propiedades |
Descripciones |
Sintaxis |
|---|---|---|
| jQuery.Diferido() |
Es una función que devuelve el objeto de utilidad con métodos que pueden registrar múltiples devoluciones de llamada a las colas. |
jQuery.Deferred([beforeStart]) |
| diferido.entonces() |
Este método en JQuery se usa para agregar controladores que se llamarán cuando el objeto Diferido se resuelva, rechace o esté en progreso. |
deferred.then(doneCallbacks[, failCallbacks][, progressCallbacks]) |
| diferido.hecho() |
Este método en jQuery se usa para agregar controladores que se llamarán cuando se resuelva el objeto diferido. |
diferido.hecho (devoluciones de llamada [, devoluciones de llamada]) |
| .promesa() |
Este método en JQuery devuelve un objeto Promise que se observará cuando finalicen ciertos tipos de acciones vinculadas a la colección, en cola o no. |
.promise([tipo][, objetivo]) |
| diferido.siempre() |
Este método en jQuery se usa para agregar controladores que se llamarán cuando el objeto Diferido se resuelva o cuando se rechace. |
diferido. siempre (siempre devoluciones de llamada [, siempre devoluciones de llamada]) |
| diferido.fail() |
Este método en jQuery se usa para agregar controladores que se llamarán cuando se rechace el objeto Diferido. |
diferido.fallo(devoluciones de llamada fallidas, devoluciones de llamada fallidas) |
| .obtener() |
Este método carga datos del servidor mediante la solicitud GET HTTP. Este método devuelve el objeto XMLHttpRequest. |
$.get(url, [datos], [devolución de llamada], [tipo]) |
| .índice() |
Es un método incorporado en jQuery que se usa para devolver el índice de los elementos especificados con respecto al selector. |
$(selector).index(elemento) |
| jQuery.cuando() |
Este método en JQuery brinda una forma de ejecutar funciones de devolución de llamada dependiendo de cero o más objetos Thenable, que generalmente son objetos diferidos que representan eventos asíncronos. |
jQuery.when (diferido) |
| .longitud |
Esta propiedad se usa para contar la cantidad de elementos del objeto jQuery. |
$(selector).longitud |
| jQuery.each() |
Este método en jQuery se usa para especificar la función que se ejecutará para cada elemento coincidente. |
$(selector).each(función(índice, elemento)) |
| devoluciones de llamada.fuego() |
Este método se usa para llamar a todas las devoluciones de llamada con los argumentos dados en la lista. Este método devuelve el objeto Callbacks al que está adjunto (this). |
devoluciones de llamada.fuego (argumentos) |
| devoluciones de llamada.lock() |
Este método en jQuery se usa para bloquear una lista de devolución de llamadas en el estado. |
devoluciones de llamada.lock() |
jQuery
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<p id="GFG_UP"></p>
<button onclick="Geeks();">
Click here
</button>
<p id="GFG_DOWN"></p>
<script>
var el_up = document.getElementById("GFG_UP");
el_up.innerHTML = "JQuery.Deferred() & Deferred.then() Method";
function Func1(val, div) {
$(div).append("From doneCallbacks - " + val);
}
function Func2(val, div) {
$(div).append("From failCallbacks - " + val);
}
function Func3(val, div) {
$(div).append("From progressCallbacks - " + val);
}
function Geeks() {
var def = $.Deferred(); // Deferred()
def.then(Func1, Func2, Func3); // then()
def.notify('Deferred "def" is notified.<br/>', "#GFG_DOWN");
def.resolve('Deferred "def" is resolved.<br/>', "#GFG_DOWN");
}
</script>
<hr />
<p>jQuery deferred.done() method</p>
<button onclick="check();">
click here
</button>
<script>
function check() {
$.get("testingGFG.php").done(function() {
//done()
alert("$.get successfully completed!");
});
}
</script>
<hr />
<p id="click_UP"></p>
<button onclick="change();">
click here
</button>
<script>
var el_up = document.getElementById("click_UP");
el_up.innerHTML = "JQuery deferred.always() Method";
function change() {
$.get("testingGFG.php") // get()
.always(function() {
// always()
alert("Either $.get successfully"
+ " completed or error "
+ "callbacks arguments");
});
}
</script>
<hr />
<div>
<h4>jQuery promise() & each() Method</h4>
</div>
<input type="button"
id="change"
value="Click to fade up the text" />
<ul>
<li>jQuery promise() & each() Method</li>
<li>Click to slide up the text</li>
<li>This text will fade up</li>
</ul>
<p id="para3"></p>
<script>
$("#change").on("click", function() {
$("li").each(function(i) {
// each()
$(this).slideUp((i + 1) * 1000);
});
$("li").promise().done(() => {
// promise()
$("#para3").text("Content Rendered!");
});
});
</script>
<hr />
<h5>
jQuery deferred.fail() Method
</h5>
<button onclick="defail();">
click here
</button>
<script>
function defail() {
$.get("testingGFG.php").done(function() {
alert("$.get successfully completed!");
}).fail(function() {
//fail()
alert("$.get failed!");
});
}
</script>
<hr />
<script>
$(document).ready(function() {
$("#display").click(function(event) {
$.get(
//get()
"testingGFG.php", {
name: "GFG",
},
function(data) {
$("#wrap").html(data);
});
});
});
</script>
<p>
jQuery get() Method - Click the below
button to load PHP file
</p>
<span id="wrap"
style="color: greenyellow">
GeeksforGeeks
</span>
<div>
<input type="button"
id="display"
value="Click" />
</div>
<hr />
<script>
$(document).ready(function() {
$(".list").click(function() {
document.getElementById("demo").innerHTML =
"Clicked Index " + $(this).index(); // index()
});
});
</script>
<p>
Click on the elements of the list to display
their index number with respect to the other
elements in the list.
</p>
<ul>
<li class="list">Geeks</li>
<li class="list">for</li>
<li class="list">Geeks</li>
</ul>
<p id="demo"></p>
<hr />
<p>jQuery.when() Method</p>
<button onclick="gfgChng();">
click here
</button>
<script>
var def = $.Deferred();
function gfgChng() {
$.when().then(function(a) {
// when()
alert("when() method called this alert().");
});
}
</script>
<hr />
<script>
$(document).ready(function() {
$("#fetch").click(function() {
document.getElementById("gfgFind").innerHTML =
"<br>" + $("h2").length; // length
});
});
</script>
<h2 style="color: green">GeeksforGeeks</h2>
<h2 style="color: green">jQuery</h2>
<h2 style="color: green">length</h2>
<h2 style="color: green">property</h2>
<input type="button"
id="fetch"
value="Click on the button to get
the number of p elements" />
<div id="gfgFind"></div>
<hr />
<p id="gfgFireUp"></p>
<button onclick="GeeksFire();">
click here
</button>
<p id="gfgFireDown"></p>
<script>
var el_up = document.getElementById("gfgFireUp");
var el_down = document.getElementById("gfgFireDown");
el_up.innerHTML = "JQuery callbacks.fire() method";
var result = "";
var callbacks = jQuery.Callbacks();
function GeeksFire() {
var fun1 = function(val) {
result = result + "This is function 1 "
+ "and value passed is "
+ val + "<br>";
};
callbacks.add(fun1);
callbacks.fire("GFG_1"); // callbacks.fire()
callbacks.add(fun1);
callbacks.fire("GFG_2");
el_down.innerHTML = result;
}
</script>
<hr />
<p>JQuery callbacks.lock() method</p>
<button onclick="gfgCallbackLock();">
click here
</button>
<p id="callbcklck"></p>
<script>
var el_down = document.getElementById("callbcklck");
var res = "";
var callbacks = jQuery.Callbacks();
function gfgCallbackLock() {
var func = function(val1) {
res = res + "value passed is - " + val1;
};
callbacks.add(func);
callbacks.fire("gfgcallbck1");
callbacks.lock(); //callbacks.lock()
callbacks.add(func);
callbacks.fire("gfgcallbck2");
el_down.innerHTML = res;
}
</script>
</body>
</html>
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS, o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript. Puede aprender JavaScript desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
También tenemos una hoja de trucos similar para ayudarlo con los conceptos de HTML, CSS y JavaScript. Échale un vistazo aquí Hoja de trucos de HTML, Hoja de trucos de CSS y Hoja de trucos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA