1. 插件

1.1. 常用插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

1.1.1. jquery.color.js

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

使用插件的步骤

  1. 1. 引入jQuery文件
  2. 2. 引入插件（如果有用到css的话，需要引入css）
  3. 3. 使用插件
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     div {
  8.       width: 400px;
  9.       height: 400px;
  10.       background-color: red;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.  
  16. <div></div>
  17.  
  18. <!--1. 引入jquery的js文件-->
  19. <script src="jquery-1.12.4.js"></script>
  20. <!--2. 引入插件的js文件-->
  21. <script src="jquery.color.js"></script>
  22. <script>
  23.   $(function () {
  24.  
  25.     //3. 直接使用即可。
  26.     //说明jquery不支持颜色的渐变,颜色最好用16进制
  27.     $('div').animate({backgroundColor:"#ffc0cb"}, 3000, function () {
  28.         alert("呵呵");
  29.     });
  30.  
  31.   });
  32. </script>
  33. </body>
  34. </html>

　　

1.1.2. jquery.lazyload.js

懒加载插件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     div {
  8.       height: 4000px;
  9.     }
  10.   </style>
  11. </head>
  12. <body>
  13. <div></div>
  14. <img class="lazy" data-original="02.gif" alt="">
  15.  
  16. <script src="jquery-1.12.4.js" type="text/javascript"></script>
  17. <script src="jquery.lazyload.js" type="text/javascript"></script>
  18. <script>
  19.  
  20.   $(function () {
  21.  
  22.     $("img.lazy").lazyload();
  23.  
  24.   });
  25.  
  26. </script>
  27. </body>
  28. </html>

　　

1.1.3. jquery.ui.js插件

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

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

其他教程：jQueryUI教程

基本使用:

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="en">
  5.   <meta charset="UTF-8">
  6.   <title></title>
  7.   <link rel="stylesheet" href="jquery-ui.css">
  8.   <style type="text/css">
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.     }
  13.  
  14.     .drag-wrapper {
  15.       width: 400px;
  16.       margin: 50px auto 0;
  17.       /*border: 10px solid #000;*/
  18.     }
  19.  
  20.     .drag-bar {
  21.       height: 40px;
  22.       font-size: 20px;
  23.       font-weight: bold;
  24.       line-height: 40px;
  25.       text-align: center;
  26.       background-color: #E6E6E6;
  27.       border-top-left-radius: 5px;
  28.       border-top-right-radius: 5px;
  29.       cursor: move;
  30.     }
  31.  
  32.     .resize-item {
  33.       height: 212px;
  34.       border: 1px solid #e6e6e6;
  35.     }
  36.  
  37.     .sort-wrapper {
  38.       height: 100%;
  39.       overflow: hidden;
  40.     }
  41.  
  42.     .sort-item {
  43.       list-style: none;
  44.       padding-top: 10px;
  45.     }
  46.  
  47.     .sort-item li {
  48.       height: 40px;
  49.       line-height: 40px;
  50.       padding-left: 20px;
  51.       cursor: pointer;
  52.     }
  53.  
  54.     .sort-item li:hover {
  55.       background-color: #e6e6e6;
  56.     }
  57.   </style>
  58.  
  59. </head>
  60.  
  61. <body>
  62. <div class="drag-wrapper">
  63.   <div class="drag-bar">可拖动、排序、变形的新闻模块</div>
  64.   <div class="resize-item">
  65.     <div class="sort-wrapper">
  66.       <ul class="sort-item">
  67.         <li>这是第1条新闻!</li>
  68.         <li>这是第2条新闻!</li>
  69.         <li>这是第3条新闻!</li>
  70.         <li>这是第4条新闻!</li>
  71.         <li>这是第5条新闻!</li>
  72.         <li>这是第6条新闻!</li>
  73.         <li>这是第7条新闻!</li>
  74.         <li>这是第8条新闻!</li>
  75.         <li>这是第9条新闻!</li>
  76.         <li>这是第10条新闻!</li>
  77.       </ul>
  78.     </div>
  79.   </div>
  80. </div>
  81.  
  82. <script src="jquery-1.12.4.js"></script>
  83. <script src="jquery-ui.js"></script>
  84.  
  85. <script>
  86.   $(function () {
  87.  
  88.     $(".drag-wrapper").draggable({
  89.       handle:".drag-bar"
  90.     });
  91.  
  92.     $(".sort-item").sortable({
  93.       opacity:0.3
  94.     });
  95.  
  96.     $(".resize-item").resizable({
  97.       handles:"s"
  98.     });
  99.   });
  100. </script>
  101.  
  102. </body>
  103.  
  104. </html>

　　

1.2. 制作jquery插件

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

  1. //通过给$.fn添加方法就能够扩展jquery对象
  2. $.fn. pluginName = function() {};
  4. prototype
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <script src="jquery-1.12.4.js"></script>
  10. <script>
  11.  
  12.   //var arr = new Array();
  13.   //console.log(arr);
  14.  
  15.   //给数组的原型增加了一个方法，sayHi的方法
  16. //  Array.prototype.sayHi = function () {
  17. //    console.log("呵呵");
  18. //  }
  19. //
  20. //
  21. //
  22. //  var arr = new Array();
  23. //
  24. //  arr.sayHi();
  25.  
  26.   //jquery插件的实质，就是给jquery的原型上增加方法。
  27.  
  28.   //$.fn  ==== jQuery.prototype
  29.   $.fn.sayHi = function () {
  30.       console.log("呵呵");
  31.   }
  32.  
  33.   $(document).sayHi();
  34.  
  35. </script>
  36.  
  37. </body>
  38. </html>

　　初体验

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     div {
  8.       width: 200px;
  9.       height: 200px;
  10.       background-color: pink;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.  
  16. <div></div>
  17. <p>1234</p>
  18.  
  19. <script src="jquery-1.12.4.js"></script>
  20. <script src="jquery.bgColor.js"></script>
  21. <script>
  22.  
  23.   $(function () {
  24.  
  25.     $("div").bgColor("red").width(400);
  26.  
  27.   });
  28.  
  29. </script>
  30.  
  31. </body>
  32. </html>

　　

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     div {
  8.       width: 200px;
  9.       height: 200px;
  10.       background-color: pink;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.  
  16. <div></div>
  17. <p>1234</p>
  18.  
  19. <script src="jquery-1.12.4.js"></script>
  20. <script src="jquery.bgColor.js"></script>
  21. <script>
  22.  
  23.   $(function () {
  24.  
  25.     $("div").bgColor("red").width(400);
  26.  
  27.   });
  28.  
  29. </script>
  30.  
  31. </body>
  32. </html>

制作手风琴插件

？？？

jQuery基础--插件的更多相关文章

  1. 【jQuery基础学习】08 编写自定义jQuery插件

    目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...

  2. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  3. 【jQuery基础学习】07 jQuery表单插件-Form

    作用:jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单,从而使我们提交表单的时候页面不用进行刷新. 它的核心方法是ajaxForm()和ajaxSubmit() 升级表 ...

  4. jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  5. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  6. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  7. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  8. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  9. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

随机推荐

  1. 收集慕课网讲解的border知识

    1.使用boeder辅助background-posi定位 2.使用border实现三道杠图标 3.利用border实现--鼠标放上去后,改变图标的颜色

  2. 性能分析之profiling及火焰图

    profiling 是一项非常重要的,但又对很多程序员陌生的技术,它尤其对性能调优有显著帮助.本文以Brendan对perf的介绍稍加引入[底层涉及了太多细节,目前仅关心如何用它对服务器应用进行use ...

  3. 20191125PHP抽象类、接口和魔术方法

    抽象类 不能被实例化,用于其他类的继承.使用abstract(抽象).抽象方法一定是抽象类,抽象类不一定有抽象方法. 接口interface是特殊的抽象类. eg: <?php //抽象类 ab ...

  4. mysql中explain输出列之id的用法详解

    参考mysql5.7 en manual,对列id的解释: The SELECT identifier. This is the sequential number of the SELECT wit ...

  5. hdu 4643 GSM(暴力)

    GSM Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submis ...

  6. CF1009F Dominant Indices 长链剖分

    题目传送门 https://codeforces.com/contest/1009/problem/F 题解 长链剖分的板子吧. 令 \(dp[x][i]\) 表示 \(x\) 的子树中的深度为 \( ...

  7. TreeMap定制排序和自然排序

    TreeMap定制排序和自然排序自然排序是实现Comparable接口的方法.代码如下: @Override public int compareTo(Object o) { if (o instan ...

  8. django 我的博客 （慕课网视频）笔记

    用到的命令 1.创建项目 django-admin startproject myBlog 2.创建appcd [项目名] python3 manage.py startapp blog 3.数据迁移 ...

  9. CF286E Ladies' Shop FFT

    题目链接 读完题后,我们发现如下性质: 在合法且和不超过 $m$ 的情况下,如果 $a_{i}$ 出现,则 $a_{i}$ 的倍数也必出现. 所以如果合法,只要对所有数两两结合一次就能得到所有 $a_ ...

  10. 破解Revealapp的试用时间限制

    转载自:http://jingwei6.me/2014/02/28/reveal_crack.html Revealapp作为分析iOS app UI结构的利器,还是非常称手的,89刀的价格也是物有所 ...