Gli ultimi tutorial di sviluppo web
 

jQuery I selettori


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»