JavaScript Testing jQuery

## JS Basic

JS HOME JS Introduction JS How To JS Output JS Statements JS Comments JS Variables JS Data Types JS Objects JS Functions JS Operators JS Comparisons JS Conditions JS Switch JS Loop For JS Loop While JS Breaks JS Errors JS Validation

## JS Advanced

JS Object JS Number JS String JS Date JS Array JS Boolean JS Math JS RegExp

## JS HTML DOM

DOM Intro DOM Methods DOM Document DOM Elements DOM HTML DOM CSS DOM Events DOM Navigation DOM Nodes DOM Nodelist

## JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS PopupAlert JS Timing JS Cookies

## JS Libraries

JS Libraries JS jQuery JS Prototype

## JS Examples

JS Basic Examples JS Objects Examples JS DOM Examples JS HTML Examples JS Browser Examples JS Quiz JS Certificate JS Summary

## JS References

Javascript Objects HTML DOM Objects

# 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 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 »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE