有趣的jQery

        通过这个带交互的教程你将会对jQuery有一个基本的了解同时可以在你的项目中用上它。你将会学会如何选择元素、定义元素、以及使用一些十分酷的jQuery动画。

        开始教程前请确保你已经对HTML、CSS和CSS选择器有了基本的了解。

        什么是jQuery？简单来说它是一个强大的Javascript类库，它可以兼容所有浏览器，确保你比原生Javascript(plain Javascript)写的代码更少。如果你目前还没接触过jQuery，不要担心，下面的例子会让你有一个大概的了解。

        那么，现在开始了你的第一个jQuery项目（让Ryu发射波动拳）。

$(document).ready(function(){

    $("#my-div").append("<img src='http://i.imgur.com/90Mmdcm.png'/>");
    $("#my-div img").hover(function(){    //当鼠标移到该元素上时出发
        $(this)[0].src='http://i.imgur.com/nTj3Fxx.gif';  
    },function(){
        this.src="http://i.imgur.com/90Mmdcm.png";
    });
    
    $("#my-div img").mousedown(function(){       //当鼠标点击（点下的瞬间）该元素上时出发事件
        this.src="http://i.imgur.com/Rfj0a80.png";
        $("#quan").remove();
        $("#my-div").append("<img src='http://i.imgur.com/oTyQRvX.gif' id='quan'>");
        
    });
    $("#my-div img").mousedown(function(){
        $("#quan").animate({"left":"900px"},1000,function(){
            $(this).hide();
        });
    });
    $("#my-div img").mouseup(function(){//当鼠标点击（点下松开的瞬间）该元素上时出发事件
        this.src="http://i.imgur.com/90Mmdcm.png";
    });
    
});

 特别注意：一切工作前记得引入jQuery。代码如下：

<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>

  如果想知道运行之后的神奇效果，那么请动动手指吧。先附上一张图片