jQuery Basics

1.    Introduction 

 jQuery is a lightweight JavaScript library that simplifies programming with JavaScript. In other words jQuery is a lightweight, "write less, do more", JavaScript library

·         jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development

·         jQuery can do a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code

·         The jQuery library contains the following features:

o    DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle

o    Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link

o    AJAX Support − The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology

o    Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites

o    Lightweight − The jQuery is very lightweight library - about 19KB in size ( Minified and gzipped )

o    Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+

o    Latest Technology − The jQuery supports CSS3 selectors & basic XPath syntax

·         There are several ways to start using jQuery on your web site. You can:

o    Download the jQuery library from jQuery.com

o    Include jQuery from a CDN, like Google  (CDN : Content Delivery Network; is a system of distributed servers that hosts resources such as images, CSS, JavaScript files etc.)    

·         jQuery is a framework built using JavaScript capabilities. So while developing your applications using jQuery, you can use all the functions and other capabilities available in JavaScript:

o    String: A string in JavaScript is an immutable object that contains none, one or many characters.

o    Numbers: Numbers in JavaScript are double-precision 64-bit format IEEE 754 values. They are immutable, just as strings.

o    Boolean : A boolean in JavaScript can be either true or false. If a number is zero, it defaults to false.

o    Objects : JavaScript supports Object concept very well. You can create an object using the object literal as follows:-

    var emp = {

        name: "Zara",

        age: 10

    };

You can write and read properties of an object using the dot notation as emp.name, o/p:- Zara

o    Arrays : You can define arrays using the array literal as follows −

var x = []; var y = [1, 2, 3, 4, 5];

o    Functions: A function in JavaScript can be either named or anonymous.

o    A named function can be defined using function keyword as follows:-

    function named() {

        // do some stuff here

    }

o    An anonymous function can be defined in similar way as a normal function but it would not have any name.

    var handler = function () {

        // do some stuff here

    }

o    Arguments : JavaScript variable arguments is a kind of array –

    function func(x) {

        console.log(typeof x, arguments.length);

    }

    func();                //==> "undefined", 0

    func(1);               //==> "number", 1

o    Context: JavaScript famous keyword this always refers to the current context. Within a function this context can change, depending on how the function is called –

    $(document).ready(function () {

        // this refers to window.document

    });

    $("div").click(function () {

        // this refers to a div DOM element

    });

o    Document Object Model (DOM): The Document Object Model is a tree structure of various elements of HTML

2.    jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action( )

1.     A $ sign to define/access jQuery

2.     A (selector) to "query (or find)" HTML elements

3.     A jQuery action() to be performed on the element(s)

Examples:

    $(this).hide()      //hides the current element.

    $("p").hide()       //hides all <p> elements.

    $(".test").hide()  //hides all elements with class="test".

    $("#test").hide()  //hides the element with id="test".

3.    Document Ready Event

This is to prevent any jQuery code from running before the document is finished loading (is ready).

Note: - It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

Example:

1. Normal Way

    $(document).ready(function () {

        // jQuery methods go here...

    });

2. Alternate

    $(function () {

        // jQuery methods go here...

    });

4.    Introduction jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.

                      i.        Tag Name Selector: - The jQuery element selector selects elements based on the element name.

    $(document).ready(function () {

        $("button").click(function () {

            $("p").hide();

        });

    });

                     ii.        Tag ID Selector: - The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

    $(document).ready(function () {

        $("button").click(function () {

            $("#IDtestElement").hide();

        });

    });

                    iii.        .Class Selector: - The jQuery class selector finds elements with a specific class.

    $(document).ready(function () {

        $("button").click(function () {

            $(".Classtest").hide();

        });

    });

5.    jQuery Events

                An event represents the precise moment when something happens. Commonly used jQuery event methods are as follows:

Events	Examples
$(document).ready()	$(document).ready(function () {         //user logic     });
click()	$("p").click(function () {         $(this).hide();     });
dblclick()	$("p").dblclick(function () {         $(this).hide();     });
mouseenter()	$("#p1").mouseenter(function () {         alert("You entered p1!");     });
mouseleave()	$("#p1").mouseleave(function () {         alert("Bye! You now leave p1!");     });
mousedown()	$("#p1").mousedown(function () {         alert("Mouse down over p1!");     });
mouseup()	$("#p1").mouseup(function () {         alert("Mouse up over p1!");     });
hover()	$("#p1").hover(function () {         alert("You entered p1!");     });
focus()	$("input").focus(function () {         $(this).css("background-color", "#cccccc");     });
blur()	$("input").blur(function () {         $(this).css("background-color", "#ffffff");     });
on()	$("p").on("click", function () {         $(this).hide();     });

6.    jQuery Attributes/Methods

               We can manipulate some of the basic components when it comes to DOM elements are the properties, attributes, css,  assigned to those elements. Commonly used jQuery attribute methods are:

Events	Examples
attr(properties) This method can be used to fetch the value of an attribute from the first element in the matched set.	$("#myID").attr("custom")
attr(name,value) This method can be used to set the named attribute onto all elements in the wrapped set using the passed value.	$("img").attr("alt", "Sample Image")
removeAttr(name) Remove an attribute from each of the matched elements	$("a").removeAttr("target")
hasClass(class) Returns true if the specified class is present on at least one of the set of matched elements	$("p:last").hasClass("selected")
removeClass(class) Removes all or the specified class(es) from the set of matched elements	$("p:last").removeClass("selected")

And so on.