Best jQuery Tutorials and examples

Category: jquery    |    1,019 views    |    1 Comment  |   

The largest collection of jQuery examples and jQuery Tutorials on the web. Learn and master jQuery from scratch. jQuery is nice piece of code that provides very good support for ajax. jQuery can be used to develop highly interactive webapplications. In this jQuery tutorials series we will show you how to use jQuery to develop nice ajax based applications.

You will learn how to download install and then start working with jQuery. We have also provided the demo of jQuery application. You can visit our jQuery demo section to view the running jQuery example.

Learn jQuery and master it in no time.

  1. Introduction to jQuery
    jQuery is great library for developing ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications.
  2. Downloading and installing jQuery
    In this section we will download and install jQuery for developing our demo application. jQuery comes as single js file. Read more…

     

500 Popular jQuery Examples

Category: jquery    |    1,205 views    |    Add a Comment  |   
    1. jQuery Lavalamp MenuIt is the jQuery plugin that is based of Guillermo Rauch plugins for mootools and Ganesh Mawwaha’s jQuery 1.1.x plugins. Through the Sliding Doors CSS/Javascript method, you are able to add a background hover effect on HTML link lists with Lavalamp by utilizing the Eazing library.
    2. Superfish Menus – Suckerfish on ‘roids, This jQuery plugin allows the development of improved Suckerfish style of dropdown menus from the existing pure CSS type of dropdown menu. The features that are added as a result of these include: a timed-delay on mouseout, automatic utilization of hoverIntent plugin when present; obligatory IE6 –hover capability; animated sub-menu; accessibility through keyboard tab key; generation of arrows to indicate the submenus; use of drop shadows for browsers that are capable; and many others.
    3. jQuery Context MenuThis jQuery plugin provides easy implementation, CSS styling, keyboard shortcuts and control methods.
    4. Kwicks for jQueryThis highly versatile and customizable widget had started as just a port for Mootools framework.
    5. jQuery iPod-style Drilldown MenujQuery has an iPod-style drilldown menu that helps users traverse hierarchical data with relative ease and control. This feature is very useful in organizing large data structures that don’t translate well into the traditional fly-out or dropdown menus.
    6. jQuery File TreeThis jQuery plugin is a configurable AJAX file-browser plugin where you use to create a fully interactive and customized file tree as little as one of the Javascript code.

How jQuery Works

Category: jquery    |    1,000 views    |    Add a Comment  |   

jQuery: The Basics

This is a basic tutorial, designed to help you get started using jQuery. If you don’t have a test page setup yet, start by creating a new HTML page with the following contents:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>

Edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:

 <script type="text/javascript" src="jquery.js"></script>

You can download your own copy of jQuery from the Downloading jQuery page.

Launching Code on Document Ready

The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:

 window.onload = function(){ alert("welcome"); }

Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn’t run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is that the HTML ‘document’ isn’t finished loading yet, when you first try to run your code. Read more…