jQuery — Child Elements, Queues, and Clicks

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.

Child Selector (“parent > child”)

We can get the child elements with this selector.

For example, if we have the following HTML:

<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul>
    <li>Nested item 1</li>
    <li>Nested item 2</li>
    <li>Nested item 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

We get the ul with the class topnav ‘s li elements bu writing:

$("ul.topnav > li").css("border", "3px double red");

We call css to add a border to all the matched elements.

.children()

We can get the child elements of a selected element with the children method.

For example, if we have the following HTML:”

<ul class="topnav">
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Nested item 1</li>
      <li>Nested item 2</li>
      <li>Nested item 3</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Then we get all the child elements of the ul by writing:

$("ul.topnav").children().css("background-color", "red");

We called css to make the background red.

Class Selector (“.class”)

We can select items with the class selector.

For example, if we have the following HTML:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

Then we can highlight the elements with the class myClass by writing:

$(".myClass").css("border", "3px solid red");

.clearQueue()

The .clearQueue() method removes from the queue items that haven’t been run.

For example, if we have the following HTML:

<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>

And CSS:

div {
  margin: 3px;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0px;
  top: 30px;
  background: green;
  display: none;
}

div.newcolor {
  background: blue;
}

Then we can add a way to start and stop animation by writing:

$("#start").click(function() {
  const myDiv = $("div");
  myDiv.show("slow");
  myDiv.animate({
    left: "+=200"
  }, 5000);

  myDiv.queue(function() {
    const that = $(this);
    that.addClass("newcolor");
    that.dequeue();
  });

  myDiv.animate({
    left: "-=200"
  }, 1500);
  myDiv.queue(function() {
    const that = $(this);
    that.removeClass("newcolor");
    that.dequeue();
  });
  myDiv.slideUp();
});

$("#stop").click(function() {
  const myDiv = $("div");
  myDiv.clearQueue();
  myDiv.stop();
});

In the click callback for the button with ID start, we call queue with callbacks to add animation to the div.

Then in the click callback for the button with ID stop , we call clearQueue to clear the queue then stop the animation with the stop method.

.click()

The click method lets us add an event handler for the click event or trigger the event on an element.

For example, if we have the following HTML:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the click event triggered on the div with ID target by writing:

$("#target").click(function() {
  alert("Handler for .click() called.");
});

Now when we click it, we’ll see the alert popup.

Also, we can trigger the click event programmatically by writing:

$("#target").click(function() {
  alert("Handler for .click() called.");
});

$("#other").click(function() {
  $("#target").click();
});

When we click the div with ID other , we trigger the click event on the div with ID target .

Conclusion

We can get child elements, clear the queue, and trigger or listen to clicks with jQuery.