jQuery w prostych przykładach
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert('start z jquery');
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet!</p>
</body>
</html>
Gdzie jquery-1.3.2.min.js to pobrany przeze mnie plik biblioteki jQuery (gdy czytasz ten artykuł może być dostępna już nowsza wersja). Otworzenie strony w przeglądarce wyświetli także JavaScriptowe okno alert - jQuery działa poprawnie.
Stosując jQuery cały kod JavaScript piszemy oddzielnie od kodu X/HTML strony (np. w oddzielnym pliku .js), dzięki czemu kod strony zyskuje na czytelności, jak i łatwiej panować nad kodem JS. Kod JS przechodzący przez jQuery umieszczony jest wewnątrz funkcji:
$(document).ready(function(){
// tutaj kod JS
});
<img src="book.png" alt="to jest alt" id="fotka" />
<div id="results"></div>
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").click(function(){
alert('foto kliknięte');
});
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet!</p>
<img src="book.png" alt="to jest alt" id="fotka" />
<div id="results"></div>
</body>
</html>
Wewnątrz podstawowej funkcji $(document).ready zagnieździliśmy "funkcję" $("img").click, gdzie "img" to nazwa taga, dla jakiego funkcja ta jest przypisana (dla wszystkich tagów img), a ".click()" to metoda jQuery wywoływana, gdy dany element zostanie kliknięty (lista metod jQuery znajdziemy w jej dokumentacji). Po kliknięciu na fotkę nastąpi wywołanie naszej funkcji i wyświetlenie alerta. Funkcja $() nazywana jest selektorem, bo służy do wyboru ("selekcji") elementów.
Zazwyczaj nasze funkcje będziemy chcieli przypisać do taga o podanym ID. Iterowanie po drzewie DOM strony HTML (prościej: pobieranie, edytowanie danych) w jQuery jest bardzo proste. Zamiast $("img") stosujemy $("#fotka"), gdzie znak # oznacza przypisanie funkcji do elementu HTML o podanym ID (u nas "fotka"). W poniższym przykładzie tylko pierwszy obrazek po kliknięciu wyświetli komunikat:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fotka").click(function(){
alert('foto kliknięte');
});
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet!</p>
<img src="book.png" alt="to jest alt" id="fotka" />
<img src="book.png" alt="to jest alt" />
<div id="results"></div>
</body>
</html>
Pobranie wartości atrybutu taga jest równie proste:
alert($("#fotka").attr('alt'));
Dość często chcemy pobrać lub ustawić zawartość danego taga. W jQuery wystarczy wywołać metodę html lub text na selektorze:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").text("Nowy Tekst");
$("#results").html("<b>jQuery!!</b>");
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet!</p>
<img src="book.png" alt="to jest alt" id="fotka" />
<img src="book.png" alt="to jest alt" />
<div id="results"></div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").text("Nowy Tekst");
$("#results").html("<b>jQuery!!</b>");
alert($("p").text());
alert($("#results").html());
});
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet!</p>
<img src="book.png" alt="to jest alt" id="fotka" />
<img src="book.png" alt="to jest alt" />
<div id="results"></div>
</body>
</html>
Żądania AJAX też nie stanową większego problemu, oto przykład:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(".good").live("click", function(){
$.ajax({
url: 'jquery-1.3.2.min.js',
cache: false,
success: function(html){
$("#result").html(html);
}
});
});
</script>
</head>
<body>
<h1>ajax</h1>
<a href="#" class="good">Wyślij żądanie Ajax</a><br />
<textarea id="result" rows="10" cols="80"></textarea>
</body>
</html>
Comment article