jQuery - modyfikowanie elementów strony

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2224 razy

Zmiana styli elementów strony

Oto w jaki sposób można zmieniać style wielu elementów strony za pomocą jQuery:

$("#strona h2, h1").css("color", "red"); // zmiana koloru wszystkich elementów na stronie, które znajdują się wewnątrz elementu o id = strona i będących znacznikami h2 lub h1

Praktyczny przykład działania powyższego kodu można zobaczyć klikając na poniższy przycisk.

Metoda css może zwracać wartość ustawienia stylu CSS danej grupy elementów, gdy podany zostanie jej na wejście tylko jeden argument będący nazwą stylu CSS. Gdy podane zostaną dwa argumenty to metoda ta ustawi podany styl CSS.

Zmiana atrybutów elementów strony

Możliwe jest również zmienianie atrybutów elementów strony, oto prosty przykład:

$("#strona .myTable").attr("width", "100%");

Powyższy kod zmieni wysokość wszystkich elementów znajdującym się pod elementem znacznika o id = strona i atrybucie class ustawionym na "myTable".

Ustawianie zdarzeń związanych z elementem strony

Oto lista niektórych metod klasy jQuery związanych z możliwością podłączenia funkcji pod zdarzenie danego elementu strony:

change - metoda podpinająca funkcję pod zdarzenie wywoływane, gdy dany element HTML uległ zmianie;
click - metoda podpinająca funkcję pod zdarzenie wywoływane, gdy dany element strony zostanie kliknięty;
mouseover - metoda podpinająca funkcję pod zdarzenie wywoływane, gdy kursor myszy najedzie na element z nim związany;
mouseout - metoda podpinająca funkcję pod zdarzenie wywoływane, gdy kursor myszy opuści dany element z nim związany;
keydown - metoda podpinająca funkcję pod zdarzenie wywoływane, gdy użytkownik wciśnie jakiś przycisk klawiatury;
keypress - metoda podpinająca funkcję pod zdarzenie wywoływane, gdy użytkownik wciśnie dowolny przycisk klawiatury oprócz: ALT, CTRL, SHIFT, ESC;
keyup - metoda podpinająca funkcję pod zdarzenie wywoływane, gdy użytkownik zwolni przycisk na klawiaturze;
mousemove - metoda podpinająca funkcję pod zdarzenie wywoływane, gdy użytkownik przemieszcza kursor myszy nad danym elementem;
load - metoda podpinająca funkcję pod zdarzenie wywoływane, gdy przeglądarka załaduje dany element.

Przykład użycia jednej z powyższych metod:

$(".myDiv").mouseover(function(){ this.style.backgroundColor = "red"; }); $(".myDiv").mouseout(function(){ this.style.backgroundColor = "white"; });

Oto wynik działania skryptu: