Learning a computer language is something we always promise ourselves we will be doing soon. Maybe we have promised ourselves to sign up to an online course, follow a tutorial on YouTube or bring out that old tech book.

Unfortunately, most of the times the enrolling date passes, YouTube is visited for more entertaining purposes and that old tech book is still relegated to the shelf. We have all done it, we have all being guilty at a time or another.

Today I will try to tech you how to start coding in JQuery using practical examples. To begin with let’s define what JQuery is and what the advantages are (I promise I will try to keep the technical jargon to the minimum):

JQuery is a client side-scripting library of JavaScript. Its main advantages are:

  1. It is compatible with various browsers
  2. It can easily implement customized actions
  3. It is generally a short coded language

Symbol Table

  • $ = JQuery symbol
  • $() = It accesses a html element
  • $(“selector”) = It accesses a specific element, such as div
  • S(“#selectorID”) = It accesses a specific element, such as #divID
  • $(“.class”) = It accesses an element by class name
  • $(“tag”) = It accesses an element by tag name:
    • $(“tag:nth-child(n)”)
  • .html = It shows content without html symbols
  • .alert = It shows content in the form of a pop-up box
  • .text = It shows content with html symbols

1. Open up your editor

The first step is to find a JQuery editor. There are several options:

  1. Download an editor
  2. Call the JQuery editor from your HTML <head>: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”>
  3. Use an online free editor . This is the option I will be following in this tutorial.

2. Run the first line of code (.html)

JQuery HTML
JQuery HTML

Write the above code in your JQuery editor. This script will generate Hello World! in the HTML page. Let’s explain what each part of the above code means:

  1. https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js calls the JQuery library.
  2. $(document).ready(function(){} means to run the function when the HTML page is completely loaded.
  3. $(“#divID”).html(“Hello World!”); means to access a tag called divID, while html displays the content. Remember to add the hashtag symbol (#) in front of the tag name!
  4.  

    defines a tag called divID in which the code will be displayed. The code cannot being displayed unless the divID is added to the <body>.

3. Run JQuery code when the page is loaded (alert)

JQuery Alert
JQuery Alert

The code above is similar to the one described in point 2. The only difference is in the line alert(“Hello World!”);. If we add .html, we print the code, if we add .alert, we generate a pop-up box.

4. Show Content: the difference between .html and .text

JQuery HTML
JQuery Style Generation

VERSUS

JQuery Text
JQuery Text

The above example shows how a simple substitution, .text instead of .html changes the code result. In the first case, JQuery reads the code as HTML and therefore reads <h1></h1> as Headline H1 style. The result is Hello World in H1 (headline) style. In the second instance, JQuery reads the code as simple text and therefore ignores the HTML code and simply prints out the code as it is written.

CSS Style

In the next 4 points we will learn how to use JQuery to deliver CSS style using:

$(“selector”).css(“style”)

5. Show Content: Set CSS style using a Tag OR a Class Name

JQuery CSS Style
JQuery CSS Style

In the above example, the JQuery function has a name, changeColor() which aims to change the background from gray to red when the user click on it. The name is optional, you could call it Sheldon() and the result would not change (as long as you call the action onclick=”Sheldon”). As previously stated, the JQuery function that allows to generate CSS is: $(“selector”).css(“style”). In our example, we use a tag as $(“selector”). Because this tag is not a generic div, we need to add a hashtag (#) in front of it. Therefore, the $(“selector”) becomes $(“#divTest”). Again, we could call #divTest, anything we fancied, for instance #divLeonard. If we wanted to use a Class Name instead of a Tag Name, the $(“selector”) would become $(“.Class”) such as $(“.divTest”). 

Finally, we need to add a .css(“style”). In our case, we decided to change the background from an original color (displayed when the page loaded) into red. Therefore, it becomes .css(“background-color”, “red”).

In the body, we need to call a <div> where its id=”divTest”. If instead we decided to use a .Class Name, we would have called class=”divTest”.

Then, we need to call the JQuery function changeColor() that gets loaded not when the page loads but when people click. Therefore, we need to add the line onclick=”changeColor()”.

Finally, we add some style that defines the initial background, the background-color is grey (#cccccc) and it is 300px wide and 20px in height (Top-right). The cursor becomes a pointer (little hand) when the user mouse over the grey block (cursor: pointer;).

Now we are ready to rock: mousing over the grey box turn the mouse arrow into a pointer and if clicked, the background turns from grey (Top-right) into red (Bottom-right).

6. Show Content: Set CSS by tag

JQuery Set Font Style Italic
JQuery Set Font Style Italic

In this example, we want to change the font-style of  our <p> elements to Italic by clicking on a button. However, we do not want to change every single <p> element of our <body> but only the second one. As shown in the previous example (point 5) we need to define a JQuery function. In this case we name it setCSS(). Then we need to apply the JQuery code that modifies the CSS:  $(“selector”).css(“style”). In this example, our $(“selector”) is the <p> element. Therefore, the $(“selector”) becomes $(‘p’) (note the change from double to single apex). Then we added the line :nth-child(n) to indicate that the function would be limited to specific <p> elements. As we decided to change only the second <p> the final code becomes $(‘p:nth-child(2)’). As .css(“style”), we add .css(“font-style”, “italic”) code to changes the font-style to italic.

In the body we need to call at least two <p> elements, otherwise our code won’t work. We two Hello World! separated by two <p> elements. Finally, we add a button that if clicked calls the JQuery function (onclick=”setCSS()”). By clicking the button, the text defined by the second <p> element turns into Italic: from Hello World! into Hello World!.

7. Show Content: Set CSS by eq(n)

JQuery Style using eq(n)
JQuery Style using eq(n)

In this example I had a little bit of fun by changing a French Flag into an Italian one on the click of a mouse. To begin with the function is called changeColor(). As we did previous examples, we used a div tag as $(“selector”), which becomes $(“div”). No hashtag (#) as the tag is generic and is not identified by an id. The code eq(n) indicates that a specific number of “div” will be changed. In this case the first one (indicated by zero!). The .css(“Style”) code states that the background will change into a green color.

In the body, each div is identified by a specific style:

  1. Float: left; = The div element aligns on the left of the body
  2. Background-color = Blue, White and Blue
  3. width: 150px; height:120px = Size of the background

The function is again loaded on the click of a mouse (onclick=”changeColor()). After clicking the button ClickMe (value=”ClickMe”), the first div changes from background blue to green. Voila`, we changed a French Flag into an Italian one! So…why is that? Because we called a function (changeColor()) with a click of a mouse (onclick). The changeColor() function is applied only to the first (eq(0)) div $(“div”) and states a change of background-color, specifically into green.

8. Show Content: Set CSS by first or last

JQuery Set First
JQuery Set First

A result similar to the one described above (point 7) can be achieved by setting the $(“selector”) to either the first or the last div element. In the first case the $(“selector”) is defined as $(“div:first”), while in the second case is defined as $(“div:last”). After clicking on the ClickMe button the background of the first div turns from green to red as it calls the JQuery function changeColor(). If the $(“selector”) was defined as $(“div:last”), it would be the background of the last div to change color. In the above example, it would be blue box to turn red as it represents the background of the last div element.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.