JSAPI we will bypass these native JSAPI functions entirely in favor of jQuerys

Jsapi we will bypass these native jsapi functions

This preview shows page 216 - 218 out of 517 pages.

JSAPI, we will bypass these native JSAPI functions entirely in favor of jQuery’s more powerful “wrappers” around them. jQuery also adds additional features and behaviors absent from the native JSAPIs, such as animations and better support for CSS and AJAX (Section 6.6 ). The jquery-rails gem documentation explains how to manually add jQuery to your app if using a Rails version earlier than 3.1.
Image of page 216
jQuery defines a global function jQuery() (aliased as $() ) that, when passed a CSS selector (examples of which we saw in Figure 2.5 ), returns all of the current page’s DOM elements matching that selector. For example, jQuery(’#movies’) or $(’#movies’) would return the single element whose ID is movies , if one exists on the page; $(’h1.title’) would return all the h1 elements whose CSS class is title . A more general version of this functionality is .find( selector ) , which only searches the DOM subtree rooted at the target. To illustrate the distinction, $(’p span’) finds any span element that is contained inside a p element, whereas if elt already refers to a particular p element, then elt.find(’span’) only finds span elements that are descendants of elt . The call jQuery.noConflict() “undefines” the $ alias, in case your app uses the browser’s built-in $ (usually an alias for document.getElementById ) or loads another JavaScript library such as Prototype that also tries to define $ . Property or function, example Value/description $( dom-element ) $(this) Returns a set of jQuery-wrapped DOM element(s) specified by the argument, which can be a CSS3 selector (such as ’span.center’ or ’#main’ ), the element object returned by the browser’s getElementById function, or in an event handler, the element that received the event, named by this . The return value of this function is suitable as the target for any of the below calls. (Recall that the term target is used in JavaScript the way receiver is used in Ruby.) is( cond ) Test if the element is ’:checked’, ’:selected’, ’:enabled’, ’:disabled’ . Note that these strings were chosen to resemble Ruby symbols, though JavaScript doesn’t have symbols. addClass() , removeClass() , hasClass() Shortcuts for manipulating the class attribute: add or remove the specified CSS class (a string) from the element, or test whether the given class is currently associated with the element. insertBefore() , insertAfter() Insert the target element(s) before or after the argument. That is, newElt.insertBefore(existingElt) inserts newElt just before existingElt , which must exist. remove() Remove the target element(s) from the DOM. replaceWith( new ) Replace the target element(s) with the new element(s) provided. clone() Return a complete copy of the target element, recursively cloning its descendants. html() , text() Return (with no argument) or set (with one argument) the element’s complete HTML content or plain-text content. If the element has other elements nested inside it, you can replace its HTML with nested elements but don’t have to, but replacing its text will obliterate the nested elements.
Image of page 217
Image of page 218

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