In this lecture in the HTML5 course, you will learn and practice jQuery basics.
About jQuery
jQuery is is a powerful and popular open source JavaScript library ("write less, do more") created by John Resig in 2006.
jQuery and future:
Up to 2016 (aproximately) jQuery was most popular. Over the last few years the landscape has changed, frameworks/libraries including Angular, React and Vue have introduced a new paradigm for writing JavaScript and in some ways made jQuery redundant. But according to expectation jQuery isn't going anywhere for a long while. jQuery is still used by the vast majority of web sites (as opposed to web apps with many interaction with the user). jQuery is still a great choice for small to medium size projects. See statistics for the end of 2017 on the right.
Why jQuery:
The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps it into methods that you can call with a single line of code.
jQuery is cross-browser, meaning it will run exactly the same in all major browsers. It simplifies JavaScript programming and increases your productivity. jQuery has very good documentation. It has a huge range of free plugins for various tasks. Some examples: jQuery UI (official site including interface interactions, effects, widgets, and themes), Waypoints (trigger a function when you scroll to an element), Magnific popup (galleries ...), Tooltipster (tooltips), Maplace (maps), One Page Scroll (good for presentations), ...
With jQuery you can:
- Select HTML elements in an easy way
- Style HTML elements dynamically, by manipulating their CSS properties or classes
- Traverse and manipulate the DOM - dynamically add, remove, change, ... element content and style
- Handle events
- Add effects and animation
- Do Ajax calls
- Use free jQuery plugins
Next Lesson
It is assumed that you have a basic knowledge of HTML, CSS, JavaScript and Document Object Model (DOM).
Go to the next lesson in this lecture by pressing the right arrow on the bottom-left side of this page, and start learning the basics of the jQuery library and its usage. Look at the jQuery API for additional information.
Most of the pages are interactive. You can choose some predefined options from the lists. Then, you are free to change the codes or write your own to explore various options and to see live preview of your changes.
In most of the demos we omit the document structure in the HTML Code window. We assume:
- The code in the HTML Code window has valid document structure
- The code in the CSS Code window (if present) is written in an external file, which is linked to the document
- The code in the JS Code window (if present) is written in an external file and linked to the document
- jQuery file is linked to the document
For the complete references, see the links in the 'Sites' tab on the top menu.
Enjoy learning jQuery!