I selettori in JQuery ci permettono di selezionare e manipolare gli elementi HTML e CSS della nostra pagina web.
Sono Andrea Tonin, mi occupo di Web Design dagli alboro del web, spero che questo corso di JQuery vi possa essere utile.
Prima di iniziare dovete conoscere bene i selettori CSS, potete vederli
qui>
Vediamo il seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
/* Script JQuery INIZIO */
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
/* Script JQuery FINE */
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="flip">Click per far slittare il pannello verso il basso</div>
<div id="panel">Hello world!</div>
</body>
</html>
I selettori li troviamo nella porzione di codice:
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
In particolare la sintassi è $(“elemento html da manipolare”). $-> IQuery manipola (“i tag sono tra parentesi e virgolette”)
Vediamo i tipi di selettori JQuery, i più esperti noteranno il chiaro richiamo ai selettori CSS:
$("#test") /* preleva il selettore id */
$(".test") /* preleva il selettore di classe */
$("*") /* preleva tutti gli elementi */
$(this) /* preleva l'elemento corrente */
$("p.intro") /* preleva elemento p di classe a */
$("p:first") /* preleva il primo elemento p che trova nel DOM */
$("ul li:first") /* preleva il primo elemento li del primo ul */
$("ul li:first-child") /* preleva il primo elemento li di ogni ul presente del documento HTML */
$("[href]") /* preleva tutti href */
$("a[target='_blank']") /* preleva tutti href con target blank */
$("a[target!='_blank']") /* preleva tutti href con target DIVERSO da blank */
$(":button") /* preleva tutti i button */
$("tr:even")
$("tr:odd")
