jQuery metody, selektory zdarzenia

WYKAZ METOD

• .addClass(’className') – dodaje klasę do elementu
• .removeClass(’className') – usuwa klasę do elementu
• .toggleClass(’className') – przełączanie nazwy klasy
• .css() – dodaje style do elementu
  $('.help-link').css(„background-color”, „blue”);
  $(’p[title*=foo]').css({„background-color”: „black”, „color”: „white”});
• .hasClass(’className') – jaki element ma klasę
• .insertBefore() .before() – wstawianie elementu przed innym elementem
• .insertAfter() .after() – wstawianie elementu po innym elemencie
  $(’to wstawiamy').insertAfter(’#gdziewstawiamy');
  $(’#gdziewstawiamy').after(’to wstawiamy');
• .prepend() – wstawianie elemntu do diva po otwierajacym znaczniku
• .append() – wstawianie elementu do diva przed zamykającym znacznikiem
• .prependTo() – wstawia element wewnątrz elementu
  $(’to wstawiamy').prependTo(’#gdziewstawiamy');
• appendTo() – wstawia element wewnątrz elementu
• .wprp() – opakowanie elementu innym elementem
  .wrapAll()
  .wrapInner()
• .clone() – pobiera zbiór elementów i tworzy ich kopię
  .clone(true) – klonowanie zdarzeń aby uniknąć ponowanego dowiązywania ich ręcznie
• .find – znaduje element
• .html() –
  • pobranie kodu html znajdującego się wewnątrz wskazanego elementu – alert($(’#myElement').html());
  • zastąpienie elementu kodem html podanym w nawiasach – $(’#myElement').html('<h1>Say Hello!</h1>');
• .text() – zastąpienie elementu tekstem
• .attr() – uzyskanie lub wstawienie wartości atrybutu
  $(’#links a').attr(’target', '_blank');
• .repleceAll(), .repleceWith() – zastąpienie
  • $('.myElements').replaceWith('<p>added element</p>');
• .empty() – usunięcie elementów wewnątrz
• .remove() – usuniecie elementów wraz z elementami potomnymi
• .click() – włączenie funkcji lub metod po kliknięciu wybranego elementu
• .prev() – cofnięcie w górę o jeden element drzewa DOM, wyszukanie w drzewie DOM poprzedniego elementu rodzeństwa
• .naxt() – wyszukanie w drzewie DOM następnego elementu
• .load() – załadowuje treść ze wskazanego pliku
• alert(”) – wyświetla komunikat w okienku
• .repleceWidth(’czym zastępujemy') – zastąpeieni wybranego elementu podanym kodem
• !emailReg.test(email) – sprawdzenie czy jedna zmienna jest równa drógiej
• .each()
• outerHeight
• height
• innerHeight
• width
• outerWidth
• innerWidth
• split() – dzieli łańcuch ścieżki w tablicy za pomocą znaku / lub split(','); split(' ');
• .val() – pobiera lub ustala wartość elementu formularza
  • .val() – wczytanie zawartści
  • .val(total) – wstawia zawartość total
• .toFixed(2) – formatuje wartość, do dwóch miejsc po przecinku
  • .prop() – pobiera lub ustala wartość właściwości DOM pól formularzyif($ (’#news') .prop(’checked')){…);
• .focus() – umieszczenie kursora we wskazanym polu – np. $(':text:first').focus();

$('#single').click(function(){
$('#child').prop('disabled', true);
});

• $.getScript()
• window.load – $(window).load{} – działa jak document.ready() tylko oczekuje na załadowanie wszystkich elementów graficznych
• .stop() – zakończenie animacji
• .clearQueue() – wyczyszczenie kolejki
• .closest() – Return the first ancestor of /span/, that is an /ul/ element: link

• .ajax() – metoda do obsługi żądań GET i POST

• .test() – sprawdza dopasowanie w ciagu znaków do wyrażeń regularnych
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  var email = $(„#email-input”).val();
  !emailReg.test(email)

metody: addClass(), removeClass(), has() – nie wymagają wstawienia kropki . w nazwie klasy
metody: is(), filter(), not() – wymagają wstawienia kropki . przed nazwą klasy

Obiekt jQuery

polecenie do pobrania elementu(ów)

$(’selector”)

SELEKTORY

• od 4 elementu p – div.chapter1 p:gt(2) – w JavaScript liczy od 0 (0 – 1 element, 1 – 2 element, 2 – 3 element, wyrażenie selektora wstawia po 3 akapicie)
• * – wszystkie elementy na stronie
• div>h2 – elementy h2 bezpośrednio zamieszczone w elemencie div
• :text
• p:first
• p:even
• p:lt(3) – trzy pierwsze elementy p
• p:has(strong)
• a[href*=”webscene.pl”]
• :checked – np. var checkedValue = $(’input [name=”shipping”]:checked').val();
• :selected – np. var selectedState = $(’#state :selected').val();
• h1+div
• p:odd
• li:contains(.main)
• a[href=”#”]
• a[href^=”http:”]
• :disable

pełna lista obsługiwanych selektorów. lista

Grupy selektorów:

• identyfikatorów – $(’#myElement')
• elementów – $(’a')
• klas – $('.myElements')
• zaawansowane
  • elementów potomnych – $(’#myElement a')
  • dzieci – $(’#myElement > h2′)
  • elementów sąsiadujących – elementy znajdujące się bezpośrednio za podanym znacznikiem – $(’#myElement + div')
  • atrybutów elementy:
    • posiadając konkretny atrybut – $(’img[alt]')
    • posiadając konkretną wartość atrybutu – $(’img[alt=”webscene”]')
    • spełniające warunek posiadania ciągu znaków:
      • na początku – $(’img[alt^=”web”]'), $(’a[href^=”http://”]')
      • na końcu – $(’img[alt$=”.pl”]'), $(’a[href$=”.pdf”]')
      • w dowolnym miejscu – $(’img[alt*=”e”]')

METODY DOWIĄZYWANIA ZDARZEŃ DO ELEMENTÓW

• .bind() – działa tylko dla elemnetu pierwszego znajdującego się w drzewie DOM podczas załadowania strony
  $('.box').bind(’click', function(){
  $(this).clone().appendTo('.container-box');
  });
• .on()
  $('.box').on(’click', function(){
  $(this).clone().appendTo('.container-box');
  });
• .delegate() – pozwala na łączenie metod w łańcuchy oraz działa na powstale elementy, inny układ wywołania:
  $('.container-box').delegate('.box',’click',function(){
  $(this).clone().appendTo('.container-box');
  });

FILTROWANIE

• :even – pozycje nieparzyste i  :odd – pozycje parzyste
• :header – znaczniki H1doH6
• :not – element który nie jest danym selektorem – $(’li:not(#myList)').css(’background-color', 'white');
• :eq(index) – element/y zgodny z podanym indeksem
• :gt(index) – element/y większy od podanego indeksu
• :lt(index) – element/y mniejsze od podanego indeksu – $('.simpleList li:lt(2)').css(’background', 'pink');
• :first-child, :last-child, :only-child – pierwszy, ostatni, jedyny element
• :nth-child(index) – który element podrzędny
• :has(p) – element zawierający element – $(’li:has(a)')
• :first() – pierwszy z elementów
• :last() – ostatni z elementów
• :contains (’sample text') – element zawierający podany tekst – $(’a:contains(web)')
• :empty – pusty element
• :parent – element/y nadrzędne
• :hidden – element/y ukryte, display:none;, ukryte przez funkcję hide(), elementy gdzie width, lub height =0 (ale nie poprzez visibility = invisible)
• :visible – element/y widoczne
• :animated – element/y które są animowane

ZDARZENIA

ZDARZENIA MYSZY

• click – wyzwalane po kliknięciu i zwolnieniu myszy
• dblclick – wyzwalane po dwókrotnym kliknięciu myszy
• mousedown – wyzwalane po kliknięciu myszy
• mouseup – wyzwalane po zwolnieniu myszy
• mouseenter – wyzwalane po umieszczeniu kursora myszy w obrębie elementu
• mouseleave – wyzwalane po usunięciu kursora myszt z obrębu elementu
• mousemove – wyzwalane po przesunięciu kursora myszy w obręb elementu
• mouseout – wyzwalane po usunięciu kursora myszy z elementu i jego elementu nadrzędnego
• mouseover – wyzwalane po umieszczeniu kursora myszy w obrębie elementu i jego elementu nadrzędnego
• hover – kozysta z mouseover i mouseout

ZDARZENIA FORMULARZY

• change() – wyzwalane w momencie edytowania zawartości pola
• focus() – wyzwalane w momencie aktywowania pola tekstowego
• focusin() – wyzwalane w momencie aktywowania pola tekstowego przez klawisz Tab zawartego wewnątrz elementu lub zaznaczenia tego pola
• focusout() – wyzwalane w momencie dezaktywowania pola lub obszaru tekstowego na rzecz innego elementu znajdującego się poza elementem
• blur() – wyzwalane w momencie dezaktywacji pola lub obszaru text na rzecz innego elementu
• select() – wyzwalane w momencie zaznaczenia tekstu wewnątrz elementu
• submit() – wyzwalane w momencie wysyłania formularza przez przycisk lub Enter
• reset() – wyzwalane w momencie resetowania formularza przyciskiem

ZDARZENIA KLAWIATURY

• keydown() – wyzwalane w momencie pierwszego naciśnięcia klawisza
• keypress() – wyzwalane w momencie jednokrotnego lub wielokrotnego naciśnięcia klawisza
• keyup() – wyzwalane w momencie zwolnienia naciśniętego klawisza

EFEKTY BIBLIOTEKI JQUERY

• show() – pokazuje element
• hide() – ukrywa element
• toggle() – przełączenie pomiędzy pokazaniem/ukryciem przy użyciu zdażenia click
• slideDown() – zsuwanie elementu w dół
• slideUp() – przesuwanie elementu w górę
• slideToggle() – przełączenie pomiędzy przesuwaniem w dół a w górę
• fadeIn() – zmniejszenie przeźroczystości elementu
• fadeOut() – zwiększenie przeźroczystości elementu
• fadeTo() – uzyskanie określnonej nieprzeźroczystości elementu

WŁAŚCIWOŚCI CSS STOSOWANE DO METODY ANIMATE

• opacity
• top
• height
• width
• margin
• padding

ATRYBUTY ZNACZNIKÓW

znacznik a ma atrybuty: href, rel, id, class, title, hreflang

• $('[atrybut*=value]') – wartość w dowolnej części łańcucha
• $('[atrybut|=value]') – o wartości rozpoczynającej się od podanej po której następuje łącznik (-) lub wartość równą podanemu łańcuchowi
• $('[atrybut~=value]') – wartość w dowolnej części łańcucha z uwzglednieniem spacji
• $('[atrybut$=value]') – zakończone podaną wartością
• $('[atrybut=value]') – zawierający podaną wartość
• $('[atrybut^=value]') – rozpoczynający się od podanej wartości
• $('[atrybut!=value]') – pozbawiony podanej wartości
• $('[atrybut=value][atrybut=value][atrybut=value]') – identyfikuje wiele atrybutów

(formakomunikat wyświetlany kiedy nie ma obsługi javascript)

Projekty jQuery:

• jQuery UI – zestaw widżetów, elementów interfejsu i motywów służących do budowania aplikacji internetowych. Witryna jQuery UI – htttp://jqueryui.com
• jQuery Mobile -tworzenie witryn na urządzenia mobilne
• Sizzle – biblioteka wbudowana w jQuery, wybieranie i manipulowanie fragmentami stron internetowych
• QUnit – biblioteka do testowania programów JS

INNE

• location.pathname – część macierzystego obiektu JavaScript – zwraca wszystko co występuje po nazwie domeny
• console.log – wyświetlenie wiadomości w konsoli
• console.table() – wyświetla dane w tabelarycznej postaci
• Math.round() – metoda zaokrągla wynik operacji do najbliższej liczby całkowitej
• sortowanie zawartości tabel – dodatek biblioteki jQuery – tablesorter