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>
1.7 sublime 裝插件
sublime 3
第一步： 裝上sublime的包管理器package control
ctrl+ ~
上網把 按照package control的那段代碼胳蛮，粘貼一下，然后回車储藐。
第二步：使用Ctrl + shift + p
【插件獲取】：
鏈接：http://pan.baidu.com/s/1i5FONtF 密碼：r5wf
