JavaScript - Testing jQuery

Testing JavaScript Framework Libraries - jQuery

Referencing jQuery

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

To reference a library, use the <script> tag with its src attribute set to the library's URL:

Referencing 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 (the jQuery function). If you pass a DOM object to this function, it returns a jQuery object with jQuery functionality added to it.

jQuery allows you to select elements via CSS selectors.

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

JavaScript Way:

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

The equivalent jQuery is different:

jQuery Way:

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

In 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 around the HTML DOM object.

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

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

lamp jQuery returns a jQuery object, which is different from the DOM object that was passed.
The properties and methods that jQuery objects have are different from those of DOM objects.
You cannot use HTML DOM properties and methods on jQuery objects.

Testing jQuery

Please try the following example:

Examples

<!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 yourself »

Please also try this example:

Examples

<!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 yourself »

As you can see in the examples above, jQuery allows chaining (chain syntax).

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

Want to learn more? Example Tutorial provides you with a greatjQuery Tutorial。

Other Extensions