SHARE THIS PAGE

JavaScript - Testing jQuery

« Previous

Next Chapter »

Testing JavaScript Framework Libraries - jQuery

Including jQuery

To test a JavaScript library, you need to include it in your web page.

To include a library, use the <script> tag with the src attribute set to the URL of the library:

Including jQuery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
</head>
<body>
</body>
</html>

jQuery Described

The main jQuery function is the $() function (the jQuery function). If you pass DOM objects to this function, it returns jQuery objects, with jQuery functionality added to them.

jQuery allows you to select elements by CSS selectors.

In JavaScript, you can assign a function to handle the window's load event:

The JavaScript Way:

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;

The jQuery equivalent is different:

The jQuery Way:

function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

The last line of the code above, passes the HTML DOM document object to jQuery: $(document).

When you pass an DOM objects to jQuery, jQuery returns new jQuery objects wrapped around the HTML DOM objects.

The jQuery function returns a new jQuery object, where ready() is a method.

Since functions are variables in JavaScript, myFunction can be passed as a variable to the jQuery ready method.

	jQuery returns a jQuery object, different from the DOM object that was passed. The jQuery object has properties and methods, different from the DOM object. You cannot use HTML DOM properties and methods on jQuery objects.

Testing jQuery

Try the following example:

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

Try it yourself »

Also try this one:

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>

Try it yourself »

As you can see from the example above, jQuery allows chaining.

Chaining is a handy way to perform multiple tasks on one object.

Want to learn more? You will find an excellent jQuery Tutorial here at W3Schools.

« Previous

Next Chapter »