npenchalaiah.files.wordpress.com€¦ · Web viewjQuery hide() and show() $(document

1. jQuery hide() and show() <!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });});</script></head><body><p>If you click on the "Hide" button, I will disappear.</p><button id="hide">Hide</button><button id="show">Show</button></body></html>OUTPUT:

2. jQuery fadeToggle() Method <!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });});</script></head><body><p>Demonstrate fadeToggle() with different speed parameters.</p><button>Click to fade in/out boxes</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>OUPUT:

3. jQuery slideDown() Method <!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>OUTPUT:

4. jQuery Animations - The animate() Method <!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '250px'}); });});

</script> </head><body><button>Start Animation</button><p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>OUTPUT:

5. Get Content - text(), html(), and val() <!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });});</script></head><body><p id="test">This is some <b>bold</b> text in a paragraph.</p><button id="btn1">Show Text</button><button id="btn2">Show HTML</button></body></html>

OUTPUT:

6. Set Content - text(), html(), and val() <!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });});</script></head><body><p id="test1">This is a paragraph.</p><p id="test2">This is another paragraph.</p><p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p><button id="btn1">Set Text</button><button id="btn2">Set HTML</button><button id="btn3">Set Value</button></body></html>OUTPUT:

7. jQuery addClass() Method <!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); });});</script><style>

.important { font-weight: bold; font-size: xx-large;}

.blue { color: blue;}</style></head><body><h1>Heading 1</h1><h2>Heading 2</h2>

<p>This is a paragraph.</p><p>This is another paragraph.</p><div>This is some important text!</div><br><button>Add classes to elements</button></body></html>OUTPUT:

jQuery Event Methods

8. jQuery click() Method

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>$(document).ready(function(){ $("p").click(function(){ alert("The paragraph was clicked."); });});</script></head><body><p>Click on this paragraph.</p></body></html>OUTPUT:

9. The $() factory function

<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() { $("p").css("background-color", "yellow"); }); </script> </head>

<body> <div> <p class = "myclass">This is a paragraph.</p> <p id = "myid">This is second paragraph.</p> <p>This is third paragraph.</p> </div> </body></html>OUTPUT:

10. Find Elements by Index

<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() { $("li").eq(2).addClass("selected"); }); </script>

<style> .selected { color:red; } </style> </head>

<body> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </body></html>OUTPUT:

11. DOM Content Manipulation


<script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("div").click(function () { var content = $(this).html(); $("#result").text( content ); }); }); </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>

OUTPUT:

12. Binding Event Handlers


<script type = "text/javascript" language = "javascript"> $(document).ready(function() { $('div').bind('click', function( event ){ alert('Hi there!'); }); }); </script>

<style> .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p>Click on any square below to see the result:</p>

<div class = "div" style = "background-color:blue;">ONE</div> <div class = "div" style = "background-color:green;">TWO</div> <div class = "div" style = "background-color:red;">THREE</div> </body></html>OUTPUT:

13. jQuery – Interactions-DRAGGABLE <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>

<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>OUTPUT:

14. jQuery - Interaction Drop-able <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"> $(function() { $( "#draggable" ).draggable();

$( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" ); } }); });

</script> <style>

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable { width: 150px; height: 150px;

padding: 0.5em; float: left; margin: 10px; } </style> </head>

<body> <div id = "draggable" class = "ui-widget-content"> <p>Drag</p> </div>

<div id = "droppable" class = "ui-widget-header"> <p style = "background-color: aquamarine;height: 50;">Drop here</p> </div>

</body></html>OUTPUT:

15. jQuery - Interaction Resize-able <!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Resizable functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"> </script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>

 <style> .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; }

.ui-widget-content { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; }

#resizable-14{ width: 150px; height: 150px; padding: 0.5em;text-align: center; margin: 0; } </style>



<script> $(function() {

$( "#resizable-14" ).resizable({

create: function( event, ui ) { $("#resizable-15").text ("I'm Created!!"); },

resize: function (event, ui) { $("#resizable-16").text ("top = " + ui.position.top + ", left = " + ui.position.left + ", width = " + ui.size.width + ", height = " + ui.size.height); } });

}); </script> </head>

<body>

 <div id = "resizable-14" class = "ui-widget-content"> <h3 class = "ui-widget-header">Resize !!</h3> </div><br>

<span id = "resizable-15"></span><br> <span id = "resizable-16"></span> </body></html>OUTPUT:

16. jQuery - Interaction Select-able <!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Selectable - 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>


<style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style>

<script> $(function() { $( "#selectable" ).selectable(); }); </script> </head>

<body> <ol id = "selectable"> <li class = "ui-widget-content">Item 1</li> <li class = "ui-widget-content">Item 2</li> <li class = "ui-widget-content">Item 3</li> <li class = "ui-widget-content">Item 4</li> <li class = "ui-widget-content">Item 5</li> <li class = "ui-widget-content">Item 6</li> <li class = "ui-widget-content">Item 7</li> </ol> </body></html>OUTPUT:

17. jQuery - Interaction Sort-able <!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Sortable - 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> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style>

<script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> </head>

<body> <ul id = "sortable"> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> <li class = "ui-state-default"><span class = "ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> </ul> </body></html>OUTPUT:

18. jQuery - Widget accordion <!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Accordion Example </title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script> $(function() { $( "#accordion-1" ).accordion(); }); </script> <style> #accordion-1{font-size: 14px;} </style> </head>

<body> <div id = "accordion-1"> <h3>Tab 1</h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <h3>Tab 2</h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <h3>Tab 3</h3> <div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </body></html>

OUTPUT:

19. jQuery - Widget AutoComplete<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Autocomplete functionality</title>

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  <script> $(function() { var availableTutorials = [ "ActionScript", "Bootstrap", "C", "C++", ]; $( "#automplete-1" ).autocomplete({ source: availableTutorials }); }); </script> </head> <body>  <div class = "ui-widget"> <p>Type "a" or "s"</p> <label for = "automplete-1">Tags: </label> <input id = "automplete-1"> </div> </body></html>OUTPUT:

20. jQuery - Widget Button<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Buttons functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#button-1, #button-2, #button-3, #button-4" ).button(); $( "#button-5" ).buttonset(); }); </script> </head>

<body> <button id = "button-1">A button element</button> <input id = "button-2" type = "submit" value = "A submit button"> <a id = "button-3" href = "">An anchor</a> <input type = "checkbox" id = "button-4" > <label for = "button-4">Toggle</label> <br><br> <div id = "button-5"> <input type = "checkbox" id = "check1"> <label for = "check1">Left</label> <input type = "checkbox" id = "check2"> <label for = "check2">Middle</label> <input type = "checkbox" id = "check3"> <label for = "check3">Right</label> </div> </body></html>OUTPUT:

21. jQuery - Widget DatePicker<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Datepicker functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  <script> $(function() { $( "#datepicker-13" ).datepicker(); $( "#datepicker-13" ).datepicker("show"); }); </script> </head> <body>  <p>Enter Date: <input type = "text" id = "datepicker-13"></p> </body></html>OUTPUT:

22. jQuery - Widget Dialog<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Dialog functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  <style> .ui-widget-header,.ui-state-default, ui-button { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } </style>  <script> $(function() { $( "#dialog-1" ).dialog({ autoOpen: false, }); $( "#opener" ).click(function() { $( "#dialog-1" ).dialog( "open" ); }); }); </script> </head> <body>  <div id = "dialog-1" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div> <button id = "opener">Open Dialog</button> </body></html>OUTPUT:

23. jQuery - Widget Menu<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Menu functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  <style> .ui-menu { width: 200px; } </style>  <script> $(function() { $( "#menu-1" ).menu(); }); </script> </head> <body>  <ul id = "menu-1"> <li><a href = "#">Spring</a></li> <li><a href = "#">Hibernate</a></li> <li><a href = "#">Java</a> <ul> <li><a href = "#">Java IO</a></li> <li><a href = "#">Swing</a></li> <li><a href = "#">Jaspr Reports</a></li> </ul> </li> <li><a href = "#">JSF</a></li> <li><a href = "#">HTML5</a></li> </ul> </body></html>

OUTPUT:

24. jQuery - Widget ProgressBar<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI ProgressBar functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> .ui-widget-header { background: #cedc98; border: 1px solid #DDDDDD; color: #333333; font-weight: bold; } </style> <script> $(function() { $( "#progressbar-1" ).progressbar({ value: 30 }); }); </script> </head> <body> <div id = "progressbar-1"></div> </body></html>OUTPUT:

25. jQuery - Widget Slider<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Slider functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

 <script> $(function() { $( "#slider-1" ).slider(); }); </script> </head> <body>  <div id = "slider-1"></div> </body></html>OUTPUT:

26. jQuery - Widget Spinner<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Spinner functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  <style type = "text/css"> #spinner-1 input {width: 100px} </style>  <script> $(function() { $( "#spinner-1" ).spinner(); }); </script> </head> <body>

 <div id = "example"> <input type = "text" id = "spinner-1" value = "0" /> </div> </body></html>OUTPUT:

27. jQuery - Widget Tab<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tabs functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css " rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script> $(function() { $( "#tabs-1" ).tabs(); }); </script>

<style> #tabs-1{font-size: 14px;} .ui-widget-header { background:#b9cd6d; border: 1px solid #b9cd6d; color: #FFFFFF; font-weight: bold; } </style> </head>

<body> <div id = "tabs-1"> <ul> <li><a href = "#tabs-2">Tab 1</a></li> <li><a href = "#tabs-3">Tab 2</a></li> <li><a href = "#tabs-4">Tab 3</a></li> </ul> <div id = "tabs-2"> <p> Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... </p> </div> <div id = "tabs-3"> <p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div id = "tabs-4"> <p> ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </body></html>OUTPUT:

28. jQuery - Widget Tooltip<!doctype html><html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Tooltip functionality</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  <script> $(function() { $("#tooltip-1").tooltip(); $("#tooltip-2").tooltip(); }); </script> </head> <body>  <label for = "name">Name:</label> <input id = "tooltip-1" title = "Enter You name"> <p><a id = "tooltip-2" href = "#" title = "Nice tooltip"> I also have a tooltip</a></p> </body></html>OUTPUT:

Documents

npenchalaiah.files.wordpress.com€¦ · Web viewjQuery hide() and show() $(document