The jQuery function $() is used to find elements on the page to work with.

Common Selectors

Selector	Usage	Description
element	$(“p”).hide();	The jQuery element selector selects elements based on the element name.
#id	$(“#test”).hide();	The #id selector – Jquery id selector uses the id attribute of an HTML tag to find the specific element.
.class	$(“.test”).hide();	The .class selector -JQuery class selector finds elements with a specific class.
:first	$(“p:first”).hide();	The first p element.
:last	$(“p:last”).hide();	The last p element.
:even	$(“tr:even”)	All even tr elements
:odd	$(“tr:odd”)	All odd tr elements.
:first-child	$(“p:first-child”)	All p elements that are the first child of their parents.
:last-child	$(“p:last-child”)	All p elements that are the last child of their parents.
:nth-child(n)	$(“p:nth-child(2)”)	All p elements that are the nth child of their parents.
:input	$(“:input”)	All input elements.
:text	$(“:text”)	All input elements with type=”text”.
:radio	$(“:radio”)	All input elements with type=”radio”.
:checkbox	$(“:checkbox”)	All input elements with type=”checkbox”.
:submit	$(“:submit”)	All input elements with type=”submit”.
:button	$(“:button”)	All input elements with type=”button”.

Events

Event	Usage	Description
$(document).ready()	$(document).ready(function(){ … });	Allows us to execute a function when the document is fully loaded. This is to prevent any jQuery code from running before the document is finished loading (is ready).
click()	$(“p”).click(function(){ $(this).hide(); });	The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element.
dblclick()	$(“p”).dblclick(function(){ $(this).hide(); });	The dblclick() method attaches an event handler function to an HTML element. The function is executed when the user double-clicks on the HTML element.
mouseenter()	$(“#p1”).mouseenter(function(){ alert(“You entered p1!”); });	The mouseenter() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer enters the HTML element.
mouseleave()	$(“#p1”).mouseleave(function(){ alert(“Bye! You now leave p1!”); });	The mouseleave() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer leaves the HTML element.

Effects

Method	Usage	Description
hide() show()	$(“#id”).click(function(){ $(“p”).hide(); }); $(selector).hide(speed,callback);	hide and show HTML elements The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: “slow”, “fast”, or milliseconds. The optional callback parameter is a function to be executed after the hide() or show() method completes.
toggle()	$(“p”).toggle();	toggle between hide and show, shown elements are hidden and hidden are shown.
fadeIn(), fadeOut(), fadeToggle(), fadeTo()	$(selector).fadeIn(speed,callback); $(“#div1”).fadeIn(); $(“#div2”).fadeIn(“slow”);	methods to fade in a hidden element, fade out a visible element, toggle between fadein and fadeout, or fadeto a given opacitiy.
callback	$(“button”).click(function(){ $(“p”).hide(“slow”,function(){ alert(“The paragraph is now hidden”); }); });	A callback function is executed after the current effect is 100% finished.

Manipulating Elements and Content

Method	Usage	Description
html()	$(“p”).html(“Hello <b>world</b>!”);	Can both read the current HTML inside an element and replace the current contents with some other HTML.
text()	$(“p”).text(“Hello world!”);	like .html but does not accept html tags. Useful for replacing text within a tag.

Modify HTML and CSS

Method	Usage	Description
addClass()	$(“p”).addClass(“intro”);	Adds classname to the selected elements
removeClass()	$(“p”).removeClass(“intro”);	Remove the class name from selected elements.
toggleClass()	$(“p”).toggleClass(“intro”);	Add the class if it doesn’t exist, remove the class if it does.
css()	var bgcolor=$(“#main”).css(“background-color”) $(“#body”).css(“font-size”, “200%”)	Sets or returns one or more style properties for the selected elements..
val()	Var amount=$(“#quantity”).val();	Set and get the value of INPUT field

Modify HTML

Method	Usage	Description
attr()	$(“#banner” img).attr(“src”, “images/newImage.png”);	Adds an attribute
removeAttr()	$(“body”).removeAttr(“bgcolor”);	Removes an attribute.

Traversing the DOM

Method	Usage	Description
next()	$(this).next(‘.someclass’).fadeIn();	Finds the next sibling of the current selection. Has an optional selector parameter to limit it to the next sibling of a particular type.

Miscellaneous

Method	Usage	Description
each()	$(“button”).click(function(){ $(“li”).each(function(){ alert($(this).text()) }); });	The each() method specifies a function to run for each matched element.