A long long time ago, I learnt jQuery and made these notes. They used to be helpful in the earliest days when I was still getting used to programming the web.
Introduction
The following two do the same thing:
$(document).ready(function() {});$(function() {});
Essentials
$("#third").toggleClass("striped");$("p").size() // returns the number of <p> elements in the document$("p.second").addClass("striped");$("p:first").css("font-style", "italic"); // first is a positional selector$("p.last").hide(); // or $("p.last").show();$("p")[0].innerHTML="<i> Hello world! </i>";$("body div p").toggleClass("striped"); //Specifying elements in a heirarchy$("#first").slideUp("slow"); //Sliding elements up (and down)$("<p>New para</p>").insertAfter("#first"); //Create new HTML; insertBefore()
Selectors
x y means x is an ancestor of yx > y means x is a direct parent of y:eq(index) means get the (index+1)th element. 0-indexed.:gt(index) and :lt(index):even and :odd[attribute][attribute=value] // Also, != ^= $= *=:first-child, :last-child and :nth-child(index/even/odd/equation):radio // select all radio buttons:checkbox:enabled and :disabled:checked and :selected$("p:first-child") //select all <p> that are first child of their parent$("p:last-child") // select all <p> that are last child of their parent$("p:nth-child(3)") // select all <p> that are 3rd child of their parent$("p.contains('Haha')") // select all <p> that contain 'Haha' in the text$("p[language]") // selects all <p> elements which have language attribute//This means <p language="English">Haha</p> would get selectedif($("#p1").is("p")) {} //checks if the selected element is of the correct type$("p:eq(2)") // select the third <p> element$('input:checked').length //returns the number of checked elements.$("select option:selected")//For a list box// <form><select size="4" multiple="true"><option>1</option>..</select></form>
Retreival and manipulation
//html() and text() functions are compliant with all browsers//innerHTML(), outerHTML(), innerText(), outerText() - not so much//jq width() and height() functions always work - even if you didn't set them$("img").each(function(m) {this.alt="Image "+(m+1);}); //each//Get an attribute$("img:first").attr("alt") //returns the alt attr for the first img element//Here $("img")[0].attr("alt") won't work since [0] returns a browser element$("img").slice(0,1).attr("alt") //slice(m,n) returns the m..n-1 elements//Set an attribute$("img:first").attr("alt", "Set this alt to this");//Replace all divs by spans$("div").html("<span> Here is a span </span>");//Replace the text and not HTML of an element//In the following, you actually see <span>.. in the browser window$("div").text("<span> Here is a span </span>");$("p").append("<b>$1,000,000,000</b>");$("p:last").append($("p:first"));$("img").width(500) //in pixels. Also, height.$("p").wrap("<h1></h1>"); //wrap all <p> in <h1>$("#target").before("<p>This appears before target</p>");// Just like append; also, before()//For getting and setting value attribute of elements$("target").val("Hello there")var val_target = $("#target").val();
Event Handling
//Start with binding an event handler to an element$("img").bind(event, [data], handler) //data is optional//event can be "blur", "focus", "load", "resize", "scroll", "unload", "before-unload", "click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave", "select", "change", "submit", "keydown", "keyup", "keypress" and "error"//Bind mutiple event handlers to one event$(#target).bind('click', function(event) {alert("Hello!");}).bind('click', function(event) {alert("Is there anybody out there?");});//The above is equivalent to:$("#target").click(function(event) {alert("Hello!");}).click(function(event) {alert("Is there anybody out there?");}); //Just use the event name and don't pass any event//To run the bound function only once (say, initialization): ues one()$("#target").one('click', function(event) {alert("Hello!");});//Unbinding event handlers:$("#target").unbind('click', clicker);//Using the event object: some event properties: event.x, x= { altKey, controlKey, data, keyCode, pageX, pageY, relatedTarget, result, screenX, screenY, shiftKey, target, timeStamp, type}//Also, look at Event Object Methods//event.type gives the event's type//Capturing keystrokes in the event handler:function typer(event) {$('#p1').text('Character: '+String.fromCharCode(event.keyCode));}//Capturing hover events. Need to pass two handler functions in this one$('#target').hover(over,out);function over(event) {...}function out(event) {...}//event.target.id gives the id of the element that initiated the event
Visual Effects and Animation
{show,hide,toggle}(duration, callback) Both parameters are optional$('#target').show();$('#target').hide();$('#target').show(1000,callback_function) //No () after callback function name$('h2').toggle(); //toggles the visibility.slide{Up,Down,Toggle}(duration,callback) like show() - makes it visible$('#first').slideUp('slow');{fadeIn,fadeOut}(duration,callback) //All parameters are optionalfadeTo(duration, opacity, callback) //All parameters are optional//Creating custom animationanimate(params, duration, easing, callback). For example:$('#target').animate( {width: "80%",opacity: 0.333}, 2000);
jQuery Utility Functions
//These are the functions named jQuery.XXX(). Can be referred as $.XXX()//Convert lists, maps, named node maps etc. into standard js arrayvar array = $.makeArray(document.getElementByTagName("p"));array.reverse();$(array).appendTo(document.body);//Searching an array$.inArray(searchTerm, array) //returns 0-based index of first match or -1//Filtering an arrayarray = $.grep(array, function(n,i) {return (i>4);});array = $.grep(array, function(n) {return n!=7;});array.join(", ") //returns a comma separated string of array elements//Eliminating duplicate elements from an arrayvar array = $("p").get(); //gets all the <p> elementsarray = array.concat($(".duplicateMe").get());array = $.unique(array); //New array has only unique elements//NOTE: This works only with page elements and not general array elements//Checking whether Data is an Array, a function or something else$.isArray()$.isFunction()//Mapping an array with $.map(). Double each element of the array:array = $.map(array, function(n,val) {return val+val;});//Iterating with $.each()var obj= {one:1, two:2, three:3};$.each(obj, function(i,val) {//here, refer to the item with i and its value by val$('#'+i).append(document.createTextNode ("Property "+i+" has value "+val));});//Trimming text. Like strip() of pythontext = $.trim(text);//Checking browser support for various features$.support.XXX //To check if the browser supports a particular feature. Example:if ($.support.boxModel) {$("p").html("Something");}//Some variables$.browser //is an object with the following structure//(bool)safari, (bool)opera, (bool)msie, (bool)mozilla, (string)version
AJAX
//Using AJAX the old way (DIY way):var XMLHttpRequestObject = false;if (window.XMLHttpRequest) {XMLHttpRequestObject = new XMLHttpRequest();}else if(window.ActiveXObject) {XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}function getData(dataSource, divID) {//dataSource is a message.txt on serverif (XMLHttpRequestObject) {var obj = document.getElementById(divID);XMLHttpRequestObject.open("GET", dataSource);XMLHttpRequestObject.onreadystatechange = function() {if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status==200) {obj.innerHTML = XMLHttpRequestObject.responseText;}}XMLHttpRequestObject.send(null);}}//In the form input tag: onclick="getData('message.txt', 'targetDiv')"//Using jQuery load() to implement Ajax://Format: load(url ,parameters, callback)$("div").load("message.txt"); //that's it :D//Passing data to the server//If you include parameters, jQ makes a POST request to the server, else GET$("div").load("poster.php", {data:1});//Passing Form Data to the server//The serializeArray() function creates an object whose properties correspond to the names of the controls in a form. Thus, easy to send in a whole form.$("div").load("poster.php", $("#targetForm").serializeArray());//Using $.post() to send data to the server and $.get() to get it.//Both $.get() and $.post() have same arguments as load()//load() shoves the data into an element set which might not be always desired.$.post("poster.php", {data:1}, function(data_received) {$("div").text(data_received);});$.get("message.txt", function(data_received) {$("div").text(data_received);});//Using GET to send the data to the server. When you do that, the data is appended to the URL like http://x.com/pagename?data=1. POST uses HTTP headers giving security.$.get("getter.php", {data:1}, function(data_received) {$("div").text(data_received);});//$.ajax() (since load(), $.get() and $.post() are just quick shortcuts.)//$.ajax() offers 20 such options. Full list: Table 8.1. Some examples:$.ajax({type: 'GET',url: 'message.txt',success: callback})function callback(data, status) {$("div").text(data);}$.ajax({type: 'POST',url: 'poster.php',data: {data:1},success: callback});//Handling AJAX errors:$.ajax({type: "GET",url: "getter.php",data: {data:1},success: callback,timeout: 10, //10 millisecondserror: err});function err(xhr, reason, ex) { //ex is the exception object$("div").text(reason);}//Handling XML (and put the XML response in a <select> control)$.ajax({type: "GET",url: "sandwiches.xml",dataType: "xml",success: callback});function callback(data, status) {var sandwiches = data.getElementByTagName("sandwich"); // <sandwich> tagslistSandwiches(sandwiches);}function listSandwiches(sandwiches) {var loopIndex;var selectControl = document.getElementById("sandwichList");for (loopIndex=0; loopIndex<sandwiches.length; loopIndex++) {selectControl.options[loopIndex] = new Option(sandwiches[loopIndex].firstChild.data);}}//Handling Ajax events globallyAjaxStart(), AjaxSend(), AjaxSuccess(), AjaxError(), AjaxComplete(), AjaxStop()//Example:$("#starting").bind("ajaxStart", function() {$(this).show();});
jQuery Widgets
//A widget is a control (controls are textboxes, listboxes, buttons etc.)//Need to include the following for these examples to work:ui.all.css, jquery-[ver].js, ui.core.js, ui.datepicker.js//Accordion$(document).ready(function() {$("#accordion").accordion();})//In HTML:<div id="accordion"><h3><a href="#">Section 1</a></h3><div>This is the first section.</div>...</div>//DataPicker$("#datepicker").datepicker({onSelect: function(dateText, inst) {$("#result").text("You selected" + dateText);}}); //inst is an object corresponsing to the datepicker widget//In HTML:<div type="text" id="datepicker"></div>//Dialog//include draggable.js, resizable.js, dialog.js$("#dialog").dialog({buttons: {"Ok": function() {$(this).dialog("close");}},beforeclose: function(event, ui) {$("#results").text("You entered "+$("#text").val())}});//In HTML:<div id="dialog" title="Dialog Title"><input type="text" id="text"></input></div><div id="results"></div>//ProgressBarfunction increase() {$("#progressbar").progressbar({value:30});}//In HTML:<div id="progressbar"></div>//Slider$("#slider").slider({min:0,max:100,slide: function(event, ui) {$("#results").text("Slider is at value "+$("#slider").slider('value'))}});//Tabs$("#tabs").tabs();//In HTML:<div id="tabs"><ul><li><a href="#fragment-1"><span>Item One</span></a></li></ul><div id="fragment-1"><p>This is Item one.</p></div></div>//Some tips:// cache divs when you first do some action on themvar someDiv = $('#someDiv').hide();//use Find:// Fine in modern browsers, though Sizzle does begin "running"$('#someDiv p.someClass').hide();// Better for all browsers, and Sizzle never inits.$('#someDiv').find('p.someClass').hide();// Context instead:$('#someContainer').find('.someElements').hide();//Don't abuse $(this)$('#someAnchor').click(function() {alert( this.id ); // better than alert( $(this).attr('id') );});// Always access href, src and style attributes via jq
Originally published on GitHub