<!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>
<!DOCTYPE html> <html> <head> <title>Try jQuery Online</title> <style> a { cursor: pointer; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> function empty(v) { switch (v) { case '': case 0: case '0': case null: case false: case 'undefined': return true; default: return false; } } function copy_vals() { if( empty($('#a_start').html()) || empty($('#a_end').html()) ) { alert('Empty!'); return; } alert($('#a_start').html() + " - " + $('#a_end').html()); $('#ip_start').val($('#a_start').html()); $('#ip_end').val($('#a_end').html()); } </script> </head> <body> <input type="text" value="1.1.1.1" id="ip_start" /><br /> <input type="text" value="1.1.1.1" id="ip_end" /> <br /><br /> <span type="text" id="a_stat">1.1.1.0</span><br /> <span type="text" id="a_end">1.1.1.255</span> <br /><br /> <a onclick="javascript: copy_vals();">Copy</a> </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){ $.getJSON('/jquery/result.json', function(jd) { $('#stage').html('<p> Name: ' + jd.name + '</p>'); $('#stage').append('<p>Age : ' + jd.age+ '</p>'); $('#stage').append('<p> Sex: ' + jd.sex+ '</p>'); }); }); }); </script> </head> <body> <p>Click on the button to load result.json file −</p> <div id = "stage" style = "background-color:#eee;"> STAGE </div> <input type = "button" id = "driver" value = "Load Data" /> </body> </html>
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#fadeOut").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); $("#fadeIn").click(function(){ //$("#div1").fadeIn(); //$("#div2").fadeIn("slow"); //$("#div3").fadeIn(3000); $("#div1").fadeIn("slow"); $("#div2").fadeIn("slow"); $("#div3").fadeIn("slow"); }); }); </script> </head> <body> <p>Demonstrate fadeIn() / fadeOut() with different parameters.</p> <button id=fadeIn>Click to fade in boxes</button><br><br> <button id=fadeOut>Click to fade out boxes</button><br><br> <!-- display:none는 최초 html로딩시 화면 출력X --> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br> <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>color palette</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <script> $(document).ready(function() { $(".box").click(function(){ var x = $(this).css("background-color") $("h1,p").css({"color": x }); }); $(".box3").click(function(){ $(".colorbox").toggleClass("left") }); }); </script> <style> div { height:30px; width:30px; float:left; margin: 0px; } .box1{ background-color:red;} .box2{ background-color:yellow;} .box3{ background-color:black; position: relative; } .box4{ background-color:blue; clear:both; } .box5{ background-color:green;} .colorbox{ width:100px; position:absolute; top:50%; left: -20% ; transform = translateY(-50%); transition : all 2s ; } .left{ left:0%; } span{ color:#fff; } .inner-box3{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <h1>Color Palette</h1> <p>choose your color</p> <div class="colorbox"> <div class="box box1" > </div> <div class="box box2" > </div> <div class=" box3"> <span class="inner-box3"><i class="fas fa-palette"></i></span> </div> <div class="box box4"> </div> <div class="box box5"> </div> </div> </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(){ $(".add").on("click", function () { var v = $(this).closest("div.content").find("input[name=’rank’]").val(); alert(v); }); }); </script> </head> <body> <div class="content"> <div class="ranking"> <label>Rank:</label> <input type="text" name="rank" value="1"/> </div> <div class="buttons"> <a href="#" class="add">Click</a> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>targilim</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> function visualize(){ let temp = Number($("#temp").val()) if(temp > 25){ $("#container").append("<div class='hot'>It's hot</div>") } else{ $("#container").append("<div class='cold'>It's cold</div>") } }</script> <style> .hot{ width: 100px; height: 25px; background-color: #e67e22; margin: 5px; box-shadow: 1px 1px 3px black; } .cold{ width: 50px; height: 50px; background-color: #3498db; margin: 5px; box-shadow: 1px 1px 3px black; } </style> </head> <body> <input id="temp" placeholder="What's the temperature?"> <button onclick=visualize()>Visualize</button> <div id="container"></div> </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(){ $('#show').click(function() { $('.menu').toggle("slide"); }); }); </script> </head> <body> <div id="show">Click to Show/ Hide div</div> <div class="menu" style="display: none;"> <ol> <li>India</li> <li>US</li> <li>UK</li> <li>Australia</li> </ol> </div> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
