jQuery keurders


jQuery-keurders is een van die belangrikste dele van die jQuery-biblioteek.


jQuery keurders

jQuery-kiesers laat jou toe om HTML-element(e) te kies en te manipuleer.

jQuery-kiesers word gebruik om HTML-elemente te "vind" (of te kies) gebaseer op hul naam, ID, klasse, tipes, eienskappe, waardes van eienskappe en nog baie meer. Dit is gebaseer op die bestaande CSS-keurders , en daarbenewens het dit 'n paar eie pasgemaakte keurders.

Alle keurders in jQuery begin met die dollarteken en hakies: $().


Die element Selector

Die jQuery-elementkieser kies elemente gebaseer op die elementnaam.

Jy kan alle <p>elemente op 'n bladsy soos volg kies:

$("p")

Voorbeeld

Wanneer 'n gebruiker op 'n knoppie klik, <p>sal alle elemente versteek word:

Voorbeeld

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

Die #id-kieser

Die jQuery -kieser gebruik die id-kenmerk van 'n HTML-merker om die spesifieke element te vind.#id

'n ID moet uniek binne 'n bladsy wees, dus moet jy die #id-kieser gebruik wanneer jy 'n enkele, unieke element wil vind.

Om 'n element met 'n spesifieke id te vind, skryf 'n hash-karakter, gevolg deur die id van die HTML-element:

$("#test")

Voorbeeld

Wanneer 'n gebruiker op 'n knoppie klik, sal die element met id="test" versteek word:

Voorbeeld

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});


Die .klas-keurder

Die jQuery .class-keurder vind elemente met 'n spesifieke klas.

Om elemente met 'n spesifieke klas te vind, skryf 'n puntkarakter, gevolg deur die naam van die klas:

$(".test")

Voorbeeld

Wanneer 'n gebruiker op 'n knoppie klik, sal die elemente met class="test" versteek word:

Voorbeeld

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

Meer voorbeelde van jQuery Selectors

Syntax Description Example
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements

Gebruik ons jQuery Selector Tester om die verskillende keurders te demonstreer.

Vir 'n volledige verwysing van al die jQuery-keurders, gaan asseblief na ons jQuery-keurdersverwysing .


Funksies in 'n aparte lêer

As jou webwerf baie bladsye bevat, en jy wil hê dat jou jQuery-funksies maklik moet wees om te onderhou, kan jy jou jQuery-funksies in 'n aparte .js-lêer plaas.

Wanneer ons jQuery in hierdie handleiding demonstreer, word die funksies direk in die <head> afdeling bygevoeg. Soms is dit egter verkieslik om hulle in 'n aparte lêer te plaas, soos hierdie (gebruik die src-kenmerk om na die .js-lêer te verwys):

Voorbeeld

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>


jQuery Oefeninge

Toets jouself met oefeninge

Oefening:

Gebruik die korrekte kieser om alle <p>-elemente te versteek.

$("").hide();