This jquery tutorial (actually a crash course) will give you a basic understanding of jquery and its effects functions. I assume you are new to jquery but not to the web technologies. This means you should have a basic understanding about HTML, Javascript and CSS to understand this tutorial.
Lets start with the basic question - What is jQuery?
As said on their website, "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."
This simply means it is a javascript library which helps you to implement javascript functionality in a very simple way. You can implement various effects like slide-in, slide-out, fade-in, fade-out, etc in no time. Let get our hands dirty with jquery.
First lets create our environment.
1. Create a valid HTML File index.html as shown below and save it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery Tutorial</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="examples.js"></script>
</head>
<body>
<div id="myPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget sapien laoreet purus auctor molestie. In hendrerit, nisi pretium vestibulum facilisis, tellus velit sodales lacus, non congue massa erat scelerisque libero. Quisque iaculis libero sit amet lacus ornare et fermentum dui venenatis. In bibendum ligula eget dui ullamcorper nec vulputate augue pretium. Donec sit amet tortor justo. Duis hendrerit bibendum vestibulum. Curabitur feugiat nisi et mauris cursus tempus. Integer eu ipsum sem. Phasellus a ipsum ac turpis ultrices dictum ullamcorper et lectus. Morbi condimentum lobortis neque, sit amet luctus dolor aliquet sed. Pellentesque rutrum, felis ac venenatis rutrum, orci purus ullamcorper libero, id lacinia justo ipsum sit amet dolor. Curabitur libero nulla, laoreet in elementum ac, vulputate vitae tellus. Cras quis feugiat velit.</div><br/><br/>
Select the effect below from the dropdown and click submit to see the effect in action.<br/></br/>
<select id="ddEffects">
<option value="hide" selected="selected">Hide</option>
<option value="show">Show</option>
<option value="toggle">Toggle</option>
<option value="slideup">SlideUp</option>
<option value="slidedown">SlideDown</option>
<option value="slidetoggle">SlideToggle</option>
<option value="fadeout">FadeOut</option>
<option value="fadein">FadeIn</option>
<option value="fadeto">FadeTo</option>
<option value="animate">Animate</option>
</select>
<button id="btnClick" onclick="javascript: btnClick()">Submit</button><br/><br/>
<span id="spCallback"></span><br/>
</body>
</html>
2. Create a blank examples.js file and include it in your index.html as shown above. We are going to play with jquery functions in this file. You will be working on this file in chapter 2 of this tutorial.
Now some theory part before we actually get into action.
jQuery Syntax
The basic syntax is - $(selector).action()
Where -
'$' sign ís used to define jQuery. You can change the '$' sign to anything you like using jQuery noConflict() method to avoid name conflicts. For this tutorial keep the '$' sign as it is.
(selector) to find HTML element(s).
action() is an "action" to be performed on the element(s).
Following examples will make it clear
$("div").hide() - hides all the div tags.
$("div.someclass").hide() - hides all the div tags with class="someclass"
$("div#myDiv").hide() - hides all the div tags with id="myDiv".
$(this).hide() use "this" to refer to the current element.
Always rememeber to put your jQuery code in document.ready() function. This prevents your jquery code from executing before the page is finished loading.
$(document).ready(function(){
// your code here..
});
Now that you have got the basic understanding on jQuery, Chapter 2 will teach you some simple jQuery effects.
Lets start with the basic question - What is jQuery?
As said on their website, "jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."
This simply means it is a javascript library which helps you to implement javascript functionality in a very simple way. You can implement various effects like slide-in, slide-out, fade-in, fade-out, etc in no time. Let get our hands dirty with jquery.
First lets create our environment.
1. Create a valid HTML File index.html as shown below and save it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery Tutorial</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="examples.js"></script>
</head>
<body>
<div id="myPara">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget sapien laoreet purus auctor molestie. In hendrerit, nisi pretium vestibulum facilisis, tellus velit sodales lacus, non congue massa erat scelerisque libero. Quisque iaculis libero sit amet lacus ornare et fermentum dui venenatis. In bibendum ligula eget dui ullamcorper nec vulputate augue pretium. Donec sit amet tortor justo. Duis hendrerit bibendum vestibulum. Curabitur feugiat nisi et mauris cursus tempus. Integer eu ipsum sem. Phasellus a ipsum ac turpis ultrices dictum ullamcorper et lectus. Morbi condimentum lobortis neque, sit amet luctus dolor aliquet sed. Pellentesque rutrum, felis ac venenatis rutrum, orci purus ullamcorper libero, id lacinia justo ipsum sit amet dolor. Curabitur libero nulla, laoreet in elementum ac, vulputate vitae tellus. Cras quis feugiat velit.</div><br/><br/>
Select the effect below from the dropdown and click submit to see the effect in action.<br/></br/>
<select id="ddEffects">
<option value="hide" selected="selected">Hide</option>
<option value="show">Show</option>
<option value="toggle">Toggle</option>
<option value="slideup">SlideUp</option>
<option value="slidedown">SlideDown</option>
<option value="slidetoggle">SlideToggle</option>
<option value="fadeout">FadeOut</option>
<option value="fadein">FadeIn</option>
<option value="fadeto">FadeTo</option>
<option value="animate">Animate</option>
</select>
<button id="btnClick" onclick="javascript: btnClick()">Submit</button><br/><br/>
<span id="spCallback"></span><br/>
</body>
</html>
2. Create a blank examples.js file and include it in your index.html as shown above. We are going to play with jquery functions in this file. You will be working on this file in chapter 2 of this tutorial.
Now some theory part before we actually get into action.
jQuery Syntax
The basic syntax is - $(selector).action()
Where -
'$' sign ís used to define jQuery. You can change the '$' sign to anything you like using jQuery noConflict() method to avoid name conflicts. For this tutorial keep the '$' sign as it is.
(selector) to find HTML element(s).
action() is an "action" to be performed on the element(s).
Following examples will make it clear
$("div").hide() - hides all the div tags.
$("div.someclass").hide() - hides all the div tags with class="someclass"
$("div#myDiv").hide() - hides all the div tags with id="myDiv".
$(this).hide() use "this" to refer to the current element.
Always rememeber to put your jQuery code in document.ready() function. This prevents your jquery code from executing before the page is finished loading.
$(document).ready(function(){
// your code here..
});
Now that you have got the basic understanding on jQuery, Chapter 2 will teach you some simple jQuery effects.
Useful one. Thanks for the share. Keep posting such kind of information on your blog.
ReplyDeletehtml5 player| html5 video player