jQuery Tutorial – A jQuery guide for beginners with examples
What is jQuery
jQuery is cross platform compatible, i.e. supported by many popular browsers like Chrome, Firefox, IE, Safari, and others.
You can do many things or seen in different websites like cool jQuery sliders, slideshows, menus, fade in/fade out effects, beautiful dropdowns; just a few what can be done with jQuery.
This jQuery tutorial will take you through installing the jQuery, Syntax of jQuery, environment setup and working examples of jQuery in following chapters.
Perquisites to work with jQuery
A few running examples of jQuery
Installing or setting up jQuery to enable you working in your web applications is quite simple.
You just have to place or refer library file of jQuery in your HTML files to work with it. Below is how you can do it:
Download jQuery library
You can download the jQuery library from http://jquery.com/download/. It is recommended to download uncompressed file for the development machine and compressed file for production (where your site is hosted). See more for learning the difference between jquery.js and jquery.min.js.
After downloading and placing the uncompressed file to your development machine, place it at the same directory where your code files are. Then, you can use following code to include the jQuery library in your HTML file:
Refer from CDN network
CDNs (Content Delivery Networks) offers to include jQuery in your documents. You simply have to give URL of one of the available jQuery library from CDN.
One of the benefits of using the CDN is, if another website is using CDN and loaded by the browser, your website will use the pre-loaded library from the cache.
This is how you will include the jQuery library in HTML file from a CDN:
<title>jQuery Library from Microsoft CDN</title>
IDE for jQuery
You may use any text editor like very basic windows notepad to start developing with jQuery. However, this can only be for basic learning or testing.
A few available jQuery IDEs are mentioned below:
Notepad for simple testing
You can also use Eclipse to develop jQuery based websites. Find appropriate plug-in for that.
- How to Declare HTML5 doctype in Your Webpages
- How to declare HTML5 doctype in your webpages
- jquery animate easing | Using easing parameter in jquery animations
- jQuery AJAX explained with 3 examples
- jQuery live method and its alternative
- jQuery animate | How to animate in jQuery with 5 demos