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

 

Leave a Reply

 
*

Preview: