selettori di jQuery sono una delle parti più importanti della libreria jQuery.
jQuery selettori
selettori di jQuery consentono di selezionare e manipolare elemento HTML (s).
selettori di jQuery sono utilizzati per "trovare" (o selezionare) elementi HTML in base al loro nome, l'ID, classi, tipi, attributi, valori di attributi e molto altro ancora.It's based on the existing CSS Selectors , and in addition, it has some own custom selectors. E 'sulla base delle attuali selettori CSS , e, inoltre, ha alcune propri selettori personalizzati.
Tutti i selettori di jQuery iniziano con il simbolo del dollaro e le parentesi: $ ().
Il selettore elemento
Il selettore elemento jQuery seleziona gli elementi in base al nome dell'elemento.
È possibile selezionare tutti gli elementi <p> in una pagina come questa:
$("p")
Esempio
Quando un utente fa clic su un pulsante, tutti gli elementi <p> saranno nascosti:
Esempio
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Prova tu stesso "Il selettore #id
Il selettore #id jQuery utilizza l'attributo id di un tag HTML per trovare l'elemento specifico.
Un ID deve essere univoco all'interno di una pagina, così si dovrebbe utilizzare il selettore #id quando si vuole trovare un singolo elemento, unico nel suo genere.
Per trovare un elemento con un ID specifico, scrivere un carattere hash, seguito dalla 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();
});
});
Prova tu stesso "Il selettore .class
Il selettore di classe jQuery trova elementi con una classe specifica.
Per trovare elementi con una classe specifica, scrivere un carattere di periodo, seguito dal nome della classe:
$(".test")
Esempio
Quando un utente fa clic su un pulsante, gli elementi con class = "test" saranno nascosti:
Esempio
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Prova tu stesso "Altri esempi di jQuery selettori
| 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 |
Utilizza il nostro jQuery Selettore del tester per dimostrare i diversi selettori.
Per un riferimento completo di tutti i selettori di jQuery, si prega di visitare il nostro jQuery selettori di riferimento .
Le funzioni in un file separato
Se il tuo sito contiene un sacco di pagine, e si desidera che le funzioni di jQuery per essere facile da mantenere, si può mettere le funzioni jQuery in un file .js separati.
Quando dimostriamo jQuery in questo tutorial, le funzioni sono aggiunti direttamente nella sezione <head>.However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file): Tuttavia, a volte è preferibile metterli in un file separato, come questo (utilizzare l'attributo src per fare riferimento al file .js):
Esempio
<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>
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»