BLOG

Kurs jQuery – od podstaw cz.2 [selektory, metody]

22.03.2013 r.
11:46
Kurs jQuery – od podstaw cz.2 [selektory, metody]

Oto seria dziesięciu lekcji kursu biblioteki jQuery, od podstaw. Dzisiejsze strony WWW nie mogą być już statyczne, potrzeba im dynamiki, interaktywności (komunikacji z użytkownikiem) oraz szybkiego działania. Wszystkie te cechy możemy zaimplementować dołączając do naszej statycznej strony bibliotekę jQuery.

1.Kurs jQuery – od podstaw cz.1 [instalacja, pierwszy skrypt]
2.Kurs jQuery – od podstaw cz.2 [selektory, metody]
3.Kurs jQuery – od podstaw cz.3 [czytanie i modyfikacja]
4.Kurs jQuery – od podstaw cz.4 [piszemy formularz]
5.Kurs jQuery – od podstaw cz.5 [POST, GET, AJAX]
6.Kurs jQuery – od podstaw cz.6 [funkcje]
7.Kurs jQuery – od podstaw cz.7 [wtyczki]
8.Kurs jQuery – od podstaw cz.8 [najlepsze gotowe rozwiązania]
9.Kurs jQuery – od podstaw cz.9 [najlepsze gotowe rozwiązania cz.2]
10.Kurs jQuery – od podstaw cz.10 [najlepsze gotowe rozwiązania cz.3]

Dzięki bibliotece jQuery mamy możliwość modyfikacji w czasie rzeczywistym selektorów kaskadowych arkuszy styli CSS oraz „skakania” po drzewie DOM dokumentu HTML. Poniżej struktura przykładowego dokumentu HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <title>Kurs jQuery</title>
    <meta name="description" content="Kurs jQuery" />
    <meta name="keywords" content="kurs, jquery, mlaskowski.pl" />
    <script src="js/jquery-1.9.1.js"></script>
    </head>
    <body>
        <div>
            <p>Akapit nr 1</p>
            <p>Akapit nr 2</p>
        </div>
    </body>
    </html>

Jak widzisz na powyższym listingu mamy przykład standardowego dokumentu HTML, czyli nagłówki, podłączenie styli CSS, biblioteki jQuery oraz w sekcji body jeden blok, a w nim dwa akapity. Jednak, jeżeli będziemy używać nazewnictwa strukturalnego drzewa DOM, to selektor <html> jest przodkiem wszystkich elementów zawartych w dokumencie, a pozostałe selektory są jego potomkami. Zatrzymaj się w tym miejscu na chwilę, ponieważ jest to bardzo ważna sprawa. Odpowiedz sobie na pytanie czym dla bloku <div> jest akapit <p>. Otóż prawidłowa odpowiedź brzmi: elementy <p> są dziećmi (i jednocześnie potomkami) bloku <div>. Natomiast blok <div> jest przodkiem (rodzicem) dla akapitów  <p>.

Bardzo ważną sprawą jest, aby płynnie poruszać się w tym drzewie „genealogicznym” dokumentu HTML, gdyż często będę do niego nawiązywał.

Wybieranie elementów za pomocą biblioteki jQuery

Wybieranie elementów w bibliotece jQuery jest banalnie proste. Możemy wybrać element za pomocą:

  • selektora HTML (np. <div>, <p>)
  • identyfikatora (np. <div id=”test”></div>)
  • klasy (np. <p class=”czerwony-akapit”></p>)
  • selektora

Kod HTML na którym będziemy pracować:

    

Na poniższym listingu prezentuję w jaki sposób wybrać elementy:

$(document).ready(function(){          
    //wybór elementu za pomocą selektora HTML
    $("li").click(function(){
        alert ('Kliknięty selektor li');
    });

    //wybór elementu za pomocą identyfikatora
    $("#strona-glowna").click(function(){
        alert ('Kliknięty element o identyfikatorze test');
    });

    //wybór elementu lub elementów za pomocą klasy
    $(".link-specjalny").click(function(){
        alert ('Kliknięty element z klasą czerwony-akapit');
    });

    //za pomocą selektora (wszystkie dzieci "li" identyfikatora menu-strony)
    $("#menu-strony > li").click(function(){
        alert ('Kliknięte dziecko li identyfikatora menu-strony');
    });
});
 

Jak widać na powyższym listingu mamy możliwość wybrania poszczególnych elementów bądź pojedynczego elementu i zastosowania dla niego metody. W tym przypadku zastosowałem metodę click(), która po kliknięciu na dany element wyświetli komunikat.

Metody generujące zdarzenia w jQuery

Poniżej lista dostępnych metod, które generują zdarzenia w bibliotece jQuery:

  • click() – po kliknięciu w element,
  • dblclick()  - po podwójnym kliknięciu w element
  • mousedown() – naciścięcie przycisku myszy
  • mouseup() – zwolnienie przycisku myszy
  • mouseover() – najechanie kursorem myszy na element
  • mousemove() – kursor myszy przemieszcza się po elemencie lub wewnątrz elementu
  • mouseout() – zjechanie kursorem myszy z elementu
  • keypress() – naciśnięcie przycisku na klawiaturze
  • keyup() – zwolnienie przycisku na klawiaturze

Dzięki powyższym metodom mamy możliwość rozpoznania interakcji jaką wykonał użytkownik i wykonania funkcji sterującej programem (na przykład wyświetlenie komunikatu).

Selektory CSS

Warto w tym miejscu wspomnieć, że pisząc kod z użyciem biblioteki jQuery możemy używać wszystkich dostępnych w CSS selektorów. Wszystkie selektory w bardzo przystępny sposób zostały zebrane w tabeli na stronie http://www.kurshtml.edu.pl/css/selektory.html, więc nie będę się powielał. Jeżeli jeszcze nie znasz wszystkich selektorów, zachowaj sobie ten link, aby zawsze podczas pisania kodu móc do niego wrócić. Napiszmy teraz kod, który następnie zaczniemy modyfikować, za pomocą biblioteki jQuery oraz selektorów:

    

Powyżej mamy zwykłą listę nieuporządkowaną, którą wykorzystamy jako menu naszej strony. Spróbujmy wykorzystać selektory, aby nieco zmodyfikować ten kod:


$(document).ready(function(){          
    $("li > ul").css('color', 'red');    
});

Wszystkie selektory ul, które są dzieckiem selektora li zostaną pokolorowane na czerwono.


$(document).ready(function(){          
    $("li.link-specjalny").css('color', 'red');    
});

Wszystkie selektory li, które posiadają klasę o nazwie „link-specjalny” zostaną pokolorowane na czerwono.

Próbuj różne rozwiązania , aby zapoznać się z selektorami oraz zdarzeniami  i wędrówką po drzewie DOM dokumentu HTML. W następnej lekcji dowiesz się więcej o czytaniu i modyfikacji atrybutów, oraz napiszemy prostą galerię zdjęć.

Podsumowanie

W tej lekcji dowiedziałeś się jak wybierać elementy za pomocą biblioteki jQuery, nauczyłeś się je modyfikować . Poznałeś również metody generujące zdarzenia, które w połączeniu z selektorami i funkcją css() dają Ci już pierwsze możliwości praktycznego wykorzystania jQuery.

Tagi: kurs,jquery,selektory,metody,biblioteka,javascript,java,php,html.css
Czytane: 160376 razy

comments powered by Disqus