JQuery - atrybuty

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