jQuery to biblioteka która ułatwia pisanie aplikacji internetowych z wykorzystaniem JavaScriptu. Podczas projektowania tej biblioteki, jej twórcy przyświecały następujące cele:
- napisz mniej, uzyskaj duży rezultat
- lekkość i łatwość użycia
- kompatybilność między przeglądarkami
- prostota dodawania nowych rzeczy
jQuery posiada wsparcie w Microsoft ASP.NET 4.0. Dzięki temu uzyskujemy wsparcie IntelliSense.
Oczywiście oprócz zalet jQuery są też i wady:
- dodatkowe dane do załadowania
- spadek wydajności w porównaniu do czystego JavaScriptu
Biorąc jednak zalety można śmiało powiedzieć, że zakrywają one wszystkie wady. Warto podczas korzystania z tej biblioteki korzystać z wersji dostępnych na CDN googla czy Microsoft. Dzięki temu mamy szansę, że inni użytkownicy mają już scachowany plik w swojej przeglądarce.
Czas na podstawy języka i kilka przykładów.
Na początek dodajemy referencję do pliku biblioteki oraz dokumentacji, z której korzysta następnie IntelliSense:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<% /* %><script src="~/Scripts/jquery-1.4.1-vsdoc.js"></script><% */ %>
Linijki te wpisujemy do sekcji head naszej strony (lub MasterPage w moim przypadku).
Tutaj jedna uwaga. W większości przeglądarek kod JavaScript uruchamia się przed załadowaniem całego kodu HTML. aby zapobiec temu w jQuery stosujemy składnię:
<script type="text/javascript">
$(function () {
//kod
});
</script>
1. Podstawy języka
Zapytanie jQuery:
[zmienna=]$(selektor).metoda(argument, funkcja){
$(selektor).metoda(...)
...})
Składnia jest banalnie prosta, zobaczmy przykład:
<script type="text/javascript">
$(function () {
$("div").wrapInner("<h3></h3>");
});
</script>
<div>Ala ma kota</div>
Po uruchomieniu zobaczymy:
Tak więc działanie powyższego kodu można opisać w następujący sposób:
Znajdź wszystkie elementy div i ich zawartość wprowadź między znaczniki <h2></h2>
Inny przykład:
<script type="text/javascript">
$(function () {
$("#menu").width(500);
});
</script>
Powyższy przykład czytamy: Znajdź element o id = #menu i nadaj mu szerokość 500. Teraz jeżeli chcielibyśmy nadać wszystkim akapitom w elemencie o id #menu nadać kolor czerwony, zapewne napisalibyśmy to tak:
$(function () {
$("#menu").width(500);
$("#menu p").css("color", "Red");
});
Kod ten jest jednak nieefektywny w przypadku dużych dokumentów HTML. Należy pamiętać, że dokument jest przeszukiwany od góry do dołu. Można przyśpieszyć operację i nie wykonywać ponownego szukania fragmentu oznaczonego #menu poprzez zapisanie jego pozycji w zmiennej:
$(function () {
var menu = $("#menu").width(500);
$("p", menu).css("color", "Red");
});
2. Selektory
Jest to podstawowa możliwość przyporządkowywania działania jQuery do konkretnych elementów strony. Do dyspozycji mamy całą ich gamę:
* - każdy element
E - elementy typu E
#id - element o id = #id
.class - elementy o klasie class
E F - każdy element F który jest potomkiem E (np. ("div p") wybiera wszystkie p znajdujące się w div)
E > F - każdy F, który jest bezpośrednio dzieckiem E
E[foo] - każdy element E z atrybutem foo
E[foo = "something"] - każdy E z atrybutem foo równym something
3. Filtry
jQuery po znalezieniu pasujących elementów do naszego zapytania, pozwala je filtrować. Do dyspozycji mamy następujące filtry:
:even - nieparzyste elementy
:not() - wszystkie elementy oprócz podanych
:contains('') - te elementy które zawierają określoną frazę
:first - pierwszy ze znalezionych elementów
:last - ostatni ze znalezionych elementów
4. Niektóre z metod jQuery
Praca ze znalezionymi elementami strony jest łatwa dzięki licznym metodą jQuery. Niektóre z nich:
addClass("nazwa klasy") - nadaje klasę z pliku css
removeClass("klasa") - usuwa klasę
toggleClass("nowa_klasa") - zamienia aktualną klasę na nowa_klasa
attr("klucz", "wartosc") - dodaje atrybut klucz o wartości wartosc
prev() - zwraca element na tym samym poziomie zagnieżdżenia, znajdujący się przed wyselekcjonowanym elementem
next() - to samo co powyżej tylko że zwraca element za aktualnie wyselekcjonowanym
replaceAll(elment) - przepisuje zawartość wyszukanych elementów do obiektów określonych przez element np. $("p").replaceAll("div");
replaceWith(zawartosc) - przypisuje wyszukanym elementom treść zmiennej zawartosc
wrap(html) - umieszcza każdy znaleziony element pomiędzy znacznikami html
wrapAll(html) - wszystkie znalezione elementy umieszcza w pojedynczym znaczniku html
remove() - usuwa wszystkie elementy ze strony
width() - zwraca szerokość wybranych elementów
height() - zwraca wysokość wybranych elementów
5. Zdarzenia
Zdarzenia są niezwykle proste w obsłudze w jQuery. Zobaczmy to na przykładzie:
$(function () {
$(".link").click(function () {
$(this).css("color", "Red");
});
});
Słówko this - identyfikuje element który został kliknięty. Inne metody które można wykorzystać:
hover(fponad, fpoza) - w momencie najechania na element wywoływana jest metoda fponad, gdy znów kursor zostanie cofnięty fpoza
click(f), keypress(f) - kliknięcie lub naciśnięcie przycisu
mouseout(f), mouseover(f), mouseenter(f), mouseleave(f) - funkcje wywoływane kolejno: w momencie usunięcia kursora z elementu, pojawienia się nad elementem
toggle(f1,f2,f3,...) - dla kolejnych kliknięć wywołuje funkcje f1, f2...
each(f) - dla każdego elementu wywołuje funkcję f
resize(f) - wywołuje funkcję gdy element zostanie przeskalowany
6. Efekty
jQuery umożliwia wykorzystanie efektów bez potrzeby tworzenia skomplikowanego kodu. Do wykorzystania mamy metody takie jak:
show(speed), hide(speed) - wyświetlanie i ukrywanie elementów, speed - czas w ms ile ma zająć efekt
fadeIn(speed), fadeOut(speed) - rozświetla lub wygasza dany element
fadeTo(speed, opacity) - animuje przeźroczystość elementu od aktualnego do opacity
slideIn(speed), slideOut(speed) - efekt wjazdu lub chowania
toggle() - przełącza pomiędzy wyświetlaniem i ukrywaniem elementów
7. Animacje
Animacje można bardzo prosto tworzyć za pomocą metody animate. Metoda ta przyjmuje dwa parametry: params (kod zgodny z css), oraz duration - czyli czas trwania animacji.
Jeżeli chcemy zatrzymać animację wystarczy skorzystać z metody stop().
Znając powyższe pojęcia możemy przejść do pisania znacznie bardziej skomplikowanych przykładów. Warto pamiętać, że każda metoda jQuery zwraca obiekt jQuery który można ponownie wykorzystać. Zobaczmy na przykład:
$(function () {
$("a").mouseover(function () { $(this).addClass("color", "Red") })
.filter(":even").addClass("klasa").end()
.filter(":odd").addClass("klasa2").end()
//......
});
Szukamy elementu a, reagujemy na zdarzenie mouseover. Znalezione elementy filtrujemy w poszukiwaniu nieparzystych elementów. Jeżeli znaleziono np. 10 elementów o po działaniu filtra otrzymamy 5. Funkcja end() mówi: "usuń działanie ostatniego filtra". Dzięki temu znów mamy 10 elementów do dyspozycji itd.
Oprócz standardowych elementów, na stronie http://jqueryui.com/ możemy znaleźć wiele gotowych efektów do wykorzystania w naszej aplikacji. Oprócz tego istnieje mnóstwo pluginów gotowych do wykorzystania w naszych projektach.
Źródło:
Scott Allen - jQuery for the ASP.NET Developer
http://jquery.com/
Komputer Świat Ekspert 5/2009
Brak komentarzy:
Prześlij komentarz