Cómo encontrar elementos HTML en jQuery
Este artículo discutirá el procedimiento para Encuentra elementos HTML en jQuery usando Selector de nombre del elemento, Elemento #ID selector, y Elemento .selector de clases. Entonces, comencemos!
Cómo encontrar elementos HTML en jQuery usando el selector de nombres de elementos
En jQuery, puedes encontrar elementos HTML usando su "nombre,"Y debe pasarlo entre paréntesis"()". Aquí está la sintaxis de usar el selector de nombres de elementos.
Sintaxis del selector de nombres de elementos
$ ("elementname")
En la sintaxis dada anteriormente, debe agregar el "nombre de elemento"Con las citas dobles dentro de los paréntesis.
Ejemplo: Encuentre elementos HTML en jQuery usando el selector de nombre del elemento
En primer lugar, en nuestro "índice.html"Archivo, agregaremos un encabezado con el"H2"Tag, un párrafo usando el""Etiqueta, y un"Haz click en mi!" botón:
Encuentra elementos HTML en jQuery
Este es el párrafo principal con algún texto de muestra
Puede utilizar cualquier sandbox de codificación en línea o su editor de código favorito para crear este proyecto; Sin embargo, usaremos el código de Visual Studio:
A continuación, avance hacia su archivo JavaScript, que es "mi proyecto.js"En nuestro caso y escriba el siguiente código en él:
$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("H2").esconder();
);
);
Utilizando el $ ("H2") Selector de nombre del elemento, jQuery buscará el "H2"Elemento y luego esconderlo de la página web con la ayuda de"esconder()" método:
Después de guardar ambos archivos, abriremos "índice.html"Con la ayuda de VS Code"Servidor hepático" extensión:
Al hacer clic en el botón resaltado, ocultará todo el Antes de hacer clic en el botón: Después de hacer clic en el botón: El selector de nombre del elemento recupera todos los elementos HTML con el mismo nombre. Por ejemplo, hemos agregado $ ("H2") Como nombre del elemento, el selector de nombre del elemento seleccionará todo encabezando elementos de nuestra página web y luego aplique la configuración adicional a ellos. Sin embargo, si quieres encontrar un específico Html elemento, Entonces puedes utilizar el Elemento #ID selector en jQuery (). Cómo encontrar elementos HTML en jQuery usando Element #ID Selector Para encontrar elementos HTML utilizando el selector de elementos #ID, tenemos que asignar una ID a ese elemento HTML y debe ser único en una página web, ya que el selector de elementos #ID busca el elemento único y único. Sintaxis del selector de elementos #ID En la sintaxis del selector de elementos #ID, debe agregar el carácter hash "#," Seguido por el "identificación"Asignado a un elemento HTML. Ejemplo: Encuentre elementos HTML en jQuery usando Element #ID Selector Encuentra elementos HTML en jQuery Este es el párrafo principal con algún texto de muestra Para encontrar el elemento HTML de encabezado con el "H2ID", Escribiremos el siguiente código en nuestro"mi proyecto.js" archivo: En este caso, cuando haremos clic en el botón, la jQuery "$ ("#H2ID")El método "encuentra el elemento de encabezado HTML con el"H2ID"Y escúchalo de la página web: El encabezado agregado ya no se puede ver después de hacer clic en el "Haz click en mi" botón: Cómo encontrar elementos HTML en jQuery usando elemento .selector de clases Element #ID Selector no le permite seleccionar dos elementos HTML simultáneamente porque ambos tendrán valores de identificación únicos. Sin embargo, puede asignar una clase a diferentes elementos HTML y luego utilizar el Elemento .selector de clases para encontrar los elementos que pertenecen a la misma clase. Sintaxis de elemento .selector de clases En la sintaxis dada del elemento .Selector de clases, debe agregar un personaje de época antes de escribir el nombre de la clase, y debe estar encerrado entre paréntesis. Ejemplo: Encuentre elementos HTML en jQuery usando elemento .selector de clases Encuentra elementos HTML en jQuery Este es el párrafo principal con algún texto de muestra Éste es el segundo párrafo Excepto por el primer párrafo, todos los elementos HTML agregados pertenecen al "Nueva clase": Ahora, en primer lugar, encontraremos los elementos HTML que tienen nombre de clase "Nueva clase". Después de eso, los ocultaremos de nuestra página HTML: Antes de hacer clic en el botón: Después de hacer clic en el botón: La salida dada anterior muestra que hemos encontrado con éxito los elementos HTML especificados usando elemento .Selector de clases y ocultarlos de la página web. Conclusión Usando Selector de nombre del elemento, Elemento #ID selector, y Elemento .selector de clases, Puedes encontrar elementos HTML en jQuery. El selector de nombre del elemento se utiliza para seleccionar los elementos HTML por su nombre. Por el contrario, Element #ID Selector encuentra un elemento HTML específico basado en su ID único y, por último, elemento .El selector de clases los recupera de acuerdo con el nombre de su clase. Este artículo discutió el procedimiento para encontrar elementos HTML en jQuery usando el selector de nombre de elemento, elemento #ID selector y elemento .selector de clases. $ ("#my_id")
En nuestro "índice.html"Archivo, hemos agregado un párrafo, un"Haz click en mi"Botón, y un encabezado con el"H2ID"ID de elemento:
$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("#H2ID").esconder();
);
);ps.mi clase")
En este ejemplo, asignaremos un nombre de clase "Nueva clase"Al encabezado, elemento de párrafo y botón, que se agregan en nuestro"índice.html" archivo:
$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
ps.Nueva clase").esconder();
);
);