Empezando con jquery-selectores

Download jquery-selectors eBook

Observaciones

Esta sección proporciona una descripción general de qué es jquery-selectors y por qué un desarrollador puede querer usarlo.

También debe mencionar cualquier tema grande dentro de jquery-selectores, y vincular a los temas relacionados. Dado que la Documentación para jquery-selectores es nueva, es posible que deba crear versiones iniciales de esos temas relacionados.

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 elemento único en el documento que tiene una ID de some-id.

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

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

NOTA - La function $() fábrica function $() es un sinónimo de la función jQuery() . Entonces, si está utilizando cualquier otra biblioteca de JavaScript en la que $ sign esté en conflicto con otra cosa, entonces puede reemplazar $ sign por jQuery name y puede usar la función jQuery () en lugar de $ ().

El siguiente ejemplo es un ejemplo simple que utiliza el Selector de etiquetas. Esto seleccionaría todos los elementos con un nombre de etiqueta p y establecerá 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 Jquery se utilizan para manipular DOM (modelo de objeto de documento), adjuntar eventos, agregar elementos, eliminar elementos en tiempo de ejecución.

Selector Descripción
selector de elementos El selector de elementos se utiliza para seleccionar un elemento particular
Ej: <p>Stackoverflow to help in understanding errors </p>
Para acceder a esta etiqueta "p", necesitamos agregar este elemento y envolverlo dentro de la sintaxis de jquery como: $ ("p").
"$" representa el jquery, es solo un aliasing 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 alterar este conflicto usando el método $ .noConflict () de jquery.
Selector de ID podemos escribir el selector de ID como $ ("# texto del atributo de ID")
<div id="selectMe">I am inner content of Div.</div>
Aquí el texto del atributo ID es "selectMe", así 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 clase Los selectores de clase están representados por punto / "." y escrito como $ (". className")
<span class="demoClass"> Demo JQuery class Selectors </span>
Para acceder al selector de clase, escribimos $ (". DemoClass"), la clase múltiple se puede seleccionar como valores separados por comas. $ (". class1, .class2, .class3")
Selector de todos los elementos Para seleccionar el elemento DOM completo, tenemos que incluir el carácter: "*" .
$("*") Hace referencia al elemento DOM completo, incluido html, head ...

Esta es la etiqueta p

Esta es la etiqueta div Esta es la etiqueta span $ ("*") // Referirá todo el elemento DOM |

Verifique jsfiddle por ejemplo: https://jsfiddle.net/rezjvrum/

Lista de varios selectores:

  1. ": first" - Seleccionar primer elemento.
  2. ": last" - Selecciona el último elemento.
  3. ": even" - Selecciona todo el elemento par.
  4. ": impar" - Selecciona todos los elementos impares.
  5. ": eq (índice)" - Seleccione el elemento indexado. Ej:: :eq(1) seleccionará el segundo elemento hijo. Aquí la indexación se inicia desde "0".
  6. ": gt (índice)": muestra todos los elementos cuyo índice es mayor que el paso del índice. Ejemplo:: :gt(3) devolverá todo el elemento que tenga un índice mayor que 3.
  7. ": lt (índice)": muestra todos los elementos cuyo índice es menor que el paso del índice. Ej:: :lt(2) devolverá todos los elementos que tengan un índice menor que 2.

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

Stats

46 Contributors: 3
Tuesday, November 15, 2016
Licenciado bajo: CC-BY-SA

No afiliado a Stack Overflow
Rip Tutorial: info@zzzprojects.com

Descargar eBook