jQuery - podstawy
jQuery - podstawy
Przydatne linki
- Unheap - Repozytorium wtyczek jQuery
- jQuery Boilerplate
Szablon pisania wtyczek z wykorzystaniem jQuery.
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 znacznikunazwa
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;
});