Podstawy jQuery

Biblioteka jQuery z zbiór metod oraz funkcji współpracujących z JavaScript. Dzięki swej szybkości działania oraz wielu funkcji łatwym staje się poruszanie  i manipulacja elementami HTML na stronie internetowej. Animacje czy też korzystanie z technologi Ajax jest prostsze w użyciu dzięki API (Application Programming Interface – interfejs programowania aplikacji). Profesjonalne strony internetowe coraz częściej korzystają z technologii jQuery.

Przykład zastosowania zdarzenia "click()"

$(document).ready(function() {
  $("#opis1").click(function(){ 
    $(this).toggleClass("highlight");
});

});

Metody:

.ready(function() {     }  );  wykonaj funkcję po załadowaniu strony.

.css("color", "#fff") modyfikacja stylów css danego obiektu 
.css({"color": "#111", "font-size": 21px, "font-weight": "bold"}) modyfikacja kilku na raz styli danego obiektu
.html() zawartość html danego obiektu np. $("p").html() zwartość html w selektorze p
.text() zwraca tekst zawarty w danym obiekcie.
.append("Dowolny tekst") dołączanie na końcu tekst np do akapitu $("p").append("Dowolny test");
.prepend("Dowolny tekst") dołączany na początku akapitu p lub dodatkowy akapit $("p").prepend("<p>Dodatkowy akapit</p>");
.appendTo  $("p[class=opis1]").appendTo("p[class=opis3]"); zawartość z lewej dołączamy do zawartości z prawej czyli p.opis3, zawartość z lewej jest usuwana.
.prependTo  $("p[class=opis1]").prependTo("p[class=opis3]"); dołączenie do p.opis3 na początku tego akapitu
.attr("id") odczyt wartości atrybutu id.
.attr("href", "http://www.z-robot.pl"); wpisanie wartości atrybutu href
.attr({ href: "http://www.wp.pl", title: "Tytuł", target: "_blanck"}); dodawanie kilku atrybutów
.removeAttr("title") usuwanie atrybutu w tym przypadku title
.addClass("nazwa-klasy"); dodawanie klasy do wybranego elementu np. $("p").addClass("kasa1"); 
.removeClass("nazwa-klasy"); usuwanie klasy z wybranego elementu
.toggleClass("Nowaklasa"); załączanie i wyłączanie klasy "Nowaklasa"
.hasClass("nazwa-klasy") sprawdza czy klasa została przypisana do danego elementu i zwraca war. ture / false
.height() wysokość np obrazka
.width() szerokość np. .width(200) zmiana szerokości do 200px
.innerHeight() wysokość wraz z np. paddingiem 
.empty() usuwanie elementów podrzędnych np. $("p").empty() usuwamy wszystko co znajduje się wewnątrz akapitu p
.remove() podobnie jak empty() z tym, że usuwany zostanie też wskazany element np. akapit p
.replaceWith("<p>Coś innego</p>")zamiana na nową treść przyklad $("#opis1").replaceWith("<p>Coś innego</p>");
.bind() - obsługa kilku zdarzeń na raz np.  $("p").bind("mouseenter mouseleave", function(){
		$(this).toggleClass("highlight");
	});
.toggle() - ukrywa/wyświetla wskazany element przykład $("#description").toggle("slow");
.delay(3000) - opóźnienie wykonywania kolejnej metody np. $("#banner").hide().slideDown(2500).delay(3000).slideUp(2500);
.offset() - zbiór podstawowych właściwości css odsunięcie o lewej krawędzi (left) i odsunięcie od góry okna (top)
.find(".klasa") znajdowanie elementu np. danego elementu z klasą .klasa

 

Zdarzenia:

.click - pojedyńcze kliknięcie lewy przycisk myszy
.dblclick - podwójne kliknięcie
.mouseenter - moment gdy umieszczamy kursor mysy nad wybranym elementem
.mouseleave - moment gdy opuszcza kursor myszy wybrany elelment
.mouseup - moment gdy klikniemy dany element i przytrzymamy wciśnięty przycisk i po chwili zwolnimy go
.keypress - zdarzenie wykrywa wciśnięcie dowolnego klawisza
.keyup - wykrywa wciśnięcie i przytrzymanie dowolnego klawisza
.scroll - wykrywa przewijanie strony przykład $(document).ready(function() {
    $(document).bind("scroll", function(){
		alert("kurs jQuery");
	});
});
.hover - zawiera w sobie  mouseenter i mouseleave 
.focus - moment, kiedy pole np. typu input zostało aktywowane.
.blur - moment, kiedy pole zostaje opuszczone
.submit - moment, kiedy naciskamy przycisk np. w formularzu
:checked zbiór (tablica) elementów, które zostały zaznaczone

Filtry:

 

$("p").css("color", "green");  przykład

 

a:first -odnośnik pierwszy
a:last - odnośnik ostatni
a:eq(0) - pierwszy odnośnik
a:gt(3) - wszystkie elementy powyżej 3
a:lt(3) - wszystkie elementy mniejsze niż 3
a:even - usuwanie parzystych odnośników z tablicy
a:odd - usuwanie nieparzystych odnośników z tablicy
p:contains(test) - wybranie akapitu zawierającego słowo test  
p:has(a) - wybranie akapitu który w środku zawiera selektro a  
p a:first-child - pierwszy element podrzędny typu odnośnik(link) w elemencie typu p
p a:nth-child(3) - wybrany 3 odnośnik w danym akapicie
p[class] - zmiana selektora który posiada atrybut class, p[class=nazwaklasy],
p[class$=1] - wybrany zostaje akapit który posiada klasę z nazwą zawierającą na końcu znak 1
p[id] - zmiana selektora który posiada atrybut id,
input[value] - wybór selektora input posiadający atrybut value np przycisk.

 Właściwości

.length długość danego elementu

 

Przykłady

Obiekt zdarzenia. Zwraca współrzędne kursora myszki w obszaże paragrafu p

$(document).ready(function() {
    $("p").click(function(zdarzenie){
		alert(zdarzenie.pageX+","+zdarzenie.pageY);
	});
});

 

Zmiana obrazka przy pomocy metody hover

$(document).ready(function() {
$("#banner").hover(function(){
	$(this).attr("src", "img/2.jpg");
	},
	function(){
		$(this).attr("src", "img/1.jpg");
	});
});

 

Walidacja formularzy. Sprawdzenie czy pola name i email nie są puste.

$(document).ready(function() {
	$("#newsletter").submit(function(){
		if(($("#name").val() == "") || ($("#email").val() == ""))
		{
			alert("uzupełnij wymagane pola");
			return false;
		}
	})
});

 

Sprawdzenie czy został zaznaczone przynajmniej jedno pole chechbox

$(document).ready(function() {
	$("#newsletter").submit(function(){
		if($(":checked").length == 0 )
		{
		 alert("żaden element nie został element");
		 return false;
		}
		alert("zaznaczono "+$(":checked").length+" kategoire");
	});
});

 

Zaznaczenie aktywnego pola

$(document).ready(function() {

	$("input").focus(function(){
		$(this).css({
			"border": "2px solid #29b6cf",
			"background": "#fffedd"
		});
		$("input").blur(function(){
			$(this).css({
				"border": "1px solid #ddd",
				"background": "#f5f5f5"		
			});
		});
	});
});

 

Pole w formularzu z auto uzupełnianiem i kasowaniem wartości value="Podaj swoje imię"

$(document).ready(function() {
	$("#name1").bind("focus", function(){
		if($(this).val() == "Podaj swoje imię")
			{
			$(this).val("");
			}
		});

	$("#name1").bind("blur", function(){
		if($(this).val() == "")
		{
			$(this).val("Podaj swoje imię"); 
		}
	});	
});

 

Podświetlanie wierszy w tabeli

$(document).ready(function() {
    $("tr").hover(function(){
		$(this).css({"background-color": "#01294f", "color": "#fff"});
		},
		function(){
			$(this).css({"background-color": "#fff","color": "gray"});
			});
});

 

Animacja - klika metod w jednej linii

$(document).ready(function() {
	$("#hide").click(function(){
		$("#banner").hide().slideDown(2500).delay(3000).slideUp(2500);

	});
});

 

Animacja tekstu w akapicie, zmiana krycia obrazka opicity

$(document).ready(function() {
	$("#an2").click(function(){
		$("#akapit").animate({width: "150px", fontSize: "8px"}, 2000);
	});
	$("#an1").click(function(){
		$("#obrazek").animate({opacity: "0"}, 2000);
	});
});

 

Animacja pozycji

$(document).ready(function() {
	$("#right").click(function(){
		$("#container").animate({left: "+=500px"}, 400);
	});
	$("#left").click(function(){
		$("#container").animate({left: "-=500px"});
		});
});

 

Zwijanie tekstu

$(document).ready(function() {
	$("p").hide();
	$("h2").click(function(){
		$(this).next("p").toggle();
	});
	$("#zwin").click(function(){
		$("p").hide();
	});
	$("#rozwin").click(function(){
		$("p").show();
	});
});

 

Podgląd dużego obrazka

$(document).ready(function() {

	$("#okladkamala").hover(function(){
		var pozycja = $("#okladkamala").offset();
		$("#okladkaduza").css("left",pozycja.left+76).css("top",pozycja.top+68).show(300);
	},
	function(){
		$("#okladkaduza").delay(455).hide(300);
	}
	);

});

 

Zwijane akapity

$(document).ready(function() {
	$(".rozwiniecie").hide();
	$(".rozwiniecie").after("<h4 class=\"pokaz\">"+"Rozwiń"+"</h4>");
	$(".pokaz").click(function(){
		$(this).prev("p").toggle();
		if($(this).text() == "Rozwiń")
		{
			$(this).text("Zwiń");
		}
		else
		{
			$(this).text("Rozwiń");
		}

	});
});

 

Usuwanie akapitów

$(document).ready(function() {
	$(".wstep").append("<h4 class='usun'>"+"Usuń"+"</h4>");
	$(".usun").click(function(){
		$(this).parents(".artykul").fadeOut(600, function(){
			$(this).parents(".artykul").remove();
		});
	});
});

 

Wysuwane okienko typu facebook

$(document).ready(function() {
	$("#slider").hover(function(){
		$(this).animate({left: "0px"});
	},
	function(){
		$(this).animate({left: "-292px"});
	}
	);
});

 

Menu rozwijane

$(document).ready(function() {
	$("ul#menu li").hover(function()
		{
			$(this).find(".podmenu").slideDown();
		},
		function(){
			$(this).find(".podmenu").slideUp();
		}
	);
});

 

zaczynam od  8.7

Skip to content