This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test page setup yet, start by creating
a new HTML page with the following contents:
your HTML file, you can use:
Launching Code on Document Ready
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first
place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.
To circumvent both problems, jQuery has a simple statement that checks the
manipulated.
pop-up, before leaving to go to the main jQuery page.
For click and most other events, you can prevent the default behaviour - here, following the link to jquery.com - by calling
event.preventDefault() in the event handler:
a new HTML page with the following contents:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
</script>
</body>
</html>Edit the
src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:
<script src="jquery.js"></script>You can download your own copy of jQuery from the Downloading jQuery page
Launching Code on Document Ready
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
window.onload = function(){ alert("welcome"); } Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first
place is that the HTML 'document' isn't finished loading yet, when you first try to run your code.
To circumvent both problems, jQuery has a simple statement that checks the
document and waits until it's ready to be manipulated.
$(document).ready(function(){ // Your code here }); Inside the ready event, add a click handler to the link: $(document).ready(function(){ $("a").click(function(event){ alert("Thanks for visiting!"); });
});Save your HTML file and reload the test page in your browser. Clicking the link on the page should make a browser's alert
pop-up, before leaving to go to the main jQuery page.
For click and most other events, you can prevent the default behaviour - here, following the link to jquery.com - by calling
event.preventDefault() in the event handler:
$(document).ready(function(){$("a").click(function(event){alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});
use this code and see the smaller part of JQuery capabilities:
create a html file and run it.
<!--
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/jquery-1.5.2.min.js" ></script>
</head>
<body>
<!--<script type="text/javascript" language="javascript" >
window.onload = function () { alert("Welcome"); }
</script>-->
<!-- this JQuery onload equivalent-->
<!--
<script>
$(document).ready(function () { alert("welcome"); })
</script> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- JQuery script for links click event action -->
<script >
$(document).ready(function () {
$("a").click(function (event) {
// event.preventDefault();
// alert("Thanks for visiting!");
event.preventDefault();
$(this).hide("slow");
});
$("#jai").mouseenter(function (event) {
event.preventDefault();
$(this).hide("slow");
});
});
</script>
<div id="jai" style="width:200px; height:200px; margin:0px auto; background-color:Blue;"></div>
<a href="#" id="ram" >Ram</a>
</body>
</html>
-->
No comments :
Post a Comment