JQuery-插件

作者: 哎呦呦胖子斌 | 来源:发表于2018-11-26 10:54 被阅读0次

jquery设计思想书目录
JQuery-插件
jQuery-事件和插件
jQuery UI
jquery常用
jquery 实时计算用户输入的字数
AJAX-全集
2018-06-12
ECharts中国地图可视化代码 - javascript代码模
jQuery-样式相关操作

插件：就是一个功能，jQuery的插件就是别人把功能写好了，我们直接拿过来用就可以了。

制作插件

1．首先正常写代码

<!DOCTYPE html>

<html  lang="en">

<head>

  <meta  charset="UTF-8">

  <meta  name="viewport"  content="width=device-width, initial-scale=1.0">

  <meta  http-equiv="X-UA-Compatible"  content="ie=edge">

  <title>按键改变颜色</title>

  <script  src="jquery-3.3.1.js"></script>

</head>

<style>

#dv div {

  width: 100px;

  height: 100px;

  border: 1px  solid  pink;

  float: left;

  margin-right: 10px;

  margin-top: 10px;

}

</style>

<body>

  <div>

  <input  type="button"  value="red">

  <input  type="button"  value="green">

  <input  type="button"  value="yellow">

  <div  id="dv">

  <div></div>

  <div></div>

  <div></div>

  </div>

  </div>

</body>

<script>

  $(function(){

  $('input').click(function(){

  $('#dv div').css('backgroundColor',$(this).val());

 });

 })

</script>

</html>

2．将要实现的功能封装成jQuery库中的一个方法（个人觉得这个地方很关键，剩下的就是CV大法了）

  $(function(){

  // 如果希望jQuery的对象能够调用这个方法，就要将这个方法加入到$.fn这个位置里

  $.fn.changeColor = function(color){

  //这里的this就是调用changeColor这个方法的实例对象，也就是下面的$('#dv div')

  $(this).css('backgroundColor',color);

 }

  // 使用封装好的方法

  $('input').click(function(){

  $('#dv div').changeColor($(this).val());

 });

 })

到这里插件就制作完成了，个人觉得就是将自己写的方法封装起来，$.fn.changeColor = function(color)这一步很关键。

使用插件

就上面的栗子演示下怎么使用插件

1．首先在自己的项目中新建两个文件，一个js文件，一个css文件

image.png

在css文件中copy过来插件中的css代码

#dv div {
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    float: left;
    margin-right: 10px;
    margin-top: 10px;
}

在js文件中copy过来插件中封装好的方法

// 插件的基本代码
// 如果希望jQuery的对象能够调用这个方法，就要将这个方法加入到$.fn这个位置里
$.fn.changeColor = function (color) {
    //这里的this就是调用changeColor这个方法的实例对象，也就是下面的$('#dv div')
    $(this).css('backgroundColor', color);
}

3．在自己要使用插件的html文件中copy过来插件中的body代码，并在头部引入刚新建的插件的css文件和js文件，在自己的srcipt标签中使用插件功能代码。
3．1引入body代码

    <!-- 引入插件的html body内容 -->
    <div>
        <input type="button" value="red">
        <input type="button" value="green">
        <input type="button" value="yellow">

        <div id="dv">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

3．2引入外部文件

    <!-- 引入插件的css文件 -->
    <link rel="stylesheet" href="css/jquery-changeColor.css">
    <!-- 引入jQuery文件，这里使用哪个版本的jQuery都可以 -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 引入插件的js文件 -->
    <script src="js/jquery-changeColor.js"></script>

3．3使用插件功能方法

<!-- 在自己的页面加载函数中引入功能代码 -->
<script>
    $(function () {
        // 复制插件实现功能的代码
        // 调用封装好的方法，实现功能
        $('input').click(function () {
            $('#dv div').changeColor($(this).val());
        });
    })
</script>

完整的html文件如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用插件</title>
    <!-- 引入插件的css文件 -->
    <link rel="stylesheet" href="css/jquery-changeColor.css">
    <!-- 引入jQuery文件，这里使用哪个版本的jQuery都可以 -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 引入插件的js文件 -->
    <script src="js/jquery-changeColor.js"></script>
</head>

<body>
    <!-- 引入插件的html body内容 -->
    <div>
        <input type="button" value="red">
        <input type="button" value="green">
        <input type="button" value="yellow">

        <div id="dv">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

<!-- 在自己的页面加载函数中引入功能代码 -->
<script>
    $(function () {
        // 复制插件实现功能的代码
        // 调用封装好的方法，实现功能
        $('input').click(function () {
            $('#dv div').changeColor($(this).val());
        });
    })
</script>

</html>

一般使用步骤：