jQuery — Mouse Events and Element Count

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.