Jquery Programming Examples

Call a jQuery Library Function

jquery

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

CDN Based Version

jquery

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

jQuery Using Html

jquery

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

animesh

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

Enter

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

1234

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

Close button jquery

jquery

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<!--<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>-->
<style>
.form-group {
    margin-bottom: 15px;
}
.position-popup {
    position: absolute;
    left: 434px;
    top: 90px;
    width: 50%;
    height: 30%;
    z-index: 1;
}
.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #777;
    position: absolute;
    margin-left: -9px;
    top: 11px;
}
float {
    /* position: fixed; */
    background-color: white;
    color: #000;
    padding: 53px;
    border: 1px solid #777 !important;
    width: 100% !important;
    height: 100% !important;
    /* border: 1px solid #aaa; */
    /* border-radius: 4px; */
    padding: 60px 44px 14px;
    /* display: inline-block; */
    /* left: 34%; */
    /* width: 30%; */
}
</style>
</head>
<body>

<!--<p>This is a paragraph.<button>Toggle between slide up and slide down for a p element</button></p>-->

<div class="form-group col-md-4 col-xs-12 position-popup" >
                    <div class="arrow-left">
                    </div>
                    <div class="float">
                        <p>Change sailing date and passenger traveling from the dropdown.</p>
                        <div class="">
                            <button type="button" class="btn btn-default btn-sm close-float">Close</button>
                        </div>
                    </div>
                    <script>
                        $(document).ready(function(){
                         //  // Closing popover code
                         $(document).on('click', '.close-float', function() {
                             $('.float, .arrow-left').remove();
                         });

                        
                            window.scrollTo(0,( $('#rooms-available-header').offset().top - 280));
                            setTimeout(function(){ // Showing Popover code
                                $('.position-popup').show();
                            }, 2000);

                        
                         /*$(".close-nav").click(function(){
                            $(".remove-in").hide();
                        });

                         $(".show-nav").click(function(){
                            $(".remove-in").show();
                        });*/
                     });
                    </script>
</div>

</body>
</html>

7889

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

test1

jquery

<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>dsa
<em title="Bold and Brave">This is first paragraph.</em>
<p id="myid">This is second paragraph.</p>
</body>
</html>

jQuery Tutorial

jquery

<!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>

Follow

Newsletter