There is a website called jQuery.com that you
can visit for all sorts of information.
You need to grab the JQuery Library File from this site and while developing/learning the
uncompressed file is best.
Click Here to get the file.
Although w3schools also have a jQuery tutorial.
The basic syntax of a jQuery command could be...
$(selector).action();
eg (hiding an object)...
$(this).hide(); (this relates to the current object)
$("p").hide(); (all the <p> elements)
$(.test).hide(); (this relates to the element with the class="test")
$(#test).hide(); (this relates to the element with the id="test")
so $() is basically the same as saying document.getElementsByTag() or
one of the other getElement options
You can also chain commands together on one line...eg...
$("#test").css("color", "red")
.slideUp(2000)
.slideDown(2000)
.html("New Text");
NOTE...
So far it seems that jQuery is just a bunch of METHODS or FUNCTIONS
which means that changes are all in brackets...eg...
.html("New Text") and not .html="New Text"
A common problem can be scripts running before the page has loaded and jQuery has a
function to take care of that ... eg ...
$(document).ready( function() {alert("page has loaded")})
so the function only runs when the page has finished loading.
This is useful if your function/code has to reference something that may take a moment to finish
loading (maybe loading a large picture). The .ready command waits until the image has loaded
before continuing.
NOTE...
There is a shorter version of this but the above is probably easier to read/understand.
The short version is...
$(function(){alert("page has loaded")}
Also Note...
I am using the $(document).ready command on this page to add a class to the
<body> element (I'm adding "bodyMove").
The code looks like this...
$(document).ready(function() {
$("body").addClass("bodyMove");
});
javaScript
function myFunction() {
var obj = document.getElementById("myID");
obj.innerHTML = "New Text";
}
jQuery
function myFunction() {
$("#myID").html("New Text");
}