Category: 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.

.next()

The .next() method get the element sibling element that immediately follows a given element.

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 next to the li with class third-item by writing:

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

Then we call css to add a red background color to it.

Next Adjacent Selector (“prev + next”)

We can use the next adjacent selector to add the adjacent selector to get the sibling element next to the given element.

For example, if we have:

<form>
  <label for="name">Name:</label>
  <input name="name" id="name">
  <fieldset>
    <label for="newsletter">Newsletter:</label>
    <input name="newsletter" id="newsletter">
  </fieldset>
</form>
<input name="none">

Then we can get the input next to the label and add some styles and set their value by writing:

$("label + input").css("color", "blue").val("Labeled!");

Next Siblings Selector (“prev ~ siblings”)

The next sibling selector lets us select all sibling elements that follow the prev element.

The siblings must have the same parent.

For example, if we have:

<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div>
</div>
<span>span sibling (not div)</span>
<div>div sibling</div>

Then we can get all the divs that comes with the span with ID prev by writing:

$("#prev ~ div").css("border", "3px groove blue");

We call css to add a blue border to the matching elements.

.nextAll()

The .nextAll() method gets all the following 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 li s that comes after the li with the class third-item and add a red background to them by writing:

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

.nextUntil()

The .nextUntil() method gets all the following siblings of each element up to but not including the element matched by a selector, DOM node, or jQuery object passed in.

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 the dt element with ID term-2 up to the dt with ID term-3 by writing:

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

Then we add a red background to it.

.not()

We call not to remove elements from a set of matched elements.

For example, if we have:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Then we get all the li s in odd-numbered positions by writing:

$("li").not(":nth-child(2n)").css("background-color", "red");

Then we call css to add a red background to it.

Conclusion

We can get elements at various positions 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.

.mousemove()

The .mousemove() method lets us add an event listener for the mousemove event or trigger it.

For example, if we have:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the mouswdown event on the div with ID target by writing:

$("#target").mousemove(function() {
  console.log("Handler for .mouseleave() called.");
});

Also, we can trigger then mousedown event on the div with ID target when we click on the div with ID other by writing:

$("#target").mousemove(function() {
  console.log("Handler for .mouseleave() called.");
});

$("#other").click(function() {
  $("#target").mousemove();
});

.mouseout()

The .mouseout() method lets us add an event listener for the mouseout event or trigger it.

For example, if we have:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the mouswdown event on the div with ID target by writing:

$("#target").mouseout(function() {
  console.log("Handler for .mouseout() called.");
});

Also, we can trigger then mousedown event on the div with ID target when we click on the div with ID other by writing:

$("#target").mouseout(function() {
  console.log("Handler for .mouseleave() called.");
});

$("#other").click(function() {
  $("#target").mouseout();
});

.mouseover()

The .mouseover() method lets us add an event listener for the mouseover event or trigger it.

For example, if we have:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the mouswdown event on the div with ID target by writing:

$("#target").mouseover(function() {
  console.log("Handler for .mouseover() called.");
});

Also, we can trigger then mousedown event on the div with ID target when we click on the div with ID other by writing:

$("#target").mouseover(function() {
  console.log("Handler for .mouseover() called.");
});

$("#other").click(function() {
  $("#target").mouseover();
});

.mouseup()

The .mouseup() method lets us add an event listener for the mouseup event or trigger it.

For example, if we have:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the mouswdown event on the div with ID target by writing:

$("#target").mouseup(function() {
  console.log("Handler for .mouseup() called.");
});

Also, we can trigger then mouseup event on the div with ID target when we click on the div with ID other by writing:

$("#target").mouseup(function() {
  console.log("Handler for .mouseup() called.");
});

$("#other").click(function() {
  $("#target").mouseup();
});

Multiple Attribute Selector [name=”value”][name2=”value2″]

We can select items with multiple attributes with the multiple attribute selector.

For example, if we have:

<input id="man-news" name="man-news">
<input name="milkman">
<input id="letterman" name="new-letterman">
<input name="newmilk">

Then we can get the input with ID letterman and name value new-letterman by writing:

$("input[id][name$='man']").val("only this one");

After we got the element, we call val to set the input value.

Multiple Selector (“selector1, selector2, selectorN”)

The multiple selector selector lets us get elements that match any of the given selectors.

For example, if we have:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>

Then we can add a red border to the div , span , and the p element with class myClass by writing:

$("div, span, p.myClass").css("border", "3px solid red");

Conclusion

We can listen and trigger to mouse events and select elements 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.

.length

We can get the number of elements in the jQuery object with the .length property.

For example, if we have:

<div></div>

Then we add a div and get the total number of divs by writing:

$(document.body).append($("<div>"));
const n = $("div").length;
console.log(n);

The console log should log 2.

.load()

The .load() method lets us load data from the server and place the returned HTML into matched elements.

For example, if we have:

<div id='result'></div>

Then we can write:

$("#result").load("https://jsfiddle.net");

to load the content of https://jsfiddle.net into the div with ID result .

.map()

The .map() method lets us map the values of each item into a new value.

For example, if we have:

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

Then we get all the checkboxes’ IDs and then join them into a string by writing:

const str = $(":checkbox")
  .map(function() {
    return this.id;
  })
  .get()
  .join();
console.log(str);

Then str is ‘two,four,six,eight’ .

.mousedown()

The .mousedown() method lets us add an event listener to the mousedown event or trigger it.

For example, if we have:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the mouswdown event on the div with ID target by writing:

$("#target").mousedown(function() {
  console.log("Handler for .mousedown() called.");
});

Also, we can trigger then mousedown event on the div with ID target when we click on the div with ID other by writing:

$("#target").mousedown(function() {
  console.log("Handler for .mousedown() called.");
});

$("#other").click(function() {
  $("#target").mousedown();
});

.mouseenter()

The .mouseenter() method lets us add an event listener for the mousedown event or trigger it.

For example, if we have:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the mouswdown event on the div with ID target by writing:

$("#target").mouseenter(function() {
  console.log("Handler for .mouseenter() called.");
});

Also, we can trigger then mousedown event on the div with ID target when we click on the div with ID other by writing:

$("#target").mouseenter(function() {
  console.log("Handler for .mouseenter() called.");
});

$("#other").click(function() {
  $("#target").mouseenter();
});

.mouseleave()

The .mouseleave() method lets us add an event listener for the mouseleave event or trigger it.

For example, if we have:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

Then we can listen to the mouswdown event on the div with ID target by writing:

$("#target").mouseleave(function() {
  console.log("Handler for .mouseleave() called.");
});

Also, we can trigger then mousedown event on the div with ID target when we click on the div with ID other by writing:

$("#target").mouseleave(function() {
  console.log("Handler for .mouseleave() called.");
});

$("#other").click(function() {
  $("#target").mouseleave();
});

Conclusion

We can listen or trigger to mouse events 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.

jQuery.ready

The jQuery.ready is a thenable object that resolves when the document is ready.

For example, we can write:

(async () => {
  const data = await $.when(
    $.getJSON("https://jsonplaceholder.typicode.com/posts/1"),
    $.ready
  )
  console.log(data);
})()

We call getJSON to get JSON data.

Then we call $.ready to wait for the document to be ready.

Then we get the data after both operations are done.

jQuery.readyException()

The jQuery.readyException method handles errors that are thrown synchronously in functions wrapped in jQuery.

For example, we can write:

jQuery.readyException = function(error) {
  console.error(error);
};

to pass the error object into the console.error method and log it.

jQuery.removeData()

The jQuery.removeData() method lets us remove data from an element.

For example, if we have:

<div></div>

Then we can use removeData to remove data from the div:

const div = $("div")[0];
jQuery.data(div, "test1", "value");
console.log(jQuery.data(div, "test1"))
jQuery.removeData(div, "test1");
console.log(jQuery.data(div, "test1"))

We get the div and then call jQuery.data to get the data.

Then we call removeData to remove the data.

So the first console log logs ‘value’ and the 2nd one logs undefined .

jQuery.support

The jQuery.support property has an object that shows what browser features are supported.

jQuery.uniqueSort()

The jQuery.uniqueSort() method sorts an array of DOM elements in place with the duplicates removed.

For example, if we have:

<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>

Then we can use it as follows:

let divs = $("div").get();
divs = divs.concat($(".dup").get());
console.log(divs.length)
divs = jQuery.uniqueSort(divs);
console.log(divs.length)

We get the divs. Then we add the divs with class dup into the divs element list.

Then we call uniqueSort to sort them and remove the duplicates.

Therefore, the first console log logs 8 and the 2nd one logs 5.

jQuery.when()

We can use the jQuery.when() method to run callback functions based on 0 or more thenable objects.

For example, we can write:

(async () => {
  const data = await $.when($.ajax("https://jsonplaceholder.typicode.com/posts"))
  console.log(data);
})()

to make a GET request and then log the data.

.keydown()

The .keydown() method lets us listen to the keydown event on an element.

For example, if we have:

<form>
  <input id="target" type="text" value="Hello there">
</form>
<div id="other">
  Trigger the handler
</div>

Then we can use it to listen to the keydown events on the input element by writing:

$("#target").keydown(function() {
  console.log("Handler for .keydown() called.");
});

We can also use it to trigger a keydown event on another element.

For example, if we have the same HTML, then we can write:

$("#target").keydown(function() {
  console.log("Handler for .keydown() called.");
});

$("#other").click(function() {
  $("#target").keydown();
});

to trigger the keydown event on the input when we click on the div with ID other .

Conclusion

We can run thenable code and then wait for the result with jQuery.

Also, we can listen or trigger keydown events.

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.

jQuery.ready

The jQuery.ready is a thenable object that resolves when the document is ready.

For example, we can write:

(async () => {
  const data = await $.when(
    $.getJSON("https://jsonplaceholder.typicode.com/posts/1"),
    $.ready
  )
  console.log(data);
})()

We call getJSON to get JSON data.

Then we call $.ready to wait for the document to be ready.

Then we get the data after both operations are done.

jQuery.readyException()

The jQuery.readyException method handles errors that are thrown synchronously in functions wrapped in jQuery.

For example, we can write:

jQuery.readyException = function(error) {
  console.error(error);
};

to pass the error object into the console.error method and log it.

jQuery.removeData()

The jQuery.removeData() method lets us remove data from an element.

For example, if we have:

<div></div>

Then we can use removeData to remove data from the div:

const div = $("div")[0];
jQuery.data(div, "test1", "value");
console.log(jQuery.data(div, "test1"))
jQuery.removeData(div, "test1");
console.log(jQuery.data(div, "test1"))

We get the div and then call jQuery.data to get the data.

Then we call removeData to remove the data.

So the first console log logs ‘value’ and the 2nd one logs undefined .

jQuery.support

The jQuery.support property has an object that shows what browser features are supported.

jQuery.uniqueSort()

The jQuery.uniqueSort() method sorts an array of DOM elements in place with the duplicates removed.

For example, if we have:

<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>

Then we can use it as follows:

let divs = $("div").get();
divs = divs.concat($(".dup").get());
console.log(divs.length)
divs = jQuery.uniqueSort(divs);
console.log(divs.length)

We get the divs. Then we add the divs with class dup into the divs element list.

Then we call uniqueSort to sort them and remove the duplicates.

Therefore, the first console log logs 8 and the 2nd one logs 5.

jQuery.when()

We can use the jQuery.when() method to run callback functions based on 0 or more thenable objects.

For example, we can write:

(async () => {
  const data = await $.when($.ajax("https://jsonplaceholder.typicode.com/posts"))
  console.log(data);
})()

to make a GET request and then log the data.

.keydown()

The .keydown() method lets us listen to the keydown event on an element.

For example, if we have:

<form>
  <input id="target" type="text" value="Hello there">
</form>
<div id="other">
  Trigger the handler
</div>

Then we can use it to listen to the keydown events on the input element by writing:

$("#target").keydown(function() {
  console.log("Handler for .keydown() called.");
});

We can also use it to trigger a keydown event on another element.

For example, if we have the same HTML, then we can write:

$("#target").keydown(function() {
  console.log("Handler for .keydown() called.");
});

$("#other").click(function() {
  $("#target").keydown();
});

to trigger the keydown event on the input when we click on the div with ID other .

Conclusion

We can run thenable code and then wait for the result with jQuery.

Also, we can listen or trigger keydown events.