jQuery es una poderosa biblioteca de JavaScript. Es más potente que el JavaScript. Los códigos de jQuery son más precisos, cortos y sencillos que los códigos estándar de JavaScript. Puede realizar una variedad de funciones.
En este artículo, aprenderemos sobre los selectores de jQuery, los métodos de eventos de jQuery y algunos métodos útiles.
Los selectores de jQuery se utilizan para seleccionar los elementos HTML y le permiten manipular los elementos HTML de la forma que queramos. Selecciona los elementos HTML en un parámetro variable como su nombre, clases, id, tipos, atributos, valores de atributos, etc. Todos los selectores en jQuery se seleccionan usando un signo especial, es decir, el signo de dólar y los paréntesis:
$("selector-name")
- Selector de elementos:
El selector de elementos selecciona el elemento en función de su nombre.
Ejemplo:
en este ejemplo, cuando el usuario hace clic en el botón, el elemento <h1> se oculta.
Código:-<!DOCTYPE html><html><head></script></head><body><h1>Welcome to Geeks for Geeks !</h1><h2>This is Web Technology section </h2><br/><button>Hide</button><scripttype="text/javascript">$("button").click(function() {$("h1").hide();});</script></body></html>Salida:
Antes de hacer clic en el botón Ocultar :
Después de hacer clic en el botón Ocultar :
- Selector de ID:
El selector de ID selecciona el elemento en función de su ID.
Ejemplo:
en este ejemplo, cuando el usuario hace doble clic en el botón, el elemento con id = «gfg» se oculta.
Código:-<!DOCTYPE html><html><head></script></head><body><pid="gfg">Welcome to Geeks for Geeks !</p><pid="GFG">Computer Science Portal </p><br/><button>Hide</button><scripttype="text/javascript">$("button").dblclick(function() {$("#gfg").hide();});</script></body></html>Salida:
Antes de hacer doble clic en el botón Ocultar :
Después de hacer doble clic en el botón Ocultar :
- Selector de clase:
el selector de clase selecciona el elemento en función de su clase.
Ejemplo:
en este ejemplo, cuando el usuario hace clic en el botón, el elemento con clase = «GFG» se oculta.
Código:-<!DOCTYPE html><html><head></script></head><body><pclass="gfg">Welcome to Geeks for Geeks !</p><pclass="GFG">Explore More about GfG </p><br/><button>Hide</button><scripttype="text/javascript">$("button").click(function() {$(".GFG").hide();});</script></body></html>Salida:
Antes de hacer clic en el botón Ocultar :
Después de hacer clic en el botón Ocultar :
Evento se refiere a las acciones realizadas por el visitante del sitio durante su interactividad con el sitio web (o página web). Puede haber varios tipos de eventos, como
- El usuario hace clic en el botón.
- El usuario mueve el puntero del mouse sobre una imagen.
- El usuario presionó cualquier tecla del teclado, etc.
Algunos de los métodos de eventos se dan
| Nombre del método | Descripción |
|---|---|
| hacer clic() | El método click() contiene una función para el manejo de eventos que se invoca cuando el usuario hace clic en el elemento HTML en particular. |
| dblclick() | El método dblclick() contiene una función para el manejo de eventos que se invoca cuando el usuario hace doble clic en el elemento HTML en particular. |
| ratónenter() | El método mouseenter() contiene una función para el manejo de eventos que se invoca cuando el puntero del mouse ingresa al elemento HTML en particular. |
| hoja de ratón() | El método mouseleave() contiene una función para el manejo de eventos que se invoca cuando se quita el puntero del mouse del elemento HTML particular que se seleccionó anteriormente. |
| ratón hacia abajo() | El método mousedown() contiene una función para el manejo de eventos que se invoca cuando se presiona el botón izquierdo, derecho o central del mouse mientras el puntero del mouse está sobre el elemento HTML. |
| ratón arriba() | El método mouseup() contiene una función para el manejo de eventos que se invoca cuando se suelta el botón izquierdo, derecho o central del mouse mientras el puntero del mouse está sobre el elemento HTML. |
| flotar() | El método hover() contiene una función para el manejo de eventos que se invoca cuando el puntero del mouse ingresa y sale del elemento HTML. Es una combinación de los métodos mouseenter() y mouseleave(). |
jQuery tiene varios métodos para obtener el valor de un atributo y establecer el atributo en un valor específico. Estos métodos son lo suficientemente potentes como para cambiar el contenido del sitio web y su estilo. Algunos de ellos son:
- text(): este método se utiliza para obtener o establecer el contenido de texto del elemento HTML seleccionado.
- html(): este método se utiliza para obtener o establecer el contenido de los elementos seleccionados (incluidos los elementos HTML).
- val(): este método se usa para obtener o establecer el valor de varios campos de formulario en la página web.
- attr(): este método se usa para obtener o establecer el valor de varios atributos en la página web.
- css(): este método se usa para obtener o establecer el valor de varias propiedades CSS en la página web.
- Ejemplo:
Código: –
<!DOCTYPE html><html> <head></script> <style type="text/css"> #e5 { width: 100px; height: 100px; border-radius: 0px; background-color: aqua; } </style></head> <body> <p id="e1">Welcome.</p> <p id="e2">Learn and Explore</p> <p> <input type="text" id="e3" value="jQuery is powerful!" /> </p> <p id="e4" align="left">Geeks for Geeks</p> <p> <div id="e5"></div> </p> <button id="gfg1">Change Text</button> <button id="gfg2">Change HTML</button> <button id="gfg3">Change Value</button> <button id="gfg4">Change Alignment</button> <button id="gfg5">Change Shape</button> <script type="text/javascript"> $("#gfg1").click(function() { $("#e1").text("Geeks for Geeks"); }); $("#gfg2").click(function() { $("#e2").html("<b>Enrich your Knowledge.</b>"); }); $("#gfg3").click(function() { $("#e3").val("jQuery at Geeks for Geeks"); }); $("#gfg4").click(function() { $("#e4").attr("align", "center"); }); $("#gfg5").click(function() { $("#e5").css("border-radius", "50px"); }); </script></body> </html> |
Salida:
Antes de hacer clic en los botones: 
Después de hacer clic en los botones:
Publicación traducida automáticamente
Artículo escrito por AniketSingh1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA