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>

制作手风琴插件

？？？

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. [TabControl] TabControl控件的最佳实践，可以把一个窗体和用户控件添加进来

    看下效果吧<ignore_js_op> 下面是一个公共的添加方法看代码 [C#] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 1 ...

  2. C++11常用特性总结

    非原创,转载出处 http://www.cnblogs.com/feng-sc C++11已经出来很久了,网上也早有很多优秀的C++11新特性的总结文章,在编写本博客之前,博主在工作和学习中学到的关于 ...

  3. Linux awk抓取IP的两种方式

    ip addr show ens33 | awk -F "[ /]+" '/inet /{print $3}' 或 ifconfig ens33 | awk -F "[ ...

  4. 第一个chrome extension

    如今,chrome浏览器的使用如越来越流行,chrome extension往往能提供更多很丰富的功能.以前一直想了解这方面的东西,可是又担心很复杂.前段时间,在斗鱼看一个直播,想刷弹幕,但是每次自己 ...

  5. MySQL解决忘记密码问题

    解决Win10下Mysql 的Access denied for user'root'@'localhost' (using password: NO)问题 mysql一旦忘记密码即会出现这样的错误. ...

  6. 二gradle创建SSM项目——Hello word

    一创建gradle web项目 1.以下是我的项目结构web工程+工具module,mapper用来存放mybatis-plus自动生成类,通过 MpGenerator.class 生成.   项目结 ...

  7. rabbitma客户端

    知道答案了,原因是重连的时候,每次重连都创建了一个新的线程,然后有信号的时候,每个线程都连接到rabbitMq服务器上去,导致了同一个IP通过不同端口链接上了服务器,出现了多个channel,而发多次 ...

  8. 手写hashmap算法

    /** * 01.自定义一个hashmap * 02.实现put增加键值对,实现key重复时替换key的值 * 03.重写toString方法,方便查看map中的键值对信息 * 04.实现get方法, ...

  9. 24.mongodb可视化工具部署——2019年12月19日

    2019年10月09日17:05:54 教程链接:https://blog.csdn.net/qq_32340877/article/details/79142129 项目名:adminMongo g ...

  10. php array_merge()函数 语法

    php array_merge()函数 语法 作用:把一个或多个数组合并为一个数组.dd马达选型 语法:array_merge(array1,array2,array3...) 参数: 参数 描述 a ...