Wprowadzenie do elementów jQuery
jQuery działa z elementami HTML. Oznacza to, że wybieramy niektóre elementy strony HTML i wykonujemy na nim pewne działania. Istnieje wiele selektorów w jQuery. Zobaczymy szczegółowo każdy selektor.
Składnia:
$(selector).action()
Gdzie znak $ służy do symbolizowania jQuery,
Selektor służy do wybrania elementu HTML, a akcja polega na wykonaniu akcji JQuery na wybranym elemencie. Zatem selektory jQuery, które używają powyższej składni, będą teraz podobne do poniższych przykładów.
Przykład:
$('div').css('background-color', 'green');
$('p').css('border', '2px solid red');
$('span').css('color', 'red');
Program demonstracyjny ilustrujący powyższą składnię i działanie jQuery.
Kod:
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
element p
element SPANWynik:
jQuery używa składni CSS do wybierania elementów. Selektory jQuery najpierw znajdują / wybierają element html, a następnie wykonują akcję na elementach html.
8 najlepszych selektorów jQuery
Każdy element tutaj jest wybierany na podstawie jego nazwy, identyfikatora, klas, typów itp. Ponadto możemy budować własne selektory zdefiniowane przez użytkownika. Selektory, których nauczymy się w tym samouczku.
- Selektor elementu
- Selektor identyfikatorów
- Selektor klas
- Selektor: eq ()
- The: pierwszy Selector, The: ostatni Selector, The: parzysty Selector, The: nieparzysty Selector
- Różnica między: first i: first_child
- Różnica: last i: last_child
- Łączenie metod jQuery
1. Element Selector
Jak widać w powyższym programie, jak
$('p').css('border', '2px solid red');
Selektor zawsze zaczyna się od $ (znak dolara), po którym następuje nawias (). Ten selektor wybiera cały akapit
elementy na danej stronie. CSS to akcja, którą należy wykonać na elemencie p, która tworzy ponadto granicę 2 px, bryłę typu granicznego i kolor obramowania na czerwonym elemencie na każdym elemencie p.
Przykład:
- Zdarzenie: Użytkownik klika przycisk, gdy dokument jest w pełni załadowany (za pomocą funkcji zdarzenia dokumentu).
- Działanie w przypadku tego zdarzenia: Aby ustawić granicę elementu akapitu.
Kod:
$(document).ready(function() (
$('#button').click(function() (
$('p').css('border', '2px solid red');
));
));
2. Selektor identyfikatora
Ten selektor zaczyna się od #, po którym następuje id elementu html, który odnosi się do atrybutu id elementu html.
Składnia:
$('#idname').someaction();
Kod:
$(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!
To pierwszy element
To jest drugi element
Wynik:
3. Selektor klas
Ten atrybut klasy elementu html o tej nazwie .classname zostanie wybrany za pomocą tego selektora. Atrybut class służy do dodawania stylizacji dla kilku elementów HTML.
Składnia:
$('.classname').someaction();
4. Selektor: eq ()
Ten: selektor eq () wybiera element HTML o podanym indeksie. Indeks zaczyna się od 0.
Składnia:
$(“:eq(index)”)
Kod:
$(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
Pierwszy element
Drugi element
Trzeci element
Foruth Elemnet
- Kawa
- herbata
Wynik:
5. The: pierwszy Selektor, : ostatni Selektor, : parzysty Selektor, : nieparzysty Selektor
Rzućmy okiem na ten selektor.
Grupa
- The: first Selector - Znajduje pierwszy element w grupie.
Kod:
$(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
Pierwszy element
Drugi element
Trzeci element
Foruth Elemnet
Wynik:
- The: last Selector - Znajduje ostatni element w grupie.
Kod:
$(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
Pierwszy element
Drugi element
Trzeci element
Foruth Elemnet
Wynik:
Stół
- Selektor: parzysty - Znajduje wszystkie parzyste wiersze tabeli.
- Selektor: nieparzysty - Znajduje wszystkie nieparzyste wiersze tabeli.
W poniższym programie zielony podświetla parzyste rzędy, a żółty podświetla nieparzyste rzędy.
Kod:
$(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
Wynik:
Ponieważ nauczyliśmy się o pierwszym i ostatnim, parzystym i nieparzystym, dowiedzmy się także o różnicach między pierwszym a pierwszym dzieckiem.
6. Różnica: first i: first_child
- : first - jak wiemy: najpierw wybiera pierwszy element.
- : first-child - Wybierz elementy, które są pierwszym dzieckiem ich odpowiedniego rodzica.
Poniżej znajduje się demo, które wyjaśnia tę różnicę.
$(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
Pierwszy element
Drugi element
Pierwszy element
Ostatni element
Ten wynik jest wyświetlany po kliknięciu pierwszego przycisku pokaż pierwszy.
Wynik:
Ten wynik jest wyświetlany, gdy drugi przycisk pokazuje kliknięcie pierwszego dziecka.
Wynik:
7. Różnica: last i: last_child
Podobnie różnica między: last a: last-child jest taka sama jak powyżej, wystarczy zmienić typ selektora.
Kod:
$(document).ready(function()(
$("#buttonfirst").click(function()(
$("p:last").css("background-color", "green");
));
$("#buttonfirstchild").click(function()(
$("p:last-child").css("background-color", "green");
));
));
8. Łączenie metod jQuery
Do tej pory widzieliśmy jeden selektor z jedną akcją, ale jQuery pozwala nam napisać jeden selektor i wiele akcji na tym samym elemencie.
Kod:
$(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
Przed kliknięciem mnie przycisk
Wynik:
Po Kliknij przycisk mnie
Wynik:
Polecane artykuły
To jest przewodnik po jQuery Elements. Tutaj omawiamy wprowadzenie i 8 najlepszych selektorów jQuery wraz z implementacją kodu. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -
- 4 rodzaje dziedziczenia w Javie
- 5 najlepszych narzędzi do wdrażania Java
- Seria Fibonacciego w Javie
- Lista słów kluczowych w Javie
- Przewodnik po przykładach paska postępu JQuery
- Generowanie serii Fibonacciego z przykładem