jQuery in easy steps

Mike McGrath

• Publisher: In Easy Steps Limited
• Year: 2014
• ISBN:
  9781840786989
• Topic: Ciencia de la computación
• Subtopic: Programación web

jQuery in Easy Steps begins by explaining how to incorporate the free jQuery library so readers can quickly create interactive web page features by copying the book's examples. It demonstrates how to easily select elements of the web page for manipulation and how to simply produce dynamic responses to user events. Examples illustrate various exciting animation effects and how to employ the power of AJAX to load external data without refreshing the entire web page. The book concludes by demonstrating how readers can use their acquired knowledge to create their very own distributable plugins for the jQuery library. jQuery in Easy Steps assumes readers will already have some basic knowledge of HTML, CSS, and JavaScript and are now ready to embrace the jQuery philosophy of "write less - do more" to enhance their web pages. It has an easy-to-follow style that will appeal to web developers who want to quickly learn the latest dynamic techniques, and to the student who is studying website design at school or college, and to those seeking a career in web development that need a thorough understanding of jQuery.

5

Recognizing events

This chapter demonstrates how to create event-handler functions that provide responses to user actions.

Detecting clicks

When the user clicks, or taps, on an element in a jQuery object a “click event” occurs that can be recognized by that object’s click() method. Similarly, when the user makes a double-click on the element a “dblclick event” occurs that can be recognized by that object’s dblclick() method. An anonymous function argument can be specified to each method to provide a response to each event:

click.html

Add a division to the body of an HTML document

In the head section of the HTML document add a style sheet to specify initial rules for the division

Next, in the head section of the document, add a script block that specifies event-handlers for each click event

Save the document alongside the jQuery library file then open it in a browser and click the division to see response

The css() and text() methods could be chained together here in a single statement with $( this ).css(...).text(...);.

The “click event” of an element in a jQuery object can be fired from the script by calling that object’s trigger() method and specifying the event name (within quote marks) as its argument. This will execute the statements within that event’s nomin...