Documentation now linked

A new feature has been implemented; all jQuery code snippets we post will now be linked to the appropriate part of the documentation. So, for example, when we post:

PLAIN TEXT
JavaScript:

1.
$('div.foo').find('a').hide().end();

You can click on the function names "find," "hide" and "end" for more information on the functions. These definitions are culled from the same XML file that powers the official API documentation.

Multiple $(document).ready()

by Karl Swedberg

One more great thing about $(document).ready() that I didn't mention in my previous post is that you can use it more than once. In fact, if you don't care at all about keeping your code small, you could litter your javascript file with them.

It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document).ready() function allows you to do that, pain free.

You could, for example, have one .js file that is loaded on every page, and another one that is loaded only on the homepage, both of which would call $(document).ready(). So, inside the tag of your homepage, you would have three references to JavaScript files altogether, like so:

PLAIN TEXT
HTML:

1.

2.

3.


You could also do something like this inside a single .js file:

PLAIN TEXT
JavaScript:

1.
$(document).ready(function() {
2.
// some code here
3.
});
4.
$(document).ready(function() {
5.
// other code here
6.
});

A final note: In a comment to my previous post, Jörn gave this excellent tip for shrinking your code:

Even for this little amount of code is a shortcut available:

$(function() {
// do something on document ready
});

A function passed as an argument to the jQuery constructor is bound to the document ready event.

Coming Up: In my next entry, I'll show how to do a simple effect with jQuery. You'll be amazed at how easy it is!

ज्कुएरी Basic Show and Hide

As promised in my last entry, I'll be showing you a simple effect that you can do using jQuery: showing or hiding something, or a group of things, on the page. The two functions that let us do this are, not surprisingly, show() and hide(). jQuery also comes with another function called toggle(), which will make matching elements visible if they are hidden or hidden if they are visible.

So, let's get down to business. We're going to start with our $(document).ready() function.

PLAIN TEXT

JavaScript:

1. $(document).ready(function() {
2. // we'll put our code here
3. });

Next, we'll choose what we want to show or hide. Hmm, let's see. How about the site's title? Excellent! Now, whenever we refer to an element in jQuery, we start with the dollar sign, $, and we put any CSS or XPATH selector in parentheses right after it: $('css-selector')

Since the site's title is wrapped in an

tag, we'll refer to it this way: $('h1'). We could just as easily refer to all DIVs with a class of "treacle" — $('div.treacle') — or any paragraph that is a chlid of a DIV with an ID of "bonespur" — $('#bonespur > p').

Now for the magic. To make the site's title disappear, we just connect $('h1') and hide() with a dot (.) and stick it all inside the $(document).ready() like so:

PLAIN TEXT

JavaScript:

1. $(document).ready(function() {
2. $('h1').hide();
3. });

The code above will make the site's title hide when the DOM / page loads, which isn't ideal for our purposes here, so I'm going to attach the the hide() event to the first button below instead. The second and third buttons will handle show() and toggle() respectively.

Learning jQuery 1.3

To build interesting, interactive sites, developers are turning to javascript libraries such as jQuery to automate common tasks and simplify complicated ones. Because many web developers have more experience with HTML and CSS than with javascript, the library’s design lends itself to a quick start for designers with little programming experience. Experienced programmers will also be aided by its conceptual consistency.

Revised and updated for version 1.3 of jQuery, this book teaches you the basics of jQuery for adding interactions and animations to your pages. Even if previous attempts at writing javascript have left you baffled, this book will guide you past the pitfalls associated with AJAX, events, effects, and advanced javascript language features.

In this book, the authors share their knowledge, experience, and enthusiasm about jQuery to help you get the most from the library and to make your web applications shine. The book introduces jQuery and shows how you can write a functioning jQuery program in just three lines of code. It then guides you through CSS selectors and shows how to enhance the basic event handling mechanisms to give them a more elegant syntax. You will then learn to add impact to your actions through a set of simple visual effects and also to create, copy, reassemble, and embellish content using jQuery’s DOM modification methods. You will also learn to send and retrieve information with AJAX methods. The book will then step you through many detailed, real-world examples and even equip you to extend the jQuery library itself with your own plug-ins.

DOWNLOAD HERE
Rapidshare.com
http://rapidshare.com/files/224793103/Learning_jQuery_v1.3.pdf
4shared.com
http://www.4shared.com/file/101446785/936f6cef/VnStudyNET_LjQueryv13.html
Mediafire.com
http://www.mediafire.com/?mlymydbgizq