Questions about jQuery

JavaScript
1

Hi! (First post here ^^)

I’m learning Javascript and jQuery at the moment, so I’m reading the Sitepoint book “jQuery: Novice to Ninja”. I have some questions on some passages that I hope you will be able to answer.

  1. The document ready function is there in order to make the jQuery functions run only after the page is loaded. In the book there’s a passage that says “In the old days of Javascript, the only reliable way to do this was to wait for the entire page (including images) to finish loading before we ran any scripts”. Aren’t the two things just the same? :shifty:

if ($('#disclaimer').is(':visible')) { ... }

The book says “is takes any of the same selectors we normally pass to the jQuery function, and checks to see if they match the elements it was called on” … "is will return true or false depending on wether the elements match the selector.

I can’t understand if #disclaimer is the selector and :visible is the element or viceversa? :shifty:

  1. About callback functions. Isn’t writing
$('#disclaimer').slideUp('slow', function() {
  $('#hideButton').fadeOut();
});

the same as writing

$('#disclaimer').slideUp('slow');
$('hideButton').fadeOut();

?

These are the 3 main questions about chapter 2. I’ll probably have others about the following chapter, but for now this is enough :slight_smile:

Thank you very much in advance for all the answers :slight_smile:

2

Hi D3V4, and welcome to the SitePoint forums :wave:

No they’re not the same. The difference is that in “the old days” as the book calls it, everything, like it says including images, had to be loaded. Now, only the DOM has to be ready. Meaning the browser has to know which elements are on the webpage and how they relate to each other. Images don’t have to do downloaded in order to know what the DOM looks like. So in end-effect the javascript can start sooner now than “in the old days”.

Both #disclaimer and :visible are selectors :slight_smile:
#disclaimer basically says “That element in the DOM (e.g. a div) that has id “disclaimer”), and “:visible” indicates if the element is visible.
You could also do $(”#disclaimer:visible"), that will return the element with id disclaimer that is visisble. $(“disclaimer”).is(“:visible”) returns if the element is visible, and does not return a new jQuery object.

No. The second parameter of the slideUp() function is, like you say, a callback function.
In your first example, $(“#hideButton”).fadeOut() is only then executed when $(“#disclaimer”).slideUp(“slow”) is done (i.e. the animation has completed).
In your second example the two things are executed simultaniously (try both your versions with 4000 instead of “slow” to see this).

No problem, if you have any more questions just ask :slight_smile: