JQuery basics
about jQuery
jQuery is a Javascript library developed to make writing Javascript easy: "Write less, do more". Javascript allows you add functionality and interaction to your webdesign.
This page introduces the concept of the jQuery library and explains how to use existing documentation and refers to useful tutorials.
(add example)
concept
jQuery simplifies writing Javascript. The concept is best introduced by trying it out yourself. To get started download jQuery and load the jQuery script into your webpage by adding a single line in the head of your page:
<html><head><script type="text/javascript" src="js/jquery.js"></script></head><body><p>your webpage content goes here</p>
</body></html>
In the added highlighted code the 'js' in 'src' refers to the folder of the file and 'jquery.js' should be the name of the jQuery file itself.
To start using the jQuery library in your own webpage first create your own javascript and also refer to it in your webpage:
<head><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/myscript.js"></script></head>
The second step is setting up your own script, in the example 'myscript.js', so that you can use jQuery functions, by adding the following code to your script:
$(document).ready(function(){
// Your code here});
Now we can start adding interactivity to our content by writing our own code. We could for instance add an action like animating the paragraph (<p> tag) in the example when hovering over it:
$(document).ready(function(){
$('p').hover(
function () {
$(this).animate({
marginLeft:"200px"
}, 1500 );
},
function () {
$(this).animate({
marginLeft:"0px"
}, 500 );
});
});
To understand the code we have to look at it in more detail:
....
For more information on the concept see the How jQuery works tutorial.
documentation
All official jQuery documentation can be found at docs.jquery.com.
When getting started the hardest part is finding out where the find what you are looking for. Therefore we will shortly describe each category (of the API Reference, as that's what you'll be using) in the documentation:
Often used:
- Selectors: What element to add interaction to?
- Events: Having control over when interaction
- Effects: Making elements appear and disappear, move them, animate them
- CSS: Add or remove css
Sometimes used
- jQuery Core: The jQuery Core
- Attributes: Modify HTML attributes
- Traversing: Traversing is about adding selectors, geting parent elements, or children of the selected elements.
- Manipulation: Deleting elements, adding new html, modifing existing html
Less used:
- Ajax: Ajax helps you load new pages 'on the fly' without loading new pages
- Utilities: jQuery utilities offer programmers more easy
tutorials
A list of basic tutorials can be found at docs.jquery.com/tutorials.
