Download to read offline
jQuery introduction/basic concept /welcome jQuery
- 1. Welcome to jQuery •jQuery is one of many available libraries that – Provide functions for manipulating the web page • With fairly good performance – Help to keep your JS code clean • Indirectly help to protect security (somewhat) • Those are the benefits of using such a library • The downside is that you have an extra dependency and need to learn a new library
- 2. Getting started withjQuery Download a copy of the jquery JS file and store it on your hard drive Reference the JS file in your HTML Access the jQuery functions via the $ object
- 3. Simple example <script src="jquery-1.8.2.min.js"></script> <spanid="stuff"></span> <form><input id="inpt" onchange="doit()"></form> <script> function doit() { $("#stuff").text($("#inpt").val()); } </script> Rewriting the contents of a span. No security problems or cross-browser compatibility problems.
- 4. Warning: You needclean HTML If you want jQuery to perform reliably… Always include <html></html> tag Always put this line before your <html> tag <!DOCTYPE html> This tells the browser to operate in "standards" mode. Always include "" around your attribute values <span id="myid">blah blah</span>
- 5. Examples of thingsyou can do with jQuery • Read the contents of DOM nodes (tag) • Modify the contents of DOM nodes • Modify the appearance of DOM nodes • Create and attach new DOM nodes • Remove DOM nodes • Run a function right when the page is ready • Add and remove event handlers • Retrieve content from a web server • Send content to a web server
- 6. Example: Modifying DOMappearance <!DOCTYPE html><html><head> <script src="jquery-1.8.2.min.js"></script> <style> .nice {background-color: orange; color: white;} </style></head><body> <div id="clickme" onclick="toggle()">Click me!</div> <script> function toggle() { var els = $("#clickme"); if (!els.hasClass('nice')) els.addClass('nice'); else els.removeClass('nice'); } </script>
- 7. Example: Creating newnodes <!DOCTYPE html><html><head> <script src="jquery-1.8.2.min.js"></script> </head><body> <div id="mydiv" onclick="addstuff()">Add stuff</div> <script> function addstuff() { for (var i = 0; i < 10; i++) { $('#mydiv').append('<div class="kid">'+i+'</div>'); } } </script>
- 8. Example: Removing nodes <!DOCTYPEhtml><html><head> <script src="jquery-1.8.2.min.js"></script> </head><body> <div id="mydiv" onclick="addstuff()">Add stuff</div> <script> function addstuff() { var kids = $(".kid"); // this creates a "wrapped set" around all nodes with class=kid if (!kids.length) { for (var i = 0; i < 10; i++) $('#mydiv').append('<div class="kid">'+i+'</div>'); } else { kids.remove(); } } </script>
- 9. Example: Running codeon page ready <!DOCTYPE html><html><head> <script src="jquery-1.8.2.min.js"></script> </head><body> <div id="mydiv" onclick="addstuff()">Add stuff</div> <script> function addstuff() { var kids = $(".kid"); if (!kids.length) { for (var i = 0; i < 10; i++) $('#mydiv').append('<div class="kid">'+i+'</div>'); } else { kids.remove(); } } $(addstuff); </script>
- 10. Example: Manipulating eventhandlers <!DOCTYPE html><html><head> <script src="jquery-1.8.2.min.js"></script> <style> .nice {background-color: orange; color: white;} </style></head><body> <div id="clickme">Click me!</div> <script> function toggle() { var els = $("#clickme"); if (!els.hasClass('nice')) els.addClass('nice'); else els.removeClass('nice'); } $("#clickme").click(toggle); </script>