selektorów jQuery są jednym z najważniejszych elementów biblioteki jQuery.
jQuery selektory
selektorów jQuery pozwala wybrać i manipulować element (y) HTML.
selektorów jQuery są wykorzystywane do "znaleźć" (lub wybierz) elementy HTML na podstawie ich nazw, ID, klas, typów atrybutów, wartości atrybutów i wiele więcej. Jest on oparty na istniejących selektorów CSS , a ponadto ma kilka własnych niestandardowych selektorów.
Wszystkie selektory w jQuery rozpoczynają się od znaku dolara i nawiasów: $ ().
Selektor elementu
Selektor elementu jQuery wybiera elementy na podstawie nazwy elementu.
Można zaznaczyć wszystkie <p> elementów na stronie w taki sposób:
$("p")
Przykład
Gdy użytkownik kliknie na przycisk, wszystkie <p> Elementy zostaną ukryte:
Przykład
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Spróbuj sam " Selektor ID
Selektor ID jQuery używa atrybutu id znacznika HTML, aby znaleźć konkretny element.
Identyfikator powinien być unikalny w obrębie strony, więc należy użyć przełącznika ID, gdy chcesz znaleźć jeden, niepowtarzalny element.
Aby znaleźć element o określonym id, napisać znak hash, a następnie id elementu HTML:
$("#test")
Przykład
Gdy użytkownik kliknie na przycisk, element o id = "test" zostanie ukryta:
Przykład
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Spróbuj sam " Selektor .class
Selektor klasy jQuery znajdzie elementy z danej klasy.
Aby znaleźć elementy z danej klasy, napisać znak epoki, po którym następuje nazwa klasy:
$(".test")
Przykład
Gdy użytkownik kliknie na przycisk, elementy z atrybutem class = "test" zostanie ukryta:
Przykład
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Spróbuj sam " Więcej Przykłady jQuery selektorów
| Syntax | Description | Example |
|---|---|---|
| $("*") | Selects all elements | Try it |
| $(this) | Selects the current HTML element | Try it |
| $("p.intro") | Selects all <p> elements with class="intro" | Try it |
| $("p:first") | Selects the first <p> element | Try it |
| $("ul li:first") | Selects the first <li> element of the first <ul> | Try it |
| $("ul li:first-child") | Selects the first <li> element of every <ul> | Try it |
| $("[href]") | Selects all elements with an href attribute | Try it |
| $("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | Try it |
| $("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | Try it |
| $(":button") | Selects all <button> elements and <input> elements of type="button" | Try it |
| $("tr:even") | Selects all even <tr> elements | Try it |
| $("tr:odd") | Selects all odd <tr> elements | Try it |
Skorzystaj z naszej jQuery Selector Tester do wykazania różnych selektorów.
Pełną odniesienia wszystkich selektorów jQuery, przejdź do naszej jQuery selektorów Reference .
Funkcje w oddzielnym pliku
Jeżeli witryna zawiera wiele stron, a chcesz, aby funkcje jQuery być łatwe w utrzymaniu, można umieścić swoje funkcje jQuery w osobnym pliku .js.
Kiedy wykazać jQuery w tym kursie, funkcje są dodawane bezpośrednio do sekcji <head>. Jednak czasami lepiej jest umieścić je w osobnym pliku, tak (użyć atrybutu src odwołać się do pliku .js):
Przykład
<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>
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 » Ćwiczenia 6»