„jQuery“ selektoriai paaiškino: klasių parinkėjai, identifikatoriai ir dar daugiau

„jQuery“ selektoriai

„jQuery“ naudoja CSS stiliaus parinkiklius HTML puslapio dalims ar elementams pasirinkti. Tada jis leidžia jums ką nors padaryti su elementais, naudojant „jQuery“ metodus ar funkcijas.

Norėdami naudoti vieną iš šių selektoriai, įveskite dolerio ženklas ir skliaustus po to, kai: $(). Tai yra jQuery()funkcijos sutrumpinimas . Skliausteliuose pridėkite norimą pasirinkti elementą. Galite naudoti viengubas arba dvigubas kabutes. Po to pridėkite tašką po skliaustuose ir norimą naudoti metodą.

„JQuery“ klasės ir ID parinkėjai yra panašūs į CSS. Prieš tęsdami, apžvelkime tai greitai.

ID pasirinkimas CSS

CSS ID selektorius taiko stilius konkrečiam HTML elementui. CSS ID parinkiklis turi atitikti HTML elemento ID atributą. Skirtingai nuo klasių, kurios gali būti taikomos keliems svetainės elementams, konkretus ID gali būti taikomas tik vienam atskiram svetainės elementui. CSS ID pakeis CSS klasės ypatybes. Norėdami pasirinkti elementą su konkrečiu ID, parašykite maišos (#) simbolį, po kurio nurodomas elemento ID.

Sintaksė

#specified_id { /* styles */ }

Galite sujungti ID parinkiklį su kitų tipų selektoriais, kad sukurtumėte labai konkretų elementą.

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

Pastaba apie ID

Jei įmanoma, reikėtų vengti asmens tapatybės dokumento. Kadangi jis pasižymi dideliu specifiškumu ir jį galima nepaisyti, tik jei įterpiate stilius arba į juos įtraukiate stilių . ID viršija klasės selektorių ir tipo selektorių svorį.

Atminkite, kad ID parinkiklis turi atitikti HTML elemento ID atributą.

Specifiškumas

ID pasirinkėjai turi labai specifiškumą, todėl juos sunku nepaisyti. Klasės turi daug mažesnį specifiškumą ir paprastai yra pageidaujamas stiliaus elementų būdas, siekiant išvengti specifiškumo problemų.

Štai „jQuery“ metodo pavyzdys, kuris parenka visus pastraipos elementus ir prideda prie jų „pasirinktų“ klasę:

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

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

Gerai, grįžkime į „jQuery“

„JQuery“ klasės ir ID parinkikliai yra tokie patys kaip CSS. Jei norite pasirinkti elementus su tam tikra klase, naudokite tašką ( .) ir klasės pavadinimą. Jei norite pasirinkti elementus su tam tikru ID, naudokite maišos simbolį ( #) ir ID pavadinimą. Atminkite, kad HTML nėra didžiųjų ir mažųjų raidžių, todėl geriausia praktiką HTML žymėjimą ir CSS parinkiklius laikyti mažosiomis raidėmis.

Pasirinkimas pagal klasę:

Paragraph with a class.

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

Pasirinkimas pagal ID:

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

    Socks

    ");

    Taip pat galite pasirinkti tam tikrus elementus, jų klases ir ID:

    Pasirinkimas pagal klases

    Jei norite pasirinkti elementus su tam tikra klase, naudokite tašką (.) Ir klasės pavadinimą.

    Paragraph with a class.

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

    Taip pat galite naudoti klasės parinkiklį kartu su žymos pavadinimu, kad būtų tikslesnis.

    
        
      My Wish List
    `

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

    Pasirinkimas pagal ID

    Jei norite pasirinkti elementus su tam tikra ID reikšme, naudokite maišos simbolį (#) ir ID pavadinimą.

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

    Socks

    ");

    Kaip ir klasės parinkiklyje, tai taip pat galima naudoti kartu su žymos pavadinimu.

    News Headline

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

    Selektoriai, kurie veikia kaip filtrai

    Taip pat yra selektorių, kurie veikia kaip filtrai - paprastai jie prasideda dvitaškiais. Pavyzdžiui, :firstselektorius pasirenka elementą, kuris yra pirmasis jo tėvų vaikas. Čia pateikiamas nesutvarkyto sąrašo su kai kuriais sąrašo elementais pavyzdys. „JQuery“ selektorius po sąrašu parenka pirmąjį

  • sąrašo elementą - sąrašo elementą „Vienas“ - ir tada .cssmetodas naudojamas tekstui paversti žaliu.

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

    Pastaba: nepamirškite, kad css naudojimas „JavaScript“ nėra gera praktika. Savo stilius visada turėtumėte pateikti CSS failuose.

    Kitas filtravimo parinkiklis, :contains(text)pasirenka elementus, turinčius tam tikrą tekstą. Įdėkite skliausteliuose norimą atitikti tekstą. Štai pavyzdys su dviem pastraipomis. „JQuery“ parinkiklis paima žodį „Moto“ ir pakeičia jo spalvą į geltoną.

    Hello

    World

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

    Panašiai :lastselektorius pasirenka elementą, kuris yra paskutinis jo tėvų vaikas. Žemiau esantis JQuery parinkiklis parenka paskutinį

  • sąrašo elementą - sąrašo elementą „Trys“ - ir tada .cssmetodu tekstas tampa geltonas.

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

    Pastaba: „jQuery“ selektoriujeWorldpateikiamos vienos kabutės, nes jis jau yra dvigubų kabučių poroje. Dvigubose kabutėse visada naudokite viengubas kabutes, kad netyčia nenutrauktumėte eilutės.

    Keli parinkikliai „jQuery“ galite naudoti kelis selektorius, kad tuos pačius pakeitimus pritaikytumėte daugiau nei vienam elementui, naudodami vieną kodo eilutę. Tai darote atskirdami skirtingus ID kableliu. Pvz., Jei norite nustatyti raudonos spalvos trijų elementų, kurių katės, šuns ir žiurkės ID yra atitinkamai, fono spalvą:

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

    Tai yra tik keli parinkikliai, kuriuos galima naudoti „jQuery“. Skiltyje „Daugiau informacijos“ rasite nuorodą į visą „jQuery“ svetainės sąrašą.

    Daugiau informacijos:

    • Visas „jQuery“ selektorių sąrašas