jQuery插件

JQuery 插件的操作

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。JQuery有着很丰富的插件，使用这些插件能够给JQuery提供额外的功能。

1.1 jquery.color.js插件

因为 jquery库中的自定义动画animate 不支持颜色渐变的效果，所以我们要借助于 使用jquery.color.js这个插件，就可以支持颜色的渐变了。

免费在线下载地址：mirrors / jquery / jquery-color · GitCode

使用插件的步骤：

1.引入jquery文件

2.引入插件(如果有用到css的话，需要引入css)

3.使用插件

 <link rel="stylesheet" href="https://cdn.dowebok.com/98/css/animate.min.css">
  div{
            background-color: #bada55;
            width: 300px;
            height: 300px;
            border: 1px solid green;
            margin-top: 10px;
            position: relative;
            top: 80px;
            left: 50px;
        }

 <button id="go">渐变</button>

    <div id="block">Hello!</div>

$(function(){
$('#go').click(function(){
$('#block').animate({
    left:300,
    width:600,
    backgroundColor:'red'
})
})
})

预览：

1.2 jquery.lazyload.js插件

jquery.lazyload.js懒加载插件--图片延迟加载插件

lazyload是一个用js编写的jQuery插件，用来实现图片的延迟加载。只有在浏览器可视区域的图片才会被加载，没有滚动到的区域img标签上会有一个占位图片，而真实图片不会被载入。当页面比较长，图片比较多的时候，延迟加载图片可以加快页面加载速度，在某些情况下降低服务器负担。

threshold : 200  //设置灵敏度，表示进入显示区域还有200像素就开始加载effect : "fadeIn" //使用淡入特效failure_limit : 10 //容差范围，一定要设置此值，原因说明请参考原文档

container: $("#container") //使用父容器，父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性

event : "click" //修改触发事件为单击

下载懒加载插件

jquery.lazyload.js - H-ui前端框架官方网站

注意：img标签的4个属性一个都不能少，否则不能实现延迟加载的效果

<img class="lazyload" alt="" data-original="//images.h-ui.net/www/AD-300x250.gif" />

 

操作：

将图片的真实路径放在img的data-original属性上。给img标签增加一个自定义的类名如：lazyload，方便js调用。

  .lazyload{
            margin-bottom: 20px;
            display: block;
        }

 

   <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />
    <img class="lazyload" alt="" width="300" height="250" data-original="//images.h-ui.net/www/AD-300x250.gif" />

 <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="./js/lazyload.js"></script>
    <script>
    $(function(){
    $('.lazyload').lazyload()
    })
    </script>

 预览：

1.3 jquery.cookie.js插件

jquery.cookie.js 是一个轻量级的cookie 插件，可以读取、写入、删除 cookie。

下载地址：jquery.cookie.js - H-ui前端框架官方网站

使用方法

1.新添加一个会话 cookie：

  // 1.添加会话（创建会话、申明会话）
// (1)  没有指明 cookie有效时间
// 创建cookie
// 当没有指明 cookie有效时间时，所创建的cookie有效期 默认到 用户关闭浏览器为止
  $.cookie('username','tom')
  $.cookie('nickname','yu')

 

注：当没有指明 cookie有效时间时，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为“会话cookie（session cookie）”。

2.创建一个cookie并设置有效时间为 7天:

// (2) 创建一个cookie并设置有效时间为 7天:
$.cookie('age',18,{expires:7})

注：当指明了cookie有效时间时，所创建的cookie被称为“持久 cookie （persistent cookie）”。

3.读取cookie

// 读取会话
let u = $.cookie('username');
console.log(u)

 4.删除cookie，通过传递null作为cookie的值即可

$.cookie('nickname',null)

 预览：

1.4 jquery.ui.js插件

JQueryUI专指JQuery官网维护的UI方向的插件  

官网：https://www.jqueryui.org.cn  

学习网站 : jQuery UI 教程 | 菜鸟教程

下载 :

Download Builder | jQuery UI

All jQuery UI Downloads | jQuery UI

 

使用步骤 :  

1.引入JQueryUI样式文件  

2.引入JQuery文件  

3.引入JQueryUI的js文件  

4.使用JQueryUI功能

比如，要制作一个日期选择器（datepicker）小部件，您需要向页面添加一个文本输入框，然后再调用 .datepicker()

<div>
        <label for="">日期</label>
        <input type="text" name="date" id="date">
    </div>

 

 <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="./jquery-ui-1.13.1/jquery-ui.min.js"></script>
    <script>
    $(function(){
        $('#date').datepicker()
    })
    </script>

 预览：