How to call a jQuery library functions?
As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.
If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
To do this, we register a ready event for the document as follows −
$(document).ready(function() {
// do stuff when DOM is ready
});
To call upon any jQuery library function, use HTML script tags as shown below −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>
How to use Custom Scripts?
It is better to write our custom code in the custom JavaScript file : custom.js, as follows −
/* Filename: custom.js */
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});
Now we can include custom.js file in our HTML file as follows −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" src = "/jquery/custom.js"></script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>
Using Multiple Libraries
You can use multiple libraries all together without conflicting each others. For example you can use jQuery and MooTool javascript libraries together.
You can check jQuery noConflict Method for more detail.
No comments:
Post a Comment