最近要到使用别的jquery插件，但部分功能并不能满足，为满足功能，只能对插件进行修改来满足，要修改插件，先要了解插件如何封装，

明白了如何封装插件，才能更好修改插件；
如何封装插件？

1、插件封装类型：

①封装对象类；②封装全局函数型；③选择器插件类；

2、关于封装插件的建议

①封装的插件建议为jquery.[插件名].js,避免和其他插件混淆；

②插件开头，尽量加上分号，避免别人的代码不规范引起错误，插件结尾都应该加上分号，避免压缩出错；

③插件应该设置默认参数，增加插件可用性；

例如

;(function($){

    //此处编写插件代码

 })(jQuery);

此处贴代码：

;(function($){

	//1.初始化,拼接html

	//2.为元素添加事件

	$.fn.extend({

		'pic':function(){

			var $this=this;

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

			var html="<div class=\"box\"><ul>";

			for (var i = 0; i < vs; i++) {

				if(i==0){

					html+="<li class=\"active\"><a href=\"javascript:void(0);\" class=\"page\">"+(i*1+1)+"</a></li>";

				}else{

					html+="<li><a href=\"javascript:void(0);\" class=\"page\">"+(i*1+1)+"</a></li>";

				}

			};

			html+="</ul></div>";

			$(this).parent().append(html);

			$(".box li").click(function(){

				$(this).addClass("active");

				$(this).siblings().removeClass("active");

				$($this).find("li").eq($(this).text()*1-1).show();

				$($this).find("li").eq($(this).text()*1-1).siblings().hide();

			});

		}

	});

})(jQuery);

此代码为一个简单的图片轮播插件，效果图如：

在此附上页面代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>图片显示</title>

	<link rel="stylesheet" type="text/css" href="jquery.pictrue.css">

</head>

<body>

	<div class="container">

		<ul class="picture" id="pc">

			<li><img alt="1" src="imgs/03.jpg"></li>

			<li><img alt="1" src="imgs/04.jpg"></li>

			<li><img alt="1" src="imgs/05.jpg"></li>

		</ul>

	</div>

</body>

<script type="text/javascript" src="jquery-1.10.2.js"></script>

<script type="text/javascript" src="jquery.picture.js"></script>

<script type="text/javascript">

	$(function(){

		$("#pc").pic();

	});

</script>

</html>

封装jquery插件的更多相关文章

  1. 封装jQuery插件的步骤

    引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...

  2. 封装jQuery插件实现TAB切换

    先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. angular封装jquery插件（组件）

    http://www.phloxblog.in/jquery-plugin-angular-js-directive-clean-html-approach/#.VaCWL9yUemJ

  4. jquery插件封装

    HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...

  5. 什么？你还不会写JQuery 插件

    前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...

  6. 写JQuery 插件 什么？你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

  7. 写jQuery插件

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  8. 写JQuery 插件

    什么?你还不会写JQuery 插件 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再 ...

  9. 如何编写JQuery 插件详解

    转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq ...

随机推荐

  1. C++--- Lambda匿名函数表达式

    视频教程:https://www.bilibili.com/video/av66419552/ 格式: [capture](parameters)mutable->returm-type{};  ...

  2. 处理离散型特征和连续型特征共存的情况 归一化 论述了对离散特征进行one-hot编码的意义

    转发:https://blog.csdn.net/lujiandong1/article/details/49448051 处理离散型特征和连续型特征并存的情况,如何做归一化.参考博客进行了总结:ht ...

  3. chromedriver.exe，自动化web, 安装谷歌驱动，以及可能遇到的坑

    1.下载谷歌驱动:chromedriver.exe http://chromedriver.storage.googleapis.com/index.html (下载驱动的链接) 2.把下载的chro ...

  4. CentOS7.2 安装 PHP7.2

    安装源 安装 EPEL 软件包: $ sudo yum install epel-release 安装 remi 源: $ sudo yum install http://rpms.remirepo. ...

  5. C# 2.0

    序言 泛型 为什么需要泛型? 分部类型 分部类和方法 partial 匿名方法 使用Delegate的时候很多时候没必要使用一个普通的方法,因为这个方法只有这个Delegate会用,并且只用一次,这时 ...

  6. C/C++ - 指针 与 引用

    一.指针 1.指针与指针变量的区分 a.指针:指针就是内存编号,也就是内存地址,通俗的讲,指针就是变量的地址. 注1:指针的大小是根据计算机的操作系统而定的,跟变量类型无关 注2:如果是32位的操作系 ...

  7. Linux命令-磁盘管理(一)

    Linux命令-磁盘管理(一) Linux cd命令 Linux cd命令用于切换当前工作目录至 dirName(目录参数). 其中 dirName 表示法可为绝对路径或相对路径.若目录名称省略,则变 ...

  8. oracle 获取时间

    1.获取当前时间的前24小时的各小时时间段 select to_char(to_date(to_char(sysdate ) ,'yyyy-mm-dd hh24') || ':00:00','yyyy ...

  9. R_Studio(cart算法决策树)对book3.csv数据用测试集进行测试并评估模型

    对book3.csv数据集,实现如下功能: (1)创建训练集.测试集 (2)用rpart包创建关于类别的cart算法的决策树 (3)用测试集进行测试,并评估模型 book3.csv数据集 setwd( ...

  10. Unity3D_(游戏)贪吃蛇

    Unity制作贪吃蛇小游戏 玩家通过“WASD”控制小蛇上下左右移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或身体交叉蛇头撞倒自己身体游戏结束 可通 ...