JQuery Selectors | Explicado
Seleccionar los elementos de la página web HTML puede tomar algunas líneas de código en el JavaScript, pero con jQuery, el código se vuelve conciso y se ve muy legible. jQuery admite las selecciones de casi todas las selectores definido en el CS3, así como también proporciona algunos selectores personalizados incorporados.
Agregar jQuery a nuestra página HTML
Para poder jQuery en nuestro proyecto, primero tenemos que importar jQuery colocando un enlace a un archivo jQuery en la etiqueta de script. El método más efectivo para importar jQuery es utilizar una jQuery alojada de Google CDN, en el archivo HTML, use las siguientes líneas en la etiqueta de script:
La función de fábrica
Las funciones del selector de jQuery a menudo se denominan función de fábrica, comienza con un signo de dólar ps seguido de corchetes o paréntesis "()". Esta función de fábrica se utiliza para referirse a un elemento de la página web, y puede agregar un evento utilizando un operador DOT. Por ejemplo:
$ (documento).Ready (function ()// Dentro del cuerpo de la función
);
selectores jQuery
Los selectores jQuery o las funciones de fábrica funcionan en tres selectores principales, a saber: ID de etiqueta, nombre de la etiqueta, clase de etiqueta.
- Nombre de la etiqueta: esto se usa para seleccionar el nombre del elemento de la cúpula, por ejemplo, si desea seleccionar todo el Etiquetas H1.
- Clase de etiqueta: esto se usa para elegir un elemento con una determinada clase; Por ejemplo, si desea seleccionar un elemento con la clase "mi clase" puedes usar ps.mi clase')
- ID de etiqueta: esto se usa para seleccionar un elemento con una ID específica; Por ejemplo, elegir un elemento con una identificación de "mi identificación" puedes usar $ ('#myid')
Selección de elementos por nombre
Para mostrar el uso de selectores jQuery, primero revisamos la selección de elementos utilizando el nombre de la etiqueta. Supongamos que desea seleccionar todo el Una etiqueta P Otra etiqueta P Otra etiqueta P más Debería ver la siguiente salida en la página web: Para manipular el Etiquetas Use el siguiente código de script: Con las líneas anteriores, la salida se verá así Incluso tenemos selectores de filtro; Supongamos que solo queremos seleccionar el último $ (documento).Ready (function () Esto nos dará la siguiente salida: Como puede ver, pudimos seleccionar en un etiqueta Selección de elementos por ID Para demostrar los selectores de ID, tenemos las siguientes líneas en el archivo HTML: Una etiqueta p con la identificación hola Otra etiqueta P Otra etiqueta P más Como puedes ver, el primero La etiqueta tiene la identificación "Hola", Para manipular este elemento usando su ID, podemos usar el siguiente código de script: Como puede ver en la imagen de arriba, pudimos seleccionar un elemento usando su ID y manipular su propiedad de estilo utilizando el selector de ID de jQuery. Seleccionando un elemento por clase Para seleccionar un elemento usando la clase, usamos el punto Antes del nombre de la clase en la función de fábrica, para poder demostrar el uso del selector de clase jQuery, le dé a una de las etiquetas P algunas clases. Nuestro código HTML se verá así: Una etiqueta p con la identificación hola Otra etiqueta P Otra etiqueta P pero con alguna clase Para seleccionar la clase "MyClass" y darle un fondo de rojo, usamos el siguiente código de script: Con el código anterior, verá la siguiente salida: Como puede ver, pudimos manipular el elemento con la clase "MyClass" usando selectores de clase jQuery. Conclusión La biblioteca más famosa de JavaScript, JQuery es muy útil y ahorra tiempo cuando se trata de manipular elementos en una página web, el único requisito previo para usar jQuery en un proyecto es agregar un enlace a la biblioteca jQuery utilizando una jQuery alojada de Google CDN. La jQuery consiste en una función que se llama función de fábrica que permite a los usuarios seleccionar elementos de la página web y manipular sus propiedades. La función de fábrica ps funciona en 3 selectores básicos que son a saber, Selector de identificación, Selector de nombres y selector de clases.
$ ("P").css ("fondo", "amarillo");
);
$ ("P: Last").css ("fondo", "amarillo");
);
ps.mi clase").css ("fondo", "rojo");
);