jQuery — Height, Hide, ID, and More

Photo by jonathan romain 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.

.height()

The .height() method gets the current computed height for the first element in the set of matched elements.

It can also ser the height of every matched element.

For example, we can get the height of window by writing:

console.log($(window).height())

And if we have a div:

<div></div>

with the following CSS:

div {
  width: 50px;
  height: 70px;
  float: left;
  margin: 5px;
  background: red;
  cursor: pointer;
}

We can set its height when we click it by writing:

$("div").one("click", function() {
  $(this).height(30).css({
    cursor: "auto",
    backgroundColor: "green"
  });
});

The height is in pixels.

:hidden Selector

We can use the :hidden select to select all elements that are hidden.

For example, if we have:

<div></div>
<div style="display:none;">Hidden</div>
<div></div>
<div…