jQuery — Images and Inserting Elements

Photo by Yogendra Singh 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.

:image Selector

We can select any element with type image with the :image selector.

For example, if we have:

<form>
  <input type="button" value="Input Button">
  <input type="checkbox">
  <input type="file">
  <input type="hidden">
  <input type="image">
</form>

Then we can write:

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

to add a yellow background and a red border to the image input.

.index()

The index method lets us get the index of an element.

For example, if we have:

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

Then we can use it by writing:

const listItems = $("li").slice(1);
console.log($("li").index(listItems));

Then the console log should log 1 since we got the first item on the list.

.innerHeight()