Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How should I initialize jQuery in a web page?
To initialize jQuery in a web page is quite easy. You can try to run the following code to learn how to initialize jQuery in a web page. We're using Google CDN to add jQuery. Microsoft CDN is also available for the same purpose of adding jQuery library to HTML.
Methods to Initialize jQuery
There are several ways to initialize jQuery in your web page ?
Using Google CDN
The most common method is to include jQuery from Google's CDN (Content Delivery Network). This ensures fast loading and caching benefits ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Using Microsoft CDN
Alternatively, you can use Microsoft's CDN ?
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
Complete Example
Here's a complete working example showing how to initialize jQuery and use the $(document).ready() function ?
<!DOCTYPE html>
<html>
<head>
<title>jQuery Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#mydiv").click(function() {
alert("Welcome to Tutorialspoint!");
});
});
</script>
</head>
<body>
<div id="mydiv" style="cursor: pointer; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc;">
Click on this to see a dialogue box.
</div>
</body>
</html>
Understanding $(document).ready()
The $(document).ready() function ensures that jQuery code runs only after the HTML document is fully loaded. This is essential because it prevents jQuery from trying to manipulate elements that haven't been created yet.
You can also use the shorthand syntax ?
$(function() {
// Your jQuery code here
});
Conclusion
Initializing jQuery is straightforward ? simply include the jQuery library via CDN and wrap your code in $(document).ready() to ensure proper execution timing.
2K+ Views
