Wybieranie elementów za pomocą jQuery

Dzień dobry,

jQuery używa składni XPath do wybierania elementów DOM.

Jeśli więc korzystają Państwo z CSS lub używali XPath do wybierania węzłów w XML, już wiedzą Państwo, jak wybierać elementy za pomocą jQuery!

Użyjmy ich z jQuery 🚀

Selektor klas

Element należący do wybranej klasy wybiera się za pomocą operatora kropki (.).

W poniższym przykładzie zostaną wybrane wszystkie elementy mające klasę title , a ich kolor zostanie zmieniony. 

<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>

<script>
$('.title').css('color','pink')
</script>

W kolejnych lekcjach przedstawimy metodę css(). 

Na razie wystarczy wiedzieć, że metoda css() służy do definiowania stylu elementu

Selektor identyfikatora

Element o wybranym identyfikatorze można wybrać za pomocą operatora # (hash). Jak wiemy, tę samą wartość identyfikatora można nadać tylko jednemu elementowi na stronie HTML.

W poniższym przykładzie zostanie wybrany element mający identyfikator title, a jego kolor zostanie zmieniony.

<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>

<script>
$('#title').css('color','pink')
</script>

Selektor znaczników

Element z wybranym znacznikiem można wybrać za pomocą samej nazwy znacznika

W poniższym przykładzie zostanie wybrany element mający znacznik span, a jego kolor zostanie zmieniony.

<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>

<script>
$('span').css('color','pink')
</script>

Selektor elementów potomnych

Aby wybrać elementy potomne elementu, używamy operatora większe niż (>).

W poniższym przykładzie zostaną wybrane wszystkie elementy potomne wskazanego elementu.

<p>
  <span>Hello</span>
  <span>CoddyKit</span>
</p>

<script>
$('p>span').css('color','pink')
</script>

Selektor atrybutów

Możemy wybrać wskazany element, sprawdzając, czy atrybut elementu ma określoną wartość.

W poniższym przykładzie zostaną wybrane elementy, które mają znacznik <a> oraz atrybut target o wartości _blank.

<a target="_blank" 
     href="http://coddykit.com">
   CoddyKit
 </a>

<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>

jQuery ułatwia wybieranie elementów w DOM, udostępniając różne metody oraz selektory XPath.

Poznajmy je.

Metoda parent()

Możemy wybrać element nadrzędny wskazanego elementu za pomocą udostępnianej przez jQuery metody parent() .

W poniższym przykładzie zostanie wybrany element nadrzędny elementu, a kolor jego tekstu zostanie zmieniony.

<div>
Parent Element Text
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
</div>

<script>
$ ('a').parent().css('color','pink')
</script>

Metoda children()

Możemy wybrać wszystkie elementy potomne wskazanego elementu za pomocą udostępnianej przez jQuery metody children().

W poniższym przykładzie zostaną wybrane wszystkie elementy potomne elementu, a kolor ich tekstu zostanie zmieniony.

<div>
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
<span>Children Element Text</span>
</div>

<script>
$ ('div').children().css('color','pink')
</script>

Metoda parents()

Możemy wybrać element przodka wskazanego elementu za pomocą udostępnianej przez jQuery metody parents().

W poniższym przykładzie zostanie wybrany przodek elementu, a kolor tekstu elementu nadrzędnego zostanie zmieniony.

Różnica między tą metodą a innymi poznanymi metodami polega na tym, że może ona przyjmować parametr.

Przekazujemy więc selektor XPath jako parametr, aby określić, który przodek ma zostać wybrany.

<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>

<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>

Metoda next()

Metoda next() wybiera następny element tego samego poziomu co wskazany element.

W poniższym przykładzie zostanie wybrany pierwszy następny element tego samego poziomu co element ze znacznikiem a.

<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>

<script>
$ ('a').next().css('color','pink')
</script>

Metoda nextAll()

Metoda nextAll() służy do wybierania kolejnych elementów tego samego poziomu co wskazany element.

W poniższym przykładzie zostaną wybrane wszystkie elementy ze znacznikiem div znajdujące się za nim na tym samym poziomie.

<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>


<script>
$ ('div').nextAll().css('color','pink')
</script>

Metoda siblings()

Można wybrać wszystkie elementy tego samego poziomu co wskazany element za pomocą metody siblings().

W poniższym przykładzie zostaną wybrane wszystkie elementy tego samego poziomu co elementy ze znacznikiem p.

<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>

<script>
$ ('p'). siblings().css('color','pink')
</script>

Metoda prev()

Metoda prev() służy do wybierania poprzedniego elementu tego samego poziomu.

Wybiera pierwszy poprzedni element tego samego poziomu co element ze znacznikiem a.

<span>Hello Coddy</span>
<div class="test"></div>

<script>
$ ('.test').prev().css('color','pink')
</script>

Metoda prevAll()

Metoda prevAll() służy do wybierania poprzednich elementów tego samego poziomu co wskazany element.

W poniższym przykładzie zostaną wybrane wszystkie elementy ze znacznikiem div znajdujące się przed nim na tym samym poziomie.

<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>

<script>
$('div').prevAll().css('color','pink')
</script>

Gratulacje 🎉

W tej sekcji nauczyliśmy się wybierać elementy DOM.

W następnej sekcji będziemy kontynuować naukę manipulowania elementami DOM.