自学JQuery的几个例子

　　JQuery是一个使用JavaScript编写的库，极大地简化了JavaScript编程，使其更易于使用。具体JQuery语法请参考W3C链接：http://www.w3school.com.cn/jquery/index.asp。

例子：该例子展示了几种JQuery支持的效果（如隐藏/显示、淡入淡出、动画等操作）

ex1.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>JQuery Basis-1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Wayne Ng" />
    <meta name="description" content="JQuery Basis-1" />
    <meta name="revised" content="Wayne Ng, 2016/1/21" />
    <link rel="stylesheet" type="text/css" href="style1.css" >
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
    
</head>
<body>
    <h1 id = "luffyName">蒙奇·D·路飞</h1>
    <button id = "showToggle" type = "button">显示/隐藏信息</button>
    <button id = "fadeToggle" type = "button">淡入/淡出信息</button>
    <button id = "slideToggle" type = "button">滑入/滑出信息</button>
    <button id = "fontToggle" type = "button">加粗/恢复字体</button>
    <br /><br />
    <div id = "luffyInfo">
        <img src = "http://b.hiphotos.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=ce75753ed300baa1ae214fe92679d277/d1160924ab18972b854fb818e4cd7b899f510aee.jpg" id = "luffyImg" alt = "蒙奇·D·路飞"\>
        <p id = "luffyText">蒙奇·D·路飞，是日本动漫《海贼王》的男主角。草帽海贼团船长。由于他的标志性特征是一顶草帽，因此常被直接称呼为草帽。梦想是找到传说中的ONE PIECE，成为海贼王。性格积极乐观，爱憎分明且十分重视伙伴，对任何危险的事物都超感兴趣。看似白痴，却是一个大智若愚型的无愧船长之职的人。和其他传统的海贼所不同的是，他并不会为了追求财富而无故杀戮，而是享受着身为海贼的冒险。</p>
    </div>
    <button id = "animationStart" type = "button">开始动画</button>
    <button id = "stop" type = "button">停止动画</button>
    <br />
    <br />
    <div id = "animation">
    </div>
    <br /><br /><br /><br /><br /><br />
    <div id = "ajax">
        <button id = "ajax" type = "button">载入外部文档</button>
    </div>

    <script type="text/javascript" src="func1.js"></script>
</body>
</html>

style1.css文件：

body{
    background-image: url("http://p4.qhimg.com/t01f393a5be2a335f29.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
img#luffyImg{
    height: 210px;
    width: 150px;
}
p#luffyText{
    text-indent: 30px;
    font-style: italic;
    font-size: 20px;
}
div#animation{
    width: 30px;
    height: 30px;
    background: #FF4500;
    position: absolute;
    left:0px;
    bottom: 100px;
}
.boldFont{
    font-weight: bold;
}

func1.js文件：

$(document).ready(function(){
    //隐藏显示函数
    $("button#showToggle").click(function(){
        $("div#luffyInfo").toggle("slow" , 
            function(){alert("显示/隐藏信息操作完毕。");});
    });
    //淡入淡出函数
    $("button#fadeToggle").click(function(){
        $("div#luffyInfo").fadeToggle("slow" , 
            function(){alert("淡入/淡出信息操作完毕。");});
    });
    //滑入滑出函数
    $("button#slideToggle").click(function(){
        $("div#luffyInfo").slideToggle("slow" , 
            function(){alert("滑入/滑出信息操作完毕。");});
    });
    //加粗/恢复字体
    $("button#fontToggle").click(function(){
        $("div#luffyInfo").toggleClass("boldFont");
    });
    //动画函数
    $("button#animationStart").click(function(){
        var div = $("div#animation");
        div.animate({left:'100px' , opacity:'0.4'} , "slow");
        div.animate({bottom:'0px' , opacity:'0.8'} , "slow");
        div.animate({left:'0px' , opacity:'0.4'} , "slow");
        div.animate({bottom:'100px' , opacity:'0.8'} , "slow");
    });
    //停止动画
    $("button#stop").click(function(){
        $("div#animation").stop(true);
    });
    //载入外部文档
    $("button#ajax").click(function(){
        $("div#ajax").load("style1.css" , function(responseTxt , statusTxt , xhr){
            if(statusTxt == "success"){
                alert("外部内容加载成功！");
            }
            else{
                alert("Error: " + xhr.status + ": " + xhr.statusText);
            }
        });
    });
});

显示效果：

　　　　　　2016/1/21修订 By野马菌

posted on 2016-01-21 14:02 野马菌阅读(206) 评论(0) 编辑收藏举报