jQuery — Mouse Events and Multiple Selections

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.