Jquery
•Download as PPTX, PDF•
0 likes•48 views
1) Basic jQuery syntax uses the $ sign to select HTML elements using selectors and perform actions on them using jQuery methods. 2) Code inside jQuery methods is wrapped in a document ready event to ensure the document is fully loaded before executing. 3) Common jQuery selectors include element, class, and ID selectors to target specific elements on the page.
More Related Content
What's hot
What's hot (20)
Similar to Jquery
Similar to Jquery (20)
Recently uploaded
Recently uploaded (20)
Jquery
- 1. Basic syntax is: $(selector).action() A $ sign to define jQuery A (selector)HTML elements A jQuery action() to be performed on the element(s)
- 2. Examples: $("p").hide() - hides all <p> elements. ----------- Document Ready Event Jquery methods are inside the Document Ready Event. $(document).ready(function(){ } ); Why We Do This….? prevent any jQuery code from running before the document is finished loading Example hide an element that is not created yet get the size of an image that is not loaded yet
- 3. jQuery Selectors jQuery start with the dollar sign and parentheses: $(). <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); } ); } ); </script> </head> <body> <p>Jquery Hidden Method.</p> <p> Jquery Hidden Method.</p> <button>Click me</button> </body>
- 4. #id Selector .class Selector Events <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>Click on Me.</p> <p>Click me away!</p> <p>Click me too!</p>
- 5. <script> $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); }); </script> </head> <body> Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email"> </body>
- 6. JQUERY SHOW AND HIDE EFFECTS <script> $(document).ready(function(){ $("#h").click(function(){ $("p").hide(); }); $("#s").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>Hide and show.</p> <button id="h">Hide</button> <button id="s">Show</button> </body>
- 7. FADING EFFECTS: fadeIn() fadeOut() fadeToggle() fadeTo() <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button> <br><br> <div id="div1" style="width:80px;height:80px;display:none;background- color:red;"></div><br> </body> </html>
- 8. Fade OUT <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeOut(); }); }); </script> </head> <body> <p>Demonstrate fadeOut() with different parameters.</p> <button>Click to fade out boxes</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
- 9. FADE TO <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeTo("slow",.5); }); }); </script> </head> <body> <p>Demonstrate fadeTo() with different parameters.</p> <button>Click to fade boxes</button> <br><br> <div id="div1" style="width:80px;height:80px;background- color:red;"></div><br> </body>
- 10. SLIDING EFFECTS <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideUp("slow"); }); }); </script> <style type="text/css"> #panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; } </style> </head> <body> <div id="flip">Click to slide up panel</div> <div id="panel">Hello world!</div> </body>
- 11. <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("slow"); }); }); </script> <style type="text/css"> #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>
- 12. CHANING <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); }); }); </script> </head> <body> <p id="p1">jQuery is fun!!</p> <button>Click me</button>
- 13. <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("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 the panel down or up</div> <div id="panel">Hello world!</div>