jQuery Selectors Explained: Class Selectors, ID Selectors, and More

jQuery-vælgere

jQuery bruger CSS-stilvælgere til at vælge dele eller elementer på en HTML-side. Det lader dig derefter gøre noget med elementerne ved hjælp af jQuery-metoder eller funktioner.

For at bruge en af disse vælgere, skal du skrive et dollartegn og parentes efter det: $(). Dette er stenografi for jQuery()funktionen. Inden for parenteserne skal du tilføje det element, du vil vælge. Du kan bruge enten enkelt- eller dobbeltcitater. Herefter tilføjes en prik efter parenteserne og den metode, du vil bruge.

I jQuery er klasse- og ID-vælgerne som dem i CSS. Lad os få en hurtig gennemgang af det, inden vi fortsætter.

ID-vælger i CSS

CSS ID-vælgeren anvender typografier på et specifikt html-element. CSS ID-vælgeren skal matche ID-attributten for et HTML-element. I modsætning til klasser, som kan anvendes på flere elementer i et websted, kan et specifikt ID kun anvendes på et enkelt element på et websted. CSS ID tilsidesætter CSS-klasseegenskaber. For at vælge et element med et bestemt id skal du skrive et hash-tegn (#) efterfulgt af elementets id.

Syntaks

#specified_id { /* styles */ }

Du kan kombinere ID-vælgeren med andre typer vælgere for at style et meget specifikt element.

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

Bemærk om id'er

ID bør undgås ved styling, hvis det er muligt. Da det har høj specificitet, og det kun kan tilsidesættes, hvis du integrerer typografier eller tilføjer typografier til . Vægten af ​​ID-tilsidesættelse af klassevælgere og typevalg.

Husk, at ID-vælgeren skal matche et HTML-elements ID-attribut.

Specificitet

ID-vælgere har en høj specificitet, hvilket gør dem vanskelige at tilsidesætte. Klasser har en meget lavere specificitet og er generelt den foretrukne måde at style elementer på for at undgå specificitetsproblemer.

Her er et eksempel på en jQuery-metode, der vælger alle afsnitselementer og tilføjer en klasse af "valgt" til dem:

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

$("p").addClass("selected");

Ok, tilbage til jQuery

I jQuery er klasse- og ID-vælgerne de samme som i CSS. Hvis du vil vælge elementer med en bestemt klasse, skal du bruge en prik ( .) og klassens navn. Hvis du vil vælge elementer med et bestemt ID, skal du bruge hash-symbolet ( #) og ID-navnet. Bemærk, at HTML ikke er store og små bogstaver, og derfor er det bedst at holde HTML-markering og CSS-vælgere små bogstaver.

Valg efter klasse:

Paragraph with a class.

$(".p-with-class").css("color", "blue"); // colors the text blue

Valg af id:

  • List item with an ID.
  • $("#li-with-id").replaceWith("

    Socks

    ");

    Du kan også vælge bestemte elementer sammen med deres klasser og ID'er:

    Valg efter klasse

    Hvis du vil vælge elementer med en bestemt klasse, skal du bruge en prik (.) Og klassens navn.

    Paragraph with a class.

    $(".pWithClass").css("color", "blue"); // colors the text blue

    Du kan også bruge klassevælgeren i kombination med et tagnavn for at være mere specifikt.

    
        
      My Wish List
    `

    $("ul.wishList").append("
  • New blender
  • ");

    Valg af id

    Hvis du vil vælge elementer med en bestemt ID-værdi, skal du bruge hash-symbolet (#) og ID-navnet.

  • List item with an ID.
  • $("#liWithID").replaceWith("

    Socks

    ");

    Som med klassevælgeren kan dette også bruges i kombination med et tagnavn.

    News Headline

    $("h1#headline").css("font-size", "2em");

    Vælgere, der fungerer som filtre

    Der er også vælgere, der fungerer som filtre - de starter normalt med kolon. For eksempel :firstvælger vælgeren det element, der er det første barn til sin forælder. Her er et eksempel på en ikke-ordnet liste med nogle listeelementer. JQuery-vælgeren under listen vælger den første

  • elementet på listen - "Ét" listeelement - og bruger derefter .cssmetoden til at gøre teksten grøn.

    
         
    • One
    • Two
    • Three
    $("li:first").css("color", "green");

    Bemærk: Glem ikke, at anvendelse af css i JavaScript ikke er en god praksis. Du skal altid give dine stilarter i css-filer.

    En anden filtreringsvælger :contains(text)vælger elementer, der har en bestemt tekst. Placer den tekst, du vil matche, i parentes. Her er et eksempel med to afsnit. JQuery-vælgeren tager ordet “Moto” og ændrer farven til gul.

    Hello

    World

    $("p:contains('World')").css("color", "yellow");

    På samme måde :lastvælger vælgeren det element, der er det sidste barn til sin forælder. JQuery-vælgeren nedenfor vælger den sidste

  • element på listen - listen "Tre" - og bruger derefter .cssmetoden til at gøre teksten gul.

    $("li:last").css("color", "yellow");

    Bemærk: I jQuery-vælgerenWorlder det i enkelt-citater, fordi det allerede er inde i et par dobbelt-citater. Brug altid enkelt-citater inde i dobbelt-citater for at undgå utilsigtet at afslutte en streng.

    Flere vælgere I jQuery kan du bruge flere vælgere til at anvende de samme ændringer på mere end et element ved hjælp af en enkelt kodelinje. Du gør dette ved at adskille de forskellige id'er med et komma. Hvis du f.eks. Vil indstille baggrundsfarven på tre elementer med henholdsvis kat, hund og rotte til rød, skal du blot gøre:

    $("#cat,#dog,#rat").css("background-color","red");

    Dette er blot nogle få af de vælgere, der er tilgængelige til brug i jQuery. Se afsnittet Flere oplysninger for et link til den komplette liste på jQuery-webstedet.

    Mere information:

    • Fuld liste over jQuery-vælgere