jQuery

Some jQuery Events, Effects, etc.

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(){
&nbsp&nbsp…
});
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(){
&nbsp &nbsp $(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(){
&nbsp&nbsp$(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.
mouseover() $(“p”).mouseover(function(){
$(“p”).css(“background-color”, “yellow”);
});
The mouseover event occurs when the mouse pointer is over the selected element.
mouseout() $(“p”).mouseout(function(){
$(“p”).css(“background-color”, “gray”);
});
The mouseout event occurs when the mouse pointer leaves the selected element.
mouseenter() $(“#p1”).mouseenter(function(){
alert(“You entered p1!”);
});
The mouseenter event occurs when the mouse pointer is over (enters) the selected element. Note: Unlike the mouseover event, the mouseenter event only triggers when the mouse pointer enters the selected element. The mouseover event is triggered if a mouse pointer enters any child elements as well.
mouseleave() $(“#p1”).mouseleave(function(){
alert(“Bye! You now leave p1!”);
});
The mouseleave event occurs when the mouse pointer leaves the selected element.Note: Unlike the mouseout event, the mouseleave event only triggers when the mouse pointer leaves the selected elements. The mouseout event is triggered if a mouse pointer leaves any child elements as well as the selected element.

Effects

Method Usage Description
hide()
show()
$(“#id”).click(function(){
&nbsp&nbsp$(“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();
$(selector).fadeIn(speed,callback);
toggle between hide and show, shown elements are hidden and hidden are shown.
fadeIn(), fadeOut(), fadeToggle(), fadeTo() $(“#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(){
&nbsp&nbsp$(“p”).hide(“slow”,function(){
&nbsp&nbsp&nbsp&nbsp alert(“The paragraph is now hidden”);
&nbsp&nbsp});
});
A callback function is executed after the current effect is 100% finished.

Manipulating Elements and Content

Method Usage Description
html() $(“p”).html(“Hello &ltb&gtworld&lt/b&gt!”); 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 the 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.
Show Button if element is not empty if(!$(‘input’).val()){
$(‘#button’).hide();
}
else {
$(‘#button’).show();
}
It shows and hides an element if the input is empty or not.

Some of the above taken from w3schools. For more go to: http://www.w3schools.com/Jquery/