jQuery events with examples

We have learn about the syntax of jQuery. The syntax have two major part in it, one the selector and other the events. We already gone through the lists of selectors, now time to take few step toward the jQuery events.

 jQuery Selectors

• $(‘*’): This selector selects all the elements in the document.
• $(“p > *”): This selector selects all elements that are children of a paragraph element.
• $(“#specialID”): This selector function gets the element with id=”specialID”.
• $(“.specialClass”): This selector gets all the elements that have the class ofspecialClass.
• $(“li:not(.myclass)”): Selects all elements matched by <li> that do not have.
• $(“a#specialID.specialClass”): This selector matches links with an id of specialID and a class of specialClass.
• $(“p a.specialClass”): This selector matches links with a class of specialClass declared within <p> elements.
• $(“ul li:first”): This selector gets only the first <li> element of the <ul>.
• $(“#container p”): Selects all elements matched by <p> that are descendants of an element that has an id of container.
• $(“li > ul”): Selects all elements matched by <ul> that are children of an element matched by <li>
• $(“strong + em”): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
• $(“p ~ ul”): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
• $(“code, em, strong”): Selects all elements matched by <code> or <em> or <strong>.
• $(“p strong, .myclass”): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class ofmyclass.
• $(“:empty”): Selects all elements that have no children.
• $(“p:empty”): Selects all elements matched by <p> that have no children.
• $(“div[p]”): Selects all elements matched by <div> that contain an element matched by <p>.
• $(“p[.myclass]”): Selects all elements matched by <p> that contain an element with a class of myclass.
• $(“a[@rel]”): Selects all elements matched by <a> that have a rel attribute.
• $(“input[@name=myname]”): Selects all elements matched by <input> that have a name value exactly equal to myname.
• $(“input[@name^=myname]”): Selects all elements matched by <input> that have a name value beginning with myname.
• $(“a[@rel$=self]”): Selects all elements matched by <p> that have a class value ending with bar
• $(“a[@href*=domain.com]”): Selects all elements matched by <a> that have an href value containing domain.com.
• $(“li:even”): Selects all elements matched by <li> that have an even index value.
• $(“tr:odd”): Selects all elements matched by <tr> that have an odd index value.
• $(“li:first”): Selects the first <li> element.
• $(“li:last”): Selects the last <li> element.
• $(“li:visible”): Selects all elements matched by <li> that are visible.
• $(“li:hidden”): Selects all elements matched by <li> that are hidden.
• $(“:radio”): Selects all radio buttons in the form.
• $(“:checked”): Selects all checked boxex in the form.
• $(“:input”): Selects only form elements (input, select, textarea, button).
• $(“:text”): Selects only text elements (input[type=text]).
• $(“li:eq(2)”): Selects the third <li> element
• $(“li:eq(4)”): Selects the fifth <li> element
• $(“li:lt(2)”): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
• $(“p:lt(3)”): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
• $(“li:gt(1)”): Selects all elements matched by <li> after the second one.
• $(“p:gt(2)”): Selects all elements matched by <p> after the third one.
• $(“div/p”): Selects all elements matched by <p> that are children of an element matched by <div>.
• $(“div//code”): Selects all elements matched by <code>that are descendants of an element matched by <div>.
• $(“//p//a”): Selects all elements matched by <a> that are descendants of an element matched by <p>
• $(“li:first-child”): Selects all elements matched by <li> that are the first child of their parent.
• $(“li:last-child”): Selects all elements matched by <li> that are the last child of their parent.
• $(“:parent”): Selects all elements that are the parent of another element, including text.
• $(“li:contains(second)”): Selects all elements matched by <li> that contain the text second.

For more detailed documentation on jQuery Selectors visit the Jquery official documentation page about selectors.

What are Events?

The action of the user to which the browser response from the web page is the event.  The event is either mouse click, key press, radio button or checkbox selection etc.

Like JavaScript, jQuery act on the DOM events. Below is list of few events -

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery Events Examples

Example 1: click event

$("p").click(function(){
$(this).hide();
}); (code-box)

This will select the p element and on click by user hide it.

Example 2: mouse hover event

$("#mousehover").hover(function(){
alert("You mouser the element!");
});(code-box)

This function will alert the message, when mouser is hover over the element with id mousehover.

Example 3: blur event

$("input").blur(function(){
  $(this).css("background-color","yellow");
});(code-box)

This function will on blur over any input element, changes the background color of that element to yellow.
Example4: focus event

$("input").focus(function(){
  $(this).css("background-color","red");
});(code-box)

This function will on focus over any input element, changes the background color of that element to red. When focus is out it will back to it original color (backed by blur).

Example 5: change event

$("input").change(function(){
 alert("Text successfully changed.");
 $(this).css("background-color","#ccc");
 });(code-box)

This function will alert the message and changes background color  to mentioned color code of  input element. This happens when text is tried to changed in the input element.

Example 6: keypress event

$("input").keypress(function(){
 $("span").text(i+=1);
 });(code-box)

This function will add up the text count by one, each time a key get pressed by user.

Example 7: select event

$("input").select(function(){
 alert("Text selected!");
 });(code-box)

This function will alert the message when the text inside input element is selected.

Example 8: submit event

$("form").submit(function(){
 alert("Submitted");
 });(code-box)

This event alert if form with name attribute of  'form' get submitted by user on submit button click.

Example 9: scroll event

$("div").scroll(function(){
 $("span").text(x+=1);
 });(code-box)

This event will count and increase the number by one in text as user scroll either up or down.

Example 10: ready event

This is most important event. The ready event occurs when the DOM (document object model) has been loaded, and the page has been fully loaded (including images). Since this event loads as DOM load so it is a good practice to place all the other jQuery events and functions inside it.

$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
$("input").keypress(function(){
$("span").text(i+=1);
});
});(code-box)

As seen this event perform other two task as mentioned above.