JS: jQuery

Opublikowano ptk 18 grudnia 2020 w javascript • 3 min read

jQuery

Użytkowanie

Link do biblioteki jQuery należy umieścić w sekcji head strony internetowej, w tym celu można wykorzystać dostępny kod (jQuery Core – All Versions) i przekopiować go do opracowywanego projektu lub wykorzystać link CDN

jQuery CDN – Latest Stable Versions

Składania

$ - znak dostępu do biblioteki jQuery

selektory (np. ) - przeszukują dokument w celu "złapania" określonego dokumentu

metoda() - metoda dostępna, operująca na elementach oznaczonych przez selektor

np. $("#id").action() // ukryj ten element (bezpowrotnie)

Selektory

jQuery korzysta z selektorów znanych z JS/CSS i dodaje nowe w tym jeden b. istotny = this

Selektor	Funkcja
#	wyszukuje element po id
.	wyszukuje element po klasie
*	wszystkie elementy
this	oznacza obecny element
div/p	wyszukuje dany znacznik html

Filtr	Zwracany element
:first	pierwszy element
:last	ostatni element
:eq(indeks)	konkretny element(indeks od 0)
:odd	nieparzyste elementy
:even	parzyste elementy
:contains(tekst)	element zawierający podany tekst
:hidden	elementy ukryte oraz input typu hidden
:visible	elementy widoczne
---	---
Selektory formularza
:text	element input typu "text"
:submit	element input typu "submit"
:checkbox	element input typu "checkbox"
:radio	element input typu "radio"
:input	element typu input
:checked	zaznaczone pole opcji wyboru
:selected	element opcji wyboru

Pełna lista selektorów

Zdarzenia

handler - proceruda obsługi wydarzenia

Zdarzenie	Funkcja
.bind()	dołącz "procedurę obsługi"
.blur()	usuwa focus z elementu do elementu	$( "#target" ).blur()
.change()	powiązanie akcji ze zmianą
.click()	powiązanie akcji z kliknięciem
.dblclick()	owiązanie akcji z podwójnym kliknięciem
event.currentTarget	wydobycie elementu DOM biorącego udział w wydarzeniu
event.data	obiekt data biorący udział w wydarzeniu
event.delegateTarget	element z delegowanym wydarzeniem	$( event.delegateTarget ).css( "background-color", "red" );
event.result	ostatnia wartość zwrócona przez wydarzenie
event.target	element DOM, który jest zainicjowany wydarzeniem
event.timeStamp	moment w którym przeglądarka tworzy element liczony od 01.01.70
event.type	określa typ wydarzenia
event.which	wskazuje na klawisz lub przycisk myszy
.focus()	skupienie
.focusin()/.focusout()	skupienie na/po za
.mouseenter()/.mouseleave()	najazd/wyjazd myszy
.off()	usuwa procedurę obsługi wydarzenia
.on()	dodaje procedurę obsługi wydarzenia
.one()	dodanie obsługi wydarzenia, które zostanie wykonane jednokrotnie(na każdy element, wydarzenie)
.ready()	włącza funkcję w momencie gdy DOM się w pełni załadował
.scroll()	połączenie obsługi wydarzenia z pracą scrolla
.trigger()	wykonanie obsługi wydarzeń oraz zachowań powiązanych z danym elementem dla danego typu wydarzenia	$("button").click(function(){$("input").trigger("select");});

Pełna lista zdarzeń

$(document).ready(function(){ // kiedy załaduje się dokument
  $("#hidden").hover(function(){ // dla elementu z id hidden jeśli najedzie się myszką
    $(this).css("color", "black"); // dla niego zmień css->kolor na czarny
  },
  function() { // funkcja zwrotna - to w niej jest wskazane do ma się wydarzyć w następnej kolejności (np. gdy myszka opuści pole)
    $(this).hide() // ukryj ten element (bezpowrotnie)
  });

  $("button").click(function(){ // po naciśnięciu dowolnego przycisku
    alert("I am alert!") // pojawi się okno ostrzeżenia z wpisaną treścią
  })
})

Efekty

Znacznik	Zwracany element	przykład
.animate()	animacja z elementami css
.delay()	opóźnij wykonanie elementu	$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 )
.fadeIn()	pojawia się
.fadeOut()	element niknie
.finish()	skończ wykonanie wydarzenia/animacji
.hide()	schowaj element
.queue()	zakolejkuj wydarzenie/wywołanie funkcji
.show()	pokaż element
.stop()	przestań wywoływać animację
.toggle()	pokaż lub ukryj dany element lub wywołaj funkcję, która...

Wszystkie efekty

CSS

Znacznik	Funkcja	Przykład
.addClass()	dodaj klasę do elementu
.after()	dodaj zawartość po elemencie	`$( "p" ).after(function() {return "<div>" + this.className + "</div>";});`
.append()	dodaje treść jako ostatnie dziecko	`$( ".container" ).append( $( "<div id='object1'></div>") );`
.before()	dodaj zawartość przed elementem
.clone()	sklonowanie elementu	`$( ".hello" ).clone().appendTo( ".goodbye" );`
.css()	dodaj do właściwość CSS elementu	`$( this ).css( "background-color" )`
.hasClass()	sprawdza czy element posiada konkretną klasę
.html()	wstawienie treści html do elementu drzewa DOM	`$( "div.demo-container" ).html( "<p>All new content. <em>You bet!</em></p>" );`
.innerHeight()	zwraca wewnętrzną wysokość wskazanego elementu
.prop()	zwraca wartość wskazanego elementu
.position()	obecne koordynaty pierwszego elementu
.remove()	usuwa wskazany element	`$( "div" ).remove( ".hello" );`
.removeAttr()	usuwa atrybut z elementu
.removeClass()	usuwa klasę ze wskazanego elementu
.replaceAll()	podmień wszystkie spełniające warunek wskazanym argumentem	`$( "<h2>New heading</h2>" ).replaceAll( ".inner" );`
.replaceWith()	usuwa element DOM i w jego miejsce zdefiniowany jako arg.	`$( "div.second" ).replaceWith( "<h2>New heading</h2>" );`
.toggleClass()	usuwa lub "ukazuje" klasę
.wrap()	opakowuje wskazany element innym	`$( ".inner" ).wrap( "<div class='new'></div>" );`
.wrapAll()	opakowuje wszystkie elementy spełniające wskazany arg.	`$( ".inner" ).wrapAll( "<div class='new' />");`
.wrapInner()	wkłada element w inny element/wskazany jest jego opakowaniem	`$( ".inner" ).wrapInner( "<div class='new'></div>");`

Manipulation

Przechodzenie po elementach DOM

Znacznik	Zwracany element	przykład
parent()	rodzica
parents()	wszystkich rodziców
parentsUntil()	wszystkich rodziców aż do wybranego i wpisanego jako argument
children()	dzieci (tylko 1 poziom)
find()	znajdź element wprowadzony jako arg	$(document).ready(function(){$("ul").find("span").css({"color": "red", "border": "2px solid red"});});
siblings()	rodzeństwo
next()	kolejny element rodzeństwa
nextAll()	wszystkie kolejne elementy/rodzeństwo
nextUntil()	wszystkie koleje elementy rodzeństwa (aż do tego wpisanego w argument)
prev()	poprzedni rodzeństwa
prevAll()	wszystkie poprzednie elementy rodzeństwa
prevUntil()	poprzednie elementy rodzeństwa do określonego (wpisanego jako arg.)