Comenzando con jquery-selectors

Instalación o configuración

1 nombre de etiqueta Representa un nombre de etiqueta disponible en el DOM. Por ejemplo $('p') selecciona todos los párrafos <p> en el documento.

2 ID de etiqueta Representa una etiqueta disponible con la ID dada en el DOM. Por ejemplo $('#some-id') selecciona el único elemento en el documento que tiene una ID de some-id.

Clase de 3 etiquetas Representa una etiqueta disponible con la clase dada en el DOM. Por ejemplo $('.some-class') selecciona todos los elementos en el documento que tienen una clase de alguna clase.

Todos los elementos anteriores se pueden usar solos o en combinación con otros selectores. Todos los selectores de jQuery se basan en el mismo principio excepto algunos ajustes.

NOTA − La función $() de fábrica es un sinónimo de la función jQuery(). Entonces, en caso de que esté utilizando cualquier otra biblioteca de JavaScript donde el signo $ esté en conflicto con otra cosa, puede reemplazar el signo $ por el nombre jQuery y puede usar la función jQuery() en lugar de $().

Ejemplo El siguiente es un ejemplo simple que hace uso de Tag Selector. Esto seleccionaría todos los elementos con un nombre de etiqueta p y establecería su fondo en “amarillo”.

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
    
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
    
</html>

Selectores Jquery

Los selectores de Jquery se utilizan para manipular DOM (modelo de objeto de documento), adjuntar eventos, agregar elementos, eliminar elementos en tiempo de ejecución.

Seleccionador Descripción
selector de elementos El selector de elementos se usa para seleccionar un elemento en particular
Ej: <p>Stackoverflow para ayudar a comprender los errores </p>
Para acceder a esta etiqueta “p”, necesitamos agregar este elemento y envolverlo dentro sintaxis de jquery como: $(“p”).
"$" representa jquery, es solo un alias de jquery y, si queremos, podemos usar jquery en lugar de “$” como jQuery().
Si estamos trabajando con otra biblioteca o marco (angular) que tiene el mismo alias que jquery ($), podemos modificar este conflicto usando el método $.noConflict() de jquery.
Selector de ID podemos escribir el selector de Id como $("#texto del atributo id")
<div id="selectMe">Soy contenido interno de Div.</div>
Aquí texto de *ID * el atributo es “selectMe”, por lo que para seleccionar este selector de ID usando jquery tenemos que escribir: $("#selectMe").
Se pueden seleccionar múltiples ID usando comas separadas Ej: $("#id1,#id2,#id3…")
Selector de clases Los selectores de clase se representan con un punto/"." y escrito como $(".className")
<span class="demoClass"> Demo JQuery class Selectors </span>
Para acceder al selector de clase, escribimos $(".demoClass"), Multiple La clase se puede seleccionar como valores separados por comas. $(".clase1,.clase2,.clase3")
Selector de todos los elementos Para seleccionar el elemento DOM completo, debemos incluir el carácter: "*".
$("*") Hace referencia al elemento DOM completo, incluido html, encabezado…

This is p Tag

This is div Tag
This is span Tag

Compruebe jsfiddle, por ejemplo: https://jsfiddle.net/rezjvrum/

Lista de varios selectores:

  1. “:primero”: seleccione el primer elemento.
  2. “:último”: seleccione el último elemento.
  3. “:even”: selecciona todos los elementos pares.
  4. “: impar”: selecciona todos los elementos impares.
  5. “:eq(index)”: seleccione el elemento indexado. Ej: :eq(1) seleccionará el segundo elemento secundario. Aquí la indexación comienza desde “0”.
  6. “:gt(index)”: muestra todos los elementos cuyo índice es mayor que el pase de índice. Ej: :gt(3) devolverá todos los elementos que tengan un índice mayor que 3.
  7. “:lt(index)” - Muestra todos los elementos cuyo índice es menor que el pase de índice. Ej: :lt(2) devolverá todos los elementos que tengan un índice inferior a 2.

Los selectores anteriores están cubiertos en: https://jsfiddle.net/rezjvrum/2/