jQuery Introduction
jQuery is a library added to JavaScript, allowing to accomplish many actions easier/
One of the most important things jQuery added to javascript is Aminations.

Full documentation of jQuery can be found at jQuery.com


In order to use the jQuery library, it must be referenced from the file
it can be downloaded to the server or to be referenced from a website

//local
    
//on the web
    
//should be placed with pther referenced scripts

Example 1:


    $('#button1').click(
        function(){
            console.log('1 Clicked!');
        }
    )
If we want to put the jQuery code before an object it interacts with, we can wrap the code with

    $(document).ready(function() {
        //anything from anywhere in the code
    })
A short way of writing the above code is:

    $(function {
        //anything from anywhere in the code
    })

Which means: $(function(){}) can be written everywhere

It needs to be written only once in every page.
But anyway, The call to the jQuery library should be before the code

Nevertheless, the best practive is to write all js and jQery code in the end of the body of the page

For further details about jQuery and all the functions Click Here

Querying selectors with jQuery


    $( "#myId" );                           //a selector by Id
    $( ".myClass");                         //a selector by class
    $( "input[name='firstName']");          //input by it's name
    $( "#contents ul.people li");           //ul with class people somewhere under a selector with id contents
....more sophisticated filters

    $( ":button");                          //all types of buttons (both input and button)
    $( "form :input");                      //all types of input fields in a form
    $( "div.head").length                   //number of div selectors in the page  with class head
and Filtered selections

    $( "div.head" ).has("p");               //div in class head with p selector inside
    $( "h1" ).not(".bar");                  //h1 element that does not have bar class 
    $( "ul li").filter( ".current");        //list without class current
    $( "ul li").first();                    //the first item of a list
    $( "ul li").eq( 5 );                    //the sixth element in a list

Elements manipulation

jquery can add any ability or style to an object

Example 2:

Text To be Styled by jQuery
This is done by addClass and removeClass functions - applying changes of CSS on the text

    $('#addBorder').click (
        function() {
            $('#toBeChanged').addClass('bordered');
        }
    )
    $('#removeBorder').click (
        function() {
            $('#toBeChanged').removeClass('bordered');
        }
    )
    //the above example uses hover and mouse out with multiple css classes
And more powerfull, the toggleClass function

Example 3:

Turns On and Off the styling

    $('#toggler').click (
        function(){
            $('#txtToggled').toggleClass('redBorder');
        }
    )

Showing and hiding elements:

show(), hide() and toggle() functions will effec elements
Affected by the buttons

    
    
    
    
Affected by the buttons
The show,hide and toggle functions can get speed parameters for animation

'slow' , 'medium' and 'fast' or time in milliseconds will determin the speed of the action

Example 4:


CSS manipulations

change the css attributes of an element , without a class it is referring to

Example 5:



Sample text to be styled







back to main page