$(document).ready in javascript

Question

I am new to javascript and jquery. I want to use $(document).ready to register some event handlers. For example, code like this, and my question is what javascript libraries do I need to refer to at the head of the page in order to use $(document).ready? Appreciate if anyone could provide me a simple easy to use sample to learn $(document).ready.

<script>$(document).ready(function()
{
// function implementation internals
});
</script>

thanks in advance, George

jAndy · Accepted Answer · 2010-12-11T10:19:42.903

2

All you need is the jQuery library.

http://www.jquery.com

You can either download the library and include it from your own server or you could use one of the many CDN's which provide the library. For instance:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
     $(document).ready(function() {
           // do something useful
     });
</script>

edited Dec 11 '10 at 10:19

answered Dec 11 '10 at 10:12

jAndy

231,737
57
305
359

Thanks, a bit confused. Could you let me know what code do I need to use to refer? – George2 Dec 11 '10 at 10:13
1

@George2 Download and include the js file from http://docs.jquery.com/Downloading_jQuery – Gopi Dec 11 '10 at 10:16
@Sri Kumar: That works; Andy's version using Google's CDN can be faster though: http://stackoverflow.com/questions/547384/where-do-you-include-the-jquery-library-from-google-jsapi-cdn – Piskvor left the building Dec 11 '10 at 10:25
@Piskvor Cool! I am not aware of it Thanks! Yet, What if the third party server goes down? Still, I know that Google server going down is very very rare :) – Gopi Dec 11 '10 at 10:34
@Sri Kumar: Since it's not a single server, but a worldwide CDN, it's much more likely that your own server goes down. But yes, in the unlikely case the CDN is down, the script couldn't be loaded. – Piskvor left the building Dec 11 '10 at 10:46
@Piskvor :) Though I believe your words if you can sight any reference that Google's CDN will be much faster than to local server will be great! – Gopi Dec 11 '10 at 11:21
@Sri Kumar: See the answer I linked - one of the reasons is concurrent connection limit, esp. in IE: "only *n* connections to the same hostname at the same time" - this sidesteps the limit. – Piskvor left the building Dec 11 '10 at 12:40
@Piskvor Opps! Missed it :) Thanks :) – Gopi Dec 11 '10 at 13:03

score 1 · Answer 2 · answered Dec 11 '10 at 10:16

1

Google keeps copies of a bunch of libraries on their servers, which are pretty reliable.

Just add the following to your <head> section, and place your snippet somewhere below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

answered Dec 11 '10 at 10:16

sje397

41,293
8
87
103

1

I wouldn't necessearily recommend to add `script` tags into the `` section. Probably a better idea to put those at the end of the `` tag. – jAndy Dec 11 '10 at 10:21

score 1 · Answer 3 · answered Dec 11 '10 at 10:20

In summary,

Put the <script> tag provided by sje397 in the <head> section of the page, which provides the only library you need... jQuery.

(Alternatively: <script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"></script>)

Read http://docs.jquery.com/Tutorials:How_jQuery_Works

And you should be good to go.

tester · Answer 4 · 2010-12-11T10:28:16.967

<html>
<head>
</head>
<body>

<div id="someElement">Click Me</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    (function($) {
        $(document).ready(function() {

            $('#someElement').bind('click', function(event) {
                // event.preventDefault(); // you might want to do this if your event handler has a default action associated with it (e.g. a link that gets clicked with an href)
                // do stuff on your event (change click to whatever you need)
            });

        });
    })(jQuery);
</script>
</body>
</html>

$(document).ready in javascript

4 Answers4