jQuery学习最后一天（插件）

最新推荐文章于 2024-03-14 07:30:00 发布

阿发学测试

最新推荐文章于 2024-03-14 07:30:00 发布

阅读量115

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_42603991/article/details/102058809

版权

前端学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

插件

常用插件

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

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

jquery.color.js

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

使用插件的步骤

<!--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("呵呵");
    });
  
  });

jquery.lazyload.js

懒加载插件

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实现新闻模块的案例

$(function () {
  
    $(".drag-wrapper").draggable({
      handle:".drag-bar"
    });
  
    
    $(".sort-item").sortable({
      opacity:0.3
    });
    
    
    $(".resize-item").resizable({
      handles:"s"
    });
  });

制作jquery插件

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

//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

制作手风琴插件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    div {
      width: 1000px;
      height: 300px;
      border: 2px solid #000;
      margin: 100px auto;
      overflow: hidden;
    }

    ul {
      width: 1100px;
    }

    li {
      width: 100px;
      height: 300px;
      float: left;
    }

  </style>
</head>
<body>

<div id="box">

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

</div>

<script src="jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>
<script>

  $(function () {
    var colors = ["red","yellow","green", "cyan", "pink","hotpink", "blue", "yellowgreen","greenyellow", "skyblue"];

    $("#box").accordion(colors, 20);

  });


</script>

</body>
</html>

jquery.accordion.js

$.fn.accordion = function (colors, width) {
  colors = colors || [];
  width = width || 0;


  var $li = this.find("li");

  var boxLength = this.width();
  var maxLength = boxLength - ($li.length - 1) * width;
  var avgLength = boxLength / $li.length;

  //更改li的颜色
  $li.each(function (i, e) {
    $(e).css("backgroundColor", colors[i]);
  });

  //给li注册鼠标经过事件
  $li.on("mouseenter", function () {
    $(this).stop().animate({width: maxLength}).siblings().stop().animate({width: width})
  });

  $li.on("mouseleave", function () {
    $li.stop().animate({width: avgLength});
  });
};

阿发学测试

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习最后一天（插件）

插件常用插件插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。jquery.color.jsanimate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。使用插件的步骤&lt...
复制链接

扫一扫

专栏目录