: Home / JavaScript / artykuły / jQuery - szybki start

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/javascript/artykuly/434-jquery-szybki-start.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
jQuery - szybki start
Ocena użytkowników: / 1
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
środa, 03 lutego 2010 15:49

jQuery jest jedną z najpopularniejszych (i moim skromnym zdaniem) najlepszych bibliotek JS. Jej dodatkową zaletą jest to, że jest darmowa. Chciałbym dzisiaj pokazać jak banalnie łatwo jest zacząć jej używać. Zapraszam do lektury.

 

Załączenie biblioteki:

Istnieje kilka sposobów:

  1. Pobranie kodu ze strony projektu jQuery a następnie załączenie go jako osobnego pliku.
  2. Załączenie kodu bezpośrednio ze strony autorów.

ad 1: jeśli padnie serwer, nadal masz działającą bibliotekę, ale zajmuje ona miejsce u Ciebie na serwerze,, musisz ją pobrać itp. itd.

ad 2: dla przykładu szybkiego zastosowania będę używał tej metody - nie musisz się przejmować żadnymi ścieżkami. jednak we własnych projektach prawie zawsze używam metody 1.

<html>
<head>
        <title>jQuery w akcji!</title>
        <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
                $(document).ready(function() {
                     alert('Witaj świecie');
                });
        </script>
</head>
<body>
</body>
</html>

W wyniku uzyskamy alert "Witaj świecie". Właściwie nic wielkiego... Po to załączać wielką bibliotekę (20KB to w sumie nie taka wielka), aby wyświetlać alert... Spokojnie, można DUŻO więcej.

 

Chwytanie węzłów

Każdy znacznik HTML to węzeł w modelu DOM. Można zatem go złapać i wykonać na nim jakieś czynności.

$('wezel').metoda(function() { dzialanie });

Na przykład:

$('body').click(function() { $(this).css({ 'background' : 'red'}) });

W powyższym przykładzie, po kliknięciu na dowolny kawałek strony tło zmieni kolor na czerwony. Zmienna this wewnątrz funkcji anonimowej przekazywanej do metody zawsze wskazuje na węzeł aktualnie przetwarzany (czyli w powyższym przypadku na <body> - ciało strony).

Tu trochę inny przykład:

<html>
<head>
        <title>jQuery w akcji!</title>
        <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
                $(document).ready(function() {
                     $('p').click(function() {
                             alert("Kliknąłeś mnie!"); // dla dowolnego znacznika p na stronie
                     });
                });
        </script>
</head>
<body>
        <p>To jest napis</p>
        <p class="moj">To jest inny napis, ale też będzie działać</p>
        <p id="twoj">A tu jeszcze co innego</p>
</body>
</html>

Powyższy przykład sprawi, że klikając na dowolny napis wyświetli się alert.

 

Same alert?!

Ktoś mógłby stwierdzić, ze jQuery to tylko nakładka pozwalająca jedynie używać alertów. Nic bardziej mylnego. Używałem alertów bo są dosyć jednoznaczne - trudno je przegapić.

Można jednak osiągnąć dużo ciekawsze efekty. Oto przykład.

<html>
<head>
    <title>jQuery w akcji!</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function show(id) {
            $('div[id^="content"]').fadeOut(); // 1
            $('#' + id).fadeIn(); // 2
        }
 
        $(document).ready(function() {
            $('#show2').click(function() { // 3
                show('content2');
            });
        });
    </script>
    <style type="text/css">
        #content1, #content2 { display:none; }
    </style>
</head>
<body>
<ul>
    <li><a href="javascript:show('content1')">Pokaż 1</a></li>     <!-- 4 -->
    <li><a href="#" id="show2">Pokaż 2</a></li>                       <!-- 5 -->
    <li><a href="#" onclick="show('content3')">Pokaż 3</a></li> <!-- 6 -->
</ul>
<div id="content1">To jest tresc 1</div>
<div id="content2">To jest tresc 2</div>
<div id="content3">Sialalaal</div>
</body></html>

Z ciekawych rzeczy jakie tu zostały zastosowane:

meteda fadeOut - powoduje powolne ukrycie wszystkich elementów wskazanych w konstrutorze obiektu.

  1. Tu w konstruktorze użyłem wyrażeń regularny. Oznacz to "wszystkie div, które posiadają atrybut id rozpoczynających się na 'content'". Czyli np.: "content", "content1", "content_sialalala".
  2. fadeOut - przeciwieństwo fadeIn
  3. Dla znacznika (węzła DOM) o id = "show2" (zauważ, że węzły tu łapie się identycznie jak w CSS) przypisz na zdarzenie click akcję.
  4. Pseudoadresy
  5. Tu zostawimy wolny atrybut href. Przypiszemy działanie w JS (patrz pkt 3)
  6. Przypisanie akcji na zdarzenie click. Działanie identyczne jak pkt 3, z tym, że zrobione w natywnym JS.

 

Jeśli byłbyś zainteresowany jQuery, warto zajrzeć tu:

 

Ja może zauważyłeś używałem tu wielokrotnie funkcji anonimowych. Warto przeczytać:

Powodzenia :) !

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież