<!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> <p id="deletetag">this is my Second paragraph tag</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() { $("em").addClass("selected"); $("#myid").addClass("highlight"); if(localStorage.getItem('selected')!=null){ console.log(localStorage.getItem('selected')); $('select[name="dropId"]').val(localStorage.getItem('selected')); } }); function a(val){ localStorage.setItem('selected',val); } </script> <style> .selected { color:red; } .highlight { background:yellow; } </style> </head> <body>Car Model <select id ="dropId" name="dropId" onChange="a(this.value)"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> </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() { $("div").click(function () { $(this).replaceWith("<h1>JQuery is Great</h1>"); }); }); </script> <style> #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p>Click on the square below:</p> <span id = "result"> </span> <div id = "division" style = "background-color:blue;"> This is Blue Square!! </div> </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> $(document).ready(function(){ $("p").find("span").end().css("border", "5px blue solid"); }); </script> <style> p{ margin:100px; padding:100px; } </style> </head> <body> <p><span>Hello</span>, how are you?</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style> ul.list-inline { max-width: 50%; font-size:14px; } ul.list-inline li.item { display: inline-block; justify-content: center; } ul.list-inline li.item i { margin-right: 5px; font-size: inherit; line-height: inherit; vertical-align: middle; } ul.list-inline li.item:not(:last-child) { margin-right: 18px; } </style> </head> <body> <div> <ul class="list-inline"> <li class="item"><i class="material-icons">person</i>A</li> <li class="item"><i class="material-icons">shopping_cart</i>C</li> <li class="item"><i class="material-icons">person</i>E</li> </ul> </div> </body> </html>
<html> <head> <title>The Selecter Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <style> .sel{ color:red; } </style> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("table").removeAttr("border").addClass("sel"); }); </script> </head> <body> <table border = "2"> <tr><td>This is first table</td></tr> </table> <table border = "3"> <tr><td>This is second table</td></tr> </table> <table border = "4"> <tr><td>This is third table</td></tr> </table> </body> </html>
<html> <head> <title>The Selecter 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() { $("img").attr({ src: "/images/jquery/j.jpg", title: "jQuery", alt: "jQuery Logo" }); }); </script> </head> <body> <div class = "division" id="divid"> <p>Following is the logo of jQuery</p> <img src = "/jquery/images/jquery-mini-logo.jpg" title = "None" alt = "None" /> </div> </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() { $("#ali").click(function(){ var result = location.href + "/deneme"; location.href = result; }); }); </script> <style> </style> </head> <body> <input type="button" value="test" id="ali"> </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() { var html=""; $("#btnClick").click(function(){ var $li= $("#ulist li").filter(".li"); alert($li.length); if($li.length>0) { $li.each(function(){ html+= "<li>"+$(this).text()+"</li>"; }); } else { html+= "No Element found"; } $("#message").append(html); }); }); </script> </head> <body> <h3>Filter Vs find</h3> <ul id="ulist"> <li id="li1" class="li"> Apple</li> <li id="li2" class="li">Orange</li> <li id="li3"> Grapes </li> </ul> <h4>Output</h4> <ul id="message"> </ul> <br/> <button id="btnClick">Click Me</button> </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 src = "jquery.debug.js" type = "text/javascript"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("div").warning(); $("p").warning(); }); </script> </head> <body> <p>This is paragraph</p> <div>This is division</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
