jQuery — Attributes, Before, Blur, and Callbacks

Photo by Osman Rana 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.

Attribute Starts With Selector [name^=”value”]

This selector let us select elements that have the specified attribute with a value starting exactly with a given string.

For example, if we have:

<input name="newsletter">
<input name="milkman">
<input name="newsboy">

Then we get all the inputs with the name attribute starting with news and setting the value for them by writing:

$("input[name^='news']").val("news here!");

Therefore, the first and last inputs will have the news here input added.

.before()

The .before() method lets us insert content before each element in the set of matched elements.

For example, if we have:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">foo</div>
  <div class="inner">bar</div>
</div>

Then we can add an elements before each div with class inner by writing:

$(".inner").before("<p>Test</p>");