selectori jQuery sunt una dintre cele mai importante părți ale bibliotecii jQuery.
jQuery Selectori
selectoare jQuery vă permit să selectați și să manipuleze HTML element(s) .
selectoare jQuery sunt folosite pentru a "find" (or select) elemente HTML bazate pe nume, id, clase, tipuri, atribute, valorile lor de atribute și multe altele. Se bazează pe existente Selectori CSS , și , în plus, are unele selectori personalizate proprii.
Toate selectoare în jQuery începe cu semnul dolar și paranteze: $() .
Selectorul elementului
Selectorul element de jQuery selecteaza elemente bazate pe numele elementului.
Puteți selecta toate <p> elemente dintr - o pagină ca aceasta:
$("p")
Example
Atunci când un utilizator face clic pe un buton, toate <p> elemente vor fi ascunse:
Exemplu
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Încearcă - l singur » Selectorul #ID
Selectorul #ID jQuery utilizează id atributul unei etichete HTML pentru a găsi elementul specific.
Un ID trebuie să fie unic într-o pagină, astfel încât ar trebui să utilizați selectorul #ID atunci când doriți să găsiți un singur element, unic.
Pentru a găsi un element cu un anumit cod, scrie un caracter hash, urmat de id-ul elementului HTML:
$("#test")
Example
Atunci când un utilizator face clic pe un buton, elementul cu id = „test“ va fi ascuns:
Exemplu
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Încearcă - l singur » Selectorul .class
Selectorul de clasă jQuery găsește elemente cu o anumită clasă.
Pentru a găsi elemente cu o anumită clasă, scrie un caracter perioadă, urmat de numele clasei:
$(".test")
Example
Atunci când un utilizator face clic pe un buton, elementele cu class = „test“ va fi ascuns:
Exemplu
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Încearcă - l singur » Mai multe exemple de jQuery Selectors
| Sintaxă | Descriere | Exemplu |
|---|---|---|
| $ ( "*") | Selectează toate elementele | Incearca-l |
| $ (Aceasta) | Selectează elementul HTML curent | Incearca-l |
| $ ( "P.intro") | Selectează toate <p> elemente cu class = "intro" | Incearca-l |
| $ ( "P: în primul rând") | Selectează primul <p> elementul | Incearca-l |
| $ ( "Li ul: mai întâi") | Selectează primul <li> element primul <ul> | Incearca-l |
| $ ( "Li ul: primul-copil") | Selectează primul <li> element al fiecărui <ul> | Incearca-l |
| $ ( "[Href]") | Selectează toate elementele cu un atribut href | Incearca-l |
| $ ( "Un [target = '_ blank']") | Selectează toate elementele <a> cu o țintă atribut valoare egală cu "_blank" | Incearca-l |
| $ ( "O [țintă! = '_ Blank']") | Selectează toate elementele <a> cu o valoare de atribut țintă nu egal cu "_blank" | Incearca-l |
| $ ( ": Buton") | Selectează toate <button> elemente și <input> elemente de „buton“ type = | Incearca-l |
| $ ( "Tr: chiar") | Selectează toate chiar <tr> elemente | Incearca-l |
| $ ( "Tr: nui") | Selectează toate impare <tr> elemente | Incearca-l |
Utilizați nostru jQuery Selector Tester pentru a demonstra diferite selectorii.
Pentru o referință completă a tuturor selectorii jQuery, vă rugăm să accesați pagina jQuery Căutători de referință .
Funcții Într-un fișier separat
Dacă site-ul dvs. conține o mulțime de pagini și doriți ca funcțiile jQuery să fie ușor de întreținut, puteți pune funcțiile jQuery într-un fișier .js separat.
Când vom demonstra jQuery în acest tutorial, funcțiile sunt adăugate direct în <head> secțiunea. Cu toate acestea, uneori este preferabil să le pun într - un fișier separat, ca aceasta (folositi src atributul pentru a se referi la fișierul js):
Exemplu
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6»