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
