• jQuery Fundamentals

    What is jQuery?

    In jQuery Fundamentals, jQuery is a lightweight JavaScript library with thought “write less, do more”. The purpose of jQuery is to make it much easier to use JavaScript on your website.

    jQuery also simplifies a lot of complicated programming ways from JavaScript, like AJAX calls and DOM manipulation.

    The jQuery library contains the following features:

    • HTML/DOM manipulation
    • CSS manipulation
    • HTML even methods
    • Effects and animations
    • AJAX
    • Utilities

    Install jQuery to your Web Projects:

    To use jQuery, you need to download the jQuery Library, and copy/paste in “js” folder under your project folder. The jQuery library is a single JavaScript file, and you reference to it using the HTML <script> tag.

    There are two versions of jQuery available for downloading:

    1. Production version – this is for your live website because it has been minified and compressed.
    2. Development version – this is for testing and development (uncompressed and readable code).

    Both versions can be downloaded from www.jQuery.com

    jQuery Website Download Image

    jQuery Website Download Image

    jQuery Syntax:

    With jQuery you select (capture) HTML element and perform “action” on them.

    Basic Syntax:         $(selector).action()

    Where,

    • A $ sign define/access jQuery
    • A (selector) to “query (or find)” HTML elements
    • A jQuery action() t be performed on the elements(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”.

    The Document Ready Event:

    All jQuery methods are always inside a document ready event. This is to prevent any jQuery code from running before the document is finished loading.

    Syntax:

    $ (document).ready(function(){
    //jQuery methods go here…
    });

    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.

    The jQuery developers have also created an even shorter method for the document ready event:

    $(function(){
    //jQuery methods go here…
    });

    Appreciate my work :Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg thisShare on YummlyShare on VKFlattr the authorBuffer this page

Leave a Reply

Your email address will not be published. Required fields are marked *