jQuery_引入第三方插件

桃扇骨 2022-05-21 00:13 444阅读 0赞

前端库插件的说明文档都是.md结尾的文件（Markdown）  
如何动态的去安装第三方的包呢？  
![这里写图片描述][70]  
借助包管理工具 bower、npm,自动加载第三方插件  
![这里写图片描述][70 1]  
**一.背景色动画插件**  
animate()不支持backgroundcolor属性

插件jquery.color.js会让背景色渐变

<script src="插件包/jquery-3.1.1.js"></script>
        <script src="插件包/jquery.color.js"></script>

先给div设置一个背景色

效果：两秒从黑色过渡到茶绿色  
![这里写图片描述][70 2]  
animate()是不支持的背景渐变的，这个插件可以帮我们实现背景渐变。

**二.延迟加载插件**  
网站的资源图片没有一次性加载，减少流量，提高整个网站的吞吐率

懒加载，也叫延迟加载，不是一次性加载完成，当用户滚动到那块区域再加载出来，这样可以提高网站的效率

原理：获取高度，当高度到达某一位置，让这一块的图片加载出来

具体操作：一开始先放一个占位符（默认图片），当用户浏览到这一块的时候，把占位符替换成真正的图片

延迟加载的插件lazyload.js

三步骤：

1.引入jQuery插件

2.引入lazyload.js插件

3.`<img data-original="image.jpg" width="300' height="200" class="lazy">` 需要设置宽高  
![这里写图片描述][70 3]  
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的显示，延迟加载  
![这里写图片描述][70 4]  
当滑到img的位置时，img的src指向了图片的位置，真正这个时候才去加载  
![这里写图片描述][70 5]

**三.jQuery UI**  
使用jQuery ui的方法：

第一步：引入jQuery的插件

第二步：引入jQueryUI的JS文件

第三步：引入jQueryUI的CSS文件

第四步：根据demo写

eg1：实现tab栏切换的实例

<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();
        });

效果：  
![这里写图片描述][70 6]

eg2:写一个dialog弹出框的案例

<div class="dialog" title="可以自定义的弹出框标题">
              我是自定义的弹出框的内容
         </div>
    
     JS:
       $(document).ready(function(){
            $('.dialog').dialog();
        });

效果：  
![这里写图片描述][70 7]  
要求HTML和CSS和JS达到弱耦合

[70]: /images/20220521/2417fdc81bce4cd7adb267a134129975.png
[70 1]: /images/20220521/da8e497ad44c4c81a59338ae6e74fd18.png
[70 2]: /images/20220521/8f26a6f9267e4b2c8053bee110f05e5a.png
[70 3]: /images/20220521/0ea4efae6fdb4ea1a9bf946cfef0c32e.png
[70 4]: /images/20220521/55cd1a97b6264868b45d95bcfa7cbf91.png
[70 5]: /images/20220521/a7c2ffaf65444757a1463b158272f181.png
[70 6]: /images/20220521/1a8cd72d8b264673b0ecdf6c2c5fc4c0.png
[70 7]: /images/20220521/c12fe58be5c84f668d24fe049261825c.png