Figure 611 The three common uses of this introduced in Sections 63 and 65 See

Figure 611 the three common uses of this introduced

This preview shows page 223 - 225 out of 517 pages.

Figure 6.11: The three common uses of this introduced in Sections 6.3 and 6.5 . See Fallacies and Pitfalls for more on the use and misuse of this . Uses of $() or jQuery() with example Value/side effects, line number in Figure 6.10 $( sel ) $(’.mov span’) return collection of jQuery-wrapped elements selected by CSS3 selector sel (line 16) $( elt ) $(this), $(document), $(document.getElementById(’main’)) When an element is returned by a JSAPI call such as getElementById or supplied to an event-handler callback, use this function to create a jQuery-wrapped version of the element, on which you can call the operations in Figure 6.8 (line 4) Returns a new jQuery-wrapped HTML element
Image of page 223
$( HTML[, attribs] ) $(’<p><b>bold</b>words</p>’) , $(’<img/>’, { src: ’/rp.gif’, click: handleImgClick }) corresponding to the passed text, which must contain at least one HTML tag with angle brackets (otherwise jQuery will think you’re passing a CSS selector and calling it as in the previous table row). If a JavaScript object is passed for attribs , it is used to construct the element’s attributes. (Lines 13–14) The new element is not automatically inserted into the document; Figure 6.8 shows some methods for doing that, one of which is used in line 15. $( func ) $(function () {. . . }); Run the provided function once the document has finished loading and the DOM is ready to be manipulated. This is a shortcut for $(document).ready( func ) , which is itself a jQuery wrapper around the onLoad() handler of the browser’s built-in JSAPI. (line 19) Figure 6.12: The four ways to invoke the overloaded function jQuery() or $() and the effects of each. All four are demonstrated in Figure 6.10 . Summary of jQuery’s DOM and event handlers: You can set or override how various HTML elements react to user input by binding JavaScript handlers or callbacks to specific events on specific elements. jQuery allows you to bind both “physical” user events such as mouse clicks and “logical” pseudo-events such as form submission. Figure 6.9 summarizes a subset of jQuery events. Inside an event handler, jQuery causes this to be bound to the browser’s DOM representation of the element that handled the event. We usually “wrap” the element to get $(this) , a “jQuery- wrapped” element that supports enhanced jQuery operations, such as $(this).is(’:checked’) . One of jQuery’s advanced features is the ability to apply transformations such as show() and hide() to a collection of elements (for example, a group of elements named by a single CSS selector) as well as a single element. For both DRYness and graceful degradation, the binding of event handlers to elements should occur in a setup function that is called when the document is loaded and ready; that way, legacy non-JavaScript browsers will not run the function at all. Passing a function to $() adds it to the list of setup functions that will be run once the document is finished loading.
Image of page 224
Image of page 225

You've reached the end of your free preview.

Want to read all 517 pages?

  • Spring '19
  • Dr.Marcos

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors