Selecting Element with jQuery

Hello,

jQuery uses the XPath syntax to select DOM elements.

So because you are using CSS or if you have used XPath to select nodes in XML, you already know how to select elements with jQuery!

Let's use them with jQuery 🚀

Class Selector

The element in the desired class is selected using the dot(.) operator.

In the example below, It will select all elements and change color which have the title class. 

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

we will introduce css() method in the following lessons. 

For now, just know that the css() method is used to define the style of the element

Id Selector

The element in the desired id can be selected using the #(hash mark) operator. As we know, the same id value can be given to only one element in the HTML page.

In the example below, It will select the element and change the color, which has the title id.

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

Tag Selector

The element in the desired tag can be selected using the just tag name

In the example below, It will select the element and change the color, which has the span tag.

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

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

Child Selector

If we want to select the children of an element, we use the greater than(>) operator.

In the example below, It will select the all children of the desired element.

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

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

Attribute Selector

We can select the desired element by checking if an element's attribute has a value.

In the example below, It selects the elements that have the <a> tag and the target attribute with value _blank.

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

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

jQuery makes it easier to select in the DOM by providing some methods as well as XPath selectors.

Let's learn about them.

parent() Method

We can select the desired element's parent by using the parent() method that provided by jQuery.

In the example below, It selects the element's parent and changes the parent element's text color.

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

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

children() Method

We can select the desired element's all children by using the children() method that provided by jQuery.

In the example below, It selects the element's all children and changes the chidlren's text color.

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

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

parents() Method

We can select the desired element's ascendant element by using the parents() method that provided by jQuery.

In the example below, It selects the element's ascendant and changes the parent element's text color.

The difference between this method from other methods that we learned is that it can have a parameter.

So we send an XPath selector as a parameter to define which ancestor to be chosen.

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

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

next() Method

The next() method selects the next sibling of the desired element.

In the example below, It selects the next first sibling of the element with the tag 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() method

The nextAll() method is used to select the next siblings of the desired element.

In the example below, it selects all siblings of the element with the div tag after it.

<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() Method

You can select all desired element's siblings by using the siblings() method.

In the example below, it selects all siblings of elements with the p tag.

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

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

prev() Method

prev() method is used to select the previous sibling of an element.

Selects the preceding first sibling of the element with the tag a.

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

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

prevAll() method

The prevAll() method is used to select the previous siblings of the desired element.

In the example below, it selects all siblings of the element with the div tag before it.

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

Congratulations 🎉

This section taught us to select DOM elements.

In the next section, We will continue to learn about DOM manipulations.