lug
02
Guida a jquery : solettori di base
Come accennato nell’articolo precedente ( Introduzione a jquery ) il cuore di questa libreria è la funzione $(). Ci permette con delle semplici espressioni di selezionare uno o piu’ elementi di una pagina html.
Partiamo subito con qualche semplice esempio.
$("p").css("border", "1px solid red");
Seleziona tutti i paragrafi del documento corrente e tramite la funzione css inserisce su ogni elemento un bordo di 1px colore rosso.
$("#mean").css("display", "none");
Seleziona l’elemento mean ( <div id=”mean”>qui testo ecc</div> ) e imposta la proprietà display a none. In questo modo il box si nasconde.
Ecco i selettori di base per il framework :
- #ID
Seleziona un qualsiasi elemento con un determinato ID .
Esempio
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("#mean").css("background-color","#000000");
});
</script>
</head>
<body>
<p id="mean"></p>
</body>
</html>
<script>
$(document).ready(function () {
$("#mean").css("background-color","#000000");
});
</script>
$(document).ready() è un evento che si attiva quando il documento è stato caricato del tutto. L’argomento degli eventi verrà approfondito successivamente bisogna pero’ sapere che per manipolare il codice html occorre che la pagina html sia caricata del tutto.
- .class
Selezione tutti gli elementi con la classe specificata
Esempio
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$(".red").css("border","1px solid red");
});
</script>
</head>
<body>
<div class="red">Box 1</div>
<div class="red">Box 2</div>
</body>
</html>
- .class.class
Seleziona tutti gli elementi che hanno ambe due le classi
Esempio
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$(".primaclasse.secondaclasse").css("border","1px solid red");
});
</script>
</head>
<body>
<div class="primaclasse">Box 1</div>
<div class="secondaclasse">Box 2</div>
<div class="primaclasse secondaclasse">Box 3</div> </body>
</html>
Se provate il seguente codice noterete che verrà applicata la funzione css solo al terzo box .
- *
Seleziona tutti gli elementi
Esempio
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("*").css("border","1px solid red");
});
</script>
</head>
<body>
<div>Box1</div>
<div>Box2</div>
</body>
</html>
In questo esempio seleziono tutti gli elementi del documento . Ma è anche possibile selezionare tutti gli elementi all’interno di un elemento padre .
<script>
$(document).ready(function () {
$("#main *").css("border","1px solid red");
});
</script>
- selector
Seleziona i selettori dichiarati
Esempio
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("div").css("border","1px solid red");
});
</script>
</head>
<body>
<div>Box1</div>
<div>Box2</div>
</body>
</html>
Seleziona tutti i tag div e imposta un bordo di 1px colore rosso.
E possibile specificare piu’ selettori per applicare una stessa regola.
<script>
$("div, p ,em").css("border","1px solid red");
</script>
Loading ...
Che cosa ne pensi?! Lascia un commento!