Introduction to jQuery

[litewarez]

Heya all,

Just another tutorial from Meee

this time ill be going threw some of the jQuery usability with you

Firstly let me say im not expert in this i fell i am pretty good so i dont want people commenting about ive use incorrect terms for things etc.....


Lets get started

Ok firstly to me jQuery is like a box and n that box are lots of other boxes... each box can do something to a part of your site weather its a form a table a div it dont matter!

each box within the box is a function and what a function does is perform a set of javascript on a selection of your site, the selection is also called an element!

.................

jQuery is a function itself and the function is know as $ "doller sign"

ok lets get into some jQuery

/*make sure jquery is loaded into your site before you perform any off the below code*/

/*
  In javascript you shauld always make sure the document/page is fully loaded and ready,
  this basically means when the DOM is fully compiled where ready! and we do this by the blow code
*/


$(document).ready(function(){

});


/*
  Explaination:
  The first symbol is the $ and this is jquery functiom
  The next slice is (document) and this is what im telling jquery im using NOTE: $(item)
  Now i have passed the document object into jquery i want to run a function on it witch is where the . comes in
  $(document).ready() The .ready() is a function that will be run on document and takes 1 parameter witch is whats known as a callback function!
*/ 

Ok so the above we have established that $ jquery will run the function ready() on document and then run the parameter/function i spicify in the () of ready()


ok we established how jquery runs functions on certain objects/id/classes we tell it to lets play around with a little css

$(document).ready(function(){
    /*Jquery is loaded and the document is ready to be manipulated */
    //Lets grab the div below and run the hover function on it
    $('#KWWHunction').hover(
        function(){ /*this function will be run when the mouse is over the div*/
            /*Theres a special variable you can use in functions like this that is the element of the div and its called this*/
            $(this).css('background-color','green')
        }
        function(){/*this function will be run when the mouse is NOT over the div*/
             $(this).css('background-color','redd')
        }
    )
});

/*Header*/
   <div id="KWWHunction">This is a div container on your site</div>
/*Footer*/ 

ok by reading the above you should be able to understand what is going on as its plain and simlple JS but if you dont then not to worry just ask KWWHunction users! meh i rulez... ask me

Ok thats the end of this tutorial and i hope you now know how to use jquery basics and make sure you check out the jquery documentation for examples and other wicked functions packed into it!!!

litewarez Reviewed by litewarez on 13th Jan 2010. Introduction to jQuery Heya all, Just another tutorial from Meee :D this time ill be going threw some of the jQuery usability with you Firstly let me say im not expert in this i fell i am pretty good so i dont want people commenting about ive use incorrect terms for things etc..... Lets get started Rating: 5

[el_jentel1]

Great tutorial lw. jQ is pure sex (awesome) can turn a dull website into paradise. Though I know very little about it, but I've seen it in action and I love it.

[litewarez]

Yes the action you have seen is on my web-masters haha!!

But yea i hope to go into Dom traversing / ajax / and so on then show users how to develope an ajax shoutbox soon! as a project!

[litewarez]

If you seen my webmasters panel then you will understand that the sidemenu with all the effects and dropdown ect is done by this small object of my framework!

I posting this to show you some more code in regards to jQuery

Sidebar : {
        Init : function(){
            this.Sidemenu();
        },
        /*Functions*/
        Sidemenu : function(){ //Navigation
            $("#main-nav li ul").hide(); // Hide all sub menus 
            $("#main-nav li a.current").parent().find("ul").slideToggle("slow");
            $("#main-nav li a.nav-top-item").click( // When a top menu item is clicked...
                function () {
                    $(this).parent().siblings().find("ul").slideUp("normal"); // Slide up all sub menus except the one clicked
                    $(this).next().slideToggle("normal"); // Slide down the clicked sub menu
                    return false;
                }
            );
            /**/
            $("#main-nav li a.no-submenu").click( // When a menu item with no sub menu is clicked...
                function () {
                    window.location.href=(this.href); // Just open the link instead of a sub menu
                    return false;
                }
            );
            /**/
            $("#main-nav li .nav-top-item").hover(
                function(){
                    $(this).stop().animate({ paddingRight: "25px" },200);
                }, 
                function () {
                    $(this).stop().animate({ paddingRight: "15px" });
                }
            );
        }
    }, 

[desiboy]

Thanks !