jQuery Tutorial
Jakob Jenkov |
What is jQuery?
jQuery is a powerful JavaScript API which makes it a lot easier to perform various standard JavaScript actions in your HTML page. jQuery also takes care of cross browser compatibility issues, so you can focus on getting your page to work as intended.
jQuery Makes Web Development Fun Again!
Having worked with jQuery for some years I must say that jQuery made it fun to work with web applications again. Making your web pages and web apps dynamic is so much easier with jQuery than with standard JavaScript! Whether you just a little dynamic behaviour in a website, or a lot of dynamic behaviour in an advanced web app, jQuery can help you. I hope that this jQuery tutorial will make you see how.
jQuery Features
As mentioned jQuery has a lot of very nice features. This jQuery tutorial will go through these features in depth on their own pages. Just to give you a taste, here are some of the things you can do with jQuery:
- Select HTML elements in various ways, easing access to the elements to be enhanced.
- Style the HTML elements dynamically, by manipulating their CSS properties or classes.
- Manipulate the DOM (Document Object Model) of your page, (copy, move, modify etc.)
- Animate the DOM elements, e.g. fading in / out, sliding, change color, change size etc.
- Respond to events like mouse-over, mouse-out, change etc.
- AJAX enable your web pages using jQuery's smart AJAX features.
- Use the many jQuery plugins (incl. jQuery UI), which contains all kinds of smart widgets.
- Create advanced web application user interfaces, which resemble desktop user interfaces.
If you plan to develop your next web application in HTML 5, then jQuery can make this task a lot easier. jQuery works naturally with the HTML elements in the browser, so it doesn't matter if they are HTML 4 or HTML 5 elements. As long as your browser supports it, so does jQuery.
jQuery Challenges
If you develop bigger web applications with jQuery you may run into a few challenges. jQuery gives you a lot of features to work with the DOM in the HTML page. But jQuery does not give you so many tools to structure your code as your web app grows. I have covered the problems and some potential solutions in my jQuery critique.
The Official jQuery Website
You can find jQuery at jQuery.com. From this website you can download jQuery and browse the reference documentation.
jQuery Version Used in This Tutorial
The first version of jQuery used in this tutorial was 1.6.1 but most of the features are checked / updated to work with jQuery 1.11.1 or jQuery 2.1.1 .
Prerequisites
This jQuery tutorial assumes that you have a basic knowledge of HTML, the DOM, and JavaScript. If you don't, I have an html tutorial here. I don't (yet) have a JavaScript tutorial so you will have to google for one.
Getting Started With jQuery
The full jQuery tutorial is organized into a set of separate texts each covering one of jQuery's features in detail. To get started learning jQuery just jump to the next text in this jQuery tutorial which gives you an overview of jQuery. Then just follow the "next" links at the bottom of each page, or use the left menu which is present at the top left of all pages in this jQuery tutorial.
Feel Free to Contact Me
If you disagree with anything I write here about the jQuery tutorial, or just have comments, questions, etc, feel free to send me an email. You wouldn't be the first to do so. You can find my email address on the about page.
| Tweet | |
Jakob Jenkov | |
