jQuery Tutorial
jQuery is a small 24k (minified) JavaScript library, provides an extremely easy and powerful selectors to select almost anything you want in HTML page. In addition, it also comes with many innovative ways for DOM traversing, event handling (form, browser, mouse ,keyboard), animations effects and Ajax to simplifies the web development. It will definitely change the way you code JavaScript.
Happy learning jQuery. 🙂
jQuery Quick Start
jQuery simple usage examples.
-
jQuery Hello World Example
A simple jQuery hello world example to show how to download and include the jQuery library into a HTML page. -
Call function in JavaScript and jQuery
Demonstrate the different way of calling a function in JavaScript and jQuery to create dynamic content after page loaded. -
Load jQuery from Google code
Example to show how to load the jQuery library from Google and why you should do so.
jQuery Practical Examples
Some jQuery practical usage and examples.
-
Table Zebra Stripes effect with jQuery
Create a table zebra stripes effect with jQuery (Just one line). -
Page loading effects with jQuery
Create a fade in page loading effect with jQuery. -
Page refresh with jQuery
Refresh a page with jQuery location.reload(); -
Stop a page from exit or unload with jQuery
Stop a page from exit or unload with jQuery “beforeunload” event. -
Check if an image is loaded with jQuery
Combine the use of jQuery “load()” and “error()” event to check if an image is loaded or not. -
Check if an element is exists with jQuery
Example to show how to check if an element exists with jQuery. -
Add / remove CSS class dynamically
Example to show how to add / remove CSS class dynamically with jQuery. -
Check if an element has a certain CSS class
Example to show how to check if an element has a certain CSS class with jQuery. -
Load JavaScript library at runtime with jQuery
Example to show load extrenal JavsScript library ay runtion with jQuery. -
Tooltips example with jQuery
Example to show how to create a tooltips effect with jQuery. -
Check if jQuery library is loaded
How to check if jQuery library is loaded. -
Get Delicious bookmark count with jQuery Ajax function
How to get Delicious bookmark count with jQuery Ajax remote call. -
Highlight table row record on hover
How to highlight table row record on hover with jQuery.
jQuery Selectors
Select anything you want in jQuery.
-
Select CSS class name and id with jQuery
Select the CSS class name and id with jQuery, $(.classname) and $(#id). -
Universal * selector
Select all elements, everything. -
Select mutiple elements
Select the mutiple elements with jQuery. -
Get tag name with jQuery
Get the tag name with jQuery tagName. -
Get tag value with jQuery
Get the tag value with jQuery .html(). -
Not selector
select all elements that do not match the selector. -
Empty selector
select all elements that have no children or text inside. -
Contains selector
Select all elements that are contains specified text.
jQuery Attribute Selectors
Everything about attribute selectors in jQuery.
-
Attribute selectors [ ]
8 attribute selectors examples to show the use of the attribute selectors with jQuery.
jQuery DOM Traversing
Everything about element traversing in jQuery.
-
Child and Sibling Selectors
Understanding the four type of jQuery child and sibling selectors : Descendant selector (A B), Child selector (A > B), Adjacent sibling selector (A + B) and General sibling selector (A ~ B). -
nth-child selector
Select all elements that are ntg-child of of their parent. -
First child & Last child selectors
Select the first child or last child element with jQuery, shorthand for ntg-child. -
Only child selector
Select all elements that are the only child of their parent. -
Child selector (X > Y)
select all elements matched by “Y” that are child of a “X” element. -
Descendant selector (X Y)
Select all elements matched by “Y” that are child, grandchild, great-grandchild, great-great-grandchild..(any levels deep) of a “X” element. -
General sibling selector (X ~ Y)
Select all elements matched by “Y” that is a sibling of a “X” element. -
Adjacent sibling selector (X + Y)
Select the immediately follow or next elements matched by “Y” that is a sibling of a “X” element. -
find() selector
Select certain elements from a set of the matched elements (Descendants only). -
filter() selector
Select certain elements from a set of the matched elements (All levels). -
Different between filter() and find()
Example to show the diffreent between filter() and find() in jQuery. -
next() selector
Select the immediate following sibling element in the set of matched elements -
prev() selector
Select the immediate preceding sibling element in the set of matched elements -
children() selector
Select the child of the matched elements, it’s only travels a single level down. -
Difference between find() and children()
Example to show the difference between find() and children() in jQuery.
jQuery DOM Manipulation
Everything about dom manipulation in jQuery.
-
before() and insertBefore() example
Add a text or html content before the matched elements with jQuery. -
after() and insertAfter() example
Add a text or html content after the matched elements with jQuery. -
prepend() and prependTo() example
Add a text or html content before the content of the matched elements with jQuery. -
append() and appendTo() example
Add a text or html content after the content of the matched elements with jQuery. -
clone() example
Create a copy of the matched elements with jQuery -
empty() and remove() example
Remove the matched elements with jQuery. -
html() example
Get or set the html contents of the matched elements with jQuery. -
text() example
Get or set the text of the matched elements with jQuery. -
toggleClass example
Example to show how to use the jQuery’s toggleClass – if matched elements do not have the class name, then add it; if matched elements already have the class name, then remove it. -
wrap() example
Wrap HTML element around each of the matched elements.
jQuery HTML Form
Everything about HTML form elements in jQuery.
-
Form selectors examples
jQuery selectors for form elements : TextBox, Password, Textarea, Radio Buttons, Check Box, Upload File, Hidden value, Select(dropdown box), Submit button and Reset button. -
Form events examples
jQuery form events : focus(), blur(), change(), select() and submit(). -
Get textbox value
use val() to get the textbox value with jQuery. -
Add / remove textbox
Add or remove textbox with jQuery. -
Select a radio button
Select a radio button with jQuery. -
Set a dropdown box value
Set a dropdown box value in jQuery. -
Disable submit button after clicked
Disable submit button after clicked with jQuery.
jQuery Effects
Everything about build-in effects in jQuery.
-
fadeIn(), fadeOut() and fadeTo() example
Demostrate about the jQuery fadeIn(), fadeOut() and fadeTo() effects. -
slideUp(), slideDown() and slideToggle() example
Demostrate about the jQuery slideUp(), slideDown() and slideToggle() effects. -
show() and hide() example
Demostrate about the jQuery show() and hide() effects.
jQuery Event Handling
Everything about event handling in jQuery.
-
bind() and unbind() example
How to attach or deattached event handler for the matched elements. -
Trigger other elements event handler
How to trigger other elements event handler with jQuery.
jQuery Browser Events
Everything about browser events in jQuery.
-
Mashable floating effect example with jQuery
Example to show how to use the browser’s scroll() event to implement the awesome Mashable’s scrolling effect. -
resize() example
Detect the size of the browser is changed.
jQuery Mouse Events
Everything about mouse events in jQuery.
-
click() and dblclick() example
Detect the mouse single click and double clicks with jQuery. -
mousemove() example
Detect the mouse move with jQuery. -
Different between mouseover() and mouseenter()
Example to show the different between mouseover() and mouseenter() in jQuery. -
Different between mouseout() and mouseleave()
Example to show the different between mouseout() and mouseleave() in jQuery. -
Different between mouseup() and mousedown()
Example to show the different between mouseup() and mousedown() in jQuery.
jQuery Keyboard Events
Everything about keyboard events in jQuery.
-
Keyboard events example
Keyboard events – keyup(), keydown() and keypress() example. -
Check if an enter key is pressed
Example to show how to check if an “enter key” is pressed with jQuery keyboard event. -
Detect copy, paste and cut behavior
How to detect copy, paste and cut behavior with jQuery.
jQuery Common Problem
Some common jQuery problem and solution.
-
jQuery $() function is not working?
Show how to avoid the jQuery conflict issue with jQuery.noConflict() or jQuery(). -
Access to restricted URI denied
Solution to solve the “Access to restricted URI denied” error.
thnks for this tutorial
nice job!!
Hi,
Thanks for ur tutorial
i want to know how can we create auto download as like facebook.
whenever we reach the end of the page it auto download how is’t its jquery?
i want to know java script , jquery , Ajax in simple & easy method
hi very nice collection of jquery tutorial
you can visit here pavan blog
Nice blog, Pavan !!
Hi, i want to learn javascript,jquery and ajax from basics to advance .please tell me link or resources from where i can learn but not w3school as i have gone through.
Hi, i am using document.formname.submit(); in javascript which showing that submit is not a function. As i have used action,alert and many more please tell me another alternative so that i can submit the form
Try this way in javascript function…
function demo(){
var formName = document.ClientMaster;
formName.method = “post”;
formName.action = ‘addShippingAddress’;
formName.submit();
}
mm k bye
www
I am a mental.
hi dear..!
i want to use JQuery with JSF 2.0, is there any tutorial of you ? or can you guide me how can i use it ?
please do reply Thanks 🙂
I’m a regular visitor of your site to learn anything new.
Can you please post something about Ajax and Ajax integration with Struts, Springs in your blog with some examples?
Thanks in advance.
Hi mkyong,
I am a fresher and I am working on J2EE.
but from 2 week i have been in trouble resolving an issue and i think u are the right person to ask this question.
so,the problem: i am validating a form using ajax and trying to submit it on success.
code logic: if(validateName(name)){ return true;}
here:validateName is an ajax-call which checks that the name is not already there in database.
and problem here is: validateName() always returns “false”
i personally think: there is a delay in ajax so i get the default flag which is false.
please help
Please raise your issue in StackOverFlow and if you think it is because of delay in AJAX call please use deferred function of Jquery.
Thanx for Great Tutorail for begginer and experts both
Hi Mkyong,
Add / remove text Area dynamically using JQuery If user click on button.
Could you please reply it’s urgent
Thanks,
Please refer the following link..
http://www.mkyong.com/tutorials/jquery-tutorials/comment-page-2/#comment-129813
Add / remove text Area dynamically using JQuery If user click on button.
Hi Mkyong,
I am happy to see this tutorial and it helps me to learn a lot.
Thanks.
Great work man! nice …bookmarked!!!
Thanks for writing this tutorial. Really this is very helpful…….
please update continue…………………..
Thanks for this useful tutorials 🙂
Hi,
Thanks For ur valuable tutorials ,,All are up to date and really it helps me to know new technologies,And really thanks
HI MKYong,
Great stuff !! stunning tutorials for all core frameworks beginners level best.
The image sliders are widely used in most of the websites,kindly provide an example for that. It will be more helpful.
Image slide similar to
http://slidesjs.com/examples/images-with-captions/
Regards,
Vinu
Hi,
Thanks a lot for yours tutorials. they are very useful. it’s a great pleasure to visiting your web site. thanks again ! 🙂
Fine Content helped me too much rslink.in
thanks for this tutorials! can you please make a tutorial on how to integrate struts 2 with jquery (exemple:how to call struts 2 action via ajax requets)? all the jquery tutorials i’ve found use php to illustrate this. thank you!
hi there i need little help from you can you make some code for me?
This is very helpfull for me. Thanks to mkyong.
using Spring MVC 3, Jquery. Having a issue. Have a Java bean(course) that contains a list of another java object(module). Html/jsp file having a dynamic treeview. Click on form submit, want to send the bean to controller . My issue is how to set the list of objects in jquery to send as a parameter to controller.
treeview is like below
ex:
var name = $(‘#coursename’).val();
var desc = $(‘#folderdescrip’).val();
alert(“name :”+name+” :::: desc :”+desc);
$.ajax(
{
type: ‘POST’,
url: ‘createcourse.htm’,
data: “name =”+ name+”&description =”+desc,
//how to send the list of objects here
success: function(data)
{
alert(“success”)
},
error: function() {
alert(‘error saving course’);
}
});
Can you help some on on this issue
You are a champ!!!
Hi,
i want to upload multiple files using javastruts2.
I tried your Struts 2 file upload example it’s working fine but can you also share the code to upload multiple files using jquery or any other plugin/uploader
Excellent work. very simple to carry on
thanks for your jQuery tutorial!