jQuery First Steps
jQuery First Steps
jQuery First Steps is a free jQuery Academy lesson on CoddyKit — lesson 1 of 1. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the jQuery Academy learning path, one of 1 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Introduction
Hello,
To use the JQuery library, we first need to add it to the HTML document.
In the example below, the address of the jQuery library has been added as the value of the src attribute between the head tags.
Now jQuery library is ready to be used in our project.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>Jquery Select
In order to operate on HTML elements (we will now call it DOM), we first need to select the element.
In jQuery, $() or jQuery() method is used to make a selection.
The $() method is more preferred by software developers.
With the parameter that we will assign to this method, we decide which element we want to select.
Xpath
The expression we pass into the $ method is the XPath selector, which we also know from CSS.
In other words, we select HTML elements in JQuery the same way we select CSS.
Xpath Examples
Suppose our HTML code is as follows.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Let's select HTML elements by using jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery enabled us to write our codes more concise
If we wanted to do the same with Vanilla(Plain) JavaScript, we had to write more lines of code.
jQuery enabled us to write our codes more concisely through its own methods.
Warning
JQuery is just a library and actually makes web development easier than Vanilla JavaScript.
Info
Another advantage of jQuery is that all modern browsers support the code we write.
Some code we write with VanillaJS can cause side effects in some browsers, and jQuery guarantees that it will behave the same in every browser with the abstraction it provides.
JQuery saves us from browser-specific thinking when writing code.
$(document).ready
Before we get to the basics of jQuery, let's learn the $(document).ready method.
As we will remember about HTML, we said that Javascripts can be placed anywhere between the head tag or between the body in HTML.
$ (document).ready 2
Let's assume we have HTML code like the one below.
Our browser will interpret from the <!DOCTYPE html> tag of our code to the closing tag </html>.
<script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> statement will start downloading the library via code.jquery.com.
In the next line, it selected the DOM using the $ method of jQuery. However, there is a problem here. If the HTML document is not fully loaded at the time $ ('# test') method is called, our JS code will fail.
In this case, $(document).ready method is used to ensure that the document is fully loaded.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$ (document).ready 3
After the definition above,
All we have to do is use the $(document).ready() method. This method will wait for all the content to be loaded, and then it will run.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Question
Come on, answer the question!
Congratulations
Congratulations 🎉
In this section, we started learning the jQuery library and it's $(document).ready() method.
In the next section, we will learn the jQuery Selectors.
Frequently asked questions
Is the “jQuery First Steps” lesson free?
Yes — the full text of “jQuery First Steps” is free to read here on the web, and the jQuery Academy course includes 1 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the jQuery Academy course, upgrade to CoddyKit PRO.
What will I learn in “jQuery First Steps”?
jQuery First Steps You practise jQuery Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start jQuery Academy?
No prior experience is required. jQuery Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 1, so you can start here or from the beginning and move at your own pace.
How long does the “jQuery First Steps” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this jQuery Academy lesson?
Yes. Every jQuery Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.