JQuery 101.

JQuery Basic Syntax

• $("a")
• $('a')
• $(document)
• $("#elementID")
• $(".className")

Load the event in JQuery

$(document).ready (function () {
    ...
} );

By ID

$(document).ready (function () {
    // getElementById("linkOne")
    $("#linkOne").css("color", "#abacad");
} );

By class

$(document).ready (function () {
    $(".className").css("color", "#abacad");} );

By Type

$(document).ready (function () {
    $('div').css("color", "#abacad");} );
    $('a').css("color", "#abacad");} );

By Hierarchy

$(document).ready (function () {
    $("div a").css("color", "#abacad");} );
    $("div > p").css("color", "#abacad");} );
    $("#linkOne a").css("color", "#abacad");} );
    $("p:nth-child(3)").css("color", "#abacad");} );
} );

By Position/Index

$(document).ready (function () {
    $("p:first").css("color", "#abacad");} );
    $("p:last").css("color", "#abacad");} );
    // To select second <p> element
    $("p")[1].css("color", "#abacad");} );
    // To select third <p> element or third paragraph
    $("p:eq(3)").css("color", "#abacad");} );
    // To select even number <p> element
    $("p:even").css("color", "#abacad");} );
} );

By Attribute

$(document).ready (function () {
    // Select all images that have "alt" attribute
    $("img[alt]")[1].css("color", "#abacad");} );
    // Select images that have "alt" attribute set to text
    $("img[alt='text']")[1].css("color", "#abacad");} );
    // Select images that have "alt" attribute set to "text"
    $('img[alt="text"]')[1].css("color", "#abacad");} );
    // or
    $("img[alt=\"text\"]")[1].css("color", "#abacad");} );
} );