I found that these series of tutorials (“jQuery for Absolute Beginners” Video Series) by Jeffery Way are VERY HELPFUL.
It targets those developers who are new to jQuery. He shows how to create many cool stuff with jQuery, like animation, Creating and Removing Elements and more.
I learned a lot from it. He shows how it's easy to use jQuery.
Now I love it and I can read and understand any jQuery script even if it's complex.
Here is one example I like "Resizing Text"
1- jQuery:
<script language="javascript" type="text/javascript">
$(function() {
$('a').click(function() {
var originalSize = $('p').css('font-size'); // Get the font size.
var number = parseFloat(originalSize, 10); // That method will chop off any integer
// from the specifid varibale "originalSize".
var unitOfMassure = originalSize.slice(-2); // Store the unit of massure, Pixle or Inch.
$('p').css('font-size', number / 1.2 + unitOfMassure);
if (this.id == 'larger') {
$('p').css('font-size', number * 1.2 + unitOfMassure);
} // Figure out which element is triggered.
});
});
</script>
2- CSS Styling:
<style type="text/css" >
body{
margin-left:300px;text-align:center;
width:700px;
background-color:#666666;}
.box {
width:500px;
text-align:justify;
padding:5px;
font-family:verdana;
font-size:11px;
color:#0033FF;
background-color:#FFFFCC;}
</style>
2- HTML:
<div class="box">
<a href="#" id="larger">Larger</a> |
<a href="#" id="Smaller">Smaller</a>
<p>
In today’s video tutorial, I’ll show you how to resize text every
time an associated anchor tag is clicked. We’ll be examining
the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods.
</p>
</div>
I highly recommend these tutorials:
http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
