Author: John Au-Yeung

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.

.queue()

The .queue() method shows the queue of functions to be executed on the matched elements.

For example, if we have:

<p>The queue length is: <span></span></p>
<div></div>

Then we can show the number of queued items by writing:

const div = $("div");

function runIt() {
  div
    .show("slow")
    .animate({
      left: "+=200"
    }, 2000)
    .slideToggle(1000)
    .slideToggle("fast")
    .animate({
      left: "-=200"
    }, 1500)
    .hide("slow")
    .show(1200)
    .slideUp("normal", runIt);
}

function showIt() {
  const n = div.queue("fx");
  $("span").text(n.length);
  setTimeout(showIt, 100);
}

runIt();
showIt();

The queue method with 'fx' gets the number of queued items for animations.

:radio Selector

The :radio selector lets us get radio button eleements.

For example, if we have:

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

Then we can add a background and border to a radio button by writing:

$("form input:radio")
  .wrap("<span></span>")
  .parent()
  .css({
    background: "yellow",
    border: "3px red solid"
  });

.ready()

The ready method specifies a function to run when the DOM is fully loaded.

We can write:

$(document).ready(function() {
  // Handler for .ready() called.
});

or:

$(function() {
  // Handler for .ready() called.
});

We run code in the callback when document is loaded.

.remove()

The .remove() method lets us remove a set of matched elements in the DOM.

For example, if we have:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Then we remove the div with the class hello by writing:

$(".hello").remove();

.removeAttr()

The .removeAttr() method removes an attribute from each element in the set of matched elements.

For example, if we have:

<input type="text" title="hello there">
<button>Change title</button>

Then we can toggle the title attribute on and off when we click the button by writing:

const inputTitle = $("input").attr("title");
$("button").click(function() {
  const input = $(this).next();
  if (input.attr("title") === inputTitle) {
    input.removeAttr("title")
  } else {
    input.attr("title", inputTitle);
  }
});

.removeClass()

We can call the .removeClass() method to remove one or more classes on an element.

For example, if we have:

<p class="blue under">Hello</p>

Then we can remove the blue and under classes by writing:

$("p").removeClass("blue under")

.removeData()

The .removeData() method to remove a previously-stored piece of data.

For example, if we have:

<div>hello</div>

Then we can add data to the div and remove it by writing:

$("div").data("test1", "value");
console.log($("div").data("test1"));
$("div").removeData("test1");
console.log($("div").data("test1"));

We call removeData to remove a piece of data by its key.

.removeProp()

We can use the removeProp propety for the set of matched elements.

For example, if we have:

<p></p>

Then we can add a property and remove it by writing:

const para = $("p");
para
  .prop("code", 1234)
  .append(String(para.prop("code")))
  .removeProp("code")
  .append(String(para.prop("code")));

The first argument is the property name.

And the 2nd argument is the value of it.

removeProp takes the name of the property we want to remove.

Conclusion

We can get queued items and remove classes and properties with jQuery.

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.

.prev()

We call the .prev() method to get the immediately preceding sibling of each element in the set of matched elements.

If a selector is provided, it gets the precious siblings only if it matches that selector.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we get the li that’s immediately before the li with the class third-item by writing:

$("li.third-item").prev().css("background-color", "red");

Then we add a red background to it.

.prevAll()

The .prevAll() method gets all preceding siblings of each element in the set of matched elements.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we get all the preceding siblings of the li that has the class third-item and add a background to them by writing:

$("li.third-item").prevAll().css("background-color", "red");

.prevUntil()

The .prevUntil() gets all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

For example, if we have:

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

Then we get all the dd before the dt with ID term-2 and up to but not including the first dt by writing:

$("#term-2").prevUntil("dt")
  .css("background-color", "red");

and we set their background to red.

.promise()

The .promise() method returns a promise to observe when all actions of a certain type bound to the collection have finished.

For instance, if we have:

<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>

Then we can show some text when we click on a button by writing:

$("button").on("click", function() {
  $("p").append("Started...");

  $("div").each(function(i) {
    $(this).fadeIn().fadeOut(1000 * (i + 1));
  });

  $("div").promise().done(function() {
    $("p").append(" Finished! ");
  });
});

We loop through each div and apply some fade effects with fadeIn and fadeOut .

Then we call promise and run code when all the method calls are done with the promise().done() method.

.prop()

We can use the prop method to get the attribute value.

For example, if we have:

<input id="check1" type="checkbox" checked="checked">

Then we can write:

$("input").change(function() {
  const $input = $(this);
  console.log($input.prop("checked"));
}).change();

to watch for the changes to the checkbox input.

We get the checked attribute’s value with the prop method.

.pushStack()

We call the pushStack method to add a collection of DOM elements onto the jQuery stack.

For example, if we have:

<div>
  foo
</div>

Then we call pushStack to add the div to the stack and remove it by writing:

jQuery([])
  .pushStack(document.getElementsByTagName("div"))
  .remove()
  .end();

Conclusion

We can get previous elements and get property values with jQuery.

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.

.parents()

The .parents() method lets us get the ancestors of each element in the current set of matched elements.

We can optionally filter that with a selector.

For example, if we have:

<ul class="level-1">  
  <li class="item-i">I</li>  
  <li class="item-ii">II  
    <ul class="level-2">  
      <li class="item-a">A</li>  
      <li class="item-b">B  
        <ul class="level-3">  
          <li class="item-1">1</li>  
          <li class="item-2">2</li>  
          <li class="item-3">3</li>  
        </ul>  
      </li>  
      <li class="item-c">C</li>  
    </ul>  
  </li>  
  <li class="item-iii">III</li>  
</ul>

Then we get all the ancestors of the li with the item-a class by writing:

$("li.item-a").parents().css("background-color", "red");

Then we add a red background to it.

.parentsUntil()

The .parentsUntil() method gets the ancestors of each element in the current set of matched elements up to but nor including the element matched bu the selector, DOM node, or jQuery object.

For example, if we have:

<ul class="level-1 yes">  
  <li class="item-i">I</li>  
  <li class="item-ii">II  
    <ul class="level-2 yes">  
      <li class="item-a">A</li>  
      <li class="item-b">B  
        <ul class="level-3">  
          <li class="item-1">1</li>  
          <li class="item-2">2</li>  
          <li class="item-3">3</li>  
        </ul>  
      </li>  
      <li class="item-c">C</li>  
    </ul>  
  </li>  
  <li class="item-iii">III</li>  
</ul>

Then we can get the parents of the li with the item-a class up to but not including the li with class level-1 and add a background to them by writing:

$("li.item-a")  
  .parentsUntil(".level-1")  
  .css("background-color", "red");

:password Selector

The :password selector lets us select all elements with type password.

For example, if we have:

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

Then we write:

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

to add a yellow background and a red border to the input with type password.

.position()

The .position() method gets the current coordinates of the first element in the set of matched elements relative to the offset parent.

For example, if we have:

<p>Hello</p>

Then we can get the position of the p element by writing:

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

And we get:

{top: 0, left: 8}

as the value of the position .

.prepend()

The .prepend() method inserts the content to the beginning of each element in the set of matched elements.

For example, if we have:

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

Then we add an element before the text node of each div with the class inner by writing:

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

.prependTo()

The .prependTo() method lets us prepend an element in a set of matched elements.

For example, if we have:

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

Then we can prepend a p element to each div with the class inner as their child by writing:

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

Conclusion

We can get parent elements and do many thing with them with jQuery.

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.

:only-of-type Selector

We can use the :only-of-type selector to select all elements that have no siblings with the same element name.

For example, if we have:

<div>
  <button>Sibling</button>
  <button>Sibling</button>
</div>

<div>
  <button>Sibling</button>
</div>

<div>
  None
</div>

<div>
  <button>Sibling</button>
  <button>Sibling</button>
  <button>Sibling</button>
</div>

<div>
  <button>Sibling</button>
</div>

Then we can get buttons that are the only child in the div by writing:

$("button:only-of-type").text("Alone").css("border", "2px blue solid");

Then we change their text and add a border to them.

.outerHeight()

The .outerHeight() method lets us get the computed outer height, which includes the padding, border, and optionally margin, for the first element in the set of matched elements.

It can also be used to set the outer height of every matched element.

For example, if we have:

<p>Hello</p>

Then we get the outer height with the margin by writing:

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

true means we include the margin.

If we have:

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

Then we can set the outer height of the div when we click it by writing:

const modHeight = 60;
$("div").one("click", function() {
  $(this).outerHeight(modHeight);
});

.outerWidth()

The .outerWidth() method gets the current computed outer width, including the padding, border, and optionally the margin, for the first element of the set of matched elements.

It can also be used to set the outer width of all matched elements.

It can also be used to set the outer height of every matched element.

For example, if we have:

<p>Hello</p>

Then we get the outer height with the margin by writing:

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

true means we include the margin.

If we have the following HTML:

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

and CSS:

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

Then we can set the outer height of the div when we click it by writing:

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

We call addClass to add the mod class with a blue background.

.parent()

The .parent() method lets us get the parent element of the given element.

For example, if we have:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Then the li with the item-a class’s parent and add a background to it by writing:

$("li.item-a").parent().css("background-color", "red");

:parent Selector

The :parent selector lets us get the parent of a given element.

For example, if we have:

<table border="1">
  <tr>
    <td>Value 1</td>
    <td></td>
  </tr>
  <tr>
    <td>Value 2</td>
    <td></td>
  </tr>
</table>

Then we can fade the tr by writing:

$("td:parent").fadeTo(1500, 0.3);

Conclusion

We can select parent elements and elements with a given type with jQuery.

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.

.offset()

The .offset() method gets the current coordinates of the first element in the set of matched elements relative to the document.

For example, if we have:

<p>Hello</p>
<p>2nd Paragraph</p>

Then we can get the last p element’s offset by writing:

const p = $("p").last();
const offset = p.offset();
console.log(offset);

Then we get:

{
  "top": 50,
  "left": 8
}

as the value of offset .

.offsetParent()

The .offsetParent() method gets the closes ancestor element that’s positioned.

For example, if we have:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Then we get the li with class item-a ‘s parent with the offsetParent method and add a background to it by writing:

$("li.item-a").offsetParent().css("background-color", "red");

.on()

The .on() method attaches an event handler function for one or more events to the selected elements.

For example, if we have:

<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>

Then we can trigger a custom event when we click on the button by writing:

$("p").on("myCustomEvent", function(event, myName) {
  $(this).text(`${myName}, hi there`);
  $("span")
    .stop()
    .css("opacity", 1)
    .text(`myName = ${myName}`)
    .fadeIn(30)
    .fadeOut(1000);
});

$("button").click(function() {
  $("p").trigger("myCustomEvent", ["John"]);
});

We call trigger with the event name as the first argument and the data we want to send with the event in an array.

To listen to the myCustomEvent event, we call on with the same event name as the first argument.

The 2nd argument is a callback that runs when the event is triggered.

myName is 'John' so we see that added to the p element.

.one()

The .one() method attaches a handler to an event for the elements.

The handler is run at most once per element per event type.

For example, if we have:

<p id='foo'>foo</p>

Then we write:

$("#foo").one("click mouseover", function(event) {
  alert("The " + event.type + " event happened!");
});

to add a listener for the click and mouseover events on the p element wiuth ID foowith the one method.

:only-child Selector

The :only-child selector selects all elements that are the only child of their parent.

For example, if we have:

<div>
  <button>Sibling</button>
  <button>Sibling</button>
</div>

<div>
  <button>Sibling</button>
</div>

<div>
  None
</div>

<div>
  <button>Sibling</button>
  <button>Sibling</button>
  <button>Sibling</button>
</div>

<div>
  <button>Sibling</button>
</div>

Then we add a border and change the text of the buttons that are the only in the div by writing:

$("div button:only-child").text("Alone").css("border", "2px blue solid");

So the 2nd and last div will have the text changed and the border added.

Conclusion

We can add event listeners and get the only child element in an element with jQuery.