jquery插件(js扩展插件免费下载)

如何编写jquery插件

编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件

类型

jQuery的插件主要分为3种类型

1、封装对象方法

这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行*作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势，有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式“插”在内核上的，例如：parent()方法、appendTo()方法等。这些方法在现在来看都是jQuery本身自带的方法了。平时，我们是可以直接拿来就用的，只需引入jQuery库就行

2、封装全局函数

可以将*的函数加到jQuery命名空间下，如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等，都是jQuery内部作为全局函数的插件附加到内核上去的

3、选择器插件

虽然jQuery的选择器十分强大，但是在少数情况下，还是会需要用到选择器插件来扩充一些自己喜欢的选择器

要点

1、jQuery插件的文件名推荐命名为jQuery.[插件名].js，以免和其他JS库插件混淆

2、所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上

3、在插件内部的this指向的是当前通过选择器获取的jQuery对象，而不像一般方法那样，如click，内部的this指向的是DOM元素

4、可以通过this.each来遍历所有的元素

5、所有的方法或函数插件，都应当以分号结尾。否则压缩的时候可能出现问题。为了稳妥些，甚至可以在插件头部先加上一个分号，以免他人不规范的代码影响自身的插件代码

6、插件应该返回一个jQuery对象，以保证插件的可链式*作

7、避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示，避免冲突。当然，也可以利用闭包来回避这种问题，使插件内部继续使用$作为jQuery的别名

闭包

利用闭包的特性，即可以避免内部临时变量影响全局空间，又可以在插件内容继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的:

(function(){

/*这里放置代码*/

})();

首先定义一个匿名函数function(){/*这里放置代码*/}，然后用括号括起来，变成(function(){/*这里放置代码*/})这种形式，最后通过()这个运算符来执行。可以传递参数进行，以供内部函数使用

//为了更好的兼容性，开始前有个分号

;(function($){//此处将$作为匿名函数的形参

/*这里放置代码，可以使用$作为jQuery的缩写别名*/

})(jQuery);//这里就将jQuery作为实参传递给匿名函数了

上面的代码是一种常见的jQuery插件的结构

插件机制

jQuery提供了两个用于拓展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于拓展封装对象方法的插件，jQuery.extend()方法用于拓展封装全局函数的插件和选择器插件。这两个方法都接受一个参数，类型为Object。Object对象的”名/值对”分别代表”函数或方法名/函数主体”

【jQuery.fn.extend()】

jQuery.fn.extend()方法用于将一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法

<label><input type=”checkbox” name=”foo”> Foo</label>

<label><input type=”checkbox” name=”bar”> Bar</label>

<button id=”btn1″>全选</button>

<button id=”btn2″>全不选</button>

<script>

jQuery.fn.extend({

check: function(){

return this.each(function(){ this.checked= true;});

},

uncheck: function(){

return this.each(function(){ this.checked= false;});

}

});

$('#btn1').click(function(){

$(“input[type='checkbox']”).check();

});

$('#btn2').click(function(){

$(“input[type='checkbox']”).uncheck();

});

</script>

【jQuery.extend()】

jQuery.extend()方法用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象

jQuery.extend( target [, object1 ] [, objectN ])

例如，合并settings对象和options对象，修改并返回settings对象

var settings={validate:false,limit:5,name:”foo”};

var options={validate:true,name:”bar”};

var newOptions= jQuery.extend(settings,options);

console.log(newOptions);//Object{validate: true, limit: 5, name:”bar”}

jQuery.extend()方法经常被用于设置插件方法的一系列默认参数

function foo(options){

options=jQuery.extend({

name:”bar”,

length:5,

dataType:”xml”

},options);

如果用户调用foo()方法的时候，在传递的参数options对象设置了相应的值，那么就使用设置的值，否则使用默认值

通过使用jQuery.extend()方法，可以很方便地用传入的参数来覆盖默认值。此时，对方法的调用依旧保持一致，只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更加简洁。此外使用命名参数意味着再添加新选项也不会影响过去编写的代码，从而使开发者使用起来更加直观明了

jquery如何封装插件jquery封装插件的方法

如何打包jquery插件

前言

如今，jquery几乎是web开发的必备工具。甚至vs神器在2010年就开始在web项目中内置Jquery和ui。至于使用jquery的好处，这里就不赘述了。用过的我都认识。今天我们来讨论一下jquery的插件机制，jquery有上千个第三方插件。有时候我们写了一个*的函数，想和jquery结合，可以用jquery链调用。有必要扩展jquery，把它写成插件。例如，下面是一个简单扩展jquery对象的演示:

//sample:扩展jquery对象的方法。bold()用于加粗字体。

(函数($){

$.fn.extend({bold总结/summary

返回this.CSS({fontweight:bold

}

});

})(jQuery)；

呼叫方法:

这是一个非常简单的扩展。接下来，我们来一步步分析上面的代码。

首先，jquery的插件机制

为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1.jQuery.extend()方法有一个重载。

JQuery.extend(object)，用于扩展JQuery类本身的参数，也就是说在jQuery类/naming空之间添加新的函数，或者调用静态方法。比如jQuery内置的ajax方法都是用jQuery.ajax()调用的，有点像“类名”的静态方法。方法名”。让我们也写一个jQuery.extend(object)的例子:

//扩展jQuery对象本身jQuery.Extend({“minValue:函数(a，b){///总结/summary

返回一个

}，总结/summary

returna

}

});//调用

vari=100j=101varmin_v=$。minValue(i，j)；//min_v等于100

varmax_v=$。maxValue(i，j)；//max_v等于101

重载:jquery.extend([deep]，target，object1，[objectn])

用一个或多个其他对象扩展一个对象，并返回扩展的对象。

如果没有指定target，jQuery将被命名为空来扩展自身。这有助于插件作者向jQuery添加新方法。

如果第一个参数设置为true，jQuery返回深度副本，递归地复制它找到的任何对象。否则，副本将与原始对象共享结构。

未定义的属性不会被复制，但从对象原型继承的属性会被复制。

参数

深度:可选。如果设置为true，递归合并。

目标:要修改的对象。

1:要合并到第一个对象中的对象。

ObjectN:可选。要合并到第一个对象的对象。

示例1:

合并设置和选项，修改并返回设置。

var设置={validate:false，limit:5，name:foo

varoptions={validate:true，name:酒吧

jQuery.extend(设置，选项)；

结果:

设置=={验证:真，限制:5，名称:

vardefaults={validate:false，limit:5，name:foo

varoptions={validate:true，name:酒吧

varsettings=jQuery.extend(空，默认，选项)；

结果:

设置=={验证:真，限制:5，名称:酒吧

};

原来jQuery.fn=jQuery.prototype，是jQuery对象的原型。那么jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道在原型上扩展方法相当于给对象增加了一个“成员方法”，而类的“成员方法”只能被类的对象调用，所以使用jQuery.fn.extend(object)扩展的方法，jQuery类的实例就可以使用这个“成员函数”。必须区分jQuery.fn.extend(object)和jQuery.extend(object)方法。

二。自动执行匿名函数/闭包

1.什么是自执行匿名函数？

指的是这样一个函数:(function{//code})()；

2.问为什么(function{//code})()；可以执行，函数{//code}()；你会报错吗？

3.分析

(1).首先明确两者的区别:(function{//code})是表达式，function{//code}是函数声明。

(2).其次，js，因为function(){//code}处于“编译”阶段已经解释过了，js会跳过function(){//code}，尝试执行()；，所以它会报告一个错误；

js执行到(function{//code})()时；当，因为(function{//code})是表达式，所以js会求解得到返回值。因为返回值是函数，所以遇到()；当，它将被执行。

另外，函数转换成表达式的方法不一定要依赖分组运算符()，我们也可以使用void运算符、~operator，！*作员…

例如:

bootstrap框架中插件的编写方法:

!函数($){

//做点什么；

}(jQuery)；

和

(函数($){

//做点什么；

})(jQuery)；是一回事。

匿名函数最大的用途是创建闭包(这是J*aScript语言的特点之一)，还可以构建命名空空间，减少全局变量的使用。

例如:

vara=1；

(函数()(){

vara=100

})();

警戒(一)；//弹出1

更多闭包和匿名函数请查看文章匿名函数和J*ascript的自执行。

第三，逐步打包JQuery插件

接下来，我们来写一个高亮的jqury插件。

1.设置封闭区域，防止插件“*染”

//闭包限定在named空(function($){

})(window.jquery)；

2.jQuery.fn.extend(object)扩展jQuery方法，制作插件。

//闭包限定在named空(function($){

$.fn.extend({突出显示

})(window.jquery)；

3.给出插件默认参数，实现插件功能。

//闭包限定在named空(function($){

$.fn.extend({突出显示//使用jQuery.extend覆盖插件默认参数。

This.each(function(){//这是jQuery对象。

//遍历所有要高亮显示的dom，当是调用highlight()插件的集合时。

var$this=$(this)；//获取当前dom的jQuery对象，这里是当前循环的dom

//根据参数设置dom的样式

$this.css({

背景色:opts.background，

颜色:opts.前景

});

});

}

});//默认参数

vardefaluts={

前景:红色,

背景:*

};

})(window.jquery)；

至此，高亮插件的基本功能已经具备。调用代码如下:

$(function(){

$(p//调用自定义高亮插件})；

只能在这里直接调用，不能在chain中调用。我们知道jQuery可以被链式调用，也就是说，在一个jQuery对象上可以调用多个方法，比如:

$(#id100像素}).addAttr(标题

但是我们上面的插件是不能这样链的。比如:$(p100像素});//会报错找不到css方法，因为我的自定义插件完成函数后没有返回jQuery对象。接下来，返回jQuery对象，这样我们的插件也支持链式调用。(其实很简单，就是在我们执行完我们的插件代码的时候返回jQuery对象，和上面的代码没什么区别)

jquery怎么获取inputfile中的内容？

jquery获取inputfile中内容的方法：；$(“#conter”).val();//这样就能获取它的值了（也就是内容）。

1.jQuery是一个快速、简洁的J*aScript框架，是继Prototype之后又一个优秀的J*aScript代码库。jQuery设计的宗旨是“writeLess，DoMore”，即倡导写更少的代码，做更多的事情。它封装J*aScript常用的功能代码，提供一种简便的J*aScript设计模式，优化HTML文档*作、*处理、动画设计和Ajax交互。

2.jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件.

插件使用方法？

1.使用script标签加载jquery框架2.使用script标签加载插件3.看插件是否有api，如果有的话按照api调用4.如果没有api，就自己看源码一般来说jquery插件的调用方法都是$(‘element’).plugName(param);其中element是你用选择选择的要执行插件方法的对象，plugName是你插件中的方法名称，param是插件方法的参数。当然，也有的插件不是这样调用的，也有的插件是需要你在html标签中加入以下class。具体还是要看你用的插件的api

详解如何在vue项目里正确地引用jquery和jquery-ui的插件？

vue-cliwebpack全局引入jquery

1、首先在package.json里加入，

然后nmpinstall

2、在webpack.base.conf.js里加入

3、在module.exports的最后加入

plugins:

4、然后一定要重新rundev

5、在main.js引入就ok了

在.vue文件中引入第三方非NPM模块

vue-cli引入外部文件

在webpack.base.conf.js中添加externals

externals中swiper是键，对应的值一定的是插件swiper.js所定义的变量Swiper:

之后再在根目录下的index.html文件里引入文件：scriptsrc=”static/lib/swiper.js”>/script>

这样子就可以在需要用到swiper.js的文件里加入这行代码：importSwiperfrom’swiper’，这样就能正常使用了。

前端页面的插件有哪些？

工具类

方便*作对象，数组等的工具库

underscore.js

lo-dash与underscore.js的api基本一致。与underscore比其优势是，效率高；可自定义构建

Sugar在原生对象上增加一些工具方法

functional.js提够了一些Curry的支持

Watch.js监视对象或属性的变化

bacon.js函数式编程，cool

streamjs用流的方式来对数组，对象进行系列*作

异步流程控制

eventproxy朴灵出品

Arbiter.js详细

发布订阅

qPromise风格的

Async.js

mock

Mock.js生成随机数据和mockAjax请求

jquery-mockjaxmockajax请求

时间库

moment

datejs

浏览器探测

Bowser探测具体浏览器和版本

ua-parser-js探测具体浏览器和版本，*作系统，设备类型等

调试

console-polyfill能放心的使用console.log()之类的console方法

log让控制台输出的log有样式

Konsole.js在页面的一个元素里输出log信息详细

uri.jsuri*作

cookie增删改cookie的工具库

director前端路由库详细

BigDecimal.js提高精度的数字*作

JSDoc根据j*ascript文件中注释的信息，生成API文档详细

hotkeys键盘*的封装

MD5用MD5的方式加密文件的库

浏览器增强类

让一些旧浏览器变*的库

Selectivizr让IE6-8一些的css3选择器

ieBetter让ie6-8有高级浏览器的特性

ExplorerCanvas让IE8-的浏览器支持canvas

CSS3Pie让IE6-9支持border-radious,box-*,linear-gradient。可以使用.htc文件（注意Minetype）或.js文件。在用Pie.js时，box-radious的元素有背景色时，不显示背景色。。。

formFive让旧的浏览器支持HTML5表单的一些特性，如placeholder,autofocus

让浏览器支持object-fit这css规则

HTML5CrossBrowserPolyfills一堆Polyfills

flexibility让旧的IE也支持Flexbox

选择器增强

Lining.js让浏览器实现类似::nth-line(),::nth-last-line()的效果

未归类

prefixfree用了它，写css时，就不需要加浏览器的前缀了

表单类

jquery-file-upload上传文件组件详细

zTree文件树形视图控件

Treed树编辑器。感觉展示的感觉很像思维导图

FileAPI对文件选择框内的文件的一些处理

表单验证

.Validate详细

jQuery-Validation-Engine

表单元素美化

uniform提供对下拉框，单，复选框，按钮等表单元素的美化

select2多选下拉框

selectivity和unfirom比较类似

DropKick下拉框，单，多选。外观比uniform好

switcheryios7风格的开关组件

nouislider用滚动条来设置/控制（音量等）

range.css美化input元素的外观

图片类

holderjs生成占位图片

lazyload

imagesLoaded选取的图片都加载好后执行调回

CSSgram用CSS3的Filter实现Instagram滤镜的库

图标类

IconFont汇总

SVG做的图标

svgicons

iconic

HYBICON带交互效果。如hover,click

HTML字符实体图标

transformicons图标点击时，会有一些变换效果。如，加号变成叉号

css3patternscss3做的可平铺纹理。浏览器兼容性不好。

浏览图片

fancybox弹出查看图片，视屏等等demo

yoxview弹出查看图片，图片尺寸缩放很自然

图片墙

wookmark

UI框架

WeUI由微信官方设计团队为微信Web开发量身设计。

Framework7

UI组件类

拖拽

dragula支持Draggable，Dropable和Sortable。感觉比jqueryUI的轻量级，好用的样子

angular-draguladragular官方的angular版本

数据可视化(图表)

Echarts百度出品

highcharts功能强大。是收费的。

Plottable.JS基于D3的一个图表库

flot文档不给力

chartJs中文文档demo很漂亮，很清晰。比较轻量级。

ichartJs*的一个家伙搞的，感觉还不错。

时间选取组件

foundation-datepicker

DatePicker一个简单的日历详细

fullcalendar支持脱放的方式来改变待办事宜的时间

SimpleEventsCalendar外观很喜欢。收费5$

jQueryuidatepicker经典，不是很好看

pickadate轻量级，手机友好的，漂亮。但貌似只能在弹出层中显示，而没有下拉这种方式显示。

zebra-datepicker可配置性很强。但貌似只能在弹出在右上方。。。

bootstrap-datepickerbootstrap风格。

dateRangePicker选取时间段。bootstrap风格。该组件依赖TwitterBootstrap,Moment.js和jQuery.

自定义滚动条

perfectscrollbar轻量级的滚动条。外观与mac上chrome的滚动条一样。

iscroll在移动设备上用不错

加载(Loding)效果

CSSSpinnersCSS做的

Loaders.cssCSS做的

表格组件

jsGridDataGrid。详细

backgrid基于Backbone.js的DataGrid

excellentexport把表格的内容生成excel。兼容Firefox,Chrome,IE6+

datatables表格可交互（对内容进行排序，删除等）

handsontable生成Excel外观的数据

JSpreadsheets表格数据的组件库

选取颜色

Spectrum

分享到SNS

JiaThis生成分享代码。

编辑器

ace代码编辑器，可以用来做demo演示

ckeditor

ueditor百度做的

tinymce对html内容进行实时的编辑

summernote在移动设备上用不错

通知组件

notie.js

HTML5播放器

jwplayer被大量网站使用

html5media简单的h5player，轻量级

jplayer功能强太，可换肤

展示

Impress.js各种旋转，和奇特的体验

fullPage全屏显示。用滚轮来翻页详细

zepto.fullpage专注于移动端的fullPage.js，依赖Zepto

pagePiling和fullPage类似

turn.js做一本书，带漂亮的翻页的效果

幻灯

slidesjs挺好用的，只是那幻灯导航的CSS都要自己写，呵呵详细

iSlider无任何插件依赖的手机平台j*ascript滑动组件详细

bgstretcher全屏幻灯，会随着页面大小的变化而变化。

Swiper开源、免费、强大的移动端触摸滑动插件Swiper中文网

coin-slider兼容IE6。蛮好的~。不过其切换方式是一块块的。不能配置切换方式。。。

wowslider幻灯切换时各种很炫的效果。收费。

cycle2普通的幻灯，竟然不支持垂直滚动。。。

jcarousel普通的幻灯，不兼容IE6

reveal3d滚动。做ppt相当不错

nodePPT国人做的，做ppt也相当不错。有些方面比reveal做的还好。但生成导出的html有些问题

roundabout3d切换，看的后面图片的边

弹出框

Magnific-Popup兼容PC，Mobile。还不错，有5k+的star

layer国人开发的，兼容ie6+。不喜欢其调用方式。

动画效果

mixitup用漂亮的动画效果来完成排序和筛选

jQuery.Marquee跑马灯效果

quickflip卡片翻转效果

卡片翻转效果2兼容性可以。写的比较简单：1，只支持x方向翻转2,类名都是规定好的3，只能被调用一次。需要改写一下。我的改进版见这里

TheaterJS模拟两个人在屏幕上对话

midnight.js文字颜色随着背景变，_炸了

color-animationjquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。

transit对元素进行css的变换

tagcanvas3D标签云效果详细

iconate图片切换动画

Snap.js左/右侧导航的出现效果

CSSshake抖动动画

ClickSpark.js点击后的一些酷炫的效果

视觉差插件

scrollorama比较简单

superscrollorama能做的效果更多，但要用第三方Tween的库，使用

如何封装jquery插件

前言

如今做web开发，jquery几乎是必不可少的，就连vs神器在2010版本开始将Jquery及ui内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个*的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下面就是一个简单扩展Jquery对象的demo：

//sample:扩展jquery对象的方法，bold()用于加粗字体。

(function($){

$.fn.extend({“bold”: function(){///<summary>

///加粗字体

///</summary>

return this.css({ fontWeight:”bold”});

}

});

})(jQuery);

调用方式：

这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。

一、jquery的插件机制

为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend()方法有一个重载。

jQuery.extend(object),一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像“类名.方法名”静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：

//扩展jQuery对象本身 jQuery.extend({“minValue”: function(a, b){///<summary>

///比较两个值，返回最小值

///</summary>

return a< b? a: b;

},”maxValue”: function(a, b){///<summary>

///比较两个值，返回最大值

///</summary>

return a> b? a: b;

}

});//调用

var i= 100; j= 101; var min_v=$.minValue(i, j);// min_v等于 100

var max_v=$.maxValue(i, j);// max_v等于 101

重载版本：jQuery.extend([deep], target, object1,[objectN])

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。

如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。

未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

参数

deep:可选。如果设为true，则递归合并。

target:待修改对象。

object1:待合并到第一个对象的对象。

objectN:可选。待合并到第一个对象的对象。

示例1：

合并 settings和 options，修改并返回 settings。

var settings={ validate: false, limit: 5, name:”foo”};

var options={ validate: true, name:”bar”};

jQuery.extend(settings, options);

结果：

settings=={ validate: true, limit: 5, name:”bar”}

示例2：

合并 defaults和 options,不修改 defaults。

var empty={};

var defaults={ validate: false, limit: 5, name:”foo”};

var options={ validate: true, name:”bar”};

var settings= jQuery.extend(empty, defaults, options);

结果：

settings=={ validate: true, limit: 5, name:”bar”}

empty=={ validate: true, limit: 5, name:”bar”}

这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。

jQuery.fn.extend(object)扩展 jQuery元素集来提供新的方法（通常用来制作插件）。

首先我们来看fn是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn= jQuery.prototype={

init: function( selector, context){…..};

};

原来 jQuery.fn= jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法，jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。

二、自执行的匿名函数/闭包

1.什么是自执行的匿名函数?

它是指形如这样的函数:(function{// code})();

2.疑问为什么(function{// code})();可以被执行,而function{// code}();却会报错?

3.分析

(1).首先,要清楚两者的区别:(function{// code})是表达式, function{// code}是函数声明.

(2).其次, js”预编译”的特点: js在”预编译”阶段,会解释函数声明,但却会忽略表式.

(3).当js执行到function(){//code}();时,由于function(){//code}在”预编译”阶段已经被解释过, js会跳过function(){//code},试图去执行();,故会报错;

当js执行到(function{// code})();时,由于(function{// code})是表达式, js会去对它求解得到返回值,由于返回值是一个函数,故而遇到();时,便会被执行.

另外，函数转换为表达式的方法并不一定要靠分组*作符()，我们还可以用void*作符，~*作符，!*作符……

例如：

bootstrap框架中的插件写法：

!function($){

//do something;

}(jQuery);

和

(function($){

//do something;

})(jQuery);是一回事。

匿名函数最大的用途是创建闭包（这是J*aScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。

例如：

var a=1;

(function()(){

var a=100;

})();

alert(a);//弹出 1

更多闭包和匿名函数可查看J*ascript的匿名函数与自执行这篇文章。

三、一步一步封装JQuery插件

接下来我们一起来写个高亮的jqury插件

1.定一个闭包区域，防止插件”*染”

//闭包限定命名空间(function($){

})(window.jQuery);

2.jQuery.fn.extend(object)扩展jquery方法，制作插件

//闭包限定命名空间(function($){

$.fn.extend({“highLight”:function(options){//do something}

});

})(window.jQuery);

3.给插件默认参数，实现插件的功能

//闭包限定命名空间(function($){

$.fn.extend({“highLight”: function(options){ var opts=$.extend({}, defaluts, options);//使用jQuery.extend覆盖插件默认参数

this.each(function(){//这里的this就是 jQuery对象

//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。

var$this=$(this);//获取当前dom的 jQuery对象，这里的this是当前循环的dom

//根据参数来设置 dom的样式

$this.css({

backgroundColor: opts.background,

color: opts.foreground

});

});

}

});//默认参数

var defaluts={

foreground:'red',

background:'yellow'

};

})(window.jQuery);

到这一步，高亮插件基本功能已经具备了。调用代码如下：

$(function(){

$(“p”).highLight();//调用自定义高亮插件});

这里只能直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：

$('#id').css({marginTop:'100px'}).addAttr(“title”,”测试“);

但是我们上面的插件，就不能这样链式调用了。比如：$(“p”).highLight().css({marginTop:'100px'});//将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return出来，和上面的代码没啥区别）