jQuery quick start snippets

When you want to include jQuery in your webpage there is no need to type it in every time, the best practice should be reused. So here is a litle help for you: Two jQuery quick start snippets: One for and one for Visual Studio. You can find download links at the bottom, but first a few words and the code.


You should put your javascript APIs at the bottom just above the body end tag

If you put the code to include javascript APIs at the bottom of your webpage just above </body> your page will first load the DOM elements, aka the content of your page before any (timeconsuming) javascripts. This will make your page appear to load faster. Also the DOM tree will be ready and you can skip for instance wrapping your jQuery code in some “ready()” code. The DOM is ready for manipulating when your code is reached!


This is the basic javascript for loading jQuery from Google CDN. Using such Content Delivering Networks as Google has many advantages, amoung other that the API can be cached on the client across webpages. However if the CDN fails, you may want to have a fallback version locally (on the server). The snippets have this fallback, so you should download a version  of jQuery and put it locally. I have choosen not to use the “protocol relative-URL”. If you want to, you should just remove the “http:” before the line where jQuery is fetched from Google.


Here is the code outputted by the two snippets:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
    window.jQuery || document.write('<script src="jquery.1.7.1.min.js">\x3C/script>');
<script type="text/javascript">
    (function($, window, undefined) {
      // Your code here, put just above </body>
      // $ = jQuery
    })(jQuery, window)


I learned from the tutorial at net tuts+ Learn jQuery in 30 days about this way to include jQuery – I can higly reccomend that tutorial (its free!). The teacher Jeffrey Way is so cool!


Sublime Text snippet “jQuery”: Download

Visual studio snippet: Download


Leave a Reply