Pro JavaScript for Web Apps pdf - EBook Free Download

CHAPTER 2 GETTING STARTEDIn Listing 2-4, my selector matches any input element whose type is submit and that is a descendantof the element whose id attribute is buttonDiv. I didn’t need to be quite so precise with the selector,given that it is the only submit element in the document, but I wanted to demonstrate the jQuerysupport for selectors. The $ function returns a jQuery object that contains the selected elements,although there is only one element that matches the selector in this case.Having selected the element, I then call the hide method, which changes the visibility of the selectedelements by setting the CSS display property to none. The input element is like this before the methodcall:and is transformed like this after the method call:The browser won’t show elements whose display property is none and so the input elementbecomes invisible.• Tip The counterpart to the hide method is show, which removes the display setting and returns the elementto its visible state. I demonstrate the show method later in this chapter.Inserting the New ElementNext, I want to insert a new element into the document. Listing 2-5 highlights the statement in theexample that does this.Listing 2-5. Adding a New element to the Document...$(document).ready(function() {$('#buttonDiv input:submit').hide();$('Submit Order').appendTo("#buttonDiv");})...In this statement, I have passed an HTML fragment string to the jQuery $ function. This causesjQuery to parse the fragment and create a set of objects to represent the elements it contains. Theseelement objects are then returned to me in a jQuery object, just as if I had selected elements from thedocument itself, except that the browser doesn’t yet know about these elements and they are not yet partof the DOM.There is only one element in the HTML fragment in this listing, so the jQuery object contains an aelement. To add this element to the DOM, I call the appendTo method on the jQuery object, passing in aCSS selector, which tells jQuery where in the document I want the element to be inserted.The appendTo method inserts my new element as the last child of the elements matched by theselector. In this case, I specified the buttonDiv element, which means that the elements in my HTMLfragment are inserted alongside the hidden input element, like this:21www.it-ebooks.info