前端库插件的说明文档都是.md结尾的文件(Markdown)
如何动态的去安装第三方的包呢?
借助包管理工具 bower、npm,自动加载第三方插件
一.背景色动画插件
animate()不支持backgroundcolor属性
插件jquery.color.js会让背景色渐变
<!--第一步,引入jQuery插件-->
<!--第二步,引入jQuery的扩展插件,这里是jQuery.color.js插件-->
<!--第三步,用第三方插件实现效果-->
<script src="插件包/jquery-3.1.1.js"></script>
<script src="插件包/jquery.color.js"></script>
先给div设置一个背景色
<script>
$(document).ready(function(){
$('div').animate({
backgroundColor:'teal'
},2000);
})
</script>
效果:两秒从黑色过渡到茶绿色
animate()是不支持的背景渐变的,这个插件可以帮我们实现背景渐变。
二.延迟加载插件
网站的资源图片没有一次性加载,减少流量,提高整个网站的吞吐率
懒加载,也叫延迟加载,不是一次性加载完成,当用户滚动到那块区域再加载出来,这样可以提高网站的效率
原理:获取高度,当高度到达某一位置,让这一块的图片加载出来
具体操作:一开始先放一个占位符(默认图片),当用户浏览到这一块的时候,把占位符替换成真正的图片
延迟加载的插件lazyload.js
三步骤:
1.引入jQuery插件
2.引入lazyload.js插件
<script src="插件包/jquery-3.1.1.jsz"></script>
<script src="插件包/jquery.lazyload.min.js"></script>
3.<img data-original="image.jpg" width="300' height="200" class="lazy">
需要设置宽高
4.$("img.lazy").lazyload();
最好是给所有的延迟加载的图片设置同一个class属性,就可以一起控制了。
注意:img标签的src属性改成data-original
eg:
<body>
<div></div>
<img alt="" data-original="images/1.gif" class="lazy" width="150px" height="440px">
<img alt="" data-original="images/2.gif" class="lazy" width="150px" height="440px">
</body>
</html>
<script>
$(function(){
$('.lazy').lazyload();
})
</script>
效果:当没有滑到img的区域的时候,src的显示,延迟加载
当滑到img的位置时,img的src指向了图片的位置,真正这个时候才去加载
三.jQuery UI
使用jQuery ui的方法:
第一步:引入jQuery的插件
第二步:引入jQueryUI的JS文件
第三步:引入jQueryUI的CSS文件
第四步:根据demo写
<script src="插件包/jquery-1.11.3.js"></script>
<script src="插件包/jquery-ui.min.js"></script>
<link rel="stylesheet" href="插件包/jquery-ui.min.css">
eg1:实现tab栏切换的实例
<!--写一个tab栏的demo-->
<div class="tab">
<ul>
<li><a href="#tabb1">tab1</a></li>
<li><a href="#tabb2">tab2</a></li>
<li><a href="#tabb3">tab3</a></li>
</ul>
<div id="tabb1">1</div>
<div id="tabb2">2</div>
<div id="tabb3">3</div>
</div>
JS:
$(document).ready(function(){
$('.tab').tabs();
});
效果:
eg2:写一个dialog弹出框的案例
<!--写一个弹出框的实例-->
<div class="dialog" title="可以自定义的弹出框标题">
我是自定义的弹出框的内容
</div>
JS:
$(document).ready(function(){
$('.dialog').dialog();
});
效果:
要求HTML和CSS和JS达到弱耦合