<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>
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> >|< Test Modal >|< </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>
<!DOCTYPE html> <html> <head> <title>Try jQuery Online</title> <style> </style> </head> <body> <div class="row" id="options_2"> <div class="col-lg-6 col-md-12 col-sm-12 col-xs-6"> <label><input type="radio" value="deliveryOrder" checked name="orderType" class="icheck">Delivery</label> </div> <div class="col-lg-6 col-md-12 col-sm-12 col-xs-6"> <label><input type="radio" value="pickupOrder" name="orderType" class="icheck" >Take Away</label> </div> </div><!-- Edn options 2 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function() { $('input[name="orderType]').on('change','select',function(){ var $checked = $radios.filter(':checked'); console.log($checked.val()); } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('input').bind("enterKey",function(e){ alert("Enter key pressed"); }); $('input').keyup(function(e){ if(e.keyCode == 13) { $(this).trigger("enterKey"); } }); }); </script> </head> <body> <input type="text"> <p>Press Enter key in the above input text.</p> </body> </html>
<!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 intArray = [1, 2, 3, 4, 5]; $.each(intArray, function (index, element) { if (element == 3){ return false; document.write(element + ','); } }); document.write('<br/>'); $.map(intArray, function (element, index) { if (element == 3) return false; document.write(element + ','); }); }); </script> <style></style> </head> <body> <div id="divResult"></div> </body> </html>
<!DOCTYPE html> <html> <style> html { font-size: 8pt; font-family: Arial, san-serif; } input { border: 1px solid #f0f0f0; } input:checked { border: 0px none #f0f0f0; background-color: black;} table { vertical-align: top; background-color: #f0fff; } td { vertical-align: top; text-align: left; } form { margin: 0 1em 0 1em; padding: .5em; width: 28em; height: 420px; } textarea { border: 0; vertical-align: top; font: inherit; background-color: #f8fbff; } hr { margin: 0 1em 0 0; color: #f8f8f8; border-style: solid; } a { cursor: pointer; } a:hover { background-color: black; color: white; } .field_name { margin-right: 1em; color: grey; font-size: 12pt; text-align: right; } .widgets { display: inline-block; overflow: visible; word-wrap: normal; } #form_table { width: 45em; margin: 0 .5em 0 .5em; border: 1px solid #eeeeff; } #meta_form { margin: 0 2em 0 0; padding: .5em; width: 28em; height: 420px; } #meta { width: 28em; height: 420px; } #form_template { width: 30em; height: 280px; } #form_html { width: 45em; height: 280px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> function htmlEntities(str) { return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); } function titleCase(str) { return str.split(' ').map(w => w[0].toUpperCase() + w.substr(1).toLowerCase()).join(' '); } function quickFill(id, text) { $('#' + id).val(text); refresh_json(template); } function toggle(id, item) { a = $('#' + id).val().split(','); if(a == '') { a = []; } if(a.indexOf(item) == -1) { a.push(item); } else { a.splice(a.indexOf(item), 1); } $('#' + id).val(a); refresh_json(template); } function form(obj) { form_obj = JSON.parse($('#meta').val()); var f = ''; for(let key of Object.keys(obj)) { if(obj[key].label != null) { label = obj[key].label; } else { label = obj[key].id; } if(obj[key].input != null) { f += '\n<tr><td class="field_name">' + label + '</td>\n'; form_key = obj[key]['id'].replace("-", "']['"); if(form_key in form_obj) { s = "form_obj['" + obj[key]['id'].replace("-", "']['") + "']"; if(obj[key].type == 'object') { val = htmlEntities(JSON.stringify(eval(s))); val = val.substr(1).slice(0, -1); } else { val = eval(s); } } else { if('default' in obj[key]) { val = obj[key].default; } else { switch(obj[key].type) { case 'object': val = ''; break; case 'array': val = []; break; case 'int': case 'bool': case 'float': val = 0; break; default: val = ''; break; } } } f += '<td>' + '<input type="' + obj[key].input + '"' + '" size="' + obj[key].size + '"' + '" id="' + obj[key].id + '"' + '" value="' + val + '"' + ((obj[key].input == 'number')? ' min="' + obj[key].min + '" max="' + obj[key].max + '"': '') + ((obj[key].input == 'checkbox' && val != 0)? ' checked': '') + ((obj[key].hasOwnProperty("style"))? ' style="' + obj[key].style + '"': '') + '/><div class="widgets">'; if(obj[key].hasOwnProperty("quick_fill")) { for(let [button, text] of Object.entries(obj[key].quick_fill)) { f += ' <a onclick="javascript:quickFill(\'' + obj[key].id +'\', \'' + text + '\');">' + button + '</a>\n'; } } if(obj[key].hasOwnProperty("script")) { for(let [button, code] of Object.entries(obj[key].script)) { f += ' <a onclick="javascript:' + code + ' refresh_json(template);">' + button + '</a>\n'; } } if(obj[key].hasOwnProperty("toggle")) { for(let [button, text] of Object.entries(obj[key].toggle)) { f += ' <a onclick="javascript:toggle(\'' + obj[key].id +'\', \'' + text + '\');">' + button + '</a>\n'; } } f += '</div></td></tr>\n'; } else { f += '\n<tr><td></td><td class="field_heading">' + key + '</td></tr>\n'; } } $('#form_table').html(f); } function refresh_json(obj) { numeric_type = ['int', 'bool', 'float']; var form_obj = {}; for(let key of Object.keys(obj)) { if(obj[key].type != null) { val = "$('#" + obj[key].id + "').val()"; if(obj[key].input == 'checkbox') { val = '$(\'#' + obj[key].id + '\').prop(\'checked\')'; } if(numeric_type.indexOf(obj[key].type) != -1) { val = 'Number(' + val + ')'; } if(obj[key].type == 'array') { if(eval(val) > '') { val = val + '.split(",")'; } else { val = '[]'; } } if(obj[key].type == 'object') { s = "form_obj['" + obj[key]['id'].replace("-", "']['") + "'] = JSON.parse('{' + " + val + "+ '}')"; } else { s = "form_obj['" + obj[key]['id'].replace("-", "']['") + "'] = " + val; } eval(s); } else { s = "form_obj['" + key + "'] = {}"; eval(s); } } $('#meta').val(JSON.stringify(form_obj, null, 4)); } function clean_json() { $('#meta').val(JSON.stringify(JSON.parse($('#meta').val()), null, 2)); } function init() { try { template = JSON.parse($('#form_template').val()); } catch(e) { template = false; } if(template !== false) { $('#form_template').css('background-color', ''); $('#form_template').val(JSON.stringify(template, null, 2)); form(template); $('#form_html').append(htmlEntities($('#meta_form').html())); refresh_json(template); } else { $('#form_template').css('background-color', '#ffe0e0'); } } </script> <body> <table style="width: 100%;"><tr><td> <form onchange="javascript:refresh_json(template);" id="meta_form"> <table id="form_table"> </table> </form> </td><td style="align: right;"> <textarea id="meta" onchange="javascript:init()"> {} </textarea> </td></tr><tr><td> <textarea id="form_html" readonly></textarea> </td><td style="align: right;"> <textarea id="form_template" onchange="javascript:init();"> {} </textarea> </td></tr> <tr><td colspan=2> <script> init(); </script> </td></tr></table> </body></html>
<!DOCTYPE html> <html> <head> <button id="id">hallo</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#id").on({ mouseover: function(){ $("body").css("background-image", "url('/css/images/css.jpg')"); }, mouseout: function(){ $("body").css("background-image", "url('')"); }, }); }); </script> </head> <body> <p>Move the mouse pointer on the page to change the background image.</p> </body> </html>
<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>
<!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>
<html> <head> <title>jQuery CDN</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type = "text/javascript"> $(document).ready(function(){ document.write("Hello, World!"); }); </script> </head> <body> <h1>Hello</h1> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
