Выбор элемента с помощью jQuery

Здравствуйте!

jQuery использует синтаксис XPath для выбора элементов DOM.

Поэтому, если Вы используете CSS или уже применяли XPath для выбора узлов в XML, Вы уже знаете, как выбирать элементы с помощью jQuery!

Давайте воспользуемся ими в jQuery 🚀

Селектор класса

Элемент с нужным классом выбирается с помощью оператора точки (.).

В примере ниже будут выбраны все элементы с классом title, и их цвет изменится. 

<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>

В следующих уроках мы познакомимся с методом css(). 

А пока просто запомните, что метод css() используется для задания стиля элемента.

Селектор идентификатора

Элемент с нужным идентификатором можно выбрать с помощью оператора # (решётка). Как известно, одно и то же значение идентификатора может быть присвоено только одному элементу на HTML-странице.

В примере ниже будет выбран элемент с идентификатором title, и его цвет изменится.

<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>

Селектор тега

Элемент с нужным тегом можно выбрать, указав только имя тега.

В примере ниже будет выбран элемент с тегом span, и его цвет изменится.

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

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

Селектор дочерних элементов

Чтобы выбрать дочерние элементы элемента, используется оператор «больше» (>).

В примере ниже будут выбраны все дочерние элементы нужного элемента.

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

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

Селектор атрибута

Мы можем выбрать нужный элемент, проверив, имеет ли атрибут элемента определённое значение.

В примере ниже выбираются элементы с тегом <a> и атрибутом target со значением _blank.

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

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

jQuery упрощает выбор элементов в DOM, предоставляя различные методы, а также селекторы XPath.

Давайте изучим их.

Метод parent()

Мы можем выбрать родительский элемент нужного элемента с помощью метода parent() , предоставляемого jQuery.

В примере ниже выбирается родительский элемент и изменяется цвет его текста.

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

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

Метод children()

Мы можем выбрать все дочерние элементы нужного элемента с помощью метода children(), предоставляемого jQuery.

В примере ниже выбираются все дочерние элементы элемента и изменяется цвет текста дочерних элементов.

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

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

Метод parents()

Мы можем выбрать предка нужного элемента с помощью метода parents(), предоставляемого jQuery.

В примере ниже выбирается предок элемента и изменяется цвет текста родительского элемента.

Отличие этого метода от изученных ранее заключается в том, что он может принимать параметр.

Поэтому мы передаём селектор XPath в качестве параметра, чтобы указать, какого предка нужно выбрать.

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

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

Метод next()

Метод next() выбирает следующий соседний элемент нужного элемента.

В примере ниже выбирается первый следующий соседний элемент элемента с тегом a.

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

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

Метод nextAll()

Метод nextAll() используется для выбора следующих соседних элементов нужного элемента.

В примере ниже выбираются все соседние элементы после элемента с тегом div.

<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>

Метод siblings()

Вы можете выбрать все соседние элементы нужного элемента с помощью метода siblings().

В примере ниже выбираются все соседние элементы элементов с тегом p.

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

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

Метод prev()

Метод prev() используется для выбора предыдущего соседнего элемента.

Выбирается первый предыдущий соседний элемент элемента с тегом a.

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

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

Метод prevAll()

Метод prevAll() используется для выбора предыдущих соседних элементов нужного элемента.

В примере ниже выбираются все соседние элементы перед элементом с тегом div.

<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>

Поздравляем 🎉

В этом разделе мы научились выбирать элементы DOM.

В следующем разделе мы продолжим изучать манипуляции с DOM.