by ishaq shinwari. jquery is a lightweight, "write less, do more", javascript library. ...
TRANSCRIPT
![Page 1: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/1.jpg)
JQueryBy ishaq shinwari
![Page 2: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/2.jpg)
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
JQurey
![Page 3: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/3.jpg)
Many of the biggest companies on the Web use jQuery, such as:
Google Microsoft IBM Netflix
![Page 4: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/4.jpg)
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
![Page 5: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/5.jpg)
Before you start studying jQuery, you should have a basic knowledge of:
HTML CSS JavaScript
What You Should Already Know
![Page 6: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/6.jpg)
<!DOCTYPE html> <html> <head> <script src="jquery.js"> </script> <script> $(document).ready(function() { $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> <p> this is just checking p</p> </body> </html>
1 .Jquery , to hide text by clicking
![Page 7: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/7.jpg)
$(document).ready(function() { $("p").click(function(){ $(this).hide(); }); });
-------------------------------------- $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements.
![Page 8: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/8.jpg)
<!DOCTYPE html> <html> <head> <script src="jquery.js"> </script> <script> $(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); }); </script> </head> <body>
<p>If you double-click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p>
</body> </html>
2 .Jquery , to hide text by double clicking
![Page 9: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/9.jpg)
$(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); });
![Page 10: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/10.jpg)
<!DOCTYPE html> <html> <head> <script src="jquery.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert("You entered p1!"); }); }); </script> </head> <body>
<p id="p1">Enter this paragraph.</p>
</body> </html>
3 .Mouse enter
![Page 11: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/11.jpg)
$(document).ready(function(){ $("#p1").mouseenter(function(){ alert("You entered p1!"); }); });
![Page 12: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/12.jpg)
<!DOCTYPE html> <html> <head> <script src="jquery.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); }); </script> </head> <body>
<p id="p1">This is a paragraph.</p>
</body> </html>
4 .Mouse Leave
![Page 13: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/13.jpg)
$(document).ready(function(){ $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); });
![Page 14: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/14.jpg)
<!DOCTYPE html> <html> <head> <script src="jquery.js"> </script> <script> $(document).ready(function(){ $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); }); </script> </head> <body>
<p id="p1">This is a paragraph.</p>
</body> </html>
5 .Mouse down
![Page 15: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/15.jpg)
$(document).ready(function(){ $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); });
![Page 16: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/16.jpg)
<!DOCTYPE html> <html> <head> <script src="jquery.js"> </script> <script> $(document).ready(function(){ $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); }); </script> </head> <body>
<p id="p1">This is a paragraph.</p>
</body> </html>
6 .H Over function
![Page 17: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/17.jpg)
$(document).ready(function(){ $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); });
![Page 18: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/18.jpg)
<!DOCTYPE html> <html> <head> <script src="jquery.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>
7 .Hide and click botton
![Page 19: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/19.jpg)
$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); });
![Page 20: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/20.jpg)
<!DOCTYPE html> <html> <head> <script src="jquery.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body>
<button>Toggle</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>
8 .Toggle
![Page 21: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/21.jpg)
$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); });
toggle
![Page 22: By ishaq shinwari. jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript](https://reader030.vdocuments.mx/reader030/viewer/2022032516/56649c785503460f9492d987/html5/thumbnails/22.jpg)
The End