1.5jQuery补充

需要注意的地方：
animate动画：不支持背景的动画效果
animate动画支持的属性列表
参考手册（不全）、
在线文档：
w3school：http://www.w3school.com.cn/jquery/index.asp
jQuery官网：http://jquery.com/

jQuery.color.js

jQuery官网插接教程：http://learn.jquery.com/plugins/basic-plugin-creation/

两种方式：

全局jQuery函数扩展方法：

    $.log = function(){};

jQuery对象扩展方法：

    $.fn.log = function(){};

JQ扩展插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery扩展方法</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        //给jQuery全局对象扩展一个方法
        $.log = function () {
            console.log(new Date());
        };

        // $.each()

        // $.log();

        // 扩展一个普通的jQuery对象的方法
        $.fn.log = function() {
            console.log($(this).text());

            //输出所有的 评论组件的所有的代码。
            return "<ul></ul>"
        };

        $(function(){
            $("div").log();
        });
    </script>
</head>
<body>
    <div>
        sdjlsjdf 
    </div>
</body>
</html>

1.6 引入第三方插件

背景色动画插件

背景色动画插件.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景色动画插件演示</title>
    <style>
        .box {
            background-color: #ccc;
            height: 400px;
            width: 400px;
        }
    </style>
    <!-- 
    第一步： 引入jQuery
    第二步：引入第三方插件
    第三步：用第三方插件实现效果 -->
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.color.js"></script>
    <script>
        $(function () {
            $(".box").animate({
                    backgroundColor : "teal"
                },
                2000);
        });
    </script>

</head>
<body>
    <div class="box">
        
    </div>
</body>
</html>

lazyload 插件

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载插件案例</title>
    <style>
        div {
            height: 2000px;
        }
    </style>
<!--    第一步：引包
    第二步：　写ｉｍｇ
    第三步：　lazyload（）方法 -->

    <script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.lazyload.min.js"></script>
    <script>
        $(function () {
            $(".lazy").lazyload();
        });
    </script>
</head>
<body>
    <div>
        
    </div>
    <img class="lazy" data-original = "imgs/1.gif" height="440" width="150" alt="">
    <img class="lazy" data-original="imgs/2.gif" height="440" width="150" alt="">
</body>
</html>

jQuery UI 插件

第一步：引入jQuery
第二步：引入jQueryUI的 js库
第三步：　引入jQueryUI 的css样式第四步：照人家的demo去写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQueryUI案例</title>
    <!-- 第一步： 引入jQuery
    第二步：引入jQueryUI的 js库
    第三步：　引入jQueryUI 的css样式
    第四步：照人家的demo去写 -->
    <link rel="stylesheet" href="jQueryUI/jquery-ui.min.css">
    
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jQueryUI/jquery-ui.min.js"></script>
    
    <style>
        .wrap div {
            height: 300px;
            background-color: #ccc;
        }
    </style>

    <script>
        $(function () {
            $(".wrap").tabs();
            $(".dialog").dialog();
        });
    </script>
</head>
<body>
    <div class="wrap">
        <ul>
            <li><a href="#tab1">页签1</a></li>
            <li><a href="#tab2">页签2</a></li>
            <li><a href="#tab3">页签3</a></li>
        </ul>

        <div id="tab1">
            1
        </div>
        <div id="tab2">2</div>
        <div id="tab3">3</div>
    </div>


    <!-- dialog案例 -->
    <div class="dialog" title="我是对话框的标题">
        我是对话框
    </div>
</body>
</html>