jQuery selekcja

Przeglądanie drzewa DOM dokumentu HTML jest bardzo proste przy użyciu selektorów z jQuery.

$("h1") - selekcja wszystkich elementów h1
$(".klasa") - selekcja wszystkich elementów posiadających klasę klasa
$("#id_elementu") - selekcja elementu o id = id_elementu - jest to najszybszy dostępny selektor
$("*") - pobiera wszystkie elementy na stronie
$("p.klasa") - wybiera wszystkie elementy p posiadające klasę klasa
$("p:first") - wybiera pierwszy element typu p
$("[name]") - wybiera wszystkie elementy posiadające atrybut name
$("form[name='formatka1']") - wybiera wszystkie formularze o nazwie formatka1
$("a, p, div") - wyszukiwanie wielu na raz
$("div p") - wybiera wszystkie paragrafy znajdujące się w elemencie div

Metody pomocnicze:
$(".klasa").parent() - wyszukuje wszystkie elementy nadrzędne do tych o klasie klasa
$(".klasa").children() - Elementy zawarte w elementach o klasie klasa
$(".klasa").prev() / .next() - element po prawej/lewej stronie elementów o klasie klasa

Korzystając z wymienionych funkcji można w łatwy sposób zmieniać całą strukturę drzewa DOM dokumentu HTML.

Dodatkowo warto pamiętać aby każdy blok kodu jQuery rozpoczynać od sprawdzenia czy dokument został załadowany:

Code:

$(document).ready(function() {
});