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>