jQuery

Niezbędnym elementem każdej strony internetowej jest menu. Może to być menu proste, składające się z pojedynczych odnośników, ale również wielopoziomowe (rozwijane).

Dostępne typy selektorów:

• Podstawowe - wykorzystują id, klasy, nazwy elementów
• Hierarchiczne - wykorzystujące relacje pomiędzy elementami strony

Atrybuty

Strona to nie tylko elementy na stronie, ale również atrybuty tych elementów. To one wpływają na wygląd strony i zawartość

Jakimi atrybutami możemy manipulować przy pomocy JQuery?

• Klasą CSS(Class)
• Kodem HTML
• Wartością TXT
• Atrybutami elementów
• Wartościami (Value)

Klasa CSS

Wygląd strony definiujemy poprzez właściwie zaprojektowaną strukturę dokumentu(elementy) oraz definicje wyglądu elemetów

Od momentu wprowadzenia arkuszy styli CSS można manipulować wyglądem elementów również wykorzystując JavaScript

Do grupy funkcji, które potrafią zmodyfikować atrybuty CSS strony należą:

• addClass(nazwa klasy) - dodaje do elementu określoną w nawiasie klasę CSS
• removeClass(nazwa klasy) - wyrzuca z wybranych zapytaniem elemntów klasę o określonej nazwie
• hasClass(nazwa klasy) - zwraca true, jesli klasa określona w poleceniu jest przypisana do wybranych elementów
• toggleClass(nazwa klasy) - dodaje klasę do wybranych elementów jeśli element jej nie ma, natomiast wyrzuca ją z elemetu, jeśli dany element ma już podaną klasę przypisaną

<style type="text/css">
.red {
border:1px solid black;
background: red;
color: white;
}
.green {
border:1px solid black;
background: green;
color: white;

}
.blue {
border:1px solid black;
background: blue;
color: white;

}
</style>

<p class="red" >Pierwszy paragraf z przypisaną klasą "red"</p>
<p class="red" >Drugi paragraf z przypisaną klasą "red"</p>
<p class="green" >Trzeci paragraf z przypisaną klasą "green"</p>

Fragment kodu JQuery do przedstawionego przykładu.

$(document).ready(function(){
  $("#toggle").click(function () {
      $('p.red').toggleClass("blue");
   });
	$("#addclass").click(function () {
     $('p.green').addClass("blue");
   });
	$("#removeclass").click(function () {
    $('p.green').removeClass("blue");
  });
	$("#hasclass").click(function () {
		if ($('p.green').hasClass("blue")==true) {
			alert ('Trzeci element ma przypisaną klasę blue');
		}else{
			alert ('Trzeci element nie ma przypisamej klsy blue');
		};
  });
});

Jaki może być do tego komentarz? Myslę, że przykłady są czytelne, dlatego nie będę ich tu specjalnie opisywał. To właśnie siła JQuery, że przy pomocy niewielu linijek kodu można uzyskać całkiem ciekawe efekty.

Operacje na klasach, a właściwie atrybutach CSS były wykorzystywane przy okazji testowania selektorów.

HTML

• html() - pobiera kod HTML dla pierwszego wskazanego elementu (innerHTML)
• html(val) - ustawia dla wybranych elementów kod HTML zdefiniowany w "val"

Ciąg dalszy (związany z atrybtami) nastąpi....wkrótce

Selektory hierarchii dokumentu

Jeśli chcemy wyszukać elementy na stronie badając hierarchię dokumentu możemy użyć poniższych reguł.

Zanim spełnię obietnicę złożoną w pierwszej części kursu, związaną z manipulacjami na CSS, warto poznać możliwości dotyczące wyszukiwania (selekcji) elementów DOM, których modyfikację chcemy przeprowadzić. Aby zbudować przykład użyjemy funkcji css, która nadaje konkretną wartość dla wybranego argumentu stylu css.

.css(nazwa,wartość)

W jaki sposób wyszukiwać elementy strony? Służy do tego poniższa funkacja

$(filtr);

Zawsze rozpoczynamy od znaku $, a jako parametr wpisujemy parametr filtrowania, którym może być sam element, jego ID lub określona dla niego klasa CSS. Sa również do dyspozycji selektory CSS, XPath oraz inne dopuszczane przez JQuery.

Jeśli ją połączymy z funkcją określającą co mamy zrobić dla wybranych elementów strony (separatorem jest kropka "."), np. wcześniej opisana funkcja zmiany atrybutu css to otrzymujemy.

$(filtr).css(atrybut,wartość);

Teraz zajmiemy się tylko podstawowymi selektorami, a dalsze częsci kursu będą opisywały kolejne.

Załóżmy, że nasz kod HTML strony jest następujący:

<div id="divek">
   <ul>
       <li id="li1" class="first">Pierwszy punkt</li>
       <li id="li2" class="first">Drugi punkt</li>
       <li id="li3">Trzeci punkt</li>
   </ul>
</div>
<p class="first">Paragraf</p>

Zgodnie z API JQuery, możemy wyszukiwać elementy wskazując:

#id - identyfikator elementu

$('#li3').css("background","yellow");

Po wyszukaniu elementu o id="li3" natąpi zmiana tła trzeciego punktu listy na kolor żółty.

element strony

$('li').css("background","yellow");

Efektem wykonania powyższego kodu będzie wyszukanie trzech elementów "li" i zmiana tła tych elementów na kolor żółty. Sprawa na prawdę prosta. Można to zrobić przy pomocy JS, ale musimy użyć pętli. Tu wystarczy, że wskażemy wszystkie elementy danego typu i z automatu wszelkie zmiany odnoszą sie do całej grupy. Nie dość, że łatwe, to jakie czytelne. Kod miły dla oka...

klasę CSS (class)

$('.first').css("background","yellow");

Powyższy kod umożliwia wybór dwóch pierwszych elementów listy, dla których paramter class="yellow", a następnie zamienia tło na żółte.

* - wskazanie wszystkich elementów strony

$('*').css("background","yellow");

Powyższy kod pozwoli wybrać wszystkie elmenty strony. Dla naszego przykładu będzie to div, ul, li, p. Dla każdego z tych elemntów tło ulegnie zmianie na żółte. Nie daję przykładu, bo zmianie uległby cały serwis.

Wybierzmy teraz wszystkie elementy li dla których klasa ma nazwę first. Jak to zapisać?

$('li.first').css("background","yellow");

Kod powyższy pozwoli wybrać tylko elementy li, dla których nazwa klasy CSS to first i zamienić ich tło na żółte. Paragraf (p), który też przypisaną ma klasę "first" pozostanie bez zmian.

I to jest tylko wierzchołek góry możliwości wyszukiwania odpowiednich elementów strony. Jak już wspomniałem w pierwszej części posługujemy się selektorami CSS i XPath, których jest długa lista (opublikuję później).

Ciąg dalszy niedługo....

JQuery to framework JavaScript, który jest używany przez wielkie korporacje i firmy do budowy swoich stron.

JQuery omijałem długi czas. W moich poszukiwaniach idealnego narzędzia do budowy aplikacji internetowych z wykorzystaniem technologii AJAX sięgnąłem do Dojotoolkit. Budowałem interfejsy do aplikacji i stwierdziłem, że ciężar skryptów tego frameworka dyskwalifikuje go w moich zastosowaniach.DojoToolkit Sprawdza się niewątpliwie w małych projektach!