<!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() { $( "#filter" ).change(function() { if($( "#filter" ).val() !== 'all') { $("#tabelle").find("tr").hide(); $("#tabelle").find("[data-lang='"+ $ ( "#filter" ).val() + "']").show(); } else { $("#tabelle").find("tr").show(); } }); }); </script> <style> #tabelle tr td { outline: thin solid grey; padding:5px; } </style> </head> <body> <table id="tabelle"> <tr data-lang="de"><td>eins</td><td>zwei</td><td>drei</td></tr> <tr data-lang="en"><td>one</td><td>two</td><td>three</td></tr> <tr data-lang="es"><td>uno</td><td>dos</td><td>tres</td></tr> </table> <hr> <label for="langs">Nach Sprache filtern: </label> <select id="filter" name="langs"> <option value="all">Alle anzeigen</option> <option value="de">Deutsch</option> <option value="en">Englisch</option> <option value="es">Spanisch</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" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(function() { $( "#draggable" ).draggable(); }); </script> <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } .back{ background-color: lightgrey; width: 50px; padding: 25px; border: 25px solid navy; margin: 25px; } </style> </head> <body> <div id = "draggable" class = "ui-widget-content"> <p class = "back">Drag</p> </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 type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(function() { $( "#draggable" ).draggable(); }); </script> <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } .back{ background-color: lightgrey; width: 50px; padding: 25px; border: 25px solid navy; margin: 25px; } </style> </head> <body> <div id = "draggable" class = "ui-widget-content"> <p class = "back">Drag</p> </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() { $("em").addClass("selected"); $("#myid").addClass("highlight"); $("p"); $("p:contains('Hello')"); }); </script> <style> .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <em title="Bold and Brave">This is first Hello paragraph.</em> <p id="myid">This is second paragraph.</p> </body> </html>
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> var $x = jQuery.noConflict(); alert("Version: "+$x.fn.jquery); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> var $y = jQuery.noConflict(); alert("Version: "+$y.fn.jquery); </script> </head> <body> </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>
<!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>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" src = "/jquery/custom.js"></script> </head> <body> <div id = "mydiv"> Click on this to see a dialogue box. </div> </body> </html>
<html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#mylink").click(function (e) { e.preventDefault(); $(this).toggleClass("selected"); }); }); </script> <style> .selected { color: red; } </style> </head> <body> <a href="#" id="mylink">Click me</a> <p>The above will add and remove class (change color) on click.</p> </body> </html>
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Accordion - Default functionality</title> <link rel = "stylesheet" href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> <script> $(document).ready(function(){ $("#accordion").accordion(); }); </script> </head> <body> <div id = "accordion"> <h3>Android</h3> <div> <p> Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies. </p> </div> <h3>CSS</h3> <div> <p> CSS is the acronym for "Cascading Style Sheet". This tutorial covers both the versions CSS1,CSS2 and CSS3, and gives a complete understanding of CSS, starting from its basics to advanced concepts. </p> </div> <h3>AngularJS</h3> <div> <p> AngularJS is a very powerful JavaScript library. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>PHP</h3> <div> <p> The PHP Hypertext Preprocessor (PHP) is a programming language hat allows web developers to create dynamic content that interacts with databases. PHP is basically used for developing web based software applications. This tutorial helps you to build your base with PHP. </p> <p> Before proceeding with this tutorial you should have at least basic understanding of computer programming, Internet, Database, and MySQL etc is very helpful. </p> </div> </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