Techie BabajiLearn to Code. Build Real Skills.
jQuery · Basics

Installing jQuery

Before you can write $(...), the jQuery library has to be on the page. There are three common ways to add it — and one rule: load it once, before the scripts that use it.

Beginner 5 min Lesson 2 of 22 Runnable examplesExamples use jQuery 3.x.
Before you start:Introduction to jQuery
0/22 in jQuery
On this page · 5 min · Beginner

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Beginner
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Load jQuery from a CDN with a pinned version
  • Install it with npm or LibMan
  • Run code when the DOM is ready
  • Check which version is loaded

Explanation#

CDN: add <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> before your own scripts. Pin an exact version so an update never surprises you.

npm: npm install jquery, then import $ from "jquery" in a bundled app (Vite, webpack).

ASP.NET projects often use LibMan or the copy already in wwwroot/lib/jquery (Core) or Scripts/ (MVC 5), referenced from the layout page.

$(function () { ... }) — short for $(document).ready(...) — runs your code after the HTML is parsed, so the elements you select exist. Scripts placed at the end of <body> or marked defer achieve the same.

jQuery.fn.jquery returns the loaded version. Loading two versions on one page causes plugins to attach to the wrong copy — load jQuery exactly once, in the layout.

Syntax#

HTML Illustrative
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(function () {
    // the DOM is ready here
  });
</script>

Code example: Loading jQuery and waiting for the DOM#

HTMLLoading jQuery and waiting for the DOM Runnable
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<p id="status" style="font-family:sans-serif">Loading…</p>
<script>
  $(function () {
    $('#status').text('jQuery ' + $.fn.jquery + ' is ready!');
    console.log('typeof $:', typeof $);
    console.log('Same function:', $ === jQuery);
  });
</script>
Expected output
The paragraph changes to “jQuery 3.7.1 is ready!”. The console shows “typeof $: function” and “Same function: true”.
Opens this example in the full playground

Step-by-step explanation#

  1. The <script src> tag downloads jQuery and creates the global functions $ and jQuery.
  2. $(function () { ... }) waits until the page’s HTML has been parsed.
  3. $.fn.jquery holds the version string of the loaded library.
  4. $ and jQuery are the same function — $ is just the short name.

Real-world use case#

An ASP.NET MVC 5 layout loads jQuery once in _Layout.cshtml via a bundle, and every view adds its own scripts in a Scripts section that renders after it.

Common mistakes#

$ is not defined

Your script ran before jQuery loaded. Put the jQuery tag first, or move your script after it.

Loading jQuery twice

A second copy replaces $, and plugins registered on the first copy disappear (“$(...).datepicker is not a function”).

Using the slim build for AJAX

jquery.slim.min.js has no $.ajax or effects. Use the full build if you need them.

Best practices#

  • Pin an exact version
  • Load jQuery once, in the layout
  • Put scripts at the end of <body> or use $(function)
  • Prefer npm imports in bundled projects

Remember this#

Load jQuery BEFORE your scripts.

$(function(){ … }) = run when the DOM is ready.

One page, one copy of jQuery.

Practice exercise#

Your task: Write a page that loads jQuery and, when the DOM is ready, sets the text of <h1 id="title"> to "Hello jQuery".

Need a hint?
Use $(function () { $("#title").text(...); }).
Show solution
HTML Runnable
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<h1 id="title">…</h1>
<script>
  $(function () {
    $('#title').text('Hello jQuery');
  });
</script>
Opens this example in the full playground

Mini quiz#

Installing jQuery quizMultiple choice Question 1 of 3

What does $(function () { ... }) do?

Score so far: 0/0

Want more? Practise all jQuery MCQs · jQuery interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.