jQuery — Attributes, Before, Blur, and Callbacks

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>");

Then we get:

Test

foo

Test

bar

displayed.

.bind()

The .bind() method lets us add a handler to an event for the elements.

For example, if we have the following HTML:

<div id="foo">
  foo
</div>

We can add a click listener to it by writing:

$("#foo").bind("click", function() {
  alert("User clicked on 'foo.'");
});

The first argument is the event name.

The 2nd argument is the callback that’s run when the event is triggered.

.blur()

The .blur() method binds an event handler to the blur JavaScript event.

For example, if we have the following HTML:

<form>
  <input id="target" type="text" value="Field 1">
  <input type="text" value="Field 2">
</form>

Then we can listen to the blur event on the input field with ID target by writing:

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

We get the element and then pass in the callback to show an alert when we move away from the first input.

:button Selector

The :button select selects all button elements and elements with type set to button .

For example, if we have the following HTML:

<form>
  <fieldset>
    <input type="button" value="Input Button">
    <input type="checkbox">

    <input type="file">
    <input type="submit">
    <input type="text">
    <select>
      <option>Option</option>
    </select>

    <textarea></textarea>
    <button>Button</button>
  </fieldset>
</form>

And the following CSS:

.marked {
  background-color: yellow;
  border: 3px red solid;
}

Then we can get the buttons and add the marked class to them by writing:

const input = $(":button").addClass("marked");
console.log(input.length)

The input with type set to button and the button element will be selected.

callbacks.add()

The callbacks.add method lets us add callbacks to a callback list.

For example, we can write:

const foo = function(value) {
  console.log(`foo: ${value}`);
};

const bar = function(value) {
  console.log(`bar: ${value}`);
};

const callbacks = $.Callbacks();
callbacks.add(foo);
callbacks.fire("hello");
callbacks.add(bar);
callbacks.fire("world");

We call the $.Callbacks method to get a list of callbacks.

Then we call the add method to add the foo and bar methods to add to the callback list.

The callbacks.fire method will call each callback on the list with the given argument.

Therefore, we get:

foo: hello
foo: world
bar: world

from the console log.

Conclusion

We can select items by attribute name and value.

Also, we can listen to various events with jQuery methods.

We can also add callbacks to a list and call them all later.