Witamy w cz. I kursu jQuery, w której chcemy opisać kluczowe zagadnienia prawdziwego giganta – jQuery, tak aby wystarczyło to do używania, i dalszego zgłębiania tajników tej biblioteki. Mówiąc gigant, mamy na myśli możliwości oferowane przez tę bibliotekę. I nie ukrywamy, że ostatnimi czasy, to właśnie jQuery jest preferowaną przez nas biblioteką JavaScript / Ajax.

Autor: Dominik Wlazłowski
Źródło: http://www.javascript-tutorial.pl/

Powód jest prosty – to biblioteka wysokiej jakości o niezwykle ogromnych możliwościach. Jeśli samo jQ nie wspiera jakiejś funkcjona lności, prawdopodobnie znajdziemy ją i łatwo dodamy do projektu, dzięki potężnej ilości dostępnych pluginów.

Oc zywiście możemy tworzyć publikować także własne pluginy. Ponadto jQ ma znakomite rozszerzenie UI, służące do tworzenia i obsługi bogatych interfejsów użytkownika dostępnych w aplikacjach WWW.

Użycie jQuery

Pobieramy bibliotekę ze strony domowej.

Można dodawać ją także w taki sposób:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Zaczniemy od ważnego zagadnienia, jakim jest noConflict.

Często zdarza się, że projekt używa kilku bibliotek JS. A w każdej z nich, podobnie jak w jQuery, możemy znaleźć choćby funkcję $(). Jeśli strona dołącza i używa np.: jQuery i Prototype, to powstanie konflikt.

Do unikania takich sytuacji jQuery wprowadza metodę noConflict(), która pozwala nam do zmiennej przypisać całą moc funkcji $(), najprościej mówiąc.

Przykład:

var jq = jQuery.noConflict();

Możemy też wstawić kod bazujący na jQuery pomiędzy np. Prototype, w sposób pokazany poniżej:

jQuery(document).ready(function($) {

// tutaj możemy normalnie używać $

});

Parametr extreme – metoda jQuery.noConflict(extreme) posiada parametr extreme (typu boolean). W skrócie ten parametr wymusza przypisanie funkcji $() do jej oryginalnych właścicieli. Zastosowaniem są środowiska o wysokim prawdopodobieństwie konfliktu, np. używanie wielu różnorodnych bibliotek JavaScript.

Przykład:

var dom = {};

dom.query = jQuery.noConflict(true);

Selektory jQuery w pigułce

JQuery daje nam zestaw bardzo potężnych selektorów elementów.

Pobieranie elementu danego typu:

// $('p').click(function(){ ... });

// np.: wszystkie elementy p otrzymają obsługę kliknięcia

$('p').click(function() {

alert('Klik');

});

Pobieranie elementu po ID:

// wybierz element o id 'tresc'

$('#tresc').click(function(){

alert('Klik klik');

});

Pobieranie po klasie CSS:
Selektor elementów wzbogaconych o klasę składa się z kropki i nazwy klasy:

$('.inny').click(function() {

alert('Pobranie po klasie');

});

Pobieranie po wartości atrybutu. Możemy pobierać elementy według wartości dowolnego atrybutu elementu.

Przykładowo dla:

<a href="ipsum.html">ipsum</a>

piszemy:

$('a[href="ipsum.html"]').click(function() {

alert('kliknięto ipsum.html');

});

// odd - nieparzysta, stylowanie co drugiego wiersza

$(document).ready(function() {

$('tr:odd').addClass('alt-1');

});

// even - parzysta

$('tr:nth-child(even)').addClass('alt-2');

Dzieci elementu – child combinator:

// dodaj klasę elementom li rodzica selected-uls

$(document).ready(function() {

$('#selected-uls > li').

addClass('horizontal-foobar');

});

Negacja – not:

$('#selected-uls li:not(.horiz)').addClass('sub-level');

Przykład praktyczny – nadanie klasy CSS linkowi, zależnie od rozszerzenia pliku, do którego kieruje:

$('a[href$=.pdf]').addClass('pdflink');

$('a[href$=.doc]').addClass('mswordlink');

Selektory i stylowanie tabel

JQuery wyposaża programistę w selektory upraszczające wiele operacji, np. nadawanie stylów elementom tabel.

Przykład:

Contains – określenie, czy element zawiera dany tekst.

Przykład – dodaj klasę zależnie od zawartości

// wiersze zawierające wyraz 'Henry'

$('td:contains(Henry)').addClass('highlight');

Pobieranie i ustawianie wartości(value) elementu

Do obu zadań służy metoda val(). Jeśli nie podamy parametru – wykonuje się get(pobranie), jeśli podamy – set(ustawienie) wartości podanej jako parametr.

Przykłady:

// pobierz wartość elementu

var myValue = $('#myDivId').val();

// ustaw wartość elementu

$('#myDivId').val("hello world");

Metoda is()
To kolejny wachlarz możliwości. Metoda is() pozwala określić m.in. czy element ma klasę CSS, atrybut, itd.

Przykłady:

// czy element ma klasę .pretty:

if ($('#myDiv').is('.pretty')) {

alert('Tak');

}

// czy element jest ukryty (:hidden)

if ($('#myDiv').is(':hidden')) {

alert('Tak');

}

// :hidden vs :visible - czyli ukryty vs widoczny

var isVisible = $('#myDiv').is(':visible');

var isHidden = $('#myDiv').is(':hidden');

Disable / enable
Dzięki jQuery w prosty sposób możemy ustawiać element na enabled lub disabled. Do tego celu służą metody attr(‘atrybut’, ‘wartosc’) oraz removeAttr(‘atrybut’);

Przykłady:

// disable

$("#x").attr("disabled","disabled");

// enable

$("#x").removeAttr("disabled");

$(document.body).click(function () {

$(document.body).append($("

<div>"));

var n = $("div").length;

$("span").text("There are " + n + " divs."

+ "Click to add more.");

}).trigger('click'); // trigger the click to start

</div>

Tymi samymi metodami możemy obsługiwać elementy formularzy.

Przykład – zaznaczanie i odznaczanie elementu checkbox:

// zakładając że mamy element checkbox z id = '#c'

$("#c").attr("checked", "checked"); // ustaw checked

$("#c").removeAttr("checked"); // usuń checked

Przykład 2 – obsługa list wyboru:

// pobranie id zaznaczonej pozycji

$("select#myselect").val();

// pobranie tekstu (text()) zaznaczonej pozycji

$("#myselect option:selected").text();

Krok dalej – selektory formularzy

Czyli szybki dostęp do określonych elementów danego typu, np. :text odnosi się do < input type=”text” >;

I tak mamy:
:text
:checkbox
:radio
:image,
:submit
:reset
:password
:file

Przyciski można też odnieść do typu button:
:button

Aktywne elementy formularza (enabled):
:enabled

Niekatywne(disabled):
:disabled

Zaznaczone(przyciski typu radio lub checkbox):
:checked

Zaznaczone(dla list wyboru):
:selected

Dokładną dokumentację selektorów i więcej przykładów znajdziemy tutaj.

Metody dostępowe i podstawowe operacje na obiektach w jQuery

• size() – ilość elementów:

$(document.body).click(function () {

$(document.body).append($("

<div>"));

var n = $("div").size();

$("span").text("There are " + n + " divs." +

"Click to add more.");}).click();

</div>

• ength() – podobnie do size():

• context() – kontekst elementu DOM przekazanego do jQuery():

$("ul")

.append("

<li>" + $("ul").context + "</li>

")

.append("

<li>" + $("ul", document.body).context.nodeName + "</li>

");

• eq() – szybka i skuteczna metoda porównywania, np.:

// czy 1. paragraf ma ustawiony kolor na czerwony

$("p").eq(1).css("color", "red");

• get() – pobieranie elementów:

Junction disp(divs) {

var a = [];

for (var i = 0; i < divs.length; i++) {

a.push(divs[i].innerHTML);

}

$("span").text(a.join(" "));

}

disp($("div").get().reverse());

• get(index) – pobieranie elementu o zadanym indeksie:

$("*", document.body).click(function (e) {

e.stopPropagation();

var domEl = $(this).get(0);

$("span:first").text("Clicked on - " + domEl.tagName);

});

- queue() – łatwa implementacja kolejki

Przykład kolejkowania:

$("#show").click(function () {

var n = $("div").queue("fx");

$("span").text("Queue length is: " + n.length);

});

Przykład – kolejkowanie efektów:

function runIt() {

$("div").show("slow");

$("div").animate({left:'+=200'},2000);

$("div").slideToggle(1000);

$("div").slideToggle("fast");

$("div").animate({left:'-=200'},1500);

$("div").hide("slow");

$("div").show(1200);

$("div").slideUp("normal", runIt);

}

runIt();

Rozszerzanie jQuery – extend
W tym momencie chcemy jedynie wspomnieć o znakomitym sposobie rozszerzania udostępnionym przez jQuery.

W prosty sposób możemy wprowadzać nowe metody. Można skorzystać z tego w celu napisania typowego pluginu jQuery.

Przykład:

// jQuery.fn.extend( object )

jQuery.fn.extend({

check: function() {

return this.each(function() {

this.checked = true;

});

},

uncheck: function() {

return this.each(function() {

this.checked = false;

});

}

});

Przykład – rozszerzanie samego jQuery:

// jQuery.extend( object )

jQuery.extend({

min: function(a, b) { return a < b ? a : b; },

max: function(a, b) { return a > b ? a : b; }

});

Te zagadnienia to tylko wierzchołek góry lodowej, a tą górą jest potężny Framework JavaScript. Mamy nadzieję że zachęciliśmy Was do dalszego zgłębiania tajników jQuery.