Introducere în elementele jQuery
jQuery funcționează cu elemente html. În sensul că selectăm anumite elemente ale paginii html și efectuăm unele acțiuni asupra acesteia. Există mulți selectori în jQuery. Vom vedea fiecare selector în detaliu.
Sintaxă:
$(selector).action()
În cazul în care semnul $ este utilizat pentru a simboliza jQuery,
Un selector este de a selecta elementul html și acțiunea este de a efectua acțiune jquery asupra elementului selectat. Astfel, selectorii jQuery care folosesc sintaxa de mai sus ar fi acum ca exemplele de mai jos.
Exemplu:
$('div').css('background-color', 'green');
$('p').css('border', '2px solid red');
$('span').css('color', 'red');
Un program demo pentru a ilustra sintaxa de mai sus și cum funcționează jQuery.
Cod:
element demo
div p span(
width: 120px;
height: 60px;
padding: 10px;
)
$('document').ready(function() (
$('div').css('background-color', 'green');
$('p').css('border', '2px solid red');
$('span').css('color', 'red');
));
The div element
elementul p
elementul SPANieşire:
jQuery folosește sintaxa CSS pentru a selecta elemente. Selecțiile jQuery găsesc mai întâi / selectează elementul html și apoi efectuează o acțiune asupra elementelor html.
Top 8 selectori jQuery
Fiecare element de aici este selectat pe numele lor de element, ID, clase, tipuri, etc. De asemenea, putem construi selectori proprii definiți de utilizator. Selectorii pe care îi vom învăța în acest tutorial.
- Selectorul elementului
- Selectorul ID
- Selectorul clasei
- Selectorul: eq ()
- The: first Selector, The: last Selector, The: even Selector, The: impare Selector
- Diferența: first și: first_child
- Diferența: last și: last_child
- Lanțarea metodei jQuery
1. Selectorul elementului
După cum se vede în programul de mai sus, cum ar fi
$('p').css('border', '2px solid red');
Selectorul începe întotdeauna cu $ (semnul dolarului) urmat de paranteză (). Acest selector selectează tot paragraful
elemente dintr-o pagină dată. CSS este acțiunea care trebuie efectuată pe elementul p aici, care creează în continuare un chenar de 2 px, tip de bordură solid și culoare de chenar de roșu pe fiecare element p.
Exemplu:
- Eveniment: Utilizatorul face clic pe un buton atunci când documentul este complet încărcat (folosind funcția de eveniment document).
- Acțiune cu privire la acest eveniment: Pentru a seta granița unui element de paragraf.
Cod:
$(document).ready(function() (
$('#button').click(function() (
$('p').css('border', '2px solid red');
));
));
2. Selectorul ID
Acest selector începe cu # urmat de id-ul elementului html care se referă la atributul id al elementului html.
Sintaxă:
$('#idname').someaction();
Cod:
$(document).ready(function()(
$("#new").css("background-color", "green");
));
Welcome to My Page!
$(document).ready(function()(
$("#new").css("background-color", "green");
));
Welcome to My Page!
$(document).ready(function()(
$("#new").css("background-color", "green");
));
Welcome to My Page!
$(document).ready(function()(
$("#new").css("background-color", "green");
));
Welcome to My Page!
Acesta este primul element
Acesta este al doilea element
ieşire:
3. Selectorul clasei
Acest atribut de clasă a elementului html care are acest nume .class va fi selectat cu acest selector. Atributul de clasă este folosit pentru a adăuga styling pentru mai multe elemente html.
Sintaxă:
$('.classname').someaction();
4. Selectorul: eq ()
Acest selector: eq () selectează un element html cu indexul dat. Acest index începe de la 0.
Sintaxă:
$(“:eq(index)”)
Cod:
$(document).ready(function()(
$("p:eq(1)").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:eq(1)").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:eq(1)").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:eq(1)").css("background-color", "green");
));
Welcome to My Page
Primul element
Al doilea element
Al treilea element
Foruth Elemnet
- cafea
- ceai
ieşire:
5. Primul Selector, : ultimul Selector, : chiar Selector, : Impar
Să aruncăm o privire la acest selector.
grup
- The: first Selector - Găsește primul element dintr-un grup.
Cod:
$(document).ready(function()(
$("p:first").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:first").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:first").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:first").css("background-color", "green");
));
Welcome to My Page
Primul element
Al doilea element
Al treilea element
Foruth Elemnet
ieşire:
- The: last Selector - Găsește ultimul element dintr-un grup.
Cod:
$(document).ready(function()(
$("p:last").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:last").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:last").css("background-color", "green");
));
Welcome to My Page
$(document).ready(function()(
$("p:last").css("background-color", "green");
));
Welcome to My Page
Primul element
Al doilea element
Al treilea element
Foruth Elemnet
ieşire:
Masa
- Selectorul: chiar - Găsește toate rândurile uniforme ale unui tabel.
- Selectorul: ciudat - Găsește toate rândurile impare ale unui tabel.
În programul de mai jos, verde evidențiază rândurile par și galbenul evidențiază rândurile impare.
Cod:
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Email
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Email
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Email
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
| | |
|---|---|---|
| | |
| | |
| | |
$(document).ready(function()(
$("tr:even").css("background-color", "green");
$("tr:odd").css("background-color", "yellow");
));
Welcome to My Page
S.No
Email
Phone
1
91-799-2909878
1
91-777-4909878
1
91-789-5909878
ieşire:
Deoarece am aflat despre primul și ultimul, par și ciudat, să aflăm și despre diferențele de la primul și primul copil.
6. Diferența: first și: first_child
- : primul - După cum știm: primul selectează primul element.
- : primul copil - Selectați elementele care sunt primul copil al părintelui respectiv.
Urmează o demonstrație care explică această diferență.
$(document).ready(function()(
$("#buttonfirst").click(function()(
$("p:first").css("background-color", "green");
));
$("#buttonfirstchild").click(function()(
$("p:first-child").css("background-color", "green");
));
));
show first
show first-child
Primul element
Al doilea element
Primul element
Ultimul element
Această ieșire este afișată atunci când faceți clic pe primul buton show.
ieşire:
Această ieșire este afișată când al doilea buton arată primul copil.
ieşire:
7. Diferența: last and: last_child
În mod similar, diferența dintre: ultimul și: ultimul copil este la fel ca mai sus, trebuie doar să schimbăm tipul selectorului.
Cod:
$(document).ready(function()(
$("#buttonfirst").click(function()(
$("p:last").css("background-color", "green");
));
$("#buttonfirstchild").click(function()(
$("p:last-child").css("background-color", "green");
));
));
8. Înlănțuirea metodei jQuery
Până acum, am văzut un selector cu o singură acțiune, dar jQuery ne permite să scriem un singur selector și mai multe acțiuni pe același element.
Cod:
$(document).ready(function()(
$("button").click(function()(
$("div").css("background-color", "red").css("color", "white");
));
));
Welcome to My Page
Hello World
Click me
$(document).ready(function()(
$("button").click(function()(
$("div").css("background-color", "red").css("color", "white");
));
));
Welcome to My Page
Hello World
Click me
$(document).ready(function()(
$("button").click(function()(
$("div").css("background-color", "red").css("color", "white");
));
));
Welcome to My Page
Hello World
Click me
$(document).ready(function()(
$("button").click(function()(
$("div").css("background-color", "red").css("color", "white");
));
));
Welcome to My Page
Hello World
Click me
Înainte de butonul Faceți clic pe mine
ieşire:
După butonul Faceți clic pe mine
ieşire:
Articole recomandate
Acesta este un ghid pentru elementele jQuery. Aici discutăm despre introducerea și primii 8 selectori jQuery împreună cu implementarea codului. De asemenea, puteți consulta următoarele articole pentru a afla mai multe -
- 4 Tipuri de moștenire în Java
- Top 5 Instrumente de implementare Java
- Seria Fibonacci în Java
- Lista de cuvinte cheie în Java
- Ghid pentru exemple de bare de progres JQuery
- Generarea seriei Fibonacci cu exemplu