jQuery Tutorial

Browse more Jquery Examples
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>Try jQuery Online</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
var num = 25;
var num1 = 26.98;
var string = 'First';
var string1 = "Second";
var boolVal = true;
var boolVal1 = false;
var undefVal;
var nullVal = null;
var student = { age:28,
                name:"Aditi", 
                address:"Thane", 
                dob:"01/02/1999", 
                roll_no:1290,
                getRemark : function() 
                            {
                                return "excellent";
                            } 
};
var varcolors = ["Red","Green","Blue","Yellow","Orange"];
var updateColor = function() {
    varcolors.pop();
    varcolors.push("Voilet");
    return varcolors;
};

$(document).ready(function() {
   $("#div1").css("color","blue");
   $("ul li:first").addClass("selected");
   $("ul li:even").addClass("highlight");
   $("ul li:odd").css("color","green");

   $("#div1").html("<h2>Welcome to Document Style</h2>");
   $("#div1").append(typeof num + " : " + num  + "<br>");
  $("#div1").append(typeof num1 + " : " + num1 + "<br>");
  $("#div1").append(typeof string + " : " + string + "<br>");
  $("#div1").append(typeof string1 + " : " + string1 + "<br>");
  $("#div1").append(typeof boolVal + " : " + boolVal + "<br>");
  $("#div1").append(typeof boolVal1  + " : " + boolVal1 + "<br>");
  $("#div1").append(typeof undefVal + " : " + undefVal + "<br>");
  $("#div1").append(typeof nullVal + " : " + nullVal + "<br>");
  $("#div1").append("<p> <b>Student Object</b> " 
                + "<br> >> Name : " + student.name
                + "<br> >> Address : " + student.address 
                + "<br> >> Age : " + student.age 
                + "<br> >> Date Of Birth : " + student.dob 
                + "<br> >> Roll No : " + student.roll_no 
                + "<br> >> Remark : " + student.getRemark() 
                + " </p>");
 $("#div1").append("<p> <b>Color Array</b> " + varcolors.length
                + "<br>" + varcolors
                + "</p>");
$("#div1").append("<p> <b>Update Color Array</b> " + varcolors.length
                + "<br>" + updateColor()
                + "</p>");

docuemnt.createElement("parastyle");  
//$("#div1").css("color","blue");

});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}

parastyle{
    display:block;
    color:#ff2d20;
    font-family:Arial;
    font-style:bold;
    font-size:20px;
}
</style>
</head>
<body>
<div id="div1">
    
</div><br>
<header>
    Document New Style
</header>
<section>
    <details>
    <summary>Doc Summary 1</summary>
    <article>
        <h3>Section1</h3>
        <ul>
            <li>English</li>
            <li>Maths</li>
            <li>History</li>
            <li>Economy</li>
        </ul>
    </article>
    </details>
</section>
<aside>
    <details>
    <summary>Doc Summary 2</summary>
    <article>
        <h3>Section2</h3>
        <ul>
            <li>Rice</li>
            <li>Chapati</li>
            <li>Bhaji</li>
            <li>Sweet</li>
        </ul>
    </article>
    </details>
</aside>
<footer>
    <parastyle>New Paragraph Style</parastyle>
</footer>
</body>
</html>
jQuery Tutorial

Follow

Newsletter
