.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');
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();
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');
});
.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
Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.AcceptRead More
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.