jQuery – podstawy

RSS

jQuery – podstawy

05 kwi

Podstawy:


 Wszędzie używamy selektora elementów, magicznej funkcji: $() = jQuery(),
Pozwala ona nam dostać się do dowolnego elementu na stronie,
$(<wyrażenie>, <kontekst>),
$(<HTML>),
$(<element DOM>),

Wyrażenia:

$(<wyrażenie>),
$(„*”) Wszystkie elementy z dokumentu,
$(„#id_elementu”) Element o podanym id,
$(„.klasa_elementu”) Wszystkie elementy podanej klasy,
$(„div”) Wszystkie elementy typu div,
$(„div,span,p.klasa”) Wszystkie elementy typu div, span lub p o klasie klasa,
$(„form input”) – potomek. Wszystkie elementy typu input, które zawierają się w elemencie typu form,
$(„div#blok > div”) – dziecko. Wszystkie elementy typu div, które są bezpośrednio w elemencie div o id blok,
$(„label + input”) – bezpośredni następnik. Wszystkie elementy typu input, które bezpośrednio przed sobą mają label,
$(„div#blok ~ div”) – następniki.

Filtry podstawowe w wyrażeniach:

$(„li:odd”) – nieparzysty. Wszystkie elementy typu li, które są nieparzyste,
$(„li:even”) – parzysty. Wszystkie elementy typu li, które są parzyste,
$(„li:gt(4)”) – indeks większy od. Wszystkie elementy typu li, które mają indeks większy od 4,
$(„li:lt(4)”) – indeks mniejszy od. Wszystkie elementy typu li, które mają indeks mniejszy od 4,
$(„li:first”) – pierwszy. Pierwszy element typu li,
$(„li:last”) – ostatni. Ostatni element typu li,
$(„li:eq(4)”) – indeks równy. Element typu li, który ma indeks równy 4,
$(„li:contains(‚tekst’)”) – zawiera. Wszystkie elementy typu li, w których znajduje się ‘tekst’,
$(„p:has(img)”) – ma. Wszystkie elementy typu p, które mają w sobie elementy typu img,
$(„ul:empty”) – pusty. Wszystkie elementy typu ul, które nie mają dzieci ani tekstu,
$(„ul:parent”) – rodzic. Wszystkie elementy typu ul, które mają dzieci lub tekst w sobie.

Atrybuty w wyrażeniach:

$(„img[alt]”) – posiada atrybut. Wszystkie elementy typu img, które posiadają atrybut alt,
$(„input[type = ‚text’]”) – ma atrybut równy. Wszystkie elementy typu input, których atrybut type jest równy text,
$(„input[type != ‚text’]”) – ma atrybut różny. Wszystkie elementy typu input, których atrybut type nie jest równy text,
$(„p[class ^= ‚p_’]”) – ma atrybut zaczynający się od. Wszystkie elementy typu p, które mają atrybut class zaczynający się od p_,
$(„p[class $= ‚_1′]”) – ma atrybut kończący się.

Formularze w wyrażeniach:

$(„:checkbox”),
$(„:image”),
$(„:button”),
$(„:file”),
$(„:password”),
$(„:radio”),
$(„:submit”),
$(„:text”),
$(„:hidden”),
$(„:checked”),
$(„:enabled”),
$(„:disabled”),
$(„:input”) – input, textarea, select, button.

Manipulacja elementami:

$(„img#id1″).attr(„title”),
$(„img#id1″).attr(„title”, „nowy”),
$(„img#id1″).attr({title: „nowy”, src=”nowy.jpg”}),
$(„img#id1″).removeAttr(„title”),
$(„p”).addClass(„klasa”),
$(„p”).removeClass(„klasa”),
$(„p”).hasClass(„klasa”),
$(„p”).toggleClass(„klasa”),
$(„p”).html(),
$(„div”).html(‚<p>test <a href=”#”>link</a></p>’),
$(„p”).text(),
$(„p”). text(‚<p>test <a href=”#”>link</a></p>’),
$(„select#id option:selected”).val(),
$(„input”).val(„wpisz tekst”).

I dużo, dużo więcej…:

Obsługa styli: .css(„background-color”), .css(„background-color”, „red”), .css({„background-color”: „red”, „font-size”: „10px”}),
Wstawianie i usuwanie elementów w różne miejsca: .append(„<div>coś</div>”), .remove(),
Obsługa zdarzeń: .click(funkcja), .click(),
Mierzenie pozycji i wielkości: .position(), .width(), .height(), .offset(),
Dodawanie efektów: .show(„slow”), .hide(„fast”), .slideDown(1000), .slideUp(500), .fadeIn(100), .fadeOut(500), .animate({opacity: 0.5, width: „50%”}, 1000),
AJAX: $.get(„test.php”, function(data) { alert(‚loaded’ + data);,
Detekcja przeglądarki, operacje na tablicach i obiekatach, serializacja, dodawanie własnych danych do elementów.

Linki i wtyczki:

źródło: www.ii.uni.wroc.pl/~pwo/Sem_wiecz/Prezentacje/jQuery.ppt

No Comments

Posted in jQuery

Pacuła

jQuery – podstawy

źródło: www.ii.uni.wroc.pl/~pwo/Sem_wiecz/Prezentacje/jQuery.ppt

Leave a Reply

Preview:

Archives

Categories