Repozytorium Web Developera

jQuery - podstawy

jQuery - podstawy

Przydatne linki

Linkowanie jQuery

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>!window.jQuery && document.write('<script src="js/jquery.min.js"></script>')</script>
        

Różne wersje jQuery i konflikt z bibliotekami

Korzystamy z funkcji noConflict() w celu użycia kilku wersji jQuery na stronie. Dla poniższego przykładu, zamiast użycia $('#selector').function();, używamy jQuery_1_3_2('#selector').function(); lub jQuery_1_1_3('#selector').function();

        <!-- load jQuery 1.1.3 -->
        <script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
        <script type="text/javascript">
        var jQuery_1_1_3 = $.noConflict(true);
        </script>

        <!-- load jQuery 1.3.2 -->
        <script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
        <script type="text/javascript">
        var jQuery_1_3_2 = $.noConflict(true);
        </script>
        

Funkcja anonimowa

        $(document).ready(function() {
            //tutaj nasze skrypty jQuery
        })

        //lub ekwiwalent

        $(function() {
            //tutaj nasze skrypty jQuery
        })
        

Proste przykłady pobierania elementów z drzewa DOM

        $('#pierwszy').css('color','red').hide('slow').show(3000); //element znika i powoli się pojawia
        $('*')                      //pobranie wszystkich elementów na stronie
        $(div)                      //pobranie wszystkich divów na stronie
        $('div.czerwony')           //pobranie div o klasie czerwony
        $('div.czerwony#duzy')      //pobranie div o klasie czerwony i id duży
        $('div p')                  //wszystkie p zawierające się w div
        $('div#cont > p')            //wszystkie p mieszczące się bezpośrednio w div o id cont
        $('p,span , div.czerwoy')   //pobranie wszystkich p, span oraz divów o klasie czerwony
        $('ul li.wyroznione')       //pobranie li o klasie wyróżnione
        $('p:first')                //pobranie pierwszego p
        $('img[width=100]')         //pobranie wszystkich img, które mają width=100
        $('label + input')          //wszystkie inputy, które bezpośrednio przed sobą mają label
        $('div#pierwszy ~ div')     //wszystkie divy, które następują po div#pierwszy
        

Operacje na elementach i na DOM

Dodawanie klas do elementów

Dodaje klasę do określonego elementu.

  • .addClass('nazwa_klasy')
  • .removeClass('nazwa_klasy')

Dołączanie elementów

append dodaje treść/element wewnątrz elementu na jego końcu, natomiast prepend na początku elementu. after i before dodają treść/element odpowiednio za lub przed znacznikiem.

  • Składnia 1
    • .append
    • .prepend
    • .after
    • .before
  • Składnia 2
    • .appendTo
    • .prependTo
    • .insertAfter
    • .insertBefore
        //plik .html
        <p class="element">Jakiś tekst.</p>

        //plik .js
        var nazwa_vara = $('<p>From $777.77</p>');

        $('.element').append(nazwa_vara);
        $('.element').prepend(nazwa_vara);
        $('.element').after(nazwa_vara);
        $('.element').before(nazwa_vara);

        nazwa_vara.appendTo($('.element');
        nazwa_vara.prependTo($('.element');
        nazwa_vara.insertAfter($('.element');
        nazwa_vara.insertBefore($('.element');
        

Wybieranie znaczników

  • .closest('nazwa_elementu')
  • .filter('nazwa_elementu')
    • $('.nazwa_1').filter('.nazwa_2') - wszystkie znaczniki z klasą nazwa_1, które mają również klasę .nazwa_2
  • $("nazwa").next() - wybiera element występujący po znaczniku nazwa API

Wybieranie znaczników przez porównanie

  • eq(index) - czyli pobierz z listy pobranych elementów element z danym indeksem API,
  • lt(index) - pobierz elementy o indeksie mniejszym od danego,
  • gt(index) - pobierz elementy o indeksie większym itp.
        $('*') //pobranie wszystkich elementów na stronie
        $('div.czerwony p').eq(2) //pobranie trzeciego p w div.czerwony
        $('p span').gt(1).css({color:red,fontWeight:bold}) //wszystkie spany w p z pominięciem pierwszego ustawione mają kolor czerwony i są przekreślone
        

Przykłady kodów

Działanie na każdym elemencie poprzez funkcję anonimową

Dla każdego (each) pobranego p wykonujemy funkcję, w której ustawiamy dla p kolor niebieski wraz z podkreśleniem, oraz ustawiamy zdarzenie click, w którym wykonujemy funkcję wyświetlającą okienko alert z atrybutem href danego p. Znak $ przy nazwie zmiennej $t to tylko ułatwienie dla nas. Dzięki temu wiemy, że dana zmienna jest obiektem jquery, i możemy dla niej wywoływać wszystkie metody tej biblioteki.

        $('p').each(function() {
            var $t = $(this);
            $t.css({
                "color" : "blue",
                "text-decoration" : "underline"
            });
            $t.click(function() {
                alert('Link prowadzi do: ' + $(this).attr('href'))
            })
        })
        

Wersja zminimalizowana:

        $('p').css({color:blue,textDecoration:underline})
              .click(function() {
                    alert('Link prowadzi do: ' + $(this).attr('href'))
              })
        

Blokowanie cyfr w elementach input

        <input type="text" onkeypress="return PreventDigits(event);" />
        
        function PreventDigits(evt) {
            evt = evt || window.event;
            var keyCode = evt.keyCode || evt.which;7
            var num = parseInt(String.fromCharCode(keyCode), 10);
            return isNaN(num);
        }
        

Pobieranie pozycji kursora po kliknięciu

W poniższym kodzie evt to nazwa zmiennej podana przez programistę. Nie jest to słowo kluczowe języka JavaScript, a jedynie zmienna służąca do przechowywania obiektu zdarzenia. Możesz użyć też dowolnej innej nazwy, np. event lub e.

Na przykładzie poniższego kodu, wyrażenie evt.pageX zwraca współrzędną X kursora, czyli liczbę pikseli od lewej krawędzi okna.

Inne właściwości zdarzeń: pageX, pageY, screenX, screenY, shiftKey, which, target, data.

        $(document).click(function(evt) {
            var xPos = evt.pageX;
            var yPos = evt.pageY;
        });