JQuery 101: Your First JQuery Script

Jquery 101

You have reached the intro tutorial of Jquery 101! So far, we have explored the many aspects of JQuery, from its inception, its role as a scripting language derived from JavaScript. We have touched on benefits and features, and compared it to other languages. We have set up our environment. So, the natural next step is to write our first script using JQuery to show how it fits into the HTML framework and allows dynamic content. We will first create a static HTML document, then we will add a JQuery library function to print text on the screen. In the code, I have differentiated between the static HTML document and the JQuery code by using capital letters in the HTML tags and lower case for the script, but HTML is not case-sensitive inside the tags so if you see it differently elsewhere it is not incorrect.

Jquery Coding Preparation

If you have not already done so, download the JQuery library from www.jquery.org and make sure that you put the .js file in the same directory where you create your HTML document, or the browser will not be able to find it. Invoke your text editor of choice, or IDE, and start a new document. For this example, if you have not downloaded a fancy text editor or IDE, feel free to use Notepad in Windows or gEdit in Linux to write your first document as it will be easy to keep track of the syntax. You can refer to this page as a reference as you go.

Creating an HTML documentsteps of creating a html document from scratch using jquery scripts

Before we can insert any JQuery code, we must first have an HTML file to go around it. In your text editor, enter the following HTML code:

<HTML>
<HEAD>
<TITLE>Welcome to JQuery
</HEAD>
<BODY>
This is HTML.
</BODY>
</HTML>

At this point, we haven’t used any JQuery. Save the file as jquery.html, in the same directory where you downloaded the JQuery library. In your browser, select File -> Open -> Browse… and browse to your jquery.html document. The file should open and “This is HTML” should appear in your browser window.

Adding JQuery to Your HTML Documentadding jquery scripts to html code

Next, we are going to add the standard snippets of code that must be present to make the browser interpret your script as JQuery. In your jquery.html file, add the following lines at the very top:

<HTML>
<HEAD>
<TITLE>Welcome to JQuery
<script type="text/javascript" src="jquery-1.2.6.min.js">

This is called a directive and lets the browser know that the document contains script, so watch out for it and don’t type it as plain text. Without it, the browser would just type your script out as if it were part of the document.

Next, we add some text to our document between thetags, after “This is HTML.”

<script type="text/javascript">
$(document).ready(function(){
$("#jquery").html("This is JQuery.");
});

This tells the browser that it is running a JavaScript script (as JQuery is just a JavaScript library) and the code begins. The JQuery calls a function that outputs HTML and writes our message in the document. Notice that it has tags as well, the <script> and </script> tags.

We need one more set of tags to complete our first program, right before the </body>tag:

<div id=”jquery”>
</div>
Our completed Welcome to JQuery document looks like this all together:
<HTML>
<HEAD>
<TITLE>Welcome to JQuery
<script type="text/javascript" src="jquery-1.2.6.min.js">
</HEAD>
<BODY>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery").html("This is JQuery.");
});
</script>
This is HTML.
<div id="jquery">
</div>
</BODY>
</HTML>
 

This is your completed HTML/JQuery file. Once you save it, you can again open it in your web browser. Two lines of text should appear, one in HTML, one in JQuery. Obviously, there is far more that you can do with the language than simply write a message, but it is important to see the basic structure of how it is set up. At the beginning, we tell the browser to expect script. We then call the script out in the body of the document using <script> tags, then we use the <div> tags to insert our script at a certain point.

This creates a dynamic HTML file inside a static HTML document that is accessed by the browser and inserted in the space created by the <div> tags. JQuery can create dynamic content and the content of the page can change without navigating away from the page, but only the scripted part. The static part of the HTML document will remain the same regardless of the script.

Next, we will discuss the best practices for using JQuery.

FOLLOW US ON: