jQuery_引入第三方插件

最新推荐文章于 2024-07-02 20:43:12 发布

_dalianmiao

最新推荐文章于 2024-07-02 20:43:12 发布

阅读量4.9k

点赞数 1

分类专栏： jQuery系列

本文链接：https://blog.csdn.net/hani_wen/article/details/80815305

版权

jQuery系列专栏收录该内容

30 篇文章 0 订阅

订阅专栏

前端库插件的说明文档都是.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达到弱耦合

_dalianmiao

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery_引入第三方插件

前端库插件的说明文档都是.md结尾的文件（Markdown）如何动态的去安装第三方的包呢？借助包管理工具 bower、npm,自动加载第三方插件一.背景色动画插件 animate()不支持backgroundcolor属性插件jquery.color.js会让背景色渐变 &lt;!--第一步，引入jQuery插件--&gt; &lt;!--第二步，引入j...
复制链接

扫一扫

专栏目录