jQuery基础–插件

  • 2019 年 10 月 10 日
  • 筆記

1. 插件

1.1. 常用插件

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

1.1.1. jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤

1. 引入jQuery文件  2. 引入插件（如果有用到css的话，需要引入css）  3. 使用插件
<!DOCTYPE html>  <html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>Title</title>    <style>      div {        width: 400px;        height: 400px;        background-color: red;      }    </style>  </head>  <body>    <div></div>    <!--1. 引入jquery的js文件-->  <script src="jquery-1.12.4.js"></script>  <!--2. 引入插件的js文件-->  <script src="jquery.color.js"></script>  <script>    $(function () {        //3. 直接使用即可。      //说明jquery不支持颜色的渐变,颜色最好用16进制      $('div').animate({backgroundColor:"#ffc0cb"}, 3000, function () {          alert("呵呵");      });      });  </script>  </body>  </html>

1.1.2. jquery.lazyload.js

懒加载插件

<!DOCTYPE html>  <html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>Title</title>    <style>      div {        height: 4000px;      }    </style>  </head>  <body>  <div></div>  <img class="lazy" data-original="02.gif" alt="">    <script src="jquery-1.12.4.js" type="text/javascript"></script>  <script src="jquery.lazyload.js" type="text/javascript"></script>  <script>      $(function () {        $("img.lazy").lazyload();      });    </script>  </body>  </html>

1.1.3. jquery.ui.js插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

2.    1.    引入jQueryUI的样式文件  2.    引入jQuery  3.    引入jQueryUI的js文件  4.    使用jQueryUI功能

使用jquery.ui.js实现新闻模块的案例

<!DOCTYPE html>  <html>    <head lang="en">    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" href="jquery-ui.css">    <style type="text/css">      * {        margin: 0;        padding: 0;      }        .drag-wrapper {        width: 400px;        margin: 50px auto 0;        /*border: 10px solid #000;*/      }        .drag-bar {        height: 40px;        font-size: 20px;        font-weight: bold;        line-height: 40px;        text-align: center;        background-color: #E6E6E6;        border-top-left-radius: 5px;        border-top-right-radius: 5px;        cursor: move;      }        .resize-item {        height: 212px;        border: 1px solid #e6e6e6;      }        .sort-wrapper {        height: 100%;        overflow: hidden;      }        .sort-item {        list-style: none;        padding-top: 10px;      }        .sort-item li {        height: 40px;        line-height: 40px;        padding-left: 20px;        cursor: pointer;      }        .sort-item li:hover {        background-color: #e6e6e6;      }    </style>        </head>    <body>  <div class="drag-wrapper">    <div class="drag-bar">可拖动、排序、变形的新闻模块</div>    <div class="resize-item">      <div class="sort-wrapper">        <ul class="sort-item">          <li>这是第1条新闻!</li>          <li>这是第2条新闻!</li>          <li>这是第3条新闻!</li>          <li>这是第4条新闻!</li>          <li>这是第5条新闻!</li>          <li>这是第6条新闻!</li>          <li>这是第7条新闻!</li>          <li>这是第8条新闻!</li>          <li>这是第9条新闻!</li>          <li>这是第10条新闻!</li>        </ul>      </div>    </div>  </div>    <script src="jquery-1.12.4.js"></script>  <script src="jquery-ui.js"></script>      <script>    $(function () {        $(".drag-wrapper").draggable({        handle:".drag-bar"      });          $(".sort-item").sortable({        opacity:0.3      });          $(".resize-item").resizable({        handles:"s"      });    });  </script>    </body>    </html>

1.2. 制作jquery插件

原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。 

//通过给$.fn添加方法就能够扩展jquery对象  $.fn. pluginName = function() {};      prototype
<!DOCTYPE html>  <html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>Title</title>  </head>  <body>      <script src="jquery-1.12.4.js"></script>  <script>      //var arr = new Array();    //console.log(arr);      //给数组的原型增加了一个方法，sayHi的方法  //  Array.prototype.sayHi = function () {  //    console.log("呵呵");  //  }  //  //  //  //  var arr = new Array();  //  //  arr.sayHi();          //jquery插件的实质，就是给jquery的原型上增加方法。      //$.fn  ==== jQuery.prototype    $.fn.sayHi = function () {        console.log("呵呵");    }      $(document).sayHi();      </script>    </body>  </html>

　　初体验

<!DOCTYPE html>  <html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>Title</title>    <style>      div {        width: 200px;        height: 200px;        background-color: pink;      }    </style>  </head>  <body>    <div></div>  <p>1234</p>      <script src="jquery-1.12.4.js"></script>  <script src="jquery.bgColor.js"></script>  <script>      $(function () {        $("div").bgColor("red").width(400);      });    </script>    </body>  </html>
<!DOCTYPE html>  <html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>Title</title>    <style>      div {        width: 200px;        height: 200px;        background-color: pink;      }    </style>  </head>  <body>    <div></div>  <p>1234</p>      <script src="jquery-1.12.4.js"></script>  <script src="jquery.bgColor.js"></script>  <script>      $(function () {        $("div").bgColor("red").width(400);      });    </script>    </body>  </html>

制作手风琴插件

？？？

VirMach 便宜 VPS

QNews

QNews