I'm a very beginner to jQuery, and I'm having some basic questions: Is it advisable to use jQuery whenever it is possible to replace something by using it? For example, is it prudent to bind all events to elements using it, instead of through HTML? Is it better to host the jQuery .js file and all other relevant files (like JQuery UI) myself, or is it perhaps a better choice to use Google's link (they seem to host it for others too)? When it comes to executing a script when the page is done loading, what way is preferred? $(document).ready(function() {}) $(function() {}) $().ready(function() {}) They seem to all do the same thing, but what is the preferred way of scripting?

Yes. This way your JS is cleanly separated from your html. You can look at your file and in one glance, see how it is affecting your HTML. If it was embedded in the HTML, you would have to look for onClick, onLoad etc and it can get pretty messy for large applications. Client browsers will cache files, so if you use the google version of JQuery, it will not have to download it off your server. Saving you bandwidth. $(document).ready(function() {}) Is the preferred choice. $(function() {}) Just defines the block for execution, it will only execute after the page is ready if it is the last thing on the page to get executed.

javascriptjquery

pimvdb

Reputation: 154868

jQuery - some beginner questions

I'm a very beginner to jQuery, and I'm having some basic questions:

Is it advisable to use jQuery whenever it is possible to replace something by using it? For example, is it prudent to bind all events to elements using it, instead of through HTML?
Is it better to host the jQuery .js file and all other relevant files (like JQuery UI) myself, or is it perhaps a better choice to use Google's link (they seem to host it for others too)?
When it comes to executing a script when the page is done loading, what way is preferred?
1. $(document).ready(function() {})
2. $(function() {})
3. $().ready(function() {})
They seem to all do the same thing, but what is the preferred way of scripting?

Upvotes: 4

Answers (6)

Maxim Gueivandov

Reputation: 2385

For the 3d point, none of them. it is generally recommended, for performance reasons, to place your scripts just before the closing </body> tag. Thus you will not need to wait for the ready event: at this stage, the page is already loaded.

Check Jquery Cookbox (O'Reilly), Chapter 1.2: Executing jQuery/JavaScript Coded Ater DOM Has Loaded but Before Complete Page Load (that book is a must read all in all)

To have a quick idea about this technique, check Move jQuery to the end of body tag? (there are many other posts on SO about this subject)

Upvotes: 1

MikeWyatt

Reputation: 7871

1) Keep all your event binding in your script. This makes it easy to change later. You'll also appreciate having a single place to look for all event-related logic.

2) This has been answered very well already.

3) I prefer #2 for its brevity, but really the ideal way to do it is like this:

jQuery(function($) {
  // Your code using failsafe $ alias here...
});

That avoid conflicts if you are using other frameworks that define $.

Upvotes: 2

Martin Jespersen

Reputation: 26183

1: no this is completely up to you. generally jQuery incurs a performance penalty, because it is an extra layer of abstraction. Only use it, if you feel it helps you do your job easier. However, unless you truely need to optimize for performance the benefit in using it will far outway the cost. jQuery gives you tried and tested crossbrowser compatibility, which, if you wish to cater to all the different browsers out there, can be a costly affair to implement yourself.

2: Use Googles version: that way there is a chance that your users already have it cached and don't need to load it again from your site.

3: 2nd option, the shortcut is very widely used to a point where i'd say it's prefered even though 1st option is nice and specific. I'd never use 3rd option

Upvotes: 1

Mike Ruhlin

Reputation: 3556

I personally don't subscribe to the "cleanly separate JS from HTML" philosophy. I rarely see real world use cases where that has any benefit. Separating HTML from JS often leads to buttons that say "click here to do X" in the HTML but do nothing unless the appropriate javascript is with them. Kind of misses the point. With the case of jQuery and events... I find it much easier to debug an app if I can inspect an HTML button in firebug and see what that button does (by looking at the onclick attribute).
Using the google version can aid with caching, but don't link directly to jquery.com. We did that here once and they went down, took us with them.

Upvotes: 0

jAndy

Reputation: 236032

1.) Yes and No. It is considered best practice to bind events unobtrusive regardless of using jQuery or not (this means, strictly separate javascript, html and any other language). Since jQuery allows to easily bind events it's a better way to use inline-handlers.

2.) You should use a CDN (like google) to deliver static files like jQuery for Caching purposes + they have a huge server network which may even be faster than your own host.

3.) I would stick to the first two calls. Anyway, basically they all will do it, but the best readability probably has $(document).ready(function() {});

Upvotes: 2

Chris Kooken

Reputation: 33900

Yes. This way your JS is cleanly separated from your html. You can look at your file and in one glance, see how it is affecting your HTML. If it was embedded in the HTML, you would have to look for onClick, onLoad etc and it can get pretty messy for large applications.
Client browsers will cache files, so if you use the google version of JQuery, it will not have to download it off your server. Saving you bandwidth.
$(document).ready(function() {}) Is the preferred choice. $(function() {}) Just defines the block for execution, it will only execute after the page is ready if it is the last thing on the page to get executed.

Upvotes: 2

jQuery - some beginner questions

Answers (6)

Related Questions