Jquery Programming Examples

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" language = "javascript">
       function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print(); 
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Online jQuery Editor

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>

memmem

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 src="https://www.w3resource.com/jquery-plugins/jquery.maskedinput-master/jquery.maskedinput.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
   $("em").addClass("selected");
   $("#myid").addClass("highlight");
   $("input[title='cellphone'").mask("2018-99999");
});

</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>
<input title="cellphone" type="text" />
</body>
</html>

Online jQuery Editor

jquery

<html>
    <head>
        <title>Check it </title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
             $(document).bind('mouseup', function(){
             var content =  getSelected();
                console.log(content)
            });
    });
       
        function getSelected(){
            var t;
            if(window.getSelection){
               t = window.getSelection();console.log(t)
               var start = t.focusOffset;
               var end = t.baseOffset;
               t = t.anchorNode.data;
               console.log(String(t).slice(start, end))
            } else if(document.getSelection){
                t = document.getSelection()
            }  else if (document.selection) {
                 t = document.selection.createRange().text;
            }
            return t;
        }
    </script>
    </head>
   
    <body>
        <div>sdjkfsdh fkljsd fkjsd<br>sdfsdjklfhsdlkjfhsdklfjs<br>sflk;sdjfsdkl;fjsdl;fjkl;</div>
    </body>
</html>

JQuery

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() {
   var input = $('#username1')
   var progres = $(input).next().children()
   console.log('input ', progres.css("background", "yellow"))
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<input id='username1' value='ddd' />
<div class='test'>
    <p class='progress'>tes tes tes tes tes tes</p>
</div>
<hr />
<input id='username2' value='ddd' />
<div class='test'>
    <p class='progress'>tes tes tes tes tes tes</p>
</div>
<hr />
<input id='username3' value='ddd' />
<div class='test'>
    <p class='progress'>tes tes tes tes tes tes</p>
</div>
<hr />
<input id='username4' value='ddd' />

<div class='test'>
    <p class='progress'>tes tes tes tes tes tes</p>
</div>
<hr />
</body>
</html>

mocha

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>
var timeout = 1000;
var action = function() {
   $("#hue1").animate({height: '700px'}, 1000);
   $("#hue2").animate({height: '500px'}, 1000);
   $("#hue3").animate({height: '100px'}, 1000);
   $("#hue1").animate({height: '800px'}, 1000);
   $("#hue2").animate({height: '100px'}, 1000);
   $("#hue3").animate({height: '300px'}, 1000);
   $("#hue1").animate({height: '1000px'}, 1000);
   $("#hue2").animate({height: '200px'}, 1000);
   $("#hue3").animate({height: '200px'}, 1000);
    setTimeout(action, timeout);
};
action();

$(document).ready(function() {
   $("#hue1").css('background-color', 'red');
   $("#hue2").css('background-color', 'green');
   $("#hue3").css('background-color', 'blue');
   $(".tag").css('width', '100px');
   $(".tag").css('position', 'fixed');
   $("#hue1").css('left', '10px');
   $("#hue2").css('left', '120px');
   $("#hue3").css('left', '230px');
   $(".tag").css('bottom', '200px');
   $(".tag").css('height', '0px');
   action();
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
    <div class="tag" id="hue1"></div>
    <div class="tag" id="hue2"></div>
    <div class="tag" id="hue3"></div>
</body>
</html>

mocha

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>
var timeout = 1000;
var action = function() {
   $("#hue1").animate({height: '700px'}, 1000);
   $("#hue2").animate({height: '500px'}, 1000);
   $("#hue3").animate({height: '100px'}, 1000);
   $("#hue1").animate({height: '800px'}, 1000);
   $("#hue2").animate({height: '100px'}, 1000);
   $("#hue3").animate({height: '300px'}, 1000);
   $("#hue1").animate({height: '1000px'}, 1000);
   $("#hue2").animate({height: '200px'}, 1000);
   $("#hue3").animate({height: '200px'}, 1000);
    setTimeout(action, timeout);
};
action();

$(document).ready(function() {
   $("#hue1").css('background-color', 'red');
   $("#hue2").css('background-color', 'green');
   $("#hue3").css('background-color', 'blue');
   $(".tag").css('width', '100px');
   $(".tag").css('position', 'fixed');
   $("#hue1").css('left', '10px');
   $("#hue2").css('left', '120px');
   $("#hue3").css('left', '230px');
   $(".tag").css('bottom', '200px');
   $(".tag").css('height', '0px');
   action();
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
    <div class="tag" id="hue1"></div>
    <div class="tag" id="hue2"></div>
    <div class="tag" id="hue3"></div>
</body>
</html>

Test

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>

("p").addClass("red")("anyElement").addClass("selected-changed-to-red")("#anyElementById").addClass("highlight-yellow")

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-changed-to-red");
   $("#anyElementById").addClass("highlight-yellow");
});
</script>
<style>
.selected-changed-to-red { 
    color:red; 
}
.highlight-yellow { 
    background:yellow; 
}
</style>
<article>
<em title="Bold and Brave">This is first paragraph hOver "Bold and Brave".</em>
<p id="anyElementById" title="Shy and Isolated">This is second paragraph "Shy and Isolated"</p>
</article>
</body>
</html>

jquery square box example

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 src="https://coffeescript.org/extras/coffee-script.js"></script>
	  
      <script type="text/coffeescript">
        $(document).ready ->
          $('div').click ->
            $(this).before '<div class="div"></div>'
            return
          return
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
	
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
		
   </body>
	
</html>

Follow

Newsletter