JavaScript test jQuery
May 06, 2021 JavaScript
Table of contents
JavaScript - Test jQuery
Test javaScript framework library - jQuery
Refer to jQuery
To test the JavaScript library, you need to reference it in a Web page.
In order to reference a library, use the hashtag, whose src property is set to the URL of the library:
Refer to jQuery
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</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 the jQuery object with the jQuery feature added to it.
jQuery allows you to select elements through the CSS selector.
In JavaScript, you can assign a function to handle window load events:
JavaScript way:
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
The equivalent jQuery is different:
jQuery way:
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);
On the last line of the code above, the HTML DOM document object is passed to jQuery:$.
When you pass a DOM object to jQuery, jQuery returns the jQuery object wrapped in html DOM objects.
The jQuery function returns a new jQuery object, where ready() is a method.
Because functions are variables in JavaScript, you can pass myFunction as a variable to jQuery's ready method.
|
jQuery returns the jQuery object, unlike the doM object that has been passed.
The jQuery object has different properties and methods than the DOM object. You cannot use html DOM properties and methods on jQuery objects. |
|---|
Test jQuery
Try this example:
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</script>
<script>
function myFunction()
{
$("#h01").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>
</head>
<body>
<h1 id="h01"></h1>
</body>
</html>
Try it out . . .
Try this example again:
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
</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 out . . .
As you can see in the example above, jQuery allows links (chain syntax).
Chaining is a convenient way to perform multiple tasks on the same object.
Need to learn more? W3Cschool gives you a great jQuery tutorial.