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

ZDARZENIE FUNKCJA
ready() aktywowane po załadowaniu dokumenty HTML
load() aktywowane po załadowaniu wszystkich zasobów
unload() aktywowane po zamknieciu okna przeglądarki lub po przejściu do nowej strony poprzez pasek adresu lub odnośnik
resize() aktywowane po zmianie rozmiaru okna przeglądarki
scroll() aktywowane po zainicjonowaniu przewijania
error() aktywowane po odebraniu błędu z żądania HTTP
$(„#portrait”).error(function(){
$(this).attr(’src’, 'images/img-error.jpg’);
});

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

#tools