Podstawy:
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:
- http://www.yarpo.pl/2011/04/03/jquery-szybki-start/#more-784
- http://jqueryui.com/demos/
- http://leandrovieira.com/projects/jquery/lightbox/
- http://info.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/
- http://widowmaker.kiev.ua/checkbox/
- http://deepliquid.com/projects/Jcrop/demos.php
- http://www.protofunc.com/scripts/jquery/backgroundPosition/
- http://eyebulb.com/dropshadow/
- http://gsgd.co.uk/sandbox/jquery/easing/
- http://lab.smashup.it/flip/
- http://www.dummwiam.com/jTypeWriter
- http://www.2meter3.de/jqPuzzle/index.html
- http://www.malsup.com/jquery/cycle/