Jquery Programming Examples

Online jQuery Editor

jquery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
<style> 
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>


</body>
</html>

Online jQuery Editor

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() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

demo

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() {
   $("[data-role=choice]").click(function() {
      var selectedEl = $( this );
      selectedEl.siblings( "[data-selected=1]" ).removeAttr("data-selected");
      selectedEl.attr("data-selected", "1");
   });
});

</script>
<style>
div[data-role="choice"][data-selected="1"] {
    background:red;
}
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<div data-role="control" data-type="radio" data-hash="0000000a" data-type-id="18" data-colspan="20" aria-labelledby="checkbox-0000000a-acc radio-0000000a-clearable-button-acc checkbox-0000000a-error-acc checkbox-0000000a-instr-acc" data-is-side-by-side-layout="1" data-renderer-type="tln" data-id="50460682" data-is-active="1"><label data-role="label" id="radio-0000000a-acc" data-i18n-text="control_label_50460682">What do you think of the Notifications panel?</label><dt data-role="instructions" id="radio-0000000a-instr-acc" data-is-empty="1" data-i18n-text="control_instructions_50460682"></dt><div data-role="input-row" data-is-first-row="1" data-is-last-row="1" data-fill-colspan="20"><div data-role="choice"><label data-role="choice" id="radio-0000000a0"><input type="radio" id="0000000a_0" name="c_0000000a" value="<img src=&quot;https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460833.png?_=1550125942268&quot; align=&quot;center&quot; width=&quot;34px&quot; height=&quot;34px&quot;>" data-index="0" data-role="i123-input"><label data-role="radio" for="0000000a_0" aria-labelledby="radio-0000000a0" role="radio"></label><span data-role="option-text" data-i18n-html="control_label_50460682_choice_0" data-skip-markdown="true"><img src="https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460833.png?_=1550125942268" width="34px" height="34px"></span></label></div><div data-role="choice"><label data-role="choice" id="radio-0000000a1"><input type="radio" id="0000000a_1" name="c_0000000a" value="<img src=&quot;https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460834.png?_=1550125947041&quot; align=&quot;center&quot; width=&quot;34px&quot; height=&quot;34px&quot;>" data-index="1" data-role="i123-input"><label data-role="radio" for="0000000a_1" aria-labelledby="radio-0000000a1" role="radio"></label><span data-role="option-text" data-i18n-html="control_label_50460682_choice_1" data-skip-markdown="true"><img src="https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460834.png?_=1550125947041" width="34px" height="34px"></span></label></div><div data-role="choice"><label data-role="choice" id="radio-0000000a2"><input type="radio" id="0000000a_2" name="c_0000000a" value="<img src=&quot;https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460837.png?_=1550125921573&quot; align=&quot;center&quot; width=&quot;34px&quot; height=&quot;34px&quot;>" data-index="2" data-role="i123-input"><label data-role="radio" for="0000000a_2" aria-labelledby="radio-0000000a2" role="radio" aria-checked="true"></label><span data-role="option-text" data-i18n-html="control_label_50460682_choice_2" data-skip-markdown="true"><img src="https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460837.png?_=1550125921573" width="34px" height="34px"></span></label></div><div data-role="choice"><label data-role="choice" id="radio-0000000a3"><input type="radio" id="0000000a_3" name="c_0000000a" value="<img src=&quot;https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460835.png?_=1550125934517&quot; align=&quot;center&quot; width=&quot;34px&quot; height=&quot;34px&quot;>" data-index="3" data-role="i123-input"><label data-role="radio" for="0000000a_3" aria-labelledby="radio-0000000a3" role="radio" aria-checked="true"></label><span data-role="option-text" data-i18n-html="control_label_50460682_choice_3" data-skip-markdown="true"><img src="https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460835.png?_=1550125934517" width="34px" height="34px"></span></label></div><div data-role="choice"><label data-role="choice" id="radio-0000000a4"><input type="radio" id="0000000a_4" name="c_0000000a" value="<img src=&quot;https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460814.png?_=1550126012364&quot; align=&quot;center&quot; width=&quot;34px&quot; height=&quot;34px&quot;>" data-index="4" data-role="i123-input"><label data-role="radio" for="0000000a_4" aria-labelledby="radio-0000000a4" role="radio" aria-checked="true"></label><span data-role="option-text" data-i18n-html="control_label_50460682_choice_4" data-skip-markdown="true"><img src="https://s3-us-west-2.amazonaws.com/userdata123/www/imagefields/50460/50460814.png?_=1550126012364" width="34px" height="34px"></span></label></div></div><label data-role="error" id="radio-0000000a-error-acc" data-is-empty="1"></label></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>

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">Welcome To My Own World.</em>
<p id="myid">Thanks & Regards.</p>
<p id="myid">Thanks & Regards Rajeev Kumar Sriwastava.</p>
</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() {
    //add button click event
   $('#add').click(function(){
       //get input value
       var newItem = $('#item').val();
       //put in a list element
       var newItemL = $('<li></li>').text(newItem);
       //append Close button
       var newItemLC = $(newItemL).append("<button class='rem'> X </button>");
       //append to ordered list
       $('#myList').append(newItemLC);
       //close button click event
        $('.rem').on("click", function(){
        $(this).parent().remove();
   })
     
   })
   
   
});

</script>
<style>
.selected { 
    color:red; 
}
.highlight { 
    background:yellow; 
}
</style>
</head>
<body>
<h1>TO-DO LIST</h1>
<input id="item" type="text" placeholder = "New Item" />
<button id="add">Add</button>
<ol id="myList">
   
</ol>

</body>
</html>

jamesbond

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>

Array2string

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 arr = [ 42, 55 ];
var str1 = arr.toString(); // Gives you "42,55"
alert(arr);
var str2 = String(arr); // Ditto
//alert(str2);

var arr1 = [str2]
alert(arr1);
});

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

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>

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"></p>

<script>
var xml = "<?xml version='1.0' encoding='UTF-8'?><gpx creator='StravaGPX iPhone' xmlns:xsi='https://www.w3.org/2001/XMLSchema-instance' xsi:schemaLocation='https://www.topografix.com/GPX/1/1 https://www.topografix.com/GPX/1/1/gpx.xsd' version='1.1' xmlns='https://www.topografix.com/GPX/1/1'> <metadata>  <time>2019-01-27T13:51:59Z</time> </metadata> <trk>  <name>Afternoon Ride</name>  <type>1</type>  <trkseg>   <trkpt lat='49.9542350' lon='18.9043470'>    <ele>266.2</ele>    <time>2019-01-27T13:51:59Z</time>   </trkpt>   <trkpt lat='49.9542760' lon='18.9043830'>    <ele>266.4</ele>    <time>2019-01-27T13:52:01Z</time>   </trkpt>   <trkpt lat='49.9542350' lon='18.9043210'>    <ele>266.5</ele>    <time>2019-01-27T13:52:24Z</time>   </trkpt>   <trkpt lat='49.9542080' lon='18.9043140'>    <ele>266.5</ele>    <time>2019-01-27T13:52:25Z</time>   </trkpt>   </trkseg> </trk></gpx>";
  xmlDoc = $.parseXML( xml );
  $xml = $( xmlDoc );
  
  
  $(xml).find('trkpt').each(function(){
     
     $ele = $(this).find('ele')       
    console.log($(this).attr('lat') + " " + $(this).attr('lon') + " " + $ele.text() );
               
                    });
  
  $time = $xml.find( "trkpt" )
  $ele = $xml.find( "ele" )[0];
 
// Append "RSS Title" to #someElement
$( "#myid" ).append( $time);
$( "#myid" ).append( "  ");
$( "#myid" ).append( $ele);
 
</script>

</body>
</html>

Follow

Newsletter