jQuery - Selecting Elements

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

:disabled Selector

We can get inputs that are disabled with the :disabled selector.

For example, if we have the following HTML:

<form>  
  <input name="email" disabled="disabled">  
  <input name="id">  
</form>

Then we can set the value of the disabled input by writing:

$("input:disabled").val("this is it");

.each()

The .each() method lets us iterate over a jQuery object.

For example, if we have the following HTML:

<ul>  
  <li>foo</li>  
  <li>bar</li>  
</ul>

Then we can get all the li elements by writing:

$("li").each(function(index) {  
  console.log(index, $(this).text());  
});

Element Selector

We can get elements with the given tag name with the element selector.

For example, if we have the following HTML:

<div>DIV1</div>  
<div>DIV2</div>  
<span>SPAN</span>

Then we can add a red border to all the divs by writing:

$("div").css("border", "9px solid red");

.empty()

The .empty() method removes all child nodes of the set of matched elements in the DOM.

For example, if we have the following HTML:

<div class="container">  
  <div class="hello">Hello</div>  
  <div class="goodbye">bye</div>  
</div>

Then we can call empty by writing:

$(".hello").empty();

Now the div with class hello will no longer have the text inside it.

:empty Selector

We can use the :empty selector to get all elements that have no children.

For example, if we have:

<table>  
  <tr>  
    <td>TD #0</td>  
    <td></td>  
  </tr>  
  <tr>  
    <td>TD #2</td>  
    <td></td>  
  </tr>  
  <tr>  
    <td></td>  
    <td>TD#5</td>  
  </tr>  
</table>

Then we can add text to the empty td elements by writing:

$("td:empty")  
  .text("Was empty")  
  .css("background", "green");

We add the 'Was empty' text into the empty td element and add a green background to it.

:enabled Selector

We can use the :enabled selector to get all the enabled input elements.

For example, if we have the following HTML:

<form>  
  <input name="email" disabled>  
  <input name="id">  
</form>

Then we get the enabled input and set its value by writing:

$("input:enabled").val("this is it");

.end()

The .end method ends the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

For example, if we have the following HTML:

<ul class="first">  
  <li class="foo">list item 1</li>  
  <li>list item 2</li>  
  <li class="bar">list item 3</li>  
</ul>  
<ul class="second">  
  <li class="foo">list item 1</li>  
  <li>list item 2</li>  
  <li class="bar">list item 3</li>  
</ul>

We can apply styles on the li with class foo and the li with class bar in the same method chain by writing:

$("ul.first")  
  .find(".foo")  
  .css("background-color", "red")  
  .end()  
  .find(".bar")  
  .css("background-color", "green");

The end method lets us end working with li with class foo and then we call find to find another element.

.eq()

The .eq() method reduces a set of matched elements to the one with the given index.

For example, if we have:

<ul>  
  <li>item 1</li>  
  <li>item 2</li>  
  <li>item 3</li>  
  <li>item 4</li>  
  <li>item 5</li>  
</ul>

Then we can get the li with index 2, which is the 3rd one and add a red background to it by writing:

$("li").eq(2).css("background-color", "red");

Conclusion

We can select elements and work with them with various methods.