Selettori jQuery
I selettori jQuery sono una delle parti più importanti della libreria jQuery.
Selettori jQuery
I selettori jQuery consentono di selezionare e manipolare gli elementi HTML.
I selettori jQuery vengono utilizzati per "trovare" (o selezionare) elementi HTML in base al loro nome, id, classi, tipi, attributi, valori di attributi e molto altro. Si basa sui selettori CSS esistenti e, inoltre, ha alcuni selettori personalizzati.
Tutti i selettori in jQuery iniziano con il simbolo del dollaro e le parentesi: $().
L'elemento Selettore
Il selettore di elementi jQuery seleziona gli elementi in base al nome dell'elemento.
Puoi selezionare tutti <p>gli elementi in una pagina come questa:
$("p")
Esempio
Quando un utente fa clic su un pulsante, tutti <p>gli elementi verranno nascosti:
Esempio
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Il selettore #id
Il selettore jQuery utilizza l'attributo id di un tag HTML per trovare l'elemento specifico.#id
Un id dovrebbe essere univoco all'interno di una pagina, quindi dovresti usare il selettore #id quando vuoi trovare un singolo elemento univoco.
Per trovare un elemento con un ID specifico, scrivi un carattere hash, seguito dall'id dell'elemento HTML:
$("#test")
Esempio
Quando un utente fa clic su un pulsante, l'elemento con id="test" sarà nascosto:
Esempio
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Il selettore .class
.classIl selettore jQuery trova elementi con una classe specifica.
Per trovare elementi con una classe specifica, scrivi un punto, seguito dal nome della classe:
$(".test")
Esempio
Quando un utente fa clic su un pulsante, gli elementi con class="test" verranno nascosti:
Esempio
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Altri esempi di selettori jQuery
| 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 |
Usa il nostro jQuery Selector Tester per dimostrare i diversi selettori.
Per un riferimento completo di tutti i selettori jQuery, vai al nostro Riferimento selettori jQuery .
Funzioni in un file separato
Se il tuo sito web contiene molte pagine e desideri che le tue funzioni jQuery siano facili da mantenere, puoi inserire le tue funzioni jQuery in un file .js separato.
Quando dimostriamo jQuery in questo tutorial, le funzioni vengono aggiunte direttamente nella <head>
sezione. Tuttavia, a volte è preferibile inserirli in un file separato, come questo (usa l'attributo src per fare riferimento al file .js):
Esempio
<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>