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.
![]() | jQuery 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>
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>
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.