HTML and CSS Reference
In-Depth Information
through all the steps required to fade the new content in. At this point, I should explain
one of the other nifty features of jQuery—method chaining. Nearly all jQuery methods
return the object of the method. So, if I use hide() to hide something, the method
returns whatever it was that I hid. This makes it convenient to call multiple methods on
the same object in succession.
In this case, I call hide() , appendTo() , fadeIn() , and css() on the jQuery object repre-
senting the new content that I created. First, I pass the content variable to $() ; this allows
me to call jQuery's methods on the content. Then, I call hide() on it so that it doesn't
appear instantly when I append it to the list.
After that, I use appendTo() to append it to the list. The difference between append()
and appendTo() is that with append() , the object of the method is the selector that repre-
sents the container, and the method parameter is the content to be appended, whereas
with appendTo() , the content to be appended is the object and the selector for the con-
tainer is the method parameter. In this case, using appendTo() makes it easier to chain all
of these method calls.
After I've appended the hidden content to the list, I call fadeIn('slow') to make it grad-
ually appear. Then, finally, I call css(“display”, “list-item”) on the new content,
because when fadeIn() is done, it sets the display property for the list item to block ,
which causes the bullet for the list item not to appear in some browsers. Setting the
display property to list-item ensures that a bullet is displayed.
AJAX and jQuery
One of the primary reasons programmers started adopting JavaScript libraries was that
they made it much easier to use AJAX techniques on their websites and applications?
What's AJAX? It's a description for functionality that uses a JavaScript feature called
XmlHttpRequest to make requests to the server in the background and use the results
within the page.
The Web is based around the concept of pages. When you click a link or submit a form,
usually you leave the page that you're on and go to a new page with a different URL (or
refresh the current page). Frames added the ability to split a page into sections and
refresh each section independently. So, you could click a link in a navigation frame and
reload the main content while leaving the other sections alone. AJAX is about retrieving
content from the server and then placing it on the page using JavaScript.
In the previous example, you saw how you can enter information in a form and add it to
the current page. Using AJAX, you can use the same techniques to retrieve data from the
server and add it to the page. It's possible to write the code necessary to do this sort of
thing from scratch, but jQuery and other libraries make it a whole lot easier.
Search WWH ::

Custom Search