JQuery-2
$(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");
//-----------------------------------------------------------
});