Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Useful jQuery Function Demos For Your Projects

Every aspiring Web developer should know about the power of JavaScript and how it can be used to enhance the ways in which people see and interact with Web pages. Fortunately, to help us be more productive, we can use the power of JavaScript libraries, and in this article we will take a good look at jQuery in action.

50 jQuery Function Demos for Aspiring Web Developers

What Is jQuery? Link

In a nutshell, jQuery is a leading JavaScript library that can perform wonders on your Web pages and make your Web development life much easier and more enjoyable. With the rise in popularity of jQuery since its arrival in 2006, over an estimated 24 million websites (50% of them being the 10,000 most visited websites) currently reap the benefits, and as Google Trends suggests, it’s the most popular JavaScript library.

Thousands of Web developers worldwide use jQuery to innovate on their websites and stay up to date on trends. This surge has been influenced by several jQuery gurus who have helped make jQuery what is today. I would like to personally thank these guys and gals for their hard work and would like to do my part to spread the news about JavaScript and jQuery. In this article, we’ll show you over 50 of jQuery’s most renowned functions, demonstrated with live visual examples. The jQuery library is comprehensive, so hopefully seeing these most frequently used functions in action will improve your understanding of how they can work together to produce excellent results.

jQuery And CSS Link

Styles play a big part in the look and feel of any website, and jQuery can help us change them dynamically. In this section, we will look at how jQuery can be used to dynamically add and remove style classes and entire cascading style sheets.

.css() Link

You can change your website’s styles dynamically with jQuery’s .css()7 function. Either change styles that are already declared inline or in CSS files (such as font-size, color, background-color, etc.) or create new styles for elements.

Demo: Change text color and background color

Blue text with orange background

Demo: Add a style sheet

.addClass() and .toggleClass() Link

In addition to the .css() function, you can apply currently defined CSS classes by using the .addClass()8 function. Its counterpart function, .removeClass(), reverses the action.

Demo: Add a CSS class to an element

Click “Run demo” to add the styles to the button. Click “Reset” to remove the styles.

The .toggleClass()10 function is a huge time-saver for toggling a state on and off with CSS. The following example sets event handlers for mouseenter (which applies the CSS class img-hover to the image) and mouseleave (which removes it).

Demo: Toggle a CSS class on an element

jQuery Animations And Effects Link

We can use jQuery to create some very smooth animations and effects with minimal effort. Animations and effects are always best demonstrated with examples, so let’s dive right in.

.animate() Link

The .animate()11 function can be used to animate the movement and/or appearance of elements on a Web page. Let’s look at both. You may define the settings parameter with a set duration (in milliseconds) or any of the words slow, normal or fast. The callback, which is the function that runs after the animation has finished, is optional.

Demo: Animate text

Demo: Animate size

Easily change the size of a div.

jquery books

Demo: Animate movement

The .animate() function is asynchronous, so multiple animations may run at the same time. You can also use the .stop() function to stop the animation. If you click “Run demo” and then “Reset” during the animation, it will demonstrate the .stop() function.

jquery car 1

jquery car 2

jquery car 3

jquery car 4

jquery car 5

Many pure JavaScript functions are used frequently in animations, such as setInterval(), clearInterval(), setTimeout() and clearTimeout(). Once again, these functions are included in the list because understanding what they can do is important to supporting the jQuery’s animation functions.

setInterval() and clearInterval() Link

You can automate a task based on time using the JavaScript setInterval() function, which can be used to specify a regular time-based trigger.

Demo: Simple time counter

Click “Run demo” to start the timer, and click “Reset” to stop it.

0 seconds elapsed

Demo: Digital time display

setTimeout() and clearTimeout() Link

You can also delay a task based on time using the JavaScript setTimeout() function, which can be set to wait for a specified length of time before running the code.

Demo: Do something after a specified length of time.

Click “Run demo” to set the timeout and, click “Reset” to clear it.

This text will disappear after three seconds.

.slideToggle() and .fadeToggle() Link

jQuery provides various toggle functions that save us heaps of time when we want to bind related events to the same element. For example, .slideToggle()12 binds both .slideUp()13 and .slideDown()14 to the element and also manages that state for us.

Demo: Slide an element in and out of view.

Click “Run demo” to show the paragraph, and click again to hide.

The .fadeToggle() function is similar to .slideToggle() but with a fading effect that uses the .fadeIn() and .fadeOut() methods.

Demo: Fade an element in and out of view.

Click “Run demo” to show the paragraph, and click again to hide it.

.delay() Link

In this demonstration, we’ll mainly use jQuery’s awesome function-chaining ability by running the .fadeOut(), .fadeIn() and .delay() functions together on the same element. This is very similar to the setTimeout() function we saw earlier but without allowing us to easily interrupt the delay.

Demo: Use .delay() to create a delay between function calls.

alert msg

jQuery And DOM Manipulation Link

The DOM (document object model) is all of the HTML content that you see on a website (text, images, container elements, etc.). We can use jQuery to perform wonders with the DOM when all page elements have been loaded. The event that captures when the DOM is ready is called .ready()15, and there are a few ways16 to call it. In this section are demos of jQuery functions that change the DOM in some way.

.clone() Link

The jQuery .clone()17 function is pretty simple to use; it basically just copies the element that you specify into a new element.

Demo: Clone an element.

.html(), .text() and .empty() Link

Using .html()18 is the most common way to get or set the content of an element using jQuery. If you just want the text and not the HTML tags, you can use .text()19, which will return a string containing the combined text of all matched elements. These functions are browser-dependent (i.e. .html() uses the browser’s innerHTML property), so the results returned (including white space and line breaks) will always depend on the browser you are using.

In this example, we are also making use of the .empty()20 function, which is a quick way to get rid of the content within, and .prev(), which can be used to reference the preceding element, in this case the demo buttons.

Demo: Get the content of an element.

.append(), prepend(), .after() and .before() Link

These function provide the means of inserting content in particular places relative to elements already on the Web page. Although the differences may appear trivial, each has its own purpose, and knowing exactly where they will all place content will save you coding time.

Demo: Insert content onto a Web page.

txt = ‘This is the content we wish to insert.

innerDiv.append(txt)21 | innerDiv.prepend(txt)22 | innerDiv.after(txt)23 | innerDiv.before(txt)24



jQuery And AJAX Link

The jQuery library has a full suite of AJAX capabilities that enables us to load data from a server without refreshing the browser page. In this section, we will have a quick look at refreshing page content, loading scripts and retrieving data from different Web pages and servers.

$.ajax() Link

The $.ajax()25 function is arguably the most used jQuery function. It gives us a means of dynamically loading content, scripts and data and using them on a live Web page. Other common uses are submitting a form using AJAX and sending data to server-side scripts for storing in a database.

The $.ajax() function has a lot of settings, and the kind team at jQuery has provided many shorthand AJAX methods that already contain the settings we require. Some developers like to write out the full AJAX settings, mainly because they require more options than many shorthand methods provide (such as beforeSubmit()). Also, note that you can use the Firebug NET.panel to analyze HTTP requests26 for testing, monitoring and debugging AJAX calls.

Demo: Use $.ajax() to load content without reloading the entire page.

For this demo, HTML content is held in separate files, which are inserted below using AJAX. Showing a loading icon while an AJAX request is processing is courteous. The third content block below has a two-second delay to simulate the loading icon.

Content will appear here.

We can also use functions such as $.parseJSON()27 and JSON.parse()28 from ECMAScript5, which simplifies JSON parsing. If you’re interested in JSON parsing and tree recursion, see the “Online JSON Tree Viewer Tool.”

.load() Link

The .load()29 function is an AJAX shorthand method for inserting HTML straight into a matched element on the Web page.

Demo: Use .load() to grab HTML content from another Web page.


AJAX requests are subject to the same origin policy30, which means you may only send requests to the same domain. Fortunately, $.ajax() has a property named JSONP31 (i.e. JSON with padding), which allows a page to request data from a server on a different domain. It works by wrapping the target data in a JavaScript callback function. Note that the response is not parsed as JSON and may be any JavaScript expression.

Demo: Use AJAX and JSONP to load data from an external source.

This demo will load the latest pictures tagged “jQuery” from Flickr’s public feed.

The AJAX shorthand functions $.getJSON32 and $.getScript33 and more AJAX examples can be found on my blog.

jQuery And Events Link

Managing events using regular JavaScript is entirely possible, however, jQuery provides a much more user-friendly interface to manage Web page events. Examples of such events are clicking a hyperlink, moving the mouse over an image and even pressing a key on the keyboard; the list goes on. Here are some examples of key jQuery functions that may be used to manage events.

.bind() and .unbind() Link

The .bind()34 function is very useful for adding event triggers and handlers to your DOM elements. In case you didn’t know, you can bind your DOM elements to a whole list of events35, such as submit, change, mouseenter and mouseleave.

You may have also seen .click()36 used in jQuery code. There is no functional difference between .click() and .bind('click'), but with the latter we have the benefits of being able to specify custom events and add data parameters. There is also an .unbind()37 function to remove any events that have already been bound. As of jQuery 1.7 the .bind() function is an alias to .on() function. When you type in console: “jQuery.fn.bind.toString()” it will return: “function (a, b, c) { return this.on(a, null, b, c); }“.

Demo: Trigger an event when the user clicks on or hovers over a div.

Demo: Trigger an event when the user hovers over or double-clicks a div.

Press “Run demo” a few times in a row for some nice effects. Also, double-clicking the boxes will make them disappear!

Demo: Trigger an event when the user presses a key.

Press any key shown in the boxes below.

Note: The key difference between keydown and keypress events is that the latter captures each individual character entered, as opposed to just firing once per key press. To illustrate, this simple tool shows the keycodes for any key38 that you press.

.live(), .on() and .off() Link

The .live()39 function is essentially the same as .bind(), but it can capture events on new elements that didn’t exist on the page when it was loaded; for example, if your Web page has loaded and then you dynamically insert an image onto it. If we used .bind() to attach an event when the mouse hovers over the image, it would not work. But if we used .live(), it would work! As of jQuery 1.7, you are advised to make use of the new .on() and .off() functions, instead of the .live() function, which has a few disadvantages to .on()40. See “jQuery 1.7+ .on() vs. .live() Review41” for a more detailed explanation of the differences.

Demo: Capture events on new or changed elements.

Click “Run demo” to dynamically insert more images and check that the event still fires on them.

.delegate() Link

The .delegate()42 function provides a means of attaching event handlers to new elements (similar to the .live() function covered above). You might find .delegate() to be faster than .live() because the latter searches the entire document namespace for the elements as opposed to a single document. The much more important difference is that .live() is prone to break if used with traversing.

Demo: Delegate events to the child elements of a root element.

The demo area is the root element (orange border) with colored span child elements that have a hover event attached. Click “Run demo” a few times and hover with the mouse to trigger the effects.

.preventDefault() Link

The .preventDefault()43 function can be applied to stop any element with a default action from firing: hyperlinks, keyboard shortcuts, form submit buttons, etc. These are probably the most common uses, and the function stops the hyperlink from going to its destination (the href). It’s very useful for stopping those default actions and running your custom JavaScript actions instead.

Demo: Prevent a hyperlink from going to its href.

.stopPropagation() Link

There are methods that do things similar to .preventDefault() but that behave differently. The .stopPropagation()44 function prevents the event from occurring on any ancestor elements. This can be used if you have an exception to the rule that you’ve specified for a container element with child elements. This function currently does not work with .live() events because it handles events once they have propagated to the top of the document.

Demo: Prevent a parent container from firing its event when its child is clicked.

Click both the link and div box area to see which event is fired.

This div does not use the .stopPropagation() function.

This div does use the .stopPropagation() function.

As you can see, when you click the top link it also fires off the div event, but the bottom link uses .stopPropagation(), which prevents the div event from firing. The div event will still fire if you click inside the div, as expected.

.stopImmediatePropagation() Link

This function is nice for stopping all future bound events. The events will fire in the order they were bound, and when it hits the .stopImmediatePropagation()47 function, all further bound events are not fired.

Demo: Prevent all future bound events from firing.

Click both the link and div box area to see which event is fired.

This div does not use the .stopImmediatePropagation() function.

This div does use the .stopImmediatePropagation() function.

As you can see, when you click the links in the top div, all of the events fire off. But when you click the links in the bottom div, only the code for all of the links fires off because it calls .stopImmediatePropagation() on the event. This function also prevents the event from firing on any ancestor elements, just like the .stopPropagation() function, as seen in the example where the div click event doesn’t fire on the bottom links.

Finding, Looping And Filtering Results Link

jQuery gives us fast access to finding anything on the page and the ability to loop through or filter results as we please. It also has powerful functions to manipulate and extend data and functionality associated with JavaScript objects. There are so many things to cover in this section, so we have narrowed them down to a few key functions.

$.each() and .each() Link

There are two different methods for iterating with jQuery: .each()54 is used to iterate only over jQuery objects collections, while $.each()55 is a general function for iterating over JavaScript objects and arrays. I am a big fan of functions such as these and JavaScript shorthand techniques56 that provide us with a fast alternative to basic JavaScript coding.

Demo: Use $.each() to loop through values in an array.

Output the countries of the world (stored in an array).

Demo: Use .each() to loop through DOM elements.

This demo loops through all of the h2 tags on this Web page and creates a table of contents.

    You can use $.each() and .each() on a lot of different things, such as DOM elements, arrays, objects and JSON. For those of you who are keen, you could try five more jQuery .each() examples57.

    $.data(), .data(), $.hasData() and $.removeData() Link

    Updates to the jQuery library (mainly since 1.4) has brought the ability to attach data of any type to DOM elements. This is a very useful alternative to storing data in JavaScript objects and other such methods. There are two versions: $.data()58, which takes in the element as a parameter, and .data()59, which can attach directly to matched elements.

    Note that $.data() returns a data object to the caller, whereas .data() does not. There are also many utility functions, such as $.hasData()60, $.removeData()61, that help with data management.

    Demo: Attach data to DOM elements.

    The following example sets and gets a data object into the div for this demo area.


    .match(), .test() and :contains() Link

    Together with the jQuery :contains()66 selector, you can use the pure JavaScript functions .match() and .test() to save time when filtering for string values. Let’s look at some examples.

    Demo: Extract email addresses from inside HTML (i.e. a string).

    We can use .test() to check whether any emails are present, and use .match() to extract them.

    Curabitur placerat commodo augue eget congue. Aliquam id ante leo. Duis at libero magna, at dignissim odio. Aliquam aliquet suscipit mollis. Pellentesque libero tortor, elementum id mattis vel, mattis eget metus. Nam convallis interdum imperdiet. Fusce at magna tellus. Sed mi ante, aliquam at accumsan ac, tristique sit amet dui. Aliquam eleifend molestie ligula. Vivamus eleifend, diam id tincidunt posuere, ipsum dui elementum sapien, posuere pulvinar risus neque id turpis. Nullam volutpat cursus libero, sit amet euismod justo eleifend vitae.

    Demo: Use the jQuery :contains() selector to match elements with substrings.

    We can use the :contains() selector to match substrings inside any of that element’s descendants (this is case sensitive).

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Curabitur quis arcu ac justo pellentesque ullamcorper sit amet quis mi.
    • Nam a lorem quis lacus dapibus egestas et a ipsum.
    • Phasellus nec magna quis diam cursus egestas quis aliquet tortor.
    • Ut feugiat vestibulum mi, sit amet consequat orci facilisis ac.
    • Phasellus et enim ut sem dapibus hendrerit.


    .find() Link

    The .find()67 function is very useful for matching elements filtered by a selector, jQuery object or element. The .find() function can be used with the functions .children()68 (which searches only the direct child siblings of the matched elements) and .parents()69 (which searches the direct parent elements of the matched element).

    Demo: Finde specific descendants of matched elements.

    • Folder 1
      • Subfolder 1
        • Item 1.1.1
      • Subfolder 2
        • Item 1.2.1
          • Item
          • Item
    • Folder 2
      • Item 1.3.1
        • Item
        • Item

    .filter() Link

    The .filter()70 function allows us to reduce a set of matched elements based on a jQuery selector. This is useful when you want to process a group of elements and then further process specific child elements. The .filter() function can be used in a few different ways, such as to filter by a class name, function or jQuery object.

    Demo: Use .filter() to match subelements.

    In this example, .filter() is used to style paragraphs based on their content.

    Paragraph 1

    Paragraph 2 with span tag

    Paragraph 3 with strong tag

    Paragraph 4 with highlight class.

    Paragraph 5 with span tag

    Paragraph 6

    Paragraph 7 with strong tag

    Paragraph 8 with span tag

    Paragraph 9

    .slice() Link

    The .slice()71 function lets us easily specify a subset of elements to perform actions on. It takes two parameters: start and end indices of subelements in a matched parent element.

    Demo: Use .slice() to perform actions on a subset of elements.

    Slice 1 Slice 2 Slice 3
    1 1 1
    1 2 3
    1 4 2
    7 3 0
    3 6 1

    .prev() and next() Link

    The .prev()72 and .next()73 functions can be used to reference the immediately preceding or next element in a set of matched elements (in the DOM hierarchy). You can also add a selector to the functions that acts as a filter on the elements (shown in the demo).

    Demo: Reference the previous and next elements in a list.

    $.extend() Link

    The $.extend()76 function can be used to combine two or more objects into the first object or into a completely new object.

    $.extend( target, [object1,] [objectN] )

    In the demo, we have a functional contact form on our website, and we want two more forms with similar functionality. Instead of copying all of the code that processes the form, we can use $.extend() to copy the functionality to our new forms, thus avoiding repetitive code. You might have noticed that the target element specified is a blank object; this is a trick that you will often see to create a new object of object1 and extend it with objectN (N representing any number of objects). So, in the example, we want to “copy” the existing functionality of forms.enquiry and simply override the email address.

    Demo: Use $.extend() to change the send action on a form to different email addresses based on the form used.

    This demo simulates the submission of three forms that all use the same code base.

    Demo: Use $.extend() to specify custom settings for a plugin.

    This demo shows how to specify the length of paragraph excerpts. The default is 150 characters.

    Run Excerpts plugin77

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Addy Osmani’s book Learning JavaScript Design Patterns gives greater insight into how to use the $.extend() function to override the default values of jQuery plugins.

    .serialize() and .serializeArray() Link

    The .serialize()78 and .serializeArray()79 functions can create string and array values from form fields in seconds! There are two demos here: the first outputs all of the form’s fields and their values, and the second creates a URL string with the form fields and values appended to the form action ready to be sent.

    To run the demo, enter anything into the form and click the “Run demo” buttons below the form.

    Demo: Create an array of all of the form’s field values

    Demo: Create a URL string with all of the form’s field values

    Conclusion Link

    Although we have only scratched the surface of jQuery in this article, we hope you have learned something about some of the most popular jQuery functions and are able to use them to write fantastic code for your next Web development project. Thanks for reading.

    (al) (km)

    Footnotes Link

    1. 1 #
    2. 2 #
    3. 3 #
    4. 4 '#'
    5. 5
    6. 6
    7. 7
    8. 8
    9. 9 #
    10. 10
    11. 11
    12. 12
    13. 13
    14. 14
    15. 15
    16. 16
    17. 17
    18. 18 /
    19. 19
    20. 20
    21. 21 #
    22. 22 #
    23. 23 #
    24. 24 #
    25. 25
    26. 26
    27. 27
    28. 28
    29. 29
    30. 30
    31. 31
    32. 32
    33. 33
    34. 34
    35. 35
    36. 36
    37. 37
    38. 38
    39. 39
    40. 40
    41. 41
    42. 42
    43. 43
    44. 44
    45. 45
    46. 46
    47. 47
    48. 48
    49. 49
    50. 50
    51. 51
    52. 52
    53. 53
    54. 54
    55. 55
    56. 56
    57. 57
    58. 58
    59. 59
    60. 60
    61. 61
    62. 62 #
    63. 63 #
    64. 64 #
    65. 65 #
    66. 66
    67. 67
    68. 68
    69. 69
    70. 70
    71. 71
    72. 72
    73. 73
    74. 74
    75. 75
    76. 76
    77. 77 #
    78. 78
    79. 79

    ↑ Back to top Tweet itShare on Facebook

    Sam Deering is a senior web developer who specialises in JavaScript & jQuery. Sam is the founder of the jQuery 4u Blog and you can find him these days coding on a sunny beach in Australia.

    1. 1


      May 31, 2012 7:31 am

      Very nice explanation! good job ;)

    2. 2

      coooooooooool! some of them are so useful
      tanx alot

    3. 3

      Alen Abdula

      May 31, 2012 8:56 am

      Great rundown of all the useful things jQuery has to offer. Thanks.

    4. 4

      That’s a comprehensive collections there. Some of them give me a better information to me about those function. Thank you.

    5. 5

      I think the most used is .hide() and .show()

    6. 6

      JQuery animation module is by far one of the easiest to use – and most fun. Sweet article, thanks

    7. 7

      amit mojumder

      May 31, 2012 12:11 pm

      Great list so far.
      I was expecting few more ajax example as well.

      Thanks for putting it together….

      • 8

        Sam Deering

        May 31, 2012 7:14 pm

        Hi Amit,

        Yes I agree, more AJAX examples would be nice! I’m thinking of writing a dedicated post to AJAX examples and demos in the future if there is enough interest.


        • 9

          Sam, I would much appreciate a more in depth article on AJAX as this is the only area on jQuery I’m unsure on.

          Thank you for the article

        • 10

          Franco Musso

          June 7, 2012 3:31 am

          Thanks for this jQuery goodness, it’ll be a huge help on future projects and brought lots of unknown features to my attention.
          I agree that an expanded AJAX follow-up article would be awesome. I’d love to see an example where users can lookup an existing value from an SQL database (without refreshing the page of course) using form values e.g. to look up the specific product price value based for their choice of colour and size / category.

    8. 11

      Awesome information… Thanks Sam!

    9. 12

      Brian Gervais

      May 31, 2012 1:52 pm

      Quite a useful roundup, both for demonstration and learning purposes. Cool!

    10. 13

      + 1 for this jQuery tutorial

    11. 14

      Nice one, Sam. A good article for anyone who wants to quickly get up to speed on jQuery functions.

    12. 15

      Alvin Nguyen

      May 31, 2012 5:07 pm

      This is what keeping me refreshing this website =) very useful and easy to understand guys! Keep it up =)

    13. 16

      Great post for jQuery!

    14. 17

      Mohammed Taher

      May 31, 2012 6:08 pm

      Nice article, thanks.

    15. 18

      Sam Deering

      May 31, 2012 7:18 pm

      @The_Death_Raw, sina, Alen Abdula, Idraki, Sandeep, Dmitri, amit mojumder, Dave, Brian Gervais, Bretto, Chris, Alvin Nguyen, Simon, Mohammed Taher,

      Thanks guys, it’s great to get such a good response to the article, your feedback is much appreciated!

    16. 19

      Dhruv Chauhan

      May 31, 2012 9:18 pm

      Thank you for this wonderful topic.

      • 20

        HI Dhruv i would like to just have an advice from u..
        I am beginer in php so i want help from u.
        I just wanna show my data like flipcart or ebay shows using database driven div tag..
        Like my data base have 20 values
        So i would like to show them in 5 columns 4 rows.
        Means a new div tag should be generate in 1 row like that upto 5 times.
        Can u help how do i achive this…Plz

    17. 21

      Milan Chheda

      May 31, 2012 9:19 pm

      Nice article. It’s a crash course/roundup on “how to use Jquery functions effectively”.
      Source code, demos and to the point explanations. Very impressive. Good job! :)

    18. 22

      Nice. Good for a beginner.

    19. 23

      Thanks a Lot … keep it up :)

    20. 24

      Izul Chaniago

      May 31, 2012 10:36 pm

      Woow, Jquery ROCK!!!! :D

    21. 25

      Mahabaleshwar G.

      May 31, 2012 10:54 pm

      The article is good source of information for web programmers. If possible post some Ajax example using jQuery.


    22. 26

      Sam Deering

      May 31, 2012 11:02 pm

      @Dhruv Chauhan, Milan Chheda, Raphael, Umesh Y K, Izul Chaniago, Mahabaleshwar G.

      Thanks guys!

    23. 27

      Great useful tutorial for beginner.Nice jQuery Function.Really beautiful stuff.Thanks a lots.

    24. 28

      Wow, thanks a bunch. I was kinda getting into jQuery, so this is much needed. There are a few things that are easily achieved with CSS3, but they mostly are quick and easy, as opposed to CSS3 tricks.

    25. 29

      Great useful tutorial for beginner.Nice jQuery Function.Really beautiful stuff.Thanks a lots.

    26. 30

      This has got to be one of the most useful articles I’ve seen on SM! A great starting point for better understanding jQuery, with useful examples – I’m sure I’ll refer back to this many times in the future. Thanks, Sam!

    27. 31

      Too good article!!! Thanks

    28. 32

      This post is so useful! Even more more simple and clean than the original documentation! Thank you!

    29. 33

      Huawei Chen

      June 1, 2012 1:29 am

      Nice post. I have to say this is the best jQuery post I have ever seen.

      I like this post at my first glance, because its structure is clean and neat, and categories are reasonable and easy to follow.
      It is one of the best ways to cover the gap from a beginner to a intermediate developer.

      This post lists out nearly top 50 frequent use functions in daily jQuery development. It is good for a beginner to know what functions are useful.
      Based on this post, I can check jQuery API purposively instead of aimlessly checking the whole API and wasting my time.

      The explanations blow the function are clear and easy to understand, important words are highlighted. That’s good reader experience. I like it.

      Most of the demos are good, and easy to understand.
      Demos tell me what the function does and what the difference in between similar functions. Admittedly, some of them have bugs. But it is a tutorial post instead of a product to sell, so its defects cannot belittle virtues.

      In some explanations, there are some links redirect to other sites for further reading.
      Most of them are redirecting to a site: I saw that site before, it is also an amazing site.

      So what’s my next step?
      1. Share this post on my twitter, facebook etc.
      2. Follow the author.
      3. Subscribe in my google reader.
      4. Thanks for Sam’s contribution and efforts in this post.

      • 34

        Sam Deering

        June 3, 2012 1:36 am

        Hi Huawei Chen,

        Thanks for your comprehensive comment, I’m glad it helped you learn some jQuery and also great you are now following the jQuery 4u blog.


    30. 35

      writing about the bind(), you could mention that (since v 1.7) it’s only an alias to on().
      when you type in console: jQuery.fn.bind.toString() it will return:
      function (a, b, c) { return this.on(a, null, b, c); }

      • 36

        Sam Deering

        June 3, 2012 1:44 am

        Hi pawel,

        I have added this to the section decription for .bind().


    31. 37

      Very nice article…Since I discovered your site, I not only check it daily, it’s the site I go to 1st when I need to look for useful examples.
      Please keep up the good work!

    32. 38

      Kristaps Ancans

      June 1, 2012 5:34 am

      Clone the bee until infinity! Never check code :)

    33. 39

      Bookmarked straightaway. Fantastic resource. Thank you!

    34. 40

      Great review of JQuery, but…

      There are typos in your source code e.g. in Digital Time Display it says:

      (currentMinutes & lt; 10 ? ‘0’ : ”) instead of (currentMinutes < 10 ? '0' : '')

      And similar in other source codes.

      • 41

        Sam Deering

        June 3, 2012 1:53 am

        Hi A.P.

        Yes I ran into a few issues with displaying the source code as it’s all done dynamically, grabbed straight from the raw source code, passed through regular expression replaces, htmlentities and syntax highlighter before being displayed on the page. With there being so many functions up to 100 including function reset code it made sense to try and solve it to be displayed dynamically, but yes it’s not a perfect solution and some html characters are still being displayed as codes.


        • 42

          Sam Deering

          June 13, 2012 4:12 pm

          I’ve fixed up the dynamic production of displaying the source code, it should be more readable now.

    35. 43

      This is amazing. Very helpful thanks!

    36. 44

      Alex Gemmell

      June 2, 2012 1:16 am

      Good article, well done! Please note that you code examples are full of double quotes that have been converted to HTML entities (lots of ampersand quots!). You might want to clean that up :)

    37. 45

      Greg Rickaby

      June 2, 2012 6:19 am

      This is why I read Smashing Magazine! Great post, thanks!

    38. 46

      Minor typo

      The .slideToggle() function is similar to .slideToggle() but with a fading effect …..

    39. 48

      very informative post… i love your jquery 4u blog… most of the time you helped me to stay out of trouble….

      Thank a million for your help…. keep rocking this web world…

    40. 49

      Really nice post! More more more!
      Thanks for this tutorial. Very informative and/or refreshing for the memory.

      More on specific function would great such as Ajax.

    41. 50

      Magnificent concerns completely, you basically won a logo new audience. What could you recommend in regards to your put up that you basically created a few times ago? Any positive?

    42. 51

      Sam Deering

      June 3, 2012 1:34 am

      @adumpaul, Tam Nguyen, Huawei Chen, pawel, Jerry, Geert-Jan Brits, amit, Riccardo, Abel Ferro, Kristaps Ancans, Tommy, Lorenzo, A.P., David, Alex Gemmell, Greg Rickaby, bkbartondesign, gill bates, mohanraaj, Bob, Harun ,

      Thanks for your comments and positive feedback guys, much appreciated!

    43. 52

      Sam Deering

      June 3, 2012 1:46 am

      Hi Geert-Jan Brits,

      I wasn’t aware of this, it’s not listed on the Official jQuery deprecated list:


    44. 54

      I knew Sam before he was famous! Awesome article man, and so many great responses and feedback – i’m proud of this achievement, Kudos to you, sir!

    45. 56

      sandeep parkhande

      June 3, 2012 8:23 pm

      great collection…

    46. 57

      Edwin Martin

      June 4, 2012 12:12 am

      Nice overview.

      One complaint: if you know the .live() function is obsolete, why even mention it? Just forget .live() and use .on() and .delegate(). Much better.

      • 58

        Sam Deering

        June 4, 2012 5:58 am

        Hi Edwin,

        I have included it for reference because it has only become deprecated as of jQuery 1.7 and earlier versions are still using it. I know for a fact that it takes some time for some websites to upgrade their versions and do compatibility checks with plugins etc… It will eventually be drowned out but may take some time.


    47. 59

      the code view for the .FILTER() function has not been paste correctly
      Thx for this nice and clear tutorial !

      • 60

        Sam Deering

        June 4, 2012 6:08 am

        Hi Moabi,

        Yes as I mentioned before I ran into a few issues with the dynamic display of the code. Here is a listing of the full code for the .filter() function:


    48. 61

      This is great! I always tell my students that knowing what is possible is half the battle. Once you know it _can_ be done, then its just a matter of time before you figure out how. Tutorials like this are the best for providing a quick set of knobs to fiddle with to start to get one’s head around what jQuery can do. Thanks!

    49. 62

      ozan dikerler

      June 5, 2012 12:11 am

      Great post! thank you very much ;)

    50. 63

      Jannis Gerlinger

      June 5, 2012 4:14 am

      Awesome conclusion!! Bookmarked!

    51. 64

      setInterval() is bad, don’t use it!

      The reason setInterval is bad is because it will try to execute the code every X MS regardless of what’s going on in the thread. So if you have:

      setInterval( complexFunction, 1 ); // complexFunction takes >1 MS to complete

      …you may end up with setInterval trying to re-execute several times before even its own code is complete! However, you can use setTimeout similarly and avoid this problem:

      setTimeout( complexFunction, 1 );

      function complexFunction() {
      // complex code
      setTimeout( complexFunction, 1 );

      …now complexFunction will only call itself again once its own code is complete, so if its own code takes longer than 1 MS to complete you won’t have any backlog to deal with like you would with setInterval

      • 65

        Sam Deering

        June 6, 2012 6:00 am

        Hi Tom,

        Thanks for sharing this with us, it’s very interested look into using setTimeout() to call a function which then calls itself recursively instead of using setInterval(). I’ll look more into this and write up a blog post.


        • 66

          rajesh chauhan

          July 9, 2012 10:32 am

          sam can you show the examples with scroll image with slider in jquery……

    52. 67

      “… an estimated 24 million websites (50% of them being the 10,000 most visited websites) ”
      What a weird thing to read… or my math is a bit off.

      • 68

        Sam Deering

        June 6, 2012 6:05 am

        Hi maurice,

        Yes it is a slight tongue twister, I’ve split into two short sentences for you:

        “50% of the top 10,000 websites are using jQuery”.
        “There is an estimated 24 million websites using jQuery”.


    53. 69

      It seems that the article is written for those who are not able to read the jQuery API documentation by themselves and/or unable to use google and search stackoverflow. It’s a bit disappointing, really

      • 70

        Sam Deering

        June 6, 2012 6:12 am

        Hi Eugene,

        Thanks for your comment, yes the post is aimed at aspiring web developers and web designers who want to see jQuery in action. The post brings together the most popular jQuery functions in one place of reference where avid web programmers can quickly see the functions and hopefully learn something new about this great JavaScript Library.


      • 71

        Hi Eugene,

        It is very useful for those who are new to web programming.
        I think that is the idea. Good to see your comment also because you have showed how and where to start if we learn anything new. So let us appreciate Sam Deering for this post.

        To Sam: Keep it up Sam!!!!

    54. 72

      You might also enjoy some of these eye-candy code samples:

    55. 73

      Nice collection. Thanks!

    56. 74

      Bookmarked immediately. I will use this as a cheatsheet :).Thanks!

    57. 75

      Sam Deering

      June 6, 2012 6:09 am

      @Evan Payne, ozan dikerler, Jannis Gerlinger, Oswald, Marco, Alin,

      Thanks for your feedback guys, much appreciated!

    58. 76

      Good List. Thanks for sharing.

    59. 77

      very usefull!

    60. 78

      Very useful article!

    61. 79

      it looks i cannot view demos, what’s wrong?

    62. 80

      I don’t understand how demos work. Can’t find any launching button…

    63. 81

      Am I going crazy, what happened to the demos, I could have sworn that I was playing with the demos and now they are gone ? lol
      am i nutz?

      • 82

        Sam Deering

        June 10, 2012 9:19 pm

        Hi gbin1, simPod & Tony,

        There was a problem with the server hosting for some of the demo files. Working on fixing now should be back up soon.

        Thanks for your patience.

    64. 84

      In years of following this website, this is the best post I’ve ever seen.

      • 85

        Sam Deering

        June 13, 2012 4:02 pm

        Thanks BirdYoshi, this is a BIG compliment much appreciated.

    65. 86

      I’m using jQuery 1.7.2 on my company intranet and .live still functions correctly . . . ?

      • 87

        Sam Deering

        June 13, 2012 4:04 pm

        Hi Craig H-R,

        Yes you are correct, as of jQuery 1.7 the .live() function is an alias to .on() function. When you type in console: “” it will return: “”function (a, b, c) { f(this.context).on(a, this.selector, b, c); return this; }”“.


    66. 88

      Thanks a lot

    67. 89

      Very nice, would have added $.proxy – a very useful function that many developers do not know about.


    68. 90

      Great post. Really helpful! Thanks! The only thing missing is being able to download all codeblocks in one file so I can import them as snippets

    69. 91

      Great resource for all those looking to get into jQuery or refreshing their knowledge. Nicely done, Sam!

    70. 92

      Awesome post mate :)

    71. 93

      Awesome post…thanks for sharing great resource.

    72. 94

      Great Post..!!

      Enjoyed a lot even though i am Web Developer and a well known Jquery developer

      Instead of Explaining things perfectly I have seen the creativity in your Post..

      Enjoyed your demos..

    73. 95

      I love this article . thanks for info:)

    74. 96

      nice job keep it up

    75. 97

      @Paul, Nakama, Phil, Dev Anand, Saha, Siddik, Jigar, Xainee Khan, Mathematik,

      Thanks guys, much appreciated.

    76. 98

      Thanks so much, this helped!

    77. 99

      This is my new JS/jQuery bible!! I think it’ll definitely help me become an intermediate jQuery programmer. But your last line frightens me…”Although we have only scratched the surface of jQuery in this article”… that was only the surface?? After spending hours looking through the article once and trying to understand all the examples, I thought I had all of jQuery’s power in my hands…

    78. 100

      Awesome guys

    79. 101

      Thanks Team , This is what i was looking for.

    80. 102

      Nice Demos. Thanks Sam !

    81. 103

      such a great article. great revision and some new to learn. =)

    82. 104

      Its very nice tuts…….

    83. 105

      What a great article. Great refresh to some of the method I always use and great explanation for some of the method I always feel how to use them correctly. Thank you so much.

    84. 106

      victor ovando

      October 21, 2012 5:18 pm


    85. 107

      Ravishankar Radhakrishnan

      October 31, 2012 3:24 am

      One of the amazing Jquery tutorial I have ever read.. Kudos Bravo…Keep going :)

    86. 108

      In the middle of money making sites for the tutorials, This is really an amazing site having a lot of valuable information for the learners. Its really a great work. Keep it up so that many others like me can make use of it in the future !

    87. 109

      very nice job, nice examples… keep going..

    88. 110
    89. 111

      Great post. Thank you :)

    90. 112


    91. 113

      It is great use of jQuery here…Really

      Thanks a lot

    92. 114

      Sooo, I’m just a novice at jquery, so forgive me if my question is so simple to answer. when I try to test the code given in this article it doesn’t show up. The code I’m trying to use is the animate the text example. I followed the code exactly and have the jquery library linked to my page and nothing occurs. Again, I’m like super new to this, so bare with me. :)

    93. 116

      great collection….
      see my collection.its really useful..

    94. 117

      manish farkya

      April 22, 2013 6:12 am

      Great,It is nice article for all jquery programers.

    95. 118

      Amazing Thanks So Much

    96. 119

      Awesome Guide..
      best for the beginners..

    97. 120

      Nice quick reference guide…
      Thank you

    98. 121

      Vishal Kaul

      May 24, 2013 3:52 am

      Indeed a nice article. Very useful.

    99. 122

      Thank you, as always, for having quality content. I noticed that immediately about Smashing Magazine when I first visited and it has kept me coming back. Keep up the good work and please don’t ever drop to the lowly pushing of poor content that is practiced by so many websites. Your quality truly distinguishes you.

    100. 123

      thank you for the post good one

    101. 124

      For some reason, none of the “view code” and “run demo” buttons are working for me. They all seem to have the href set to “#”. Is it just me?

    102. 125

      Really this very usefull and very good explanations…. thanks.

    103. 126

      marriage halls in mumbai

      September 30, 2013 8:46 pm

      I’m glad I was able to find this blog as it contains information I couldn’t find elsewhere. Thanks a lot for your efforts to put this website together.

    104. 127

      you can try jQuery code on

    105. 128

      kishor Gosavi

      December 4, 2013 1:22 am

      really a superb demos for understanding the power of jquery.

    106. 129

      Untitled Document

      #div3{ display:none; position:absolute; margin-left:300px; z-index:5;}
      #round{ display:none; position:absolute; -webkit-animation:myfirst 3s; margin-left:232px; margin-top:264px; z-index:1;}

      @-webkit-keyframes myfirst /* Safari and Chrome */
      from {-webkit-transform: scale(2); /* Safari and Chrome */}
      to {-webkit-transform: scale(1); /* Safari and Chrome */}


      #round_mask{ display:none; position:absolute; -webkit-animation:mymask 3s; margin-left:232px; margin-top:264px; width:1000px; height:800px; background:#000; -webkit-transform-origin:left top; z-index:2; -webkit-transform:rotate(-90deg);}

      @-webkit-keyframes mymask /* Safari and Chrome */
      from {-webkit-transform:rotate(0deg); /* Safari and Chrome */}
      to {-webkit-transform:rotate(-90deg); /* Safari and Chrome */}

      #skew{ display:none; position:absolute; -webkit-animation:mysecond 3s; -webkit-transform-origin:left top; /* Safari and Chrome */ margin-left:379px; margin-top:270px; z-index:3;}
      @-webkit-keyframes mysecond /* Safari and Chrome */
      from {-webkit-transform:skew(0,-55deg); /* Safari and Chrome */}
      to {-webkit-transform: skew(0,0); /* Safari and Chrome */}


      $(“#round_mask”) .delay(500).fadeIn(“slow”);
      $(“#skew”) .delay(1000).fadeIn(“slow”);

      $(“#div2”) .delay(500).fadeIn(“slow”);




    107. 130

      Owsam great work thank you for sharing.. :D

    108. 131

      Dharmendra singh Sikarwar

      April 18, 2014 4:11 pm

      Nice Article, Handy for beginners but demos do not seem work now, when i checked my browser console, giver error : ” Uncaught ReferenceError: globals is not defined”
      on file : “”.


      • 132

        Page seems to be broken. I bookmarked this a while ago and it worked, but there seems to be a few problems with it now. The buttons and triggers are often missing and don’t work.

    109. 133

      Would be a nice read, except that the links and demos you’ve linked do not work and do not show code examples. I’m sure it was informative before, but now it’s pretty useless.


    ↑ Back to top