jQuery — Images and Inserting Elements

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()

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

It can also set the inner height of every matched element.

For example, if we have:

<p>Hello</p>

Then we can get the inner height of the p element by writing:

console.log($("p").first().innerHeight());

If we have:

<div>d</div>  
<div>d</div>  
<div>d</div>  
<div>d</div>  
<div>d</div>

Then we can set the inner height by writing:

const modHeight = 70;  
$("div").one("click", function() {  
  $(this).innerHeight(modHeight).addClass("mod");  
});

.innerWidth()

The innerWidth method lets us set the inner width of an element for the first element in a set of matched elements.

It can also be used to set the inner width of every matched element.

For example, if we have:

<p>Hello</p>

Then we can get the inner width of the p element by writing:

const p = $("p").first();  
console.log(p.innerWidth())

If we have:

<div>d</div>  
<div>d</div>  
<div>d</div>  
<div>d</div>  
<div>d</div>

And the following CSS:

.mod {  
  background: blue;  
  cursor: default;  
}

Then we can write:

const modWidth = 70;  
$("div").one("click", function() {  
  $(this).innerHeight(modWidth).addClass("mod");  
});

to set the inner width of the div when we click it.

:input Selector

The :input selector lets us select all input, textarea, select, and button elements.

For example, if we have:

<form>  
  <input type="button" value="Input Button">  
  <input type="checkbox">  
  <input type="file">  
  <input type="hidden">  
  <input type="image">  
  <input type="password">  
  <input type="radio">  
  <input type="reset">  
  <input type="submit">  
  <input type="text">  
  <select>  
    <option>Option</option>  
  </select>  
  <textarea></textarea>  
  <button>Button</button>  
</form>

Then we can write:

const allInputs = $(":input");  
console.log(allInputs)

to get all the elements in the form.

.insertAfter()

The .insertAfter() method inserts every element in the set of the matched elements after the target.

For example, if we have:

<div class="container">  
  <h2>Greetings</h2>  
  <div class="inner">Hello</div>  
  <div class="inner">Goodbye</div>  
</div>

Then we can add an element after each div with the class inner by writing:

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

.insertBefore()

We can call the insertBefore method to insert every element in the set of matched elements before the target.

For example, if we have:

<div class="container">  
  <h2>Greetings</h2>  
  <div class="inner">Hello</div>  
  <div class="inner">Goodbye</div>  
</div>

We can insert an element before each div with the class inner by writing:

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

Conclusion

We can insert elements and get images elements with jQuery.