最近要到使用别的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. 01-01 Web应用

    一 Web应用的组成 接下来我们学习的目的是为了开发一个Web应用程序,而Web应用程序是基于B/S架构的,其中B指的是浏览器,负责向S端发送请求信息,而S端会根据接收到的请求信息返回相应的数据给浏览 ...

  2. 28.数组中出现次数超过长度一半的数字(python)

    题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...

  3. echarts 添加自定义label标签

    1.echarts 自定义标签 注:当设置visualMap的后,给覆盖regions单独定义的值(如果data 中没有regions的地区 则无妨,我这个是从data中删除'青岛',但是lable ...

  4. Codeforces 482E ELCA (LCT)

    题目链接 http://codeforces.com/contest/482/problem/E 题解 T2智商题T3大LCT题,我一个也不会= = CF的标算好像是分块?反正现在LCT都普及了就用L ...

  5. Unity3D_(游戏)2D坦克大战 像素版

    2D坦克大战    像素版 游戏规则: 玩家通过上.下.左.右移动坦克,空格键发射子弹 敌人AI出身时朝向己方大本营(未防止游戏快速结束,心脏上方三个单位障碍物设为刚体) 当玩家被击杀次数>=3 ...

  6. HTML jQuery 文档操作 - html() 方法

    jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...

  7. linux下面实时查看进程，内存以及cpu使用情况使用命令

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器 可以直接使用top命令查看整体情况,如图: 但是这样虽然看的东西多,但是闲的比较 ...

  8. 剑指offer：把一个支付算转化为整数

    1:首先,根据课本上的程序,是这样的: #include "stdafx.h" #include "iostream" using namespace std; ...

  9. SpringMVC——-Controller返回格式化数据如JSON、XML的配置方式和机制

    1.本文内容 我们在Web项目开发过程中,一般来说访问一个处理器,然后会返回一个视图,或者跳转到另外的处理器.但是随着项目越来越复杂,需求越来越复杂,对于处理器返回数据的类型要求也越来越多.比如要求能 ...

  10. Jmeter(十三) JDBC Request

    Jmeter中取样器(Sampler)是与服务器进行交互的单元.一个取样器通常进行三部分的工作:向服务器发送请求,记录服务器的响应数据和记录响应时间信息 有时候工作中我们需要对数据库发起请求或者对数据 ...