JQuery-2

Index.html 

index.js 

$(function(){

    $("p").css("background-color","rgba(180,180,30,0.8")

    $(".red-box").css("background-color","rgba(180,180,30,0.8")

    $("#list").css("background-color","rgba(180,180,30,0.8")

    $("input[type='text']").css("background-color","rgba(180,180,30,0.8")

    $("h2, p, input").css("background-color","rgba(180,180,30,0.8")

    $("p:last").css("background-color","rgba(180,180,30,0.8")

    $("#list ul:first li:first").css("background-color","rgba(180,180,30,0.8")

    $("ul ul:last li:last").append("<br>I'm gonna be the last sub item");

    $(".red-box").after("<div class='red-box'>Another red box </div>");

    $(".blue-box").before(function(){

        return "<div class='blue-box'>Blue 2</div>"

    });

   $(".green-box").after("<div class='green-box'>green box </div>")

    after(".red-box")

    $("li").replaceWith("<li>replaced</li>");

    $("li").replaceWith(function(){

        return "<li>Replaced with function</li>"

     })

    var firstListItem=$("li:first");

    $("p:first").replaceWith(firstListItem);

    $(".red-box, .blue-box").replaceWith("<div class='green-box'> replaced </div>")

    .css("background-color","rgba(180,180,30,0.8")

    $("<div class='green-box'>").replaceAll(".red-box, .blue-box")

    $("li").remove();

    $("form").children().not("input:text, textarea, br").remove();

    var detachedListItem=$("li").detach(); // later adding possible

    $("#content").append(detachedListItem);

    $("p:first").empty();

   $(".red-box, .blue-box").empty();

   var checkbox = $("input:checkbox") ;

   console.log(checkbox.prop("checked"));

   console.log(checkbox.attr("checked"));

    });

    $(document).ready(function(){

    });

$(function(){

  $(".lightbox").delay(500).fadeIn(1000);

});

//call back functions

$(function(){

  $(".red-box").fadeTo(1000,0,function(){

   $(".green-box").fadeTo(1000,0,function(){

   $(".blue-box").fadeTo(1000,0);

   });

  });

});

$(function(){

  $(".red-box").fadeTo(1000,0.2)

  $(".green-box").delay(1000,0.5)

  $(".blue-box").delay(2000).fadeTo(1000,0.8).fadeOut().delay(500).fadeIn();

});

$(function(){

  $(".red-box").fadeTo(1000,0.2)

  $(".green-box").fadeTo(1000,0.5)

  $(".blue-box").fadeTo(1000,0.8)

});

$(function(){

  $(".blue-box").animate({

    "margin-left":"200px",

    "opacity":"0",

    "height":"50",

    "width":"50px",

     "margin-top":"25px"

  },1000);

  $("p").animate({

    "font-size": "20px"

  },1000)

});

$(function(){

$(".blue-box").animate({

  "margin-left":"200px"

  },1000);

});

$(function() {

  // jQuery goes here...

  // Uncomment this line to fade out the red box on page load

  $(".red-box").fadeOut(2000);

  $(".blue-box").slideUp(2000);

  $(".blue-box").slideDown(3000);

  $("p").hide();

  $("p").slideDown(1000);

});

 $("#btn-alert").click(function(){

    alert("Hello World! Welcome to Jquery tutorial");

});

    $("#chk1").click(function () {

        if(this.checked)

        alert("checked");

      });

    var galleryImage=$(".gallery").find("img").first();

    var images= [

        "/images/laptop-mobile_small.jpg",

        "/images/laptop-on-table_small.jpg",

        "/images/people-office-group-team_small.jpg",

    ];

    var i=0;

    setInterval(function () {

        i = (i + 1) % Images.length;

        galleryImage.fadeOut(function () {

            $(this).attr("src", images[i]);

            $(this).fadeIn();

        });

    }, 2000);

    $(function () {

        $("#btn-alert").click(function () {

            alert("Hello World! Welcome to Tutorialdeep.");

        });

    });

    $(function () {

        $("#chk1").click(function () {

            if (this.checked)

                alert("checked");

        });

    });

   // ------------------------------------------------------------

    var redbox = $(".red-box")

   // alert(redbox.width());

    redbox.css("background-color","#AA7700")

    redbox.css("width","+=40px");

    $("p").css("font-size","18px")

    var properties = $("p").css(["font-size","line-height","color"])

    alert(properties["font-size"])

$(".dummy").removeClass("dummy").addClass("green-box");

$(".red-box").click(function(){

    $(this).fadeTo(500,0.5)

});

$(".red-box").click(); // programatically creating event

$(".green-box").hover(function(){

    $(this).text("I was hovered");

});

var bluebox=$(".blue-box")

bluebox.mouseenter(function(){

  $(this).stop().fadeTo(500,0.5)

});

bluebox.mouseleave(function(){

    $(this).stop().fadeTo(500,1);

});

var firstPar=$("p:first")

firstPar.text("<strong>Hello</strong> world");

firstPar.html("<strong>Hello</strong> world");

    $(function(){

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

       $(this).slideUp();

    });

    $("#content").append("<p> This is dynamically added paragraph<p>")

    });

    $("body").on("mouseenter","li",function(){

        $(this).css("color","#796")

    })

    //  ---not working----

    $(function () {

        ("#btn-click").click({

            user: "peter",

            domain: "petersonhomeroff.com"

        }, function (event) {

            greetUser(event.data);

        });

        });

        function greetUser(userdata) {

            username = userdata.user || "Anonymous";

            domain = userdata.domain || "example.com";

            alert("welcome back " + username + " to domain");

//-----------------------------------------------------------

});