jQuery — Find Elements and Finish Animations

Image for post
Image for post
Photo by JOSHUA COLEMAN on Unsplash

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.

:file Selector

We can get the input with type file with the :file selector.

For example, if we have:

<form>
<input type="button" value="Input Button">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select>
<option>Option</option>
</select>
<textarea></textarea>
<button>Button</button>
</form>

We can write:

$("input:file").css({
background: "yellow",
border: "3px red solid"
});

.filter()

The filter method lets us get the elements that match the select or pass a function test from a set of matched elements.

For example, if we have:

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

We can get the li s that are in an even number position and add a red background to them by writing:

$("li").filter(":nth-child(2n)").css("background-color", "red");

So the 2nd, 4th, and 6th li elements have a red background.

.find()

The .find() method gets the descendants of each element in the current set of matched elements filtered by a selector, jQuery object, or element.

For example, if we have:

<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>

Then we can get the li ‘s from the li with the class item-ii and add a red background to them by writing:

$("li.item-ii").find("li").css("background-color", "red");

.finish()

The .finish() method stops the currently-running animation, remove all queued animations, and complete all animations for the matched elements.

For example, if we have the following HTML:

<div class="box"></div>
<div id="path">
<button id="go">Go</button>
<br>
<button id="bf" class="b" onclick="finish()">finish</button>
</div>

And CSS:

.box {
position: absolute;
top: 10px;
left: 10px;
width: 15px;
height: 15px;
background: black;
}

Then we can create an animation for the div withn class box when we click on the Go button by writing:

const horiz = $("#path").width() - 20,
vert = $("#path").height() - 20;
$("#go").on("click", function() {
$(".box")
.clearQueue()
.stop()
.css({
left: 10,
top: 10
})
.animate({
top: vert
}, 3000)
.animate({
left: horiz
}, 3000)
.animate({
top: 10
}, 3000);
});
const finish = () => {
$("div.box").finish();
}

The finish function is called when we click on the finish button to skip the animation to the end.

.first()

The .first() method gets the first element from a set of matched elements.

For example, if we have:

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

Then we get the first li and add a red background to it by wiring:

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

Conclusion

We can get various elements and finish animation with jQuery.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store