jQuery — Focus and Has Selectors

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.

.focusin()

The .focusin() method binds an event handler to the focusin event.

For example, if we have:

<p><input type="text"> <span>focusin fire</span></p>
<p><input type="text"> <span>focusin fire</span></p>

Then we can write:

$("p").focusin(function() {
  $(this).find("span").css("display", "inline").fadeOut(1000);
});

We get the span and fade it out when we focus on the input inside the p element.

.focusout()

The focusout method lets us bind an event handler to the focusout JavaScript event.

For example, if we have:

<p><input type="text"> <span>focusout fire</span></p>
<p><input type="text"> <span>focusin fire</span></p>

We can write:

let focus = 0;
$("p")
  .focusout(function() {
    focus++;
    console.log(focus);
  })

to count the number of times the focusout event is triggered.

It’ll be triggered when we move focus on out of the p element.

.get()

The get method retrieves the DOM element matched by the jQuery object.

For example, if we have:

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

We get the first li element by writing:

console.log($("li").get(0));

.has()

The has method lets us reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

We can write:

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

to get all the li ‘s that have ul ‘s inside and add a red background to it.

Has Attribute Selector [name]

We can use the has attribute selector to get all the elements with the given attribute set.

For example, if we have:

<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>

Then we can get all the elements with the id attribute set by writing:

$("div[id]").one("click", function() {
  const idString = $(this).attr("id");
  $(this).text(idString);
});

In the callback, we set the text of the currently clicked on element’s text content to the value of the id attribute.

:has() Selector

The :has selector lets us get all the elements that has at least one element that matches the specified selector.

For example, if we have the following HTML:

<div>
  <p>paragraph</p>
</div>
<div>Hello again! (with no paragraph)</div>

and the following CSS:

.test {
  border: 3px inset red;
}

Then we can add a border to the div with a p element in it by writing:

$("div:has(p)").addClass("test");

.hasClass()

The .hasClass() method determines whether any matched elements are assigned the given class.

For example, if we have:

<div id="mydiv" class="foo bar"></div>

Then we can check if the div with ID mydiv has the foo class added to it by writing:

$("#mydiv").hasClass("foo")

:header Selector

The :header selector selects all elements that are headers (e.g. h1, h2, etc.)

For example, if we have:

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

Then we can write:

$(":header").css({
  background: "gray",
  color: "blue"
});

to add a gray background and make the text blue to the h1 and h2 elements.

Conclusion

We can select all header elements and get elements with various selectors with jQuery.