插件

1.1.常用插件

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

1.1.1. jquery.color.js

animate不支持颜色的渐变，但是使用了jquerycolorjs后，就可以支持颜色的渐变了。

<style>

div{

Width;400px;

height;400px;

Background-color:red;

}

</style>

</head>
<body>

$(function () f

//3.直接使用

//运行不了说明jquery不支持颜色的渐变，最好用16进制

$('div'). animate((backgroundcolor:"green"], 3000, function (){

alert("aa");

});

使用插件的步骤

1.引入jQueny文件

2.引入插件(如果有用到css的话，需要引入css)
3.使用插件
1.1.2. jquery.lazyload.js

懒加载插件

<script src=”jquery.lazyload.js”type=”text/javascript”></script>

案例；

1.1.3. jquery.ui.is插件

jQueryUI专指由Query言方维护的U方向的播件。

官方API : htp /ap jqueryUI com/category/all

基本使用

1.引入jQueryUI的样式文件

引入jQuery

3.引入JQueryUI的js文件

4.使用JQueryUI功能

jQuery UI 实例 - 缩放（Resizable）

使用鼠标改变元素的尺寸。

如需了解更多有关 resizable 交互的细节，请查看 API 文档可调整尺寸小部件（Resizable Widget）。

默认功能

在任意的 DOM 元素上启用 resizable 功能。通过鼠标拖拽右边或底边的边框到所需的宽度或高度。

<!doctype html><html lang="en"><head>

<title>jQuery UI 缩放（Resizable） - 默认功能</title>

<style>

#resizable { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

</style>

$(function() {

$( "#resizable" ).resizable();

});

</script></head><body>

<h3 class="ui-widget-header">缩放（Resizable）</h3></div>

</body></html>

动画

使用 animate 选项（布尔值）使缩放行为动画化。当该选项设置为 true 时，拖拽轮廓到所需的位置，元素会在拖拽停止时以动画形式调整到该尺寸。

<!doctype html><html lang="en"><head>

<title>jQuery UI 缩放（Resizable） - 动画</title>

<style>

#resizable { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

.ui-resizable-helper { border: 1px dotted gray; }

</style>

$(function() {

$( "#resizable" ).resizable({

animate: true

});

</script></head><body>

</body></html>

1.2.制作jquery插件

原理 : gquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某钟功能

//通过缩$. fn添加方法就能够扩展jquery对象

$.fn.plvginName=function(){}:

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 等于 100var 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);

是一回事。

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

例如：

var a=1;

(function()(){

var a=100;

})();

alert(a); //弹出 1

三、一步一步封装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对象上调用多个方法，如：

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

但是我们上面的插件，就不能这样链式调用了。比如：

1	$("p").highLight().css({marginTop:'100px'});

将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return 出来，和上面的代码没啥区别）

//闭包限定命名空间

(function ($) {

$.fn.extend({

"highLight": function (options) {

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

return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用

//遍历所有的要高亮的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);

4.暴露公共方法给别人来扩展你的插件（如果有需求的话）

比如的高亮插件有一个format方法来格式话高亮文本，则我们可将它写成公共的，暴露给插件使用者，不同的使用着根据自己的需求来重写该format方法，从而是高亮文本可以呈现不同的格式。

//公共的格式化方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。

$.fn.highLight.format = function (str) {

return "<strong>" + str + "</strong>";

}

5.插件私有方法

有些时候，我们的插件需要一些私有方法，不能被外界访问。例如我们插件里面需要有个方法来检测用户调用插件时传入的参数是否符合规范。

6.其他的一些设置，如：为你的插件加入元数据插件的支持将使其变得更强大。

完整的高亮插件代码如下：

//闭包限定命名空间

(function ($) {

$.fn.extend({

"highLight": function (options) {

//检测用户传进来的参数是否合法

if (!isValid(options))

return this;

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

return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用

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

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

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

$this.css({

backgroundColor: opts.background,

color: opts.foreground

});

//格式化高亮文本

var markup = $this.html();

markup = $.fn.highLight.format(markup);

$this.html(markup);

});

}

});

//默认参数

var defaluts = {

foreground: 'red',

background: 'yellow'

};

//公共的格式化方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。

$.fn.highLight.format = function (str) {

return "<strong>" + str + "</strong>";

}

//私有方法，检测参数是否合法

function isValid(options) {

return !options || (options && typeof options === "object") ? true : false;

}

})(window.jQuery);

调用：

//调用

//调用者覆盖插件暴露的共公方法

$.fn.highLight.format = function (txt) {

return "<em>" + txt + "</em>"

}

$(function () {

$("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义高亮插件

});

jQuery插件，UI相关推荐

转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
200个 jquery插件
引用:http://paranimage.com/jquery-plugin-list/ jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其te ...
241个jquery插件—jquery插件大全
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
JQuery布局插件UI layout的使用及说明
JQuery布局插件UI layout的使用及说明 UI layout 是一款主要针对于不同开发需求下的侧边栏插件,在他官方文档是首先对这款插件的定义是: 这个插件受extJS边框布局的启发,并将该功 ...
240个jquery插件
240个jquery插件 http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/ File uplo ...
jQuery插件总动员
学习jQuery中... 这里是我收录的一些jQuery插件,有些都是很常用的(或者是我用过的,呵呵) UI 1. jQuery UI 验证 1. Validation 表单验证菜单 1. Crea ...
学习jQuery之旅--使用炫酷的jQuery插件
前两篇文章中,介绍了jQuery中强大的Selectors (选择器)以及开发中比较常用的方法的使用.今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件. 做网站的 ...
推荐一些常用感觉不错的jQuery插件
转:http://www.cnblogs.com/v10258/p/3263939.html JQuery插件繁多,下面是个人在工作和学习中用到感觉不错的,特此记录. UI: jquery UI(官方 ...

jQuery插件，UI

jQuery UI 实例 - 缩放（Resizable）

默认功能

动画

jQuery插件，UI相关推荐

最新文章

热门文章