JavaScript - Testing jQuery
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>
<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;
{
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);
{
$("#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>
<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>
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>
<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>
As you can see from the example above, jQuery allows chaining.
Chaining is a handy way to perform multiple tasks on one object.
