Selectorii jQuery

Selectorii jQuery sunt o parte importantă a librăriei jQuery. Aceștia permit selecția și manipularea elementelor HTML.

Selectorii jQuery sunt folosiți pentru "a găsi" (sau selecta) elemente HTML cu ajutorul id, claselor, tipurilor, atributelor, valorilor atributelor și multe altele. Se bazează pe Selectorii CSS existenți, iar în plus conține o serie de selectori proprii.

Toți selectorii din jQuery încep cu simbolul dollar și paranteze: $().

Selectorul de elemente

Selectorul de elemente jQuery selectează elementele în funcție de numele elementului.

Selecția tuturor elementelor de tip paragraf <p> dintr-o pagină se face astfel:

$("p")

 

Exemplu 1

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Click me</button>

</body>
</html>


Când un utilizator apasă un buton, toate elementele de tip <p> for fi ascunse:

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

Selectorul de tip #id

Selectorul jQuery de tip #id folosește atributul id al unui tag HTML pentru a identifica/găsi un element specific.

Un id trebuie să fie unic într-o pagină, astfel că utilizarea selectorului #id trebuie să aibă loc când se dorește găsirea unui element singular, UNIC.

Pentru a găsi un element cu id specific, se folosește caracterul special "#" urmat de id-ul elemetului HTML:

$("#test")

Exemplu

Când un utilizator apasă un buton, elementul cu id="test" va fi ascuns:

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
...
<p id="test">This is another paragraph.</p>

Selectorul de tip .class

Selectorul de tip class găsește elementele dintr-o anumită clasă.

Pentru a găsi elementele dintr-o anumită clasă, se foloseste punctul ".", urmat de numele clasei:

$(".test")

Exemplu

Când un utilizator apasă pe butonul de mai jos, toate elementele din class="test" vor fi ascunse:

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
...
<p class="test">This is another paragraph.</p>

TODO:
1. Să se adauge un nou buton care sa ascunda titlul H2.
2. Să se păstreze funcționalitatea celor două butoane realizată la punctul 1, dar să se folosească ambele tipuri de selectori (de tip ID, respectiv de tip CLASS) pentru a ascunde elementele de tip de tip p, h2.