Working with JQuery selectors

By,
Rahul

JQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on website.
JQuery takes 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.
JQuery also helps to simplify a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains the following features:
• HTML/DOM manipulation
• HTML event methods
• CSS manipulation
• Effects and animations
• AJAX
• Utilities

To start working with JQuery you have to download library or include from CDN like Google.
Basic syntax of JQuery is :
$(selector).action()
• $ – define  jquery.
• (selector) – find HTML element(s).
• Action() – to be performed on element(s).

Examples :
$(this).hide() – hides the current element.
$(“p”).show() – shows all paragraphs.
$(“.myclass”).toggle() – toggles all elements with class= myclass
$(“#myid”).show() – shows element with id= myid.

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

The Element selector :
JQuery element selector selects element based on tag (or element) name.
Exampe:
$(“p”) – select all <p>elements .
The #id selector :
JQuery #id selector uses id attribute of HTML tag to find element on the page.

# represents the id selector.
Example:
 $(‘#myid”)–  select element with id=’myid’.
The .class selector :
JQuery .class selector uses class attribute of HTML tag to find element on the page.

. represents the class selector.
Example :
$(“.myclass”)–  selects all elements with class=’myclass’
Select all <p> having class=”intro” - $(“p.intro”)

Examples of JQuery events :
1.When user clicks on button hide elements with class=”hideclass”
$(document).ready(function()
{
    $(“button”).click(function()
    {
        $(“.hideclass”).hide();
    });
});

2.On click hide clicked button
$(document).ready(function()
{
    $(“button”).click(function()
    {
        $(“this”).hide();
    });
});

3.Onpage load hide all div except having class=”donthide”
$(document).ready(function()
{
    $(“div”).not(“.donthide”).hide();
});

4. On mouse hover zoom image
$(document).ready(function()
{
    $(“img”).hover( function()
    {
        $(this).animate({width: ‘+=50’, height: ‘+=50’});
    },
    Function()
    {
        $(this).animate({width: ‘-=50’, height: ‘-=50’});
    });
});