jQuery basics
Download as PPTX, PDF0 likes576 views
jQuery is a JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and Ajax interactions more simple. It works across browsers and allows developers to select elements, handle events, and perform animations with simple code. The document discusses how jQuery works, how to launch code when the document is ready, and how to add and remove HTML classes using jQuery. It also introduces callbacks and functions in jQuery, explaining how to pass callback functions into other functions.
jQuery basics
- 2. What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
- 4. How jQuery Works jQuery: The Basics This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating the following HTML page: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <a href="http://jquery.com/">jQuery</a> <script src="jquery.js"></script> <script> // Your code goes here. </script> </body> </html> The src attribute in the <script> element must point to a copy of jQuery. Download a copy of jQuery from the Downloading jQuery page and store t jquery.js file in the same directory as your HTML file.
- 5. Launching Code on Document Ready Unfortunately, the code doesn't run until all images are finished downloading, including banner ads. To run code as soon as the document is ready to be manipulated, jQuery has a statement known as the ready event: 1 2 3 4 5 window.onload = function() { alert( "welcome" ); } To ensure that their code runs after the browser finishes loading the document, many JavaScript programmers wrap their code in an onload function: 1 2 3 4 5 $( document ).ready(function() { // Your code here. }); For example, inside the ready event, you can add a click handler to the link: 1 2 3 4 5 6 7 8 9 $( document ).ready(function() { $( "a" ).click(function( event ) { alert( "Thanks for visiting!" ); }); });
- 6. Save your HTML file and reload the test page in your browser. Clicking the link should now first display an alert pop-up, then continue with the default behavior of navigating to http://jquery.com. For click and most other events, you can prevent the default behavior by calling event.preventDefault() in the event handler: 1 2 3 4 5 6 7 8 9 1 0 1 1 $( document ).ready(function() { $( "a" ).click(function( event ) { alert( "As you can see, the link no longer took you to jquery.com" ); event.preventDefault(); }); });
- 7. Adding and Removing an HTML Class Important: You must place the remaining jQuery examples inside the ready event so that your code executes when the document is ready to be worked on. Another common task is adding or removing a class. First, add some style information into the <head> of the document, like this: 1 2 3 4 5 <style> a.test { font-weight: bold; } </style> Next, add the .addClass() call to the script: 1 $( "a" ).addClass( "test" ); All <a> elements are now bold. To remove an existing class, use .removeClass(): 1 $( "a" ).removeClass( "test" );
- 8. Special Effects jQuery also provides some handy effects to help you make your web sites stand out. For example, if you create a click handler of: 1 2 3 4 5 6 7 $( "a" ).click(function( event ) { event.preventDefault(); $( this ).hide( "slow" ); }); Then the link slowly disappears when clicked.
- 9. Callbacks and Functions Unlike many other programming languages, JavaScript enables you to freely pass functions around to be executed at a later time. A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. Callbacks are special because they patiently wait to execute until their parent finishes. Meanwhile, the browser can be executing other functions or doing all sorts of other work. To use callbacks, it is important to know how to pass them into their parent function.
- 10. Callback without Arguments If a callback has no arguments, you can pass it in like this: 1 $.get( "myhtmlpage.html", myCallBack ); When $.get() finishes getting the page myhtmlpage.html, it executes the myCallBack() function. •Note: The second parameter here is simply the function name (but not as a string, and without parentheses).
- 11. Callback with Arguments Executing callbacks with arguments can be tricky. Wrong This code example will not work: 1 $.get( "myhtmlpage.html", myCallBack( param1, param2 ) ); The reason this fails is that the code executes myCallBack( param1, param2 ) immediately and then passes myCallBack()'s return value as the second parameter to $.get(). We actually want to pass the function myCallBack(), notmyCallBack( param1, param2 )'s return value (which might or might not be a function). So, how to pass in myCallBack() andinclude its arguments? Right To defer executing myCallBack() with its parameters, you can use an anonymous function as a wrapper. Note the use offunction() {. The anonymous function does exactly one thing: calls myCallBack(), with the values of param1 and param2. 1 2 3 4 5 $.get( "myhtmlpage.html", function() { myCallBack( param1, param2 ); }); When $.get() finishes getting the page myhtmlpage.html, it executes the anonymous function, which executes myCallBack( param1, param2 ).
- 12. • Thank you ..