前端学习从入门到高级全程记录之37（jQuery④）

最新推荐文章于 2024-07-26 11:41:15 发布

灬银瓶丶

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量183

点赞数

分类专栏： JavaScript基础 jQuery 文章标签： javascript jquery css html js

本文链接：https://blog.csdn.net/zhangbobo1997/article/details/106159627

版权

前端学习（包括HTML、CSS、js、一些前端框架）同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

JavaScript基础

15 篇文章 0 订阅

订阅专栏

jQuery

4 篇文章 0 订阅

订阅专栏

学习目标

本期是JQuery的最后一期。引入的js文件还是与上一期保持一致。

1. 插件

1.1 常用插件

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

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

那么我这里用百度网盘提供本期所需要的插件：
链接： https://pan.baidu.com/s/1TDX1c-Be2GixdXCeEFwCmQ
提取码：lxsw
复制这段内容后打开百度网盘手机App，操作更方便哦

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>

在这里插入图片描述
网页出来后，02.gif没有被加载，只有你滑动

jquery.ui.js插件

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

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

其他教程：jQueryUI教程

我再提供一个离线文档：链接：https://pan.baidu.com/s/16IAX8tTyyQKVMjetmkJUDA
提取码：npp7

例子：

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

例子:
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>

js文件：jquery.bgColor.js

$.fn.bgColor = function (color) {
  //this是一个jq对象
  this.css("backgroundColor", color);

  return this;
};

手风琴案例：
我们之前做过这个案例，用js代码写了很多，但是使用插件形式，只需要2行就能解决。

html代码：

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

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

    div {
      width: 1200px;
      height: 400px;
      border: 2px solid #000;
      margin: 100px auto;
    }
    
    li {
      width: 240px;
      height: 400px;
      float: left;
    }

    li:nth-child(1) {
      background-image: url(images/1.jpg);
    }

    li:nth-child(2) {
      background-image: url(images/2.jpg);
    }

    li:nth-child(3) {
      background-image: url(images/3.jpg);
    }

    li:nth-child(4) {
      background-image: url(images/4.jpg);
    }

    li:nth-child(5) {
      background-image: url(images/5.jpg);
    }
  </style>
</head>
<body>

<div id="box">

  <ul>
    <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 () {

    $("#box").accordion();

  });


</script>

</body>
</html>

jquery.accordion.js

/**
 * Created by HUCC on 2017/4/12.
 */
$.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});
  });
};

总结

那么到此，JQuery的学习就结束了，更多的JQuery学习内容请上官网查看。

灬银瓶丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习从入门到高级全程记录之37（jQuery④）

学习目标本期是JQuery的最后一期。引入的js文件还是与上一期保持一致。1. 插件1.1 常用插件插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。那么我这里用百度网盘提供本期所需要的插件：链接： https://pan.baidu.com/s/1TDX1c-Be2GixdXCeEFwCmQ提取码：lxsw复制这段内容后打开百度网盘手机App，操作更方便哦1.1.1 jquery.
复制链接

扫一扫

专栏目录