Today lets start with learning jQuery.
In this video we show you where to get the jQuery library file and the text editor we are using to write our jQuery programs.
Since we are on Windows 7, we choose pspad.
For all the links and installation procedures, please watch the short video below.
To start the day 1 of learning jQuery, let’s do a simple string replacement program.
We shall change the text inside p tag once the user clicks on the text inside p tag.
Complete Code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html>
<head><title>jQuery Basics</title>
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("p").click( function(){
$("p").html("jQuery is awesome!");
} );
}
);
</script>
</head>
<body>
<p>JavaScript</p>
</body>
</html> |
First include the jQuery library file..and in next script tag, start writing your jQuery code.
The code is triggered once the html document loads i.e., when it is ready.
Once the page loads, a anonymous function is being called and is ready to register the user events.
When a user clicks on the p tag or its content, the string content(which is a separate node in DOM), is changed to jQuery is awesome!
Video Tutorial: jQuery Basics: Replace Text/String Inside HTML Document
[youtube https://www.youtube.com/watch?v=z917odQd30w]
Write this program and setup your jQuery learning environment and be ready for the future video tutorials.
Try to change the tags, content and the code and also invoke the action for other user events other than just click.