jQuery

4.2.5. jQuery

What is jQuery?

jQuery is the most popular library of java script functions.
With this library complex things, such as document traversal and event handling, animation and networking (Ajax) can be done in much simpler way.

Take a look at several samples directly out of jQuery.com

Change HTML on-the-fly

Get the button element with the class continue and change its HTML to Next Step...

$( "button.continue" ).html( "Next Step..." )

Event Handling

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.


var hiddenBox = $( "#banner-message" );

$( "#button-container button" ).on( "click", function( event ) {

  hiddenBox.show();

});

Communications with server side (Ajax)

Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp html with the returned text.


$.ajax({

  url: "/api/getWeather",

  data: {

    zipcode: 97201

  },

  success: function( data ) {

    $( "#weather-temp" ).html( "" + data + " degrees" );

  }

});

How to start with jQuery library?

First of all download jQuery.js from the source: http://jquery.com
The file name might include the version number, but when you save it use the name jquery.js and store the file in your js-directory.
Provide the reference to this file in your html file, which is in the html-directory. So the reference usually looks like this: src="../js/jquery.js". In the example below we demonstrate handling of the link.
We will use the click function of the library applied to a link object ("a"). You will find this function inside the ready function, which makes sure that this manipulation is available only after the web page is ready, all images are loaded, etc.

 



    

    jQuery

    





    JavaSchool

Another event handler: Prevent Default
When we click on the link we expect a browser to send a request to that URL and to display a new page. This is a default behavior. With another event handler function called preventDefault we can prevent default behavior.

 



    

    jQuery

    





    JavaSchool

Was it clear so far? Highlight the text in question Or

Changing HTML style on-the-fly

We can add or remove a style class. For example, there is the bold class for link objects in our CSS file. (Link objects are described as a in CSS files.)

We can use the functions addClass or removeClass to dynamically change style. In the example below we change the style of the links.

The jQuery library can add animation to a web page from simple to sophisticated custom effects.
.animate()
Perform a custom animation of a set of CSS properties.
.clearQueue()
Remove from the queue all items that have not yet been run.
.delay()
Set a timer to delay execution of subsequent items in the queue.
.dequeue()
Execute the next function on the queue for the matched elements.
.fadeIn()
Display the matched elements by fading them to opaque.
.fadeOut()
Hide the matched elements by fading them to transparent.
.fadeTo()
Adjust the opacity of the matched elements.
.fadeToggle()
Display or hide the matched elements by animating their opacity.
.finish()
Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
.hide()
Hide the matched elements.

Here is an example of hiding the link in a slow fashion. When a user clicks on the link the link is fading and disappears.

$( "a" ).click(function( event ) {

 

    event.preventDefault();

 

    $( this ).hide( "slow" );

 

});

Read more on the effects at http://api.jquery.com/category/effects/

JavaScript and Callbacks

A callback is a function that is passed as an argument to another function.
The callback function is executed after its parent function has completed.
To use callbacks, it is important to know how to pass them into their parent function.

If a callback has no arguments, you can pass it in like this:

$.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).

To pass myCallBack() with parameters, you can use an anonymous function as a wrapper. Note the use of function() {. The anonymous function does exactly one thing: calls myCallBack(), with the values of param1 and param2.
$.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 ).

Assignments:
1. Read more on jQuery at http://learn.jquery.com/
2. Navigate to Ajax section and follow the samples.
3. Create html and js files to demonstrate Ajax examples.
4. Navigate and read jQuery UI.
5. Read Getting Started with jQuery UI: http://learn.jquery.com/jquery-ui/getting-started/
6. Create html and js files to demonstrate jQuery UI examples.
7. Navigate and read jQuery Mobile.
8. Create html and js files in the 4.2.5.jQuery project to demonstrate jQuery Mobile examples.
9. Read about jQuery Selections:
http://learn.jquery.com/using-jquery-core/working-with-selections/
10. Create html and js files to demonstrate jQuery Selections
11. Create 3 QnAs on jQuery
12. Email QnAs, html and js files to dean@ituniversity.us

$.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function( data ) { $( "#weather-temp" ).html( "" + data + " degrees" ); } });

<html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="../js/jquery.js"></script> </head> <body> <a href="http://ITUniversity.us/">JavaSchool</a> <script> $( document ).ready(function() { $( "a" ).click(function( event ) { alert( "You just visited JavaSchool.com" ); }); }); </script> </body> </html>

<html> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="../js/jquery.js"></script> </head> <body> <a href="http://ITUniversity.us/">JavaSchool</a> <script> $( document ).ready(function() { $( "a" ).click(function( event ) { alert( "You cannot see the site because the new handler below prevents default behavior" ); event.preventDefault(); }); }); </script> </body> </html>