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.
Post on 14-Dec-2015
216 Views
Preview:
Transcript
JQueryBy 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 on your website.
JQurey
Many of the biggest companies on the Web use jQuery, such as:
Google Microsoft IBM Netflix
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
Before you start studying jQuery, you should have a basic knowledge of:
HTML CSS JavaScript
What You Should Already Know
<!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
$(document).ready(function() { $("p").click(function(){ $(this).hide(); }); });
-------------------------------------- $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements.
<!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
$(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); });
<!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
$(document).ready(function(){ $("#p1").mouseenter(function(){ alert("You entered p1!"); }); });
<!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
$(document).ready(function(){ $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); });
<!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
$(document).ready(function(){ $("#p1").mousedown(function(){ alert("Mouse down over p1!"); }); });
<!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
$(document).ready(function(){ $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); });
<!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
$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); });
<!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
$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); });
toggle
The End
top related