JavaScript - Test jQuery

Test the JavaScript framework library - jQuery

Reference jQuery

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

To reference a library, use <script > tag whose src property is set to the URL of the library:

Reference jQuery

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
        </script>
    </head>
    <body>
    </body>
</html>

jQuery Description

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

jQuery allows you to pick elements through CSS selectors.

In JavaScript, you can assign a function to handle window load events:

In JavaScript:

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

The equivalent jQuery is different:

In jQuery:

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

On the last line of the code above, the HTML DOM document object is passed to jQuery : $(document).

When you pass a DOM object to jQuery, jQuery returns a jQuery object wrapped in an HTML DOM object.

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

Since functions are variables in JavaScript, you can pass myFunction as a variable to jQuery's ready method.

lampjQuery returns a jQuery object, unlike a passed DOM object.
jQuery objects have properties and methods that differ from DOM objects.
You cannot use HTML DOM properties and methods on jQuery objects.

Test jQuery

Try the following example:

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/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! 

Please try this example again:

Example

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/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! 

As you can see in the example above, jQuery allows chain syntax.

Chaining is a convenient way to perform multiple tasks on the same object.

Need to learn more? TutorialFish provides you with a great jQuery tutorial.