Introduction to jQuery - Printable Version

Introduction to jQuery - Printable Version

+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Coding Support Forums (https://www.supportforums.net/forumdisplay.php?fid=18)
+---- Forum: PHP The Hypertext Preprocessor (https://www.supportforums.net/forumdisplay.php?fid=21)
+---- Thread: Introduction to jQuery (/showthread.php?tid=10489)

Introduction to jQuery - Project Evolution - 08-04-2010

Hello there, today I will be covering all the basic details on jQuery; what it is, why you should use it and how to use it! Let us begin.

What is jQuery?

jQuery is a JavaScript library known as a 'Write Less, Do More' way for Javascript developers to develop modern Web 2.0 functionality in their webpages. jQuery is a powerful library which has all the possibilities of programming with bare Javascript. jQuery is a Javascript file in itself which web developers use in various ways, in this tutorial we will be covering downloading this file on your server and calling it from there.

The inner workings of jQuery may be complex to some unrecognized with the Document Object Model. In a nutshell, the DOM is made to change content on a webpage. The DOM has various nodes which is whats called the Document Hierarchy. This hierarchy spawns many different nodes that correspond to different aspects of a web document, including nodes that correspond to the various tags such as anchors, images and so on. Here is a neat picture of the document hierarchy;

[Image: htmltree.gif]

jQuery has an extremely similar structure. A jQuery node is basically an object that extends functionality to a regular DOM node. Any element listed in the DOM can be modified as a jQuery node, which is quite a powerful capability.

Why use jQuery?

Using jQuery opens up many possibilities which would be much harder to implement in regular Javascript. People tend to use jQuery for quick and easy page content such as adding tabs, accordions, dialogues and many more. jQuery is an extended Javascript to most.

Lets begin with actually using jQuery. You can download the latest version here,
http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Make sure you download the .js file. Next, place the file on your server for other pages to access. Pretty basic stuff if you ask me. As of this writting the file is jquery-1.4.2.min.js. Using the library is the same as using any other regular Javascript library or external file. In your <head> tag define the following;

PHP Code:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 

That assumes the file is in the same directory as the webpages you will be using jQuery with.

Beginning jQuery is quite simple. However you should know the basics of manipulating the DOM through regular Javascript. If you are a little unfamiliar, read up on my tutorial,
http://www.runelocus.com/forums/showthread.php?7573-Javascript-and-the-DOM

Creating a jQuery object is relatively easy.Using the $() function you can create a new jQuery object. You can define a variable to hold an object like so,

PHP Code:
var jQueryObj = $("#random-id-here"); 

That is the same as doing,

PHP Code:
var DOMObj = document.getElementById("random-id-here"); 

Easy right? You also dont have to specify a variable everytime you want to create a new jQuery object. Say for example you wanted a snippet that changes the contents of any HTML data in an element with an id named output. Simple,

PHP Code:
$("#output").html("Changing HTML with the html function!"); 

The html() function basically works the same way as the innerHTML property in regular DOM scripting.

Im going to begin by showing you a simple example of a jQuery page,

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        function changeHTML() {
            // As you can see, you can edit ids, classes and HTML tags easily!
            $("#output").html("Changing HTML with the html function!");
            $(".outputclass").html("Changing HTML with the html function!");
            $("p").html("Changing HTML with the html function!");
        }
    </script>
  </head>
  <body onload="changeHTML()">
      <p>TODO write content</p>
      <div id="output">
          wtf u want, u wan fite?
      </div>
      <div class="outputclass">
          lolwtf
      </div>
  </body>
</html> 

Examining the code carefully, you can see some noticeable differences.

We called the jQuery file. We used the <script> tags to call the jQuery file on the server.
The changeHTML() function does all the work. Inside take a good look at what I did and the differences in the XHTML code. You shoud be able to see some noticeable differences.
The onload attribute loads up the changeHTML() function on the fly. In the enxt snippet, we will look at better ways of doing this.

jQuery also has other ways of being invoked when the browser is loading, as a matter of fact - the way jQuery does it is much better than using onload and its drawbacks. You can initialize jQuery code automatically using jQuery using three methods,

PHP Code:
$(changeHTML); 

PHP Code:
$(document).ready(changeHTML); 

PHP Code:
$(document).ready(function() {
 changeHTML(); 
}); 

I personally use the first method. Take a look however, remember with Javascript that when you call functions/methods you actually call them as variables (fun fact: Javascript functions are variables!). Here is the updated page,

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(changeHTML);
        function changeHTML() {
            // As you can see, you can edit ids, classes and HTML tags easily!
            $("#output").html("Changing HTML with the html function!");
            $(".outputclass").html("Changing HTML with the html function!");
            $("p").html("Changing HTML with the html function!");
        }
    </script>
  </head>
  <body>
      <p>TODO write content</p>
      <div id="output">
          wtf u want, u wan fite?
      </div>
      <div class="outputclass">
          lolwtf
      </div>
  </body>
</html> 

As you can see, there are some differences.

You can also change the style of an element using a method: css(). The use of this method is quite obvious, it changes the elements CSS properties. Take a look at the following,

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(changeHTML);
 
function changeHTML() {
// As you can see, you can edit ids, classes and HTML tags easily!
$("#output").html("Changing HTML with the html function!");
$("#output").css("backgroundColor", "green");
$("#output").css("textAlign", "center");
 
 
// You can also use a JSON representation
$(".outputclass").css({"backgroundColor" : "green",
"textAlign" : "center"});
}
</script>
</head>
<body>
<p>TODO write content</p>
<div id="output">
wtf u want, u wan fite?
</div>
<div class="outputclass">
lolwtf
</div>
</body>
</html> 

Remember in my previous Javascript and DOM tutorial I mentioned CSS and the DOM define style properties? Same applies here.

Quote:If your familiar with CSS you may notice something slightly different. All the attributes are named the same, except slightly different. In CSS, attributes such as font-weight or background-color use dashes to seperate words, while the DOM uses capitalization such as fontWeight and backgroundColor instead.

Something fun you can do with jQuery is it has the ability to toggle classes on the fly (obviously not CSS id's because thats against conventions). There are 3 methods that do this; addClass(), removeClass(), toggleClass(). These 3 methods either add, remove or toggle a CSS class on an element. The toggleClass() method adds a class if its not added, and removes a class if there is a current class added. Take a look at this example,

PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.border {
border: 1px solid black;
}
</style>
<script type="text/javascript">
$(changeClasses);
function changeClasses() {
$("li").click(changeTheClass);
}
function changeTheClass() {
$(this).toggleClass("border");
}
</script>
</head>
<body>
<ul>
<li>JavaScript</li>
<li>jQuery</li>
<li>Some other stuff lol</li>
</ul>
</body>
</html> 

Custom CSS is defined. As you can see, I created a CSS class called border which will create a border on an element when toggled by the jQuery method toggleClass().
The changeClasses() function holds an event. Inside there is a clicking event, the click() method listens to see if a user has clicked on the element specified in the $() function. In this case its any li element.
changeTheClass() does the physical change. Inside this function, the toggleClass() method is used and dynamically changes the element by adding the CSS class: border to it. It uses this in the $() function to refer to the object it is used on. Again, since the changeTheClass() function is called within that click() method previously, it will change any li element. Confusing maybe, but if you need more clarification just ask.

Finally its time to get into event handling. We saw a bit earlier with the click() method, but now I will show you some other events jQuery is assosciated with.

Some jQuery Events

change - The content of an element changes.

click - Obviously, a user clicks the element.

dblClick - A user double clicks an element.

focus - A user selects the element.

keydown - A user presses a key while the element is focused.

hover - A user's mouse is hovered over the element.

mouseDown - A user's mouse button is pressed on the element.

select - A user selects text in text input.

Explore these methods and their uses.

Conclusion

Thanks for reading my tutorial on basic jQuery. I will most deffinately be writting more tutorials for jQuery so stay tuned as my next is utilizing AJAX with jQuery! If you have any questions please dont hesitate to ask me here.

RE: Introduction to jQuery - Sam - 08-04-2010

Thanks for this share, if it's 100% you then really good job. Thanks for sharing.

RE: Introduction to jQuery - Project Evolution - 08-04-2010

It is 100% by me. The only other place you would find this is on runelocus.com which again is written by myself. Thanks for reading. Smile