AJAX Kurs od podstaw - jQuery

Selektory CSS

Element

Do wyboru wszystkich elementów zadanego typu służy selektor będący nazwą elementu. Akapity wybierzemy selektorem p, sekcje div - selektorem div, tabele - selektorem table.

Skrypt:

[+]

[-]

 

 

 

1. $(document).ready(function(){
2.    $('p').click(function(){
3.       alert('kliknięto p');
4.    });
5. });
6. ----------------------------
7. <p>Lorem...</p>

Listing zwinięty - 7 linii

przypisze obsługę zdarzenia onclick wszystkim akapitom p występującym w dokumencie.

W powyższym przykładzie fragment znajdujący się przed linią jest kodem JavaScript, zaś dolny fragment - kodem HTML. Wszystkie kolejne przykłady zostały przedstawione w podobnej, skróconej formie.

Warto zwrócić uwagę, że podany przykład będzie działał analogicznie do stylów CSS. Jeśli w stylach CSS wpiszemy regułę:

[+]

[-]

 

 

CSS

1. p {
2.    color: blue;
3. }

Listing zwinięty - 3 linii

to wszystkie akapity staną się niebieskie. Podobnie, selektor p w jQuery:

[+]

[-]

 

 

JavaScript

1. $('p').click(function(){
2.    alert('kliknięto p');
3. });

Listing zwinięty - 3 linii

spowoduje, że wszystkie elementy p otrzymają obsługę zdarzenia onclick.

Identyfikator

Jeśli element HTML zawiera identyfikator id, wówczas stosujemy selektor składający się ze znaku # oraz identyfikatora:

[+]

[-]

 

 

 

1. $(document).ready(function(){
2.    $('#tresc').click(function(){
3.       alert('kliknięto #tresc');
4.    });
5. });
6. ----------------------------
7. <p id="tresc">Lorem</p>

Listing zwinięty - 7 linii

Klasa

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

[+]

[-]

 

 

 

1. $(document).ready(function(){
2.    $('.inny').click(function(){
3.       alert('kliknięto .inny');
4.    });
5. });
6. ----------------------------
7. <p class="inny">Lorem</p>

Listing zwinięty - 7 linii

Wartość atrybutu

Selektor:

 

 

JavaScript

a[href="ipsum.html"]

odnosi się do elementu a, którego atrybut href przyjmuje wartość ipsum.html:

 

 

HTML

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

Zatem kod:

[+]

[-]

 

 

JavaScript

 1. $(document).ready(function(){
 2.    $('a[href="ipsum.html"]').click(function(){
 3.       alert('kliknięto ipsum.html');
 4.    });
 5. });
 6. ----------------------------
 7. <ol>
 8.    <li><a href="lorem.html">lorem</a></li>
 9.    <li><a href="ipsum.html">ipsum</a></li>
10.    <li><a href="dolor.html">dolor</a></li>
11. </ol>

Listing zwinięty - 11 linii

będzie ustalał obsługę zdarzenia onclick wyłącznie środkowego hiperłącza.

1. Cechy jQuery, Podstawy
2. Podstawy c.d.
3. Selektory CSS
4. Zmiana treści i wyglądu, Zdarzenia
5. Zagadnienia dalsze
6. Menu
7. Menu c.d., Wyszukiwarka