前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery基础--插件

jQuery基础--插件

作者头像
eadela
发布2019-09-29 16:29:36
3.4K0
发布2019-09-29 16:29:36
举报
文章被收录于专栏:eadela

1. 插件

1.1. 常用插件

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

1.1.1. jquery.color.js

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

使用插件的步骤

代码语言:javascript
复制
1. 引入jQuery文件
2. 引入插件(如果有用到css的话,需要引入css)
3. 使用插件
代码语言:javascript
复制
<!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

懒加载插件

代码语言:javascript
复制
<!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教程

基本使用:

代码语言:javascript
复制
2.    1.    引入jQueryUI的样式文件
2.    引入jQuery
3.    引入jQueryUI的js文件
4.    使用jQueryUI功能

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

代码语言:javascript
复制
<!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对象拥有某一个功能。

代码语言:javascript
复制
//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

 
prototype
代码语言:javascript
复制
<!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>

  初体验

代码语言:javascript
复制
<!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>
代码语言:javascript
复制
<!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>

制作手风琴插件

???

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-07-31 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 插件
    • 1.1. 常用插件
      • 1.1.1. jquery.color.js
      • 1.1.2. jquery.lazyload.js
      • 1.1.3. jquery.ui.js插件
    • 1.2. 制作jquery插件
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档