jquery-selectorsAan de slag met jquery-selectors


Opmerkingen

Deze sectie geeft een overzicht van wat jquery-selectors is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook grote onderwerpen binnen jquery-selectors vermelden en een link naar de gerelateerde onderwerpen bevatten. Aangezien de documentatie voor jquery-selectors nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

Installatie of instellingen

1 Tagnaam Vertegenwoordigt een tagnaam die beschikbaar is in de DOM. $('p') selecteert bijvoorbeeld alle alinea's <p> in het document.

2 Tag-ID Vertegenwoordigt een tag beschikbaar met de gegeven ID in de DOM. $('#some-id') selecteert bijvoorbeeld het enkele element in het document dat een ID van some-id heeft.

3 Tag Class Vertegenwoordigt een tag beschikbaar met de gegeven klasse in de DOM. $('.some-class') selecteert bijvoorbeeld alle elementen in het document die een klasse van some-class hebben.

Alle bovenstaande items kunnen afzonderlijk of in combinatie met andere selectors worden gebruikt. Alle jQuery-selectors zijn gebaseerd op hetzelfde principe, behalve enkele aanpassingen.

OPMERKING - De fabrieksfunctie function $() is een synoniem van de functie jQuery() . Dus als u een andere JavaScript-bibliotheek gebruikt waar $ sign conflicteert met iets anders, kunt u $ sign vervangen door jQuery name en u kunt de functie jQuery () gebruiken in plaats van $ ().

Voorbeeld Hieronder volgt een eenvoudig voorbeeld dat gebruik maakt van Tag Selector. Dit zou alle elementen met een tagnaam p selecteren en hun achtergrond op "geel" zetten.

<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>
 

Jquery-selectors

Jquery-selectors worden gebruikt om DOM (Document-objectmodel) te manipuleren, gebeurtenissen toe te voegen, elementen toe te voegen, elementen tijdens runtime te verwijderen.

keuzeschakelaar Beschrijving
element selector elementkiezer worden gebruikt om een bepaald element te selecteren
Bijvoorbeeld: <p>Stackoverflow to help in understanding errors </p>
Om toegang te krijgen tot deze "p" -tag, moeten we dit element toevoegen en het in de jquery-syntaxis plaatsen zoals: $ ("p").
"$" vertegenwoordigt de jquery, het is gewoon aliasing van jquery en als we willen kunnen we jquery gebruiken in plaats van "$" zoals jQuery () .
Als we werken met een andere bibliotheek of framework (hoekig) die dezelfde aliasing heeft als jquery ($), kunnen we dit conflict wijzigen met de jquery-methode $ .noConflict ().
ID selector we kunnen Id selector schrijven als $ ("# text of id attribute")
<div id="selectMe">I am inner content of Div.</div>
Hier is de tekst van het ID- kenmerk "selectMe", dus om deze ID-selector te selecteren met behulp van jquery moeten we schrijven: $ ("# selectMe").
Meerdere ID's kunnen worden geselecteerd met behulp van een komma aparte Ex: $ ("# id1, # id2, # id3 ...")
Class Selector Klasse selectors worden weergegeven door punt / "." en geschreven als $ (". className")
<span class="demoClass"> Demo JQuery class Selectors </span>
Om toegang te krijgen tot klassekiezer, schrijven we $ (". DemoClass"), meerdere klassen kunnen worden geselecteerd als door komma's gescheiden waarden. $ (". Klasse 1, .class2, .class3" )
Alle elementen selector Om het complete DOM-element te selecteren, moeten we het teken: "*" .
$("*") Het verwijst naar het complete DOM-element inclusief html, head ...

Dit is p-tag

Dit is div Tag Dit is span Tag $ ("*") // Het verwijst naar alle DOM-elementen |

Controleer jsfiddle bijvoorbeeld: https://jsfiddle.net/rezjvrum/

Lijst met verschillende selectors:

  1. ": first" - Selecteer eerste element.
  2. ": last" - Selecteer laatste element.
  3. ": even" - Selecteer alle even elementen.
  4. ": oneven" - Selecteer alle oneven elementen.
  5. ": eq (index)" - Selecteer het geïndexeerde element. Vb:: :eq(1) selecteert het tweede onderliggende element. Hier begint het indexeren vanaf "0".
  6. ": gt (index)" - Toont alle elementen waarvan de index groter is dan de indexpas. Vb:: :gt(3) retourneert alle elementen met een index groter dan 3.
  7. ": lt (index)" - Toont alle elementen waarvan de index kleiner is dan de indexpas. Vb:: :lt(2) retourneert alle elementen met een index kleiner dan 2.

Bovenstaande selectors worden behandeld in: https://jsfiddle.net/rezjvrum/2/