jQuery w prostych przykładach

jQuery to poręczna i szybka biblioteka/framework dla JavaScriptu ułatwiająca znacząco implementowanie potrzebnych funkcjonalności w tym języku takich jak obsługa AJAX, pobieranie i modyfikowanie danych w drzewie DOM strony (HTML), obsługa zdarzeń i więcej. Przygodę z jQuery zaczynamy pobierając skompresowany plik JS ze strony projektu. W katalogu z pobranym plikiem tworzymy testowy plik HTML do testów (np. test.html) o kodzie:

<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
      });

Oto kilka prostych przykładów. Do części body naszej testowej strony dodajmy:

<img src="book.png" alt="to jest alt" id="fotka" />
<div id="results"></div>

Kontener DIV oraz obrazek. Wykonanie kodu JS po kliknięciu w obrazek wyglądałoby tak:

<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>

Można także wyszukać elementy o podanej klasie stosując kropkę: $(".nazwa_klasy");. Można także dobrać się do danego elementu znając jego kolejność, np: $("td:eq(2)"); "znajdzie" trzeci tag TD w dokumencie (numeracja od zera). Można też łączyć te metody, np.: $("#content .klasa:eq(1)"); znajdzie drugi element o klasie "klasa" wewnątrz elementu o ID "content".

Pobranie wartości atrybutu taga jest równie proste:

alert($("#fotka").attr('alt'));

Metoda attr zwróci wartość podanego atrybutu (w tym przypadku dla elementu o ID "fotka" :))

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>

Żeby pobrać wartość taga, trzeba wywołać te same metody, ale bez argumentu:

<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>

Po kliknięciu w element (link) o klasie "good" następuje wywołanie funkcji live, która to wysyła żądanie AJAXem za pomocą $.ajax. Jako parametry podajemy URL żądania, opcję keszowania (zazwyczaj nie chcemy by żądanie się skeszowało), jak i funkcje do wykonania w przypadku wykonania, czy też nie wykonania żądania. W naszym przypadku przy udanym wykonaniu żądania wywołana zostanie funkcja podana pod argumentem "success" - zawartość odpowiedzi powędruje do taga o ID "result".

Dodane: 02.06.2009 przez riklaunim

jQuery w prostych przykładach

Podziel się!

Menu

Biblioteki