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.
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.