jquery插件(jquery插件无法加载,须刷新才能加载怎么回事)-易模板

老铁们，大家好，相信还有很多朋友对于jquery插件和jquery插件无法加载,须刷新才能加载怎么回事的相关问题不太懂，没关系，今天就由我来为大家分享分享jquery插件以及jquery插件无法加载,须刷新才能加载怎么回事的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！

在网页开发的世界里，jQuery插件就像是一把神奇的武器，它可以帮助我们轻松实现各种炫酷的功能，让网页变得更加生动有趣。什么是jQuery插件呢？它又有哪些类型？如何正确使用jQuery插件呢？本文将带您走进jQuery插件的世界，一起探索这个神秘而有趣的领域。

一、什么是jQuery插件？

我们来了解一下什么是jQuery插件。jQuery插件，顾名思义，就是基于jQuery框架开发的扩展功能。它可以帮助我们简化开发过程，提高工作效率。简单来说，jQuery插件就是一些可以复用的代码片段，它们封装了特定的功能，使得开发者可以轻松实现一些复杂的效果。

二、jQuery插件的类型

jQuery插件的类型繁多，下面列举一些常见的类型：

类型	描述
动画效果插件	实现各种动画效果，如淡入淡出、滑动、缩放等。
表单插件	提供表单验证、美化等功能。
轮播图插件	实现图片、视频等多媒体内容的轮播展示。
图表插件	用于展示数据，如柱状图、饼图、折线图等。
UI组件插件	提供各种UI组件，如导航栏、下拉菜单、日期选择器等。
其他插件	如图片懒加载、响应式布局、图片预览等。

三、如何选择合适的jQuery插件？

在选择jQuery插件时，我们需要考虑以下几个方面：

1. 功能需求：首先明确自己的需求，选择与需求相符的插件。

2. 兼容性：选择兼容性好的插件，确保在多种浏览器和设备上正常运行。

3. 易用性：选择易于使用和配置的插件，降低开发难度。

4. 文档和社区：查看插件的官方文档和社区，了解其稳定性和可靠性。

四、如何正确使用jQuery插件？

以下是使用jQuery插件的一些基本步骤：

1. 引入jQuery库：在HTML文件中引入jQuery库。

2. 引入插件库：将插件库的JavaScript代码引入到HTML文件中。

3. 初始化插件：使用jQuery选择器找到要应用插件的元素，并调用插件的初始化方法。

4. 配置插件：根据需要配置插件的参数。

5. 调用插件方法：使用jQuery选择器找到要操作的元素，并调用插件的方法。

以下是一个简单的示例：

“`html

jQuery插件分为3类,即封装方法插件,封闭函数插件,选择器插件,但最后一种很少要去开发使用,自定义的插件各类多数属于前面两种.

1.封装方法插件

封装方法插件在本质上来说,是一个对象级别的插件,这类插件首先通过jQuery选择器获取对象,并为对象添加方法,然后,将方法进行打包,封闭成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了jQuery中功能强大的选择器,因此,成为开发插件的首选.

2.封装函数插件

封闭函数插件是一个类级别的插件,这类插件最大的特点,就是可以直接给jQuery添加静态方法,并且可以将函数置于jQuery命名空间中,如最为觉的就是$.ajax(),$.trim()全局性函数,都是以内部插件的形式植入jQuery内核中.

如何封装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);是一回事。

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

例如：

var a=1;

(function()(){

var a=100;

})();

alert(a);//弹出 1

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

三、一步一步封装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出来，和上面的代码没啥区别）

如何创建一个自定义jquery插件

jQuery库是专为加快 JavaScript开发速度而设计的。通过简化编写 JavaScript的方式，减少代码量。使用

jQuery库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义 jQuery插件的一个原因。

jQuery插件允许您使用自定义代码扩展 jQuery库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。如果您搜索 jQuery插件，就会发现有大量可用于自己项目的示例（看看它们是如何构建的）。

准备工作

对JavaScript、jQuery和CSS有一个基本了解。（用到的源代码及示例在本文最下方）

开始

jQuery是一个可扩展 JavaScript语言的库。当您创建一个 jQuery插件时，本质上是在扩展这个 jQuery

库。要真正了解插件如何扩展 jQuery库需要对 JavaScript prototype属性有一个基本了解。尽管不直接使用，但是

JavaScript prototype属性可通过 jQuery属性 fn在后台使用，这是原生 JavaScript prototype

属性的一个 jQuery别名。

要使用 fn属性创建一个新 jQuery插件，只需要为 fn属性分配一个插件名，并将其指向一个充当构造函数的新函数，类似于纯

JavaScript。Code 1显示了如何定义一个名为 accordion的新 jQuery插件，其方法是通过使用 jQuery对象和

fn属性，并将其分配给一个新的构造函数。

Code 1：定义一个名为 accordion的新 jQuery插件

jQuery.fn.accordion= function(){

//在这里添加插件代码

};

Code 1展示了创建 jQuery插件的一种方法；该示例没有什么功能性错误。但是，创建一个 jQuery

插件所推荐的方法是，先创建一个允许使用美元符号($)的包装器函数。在默认情况下，美元符号可能与其他 JavaScript

框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。Code 2中的示例代码显示如何将一个包装器函数应用到一个 jQuery

插件定义中。

(function($){

$.fn.accordion= function(){

//在这里添加插件代码

};

})(jQuery);

在Code 2中，jQuery关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用 fn

属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery

关键字，不会干扰其他第三方插件。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护。

维护链接性

jQuery的一个优势是允许您使用任何类型的选择器。但是，必须记住，您的插件可以处理几种不同的元素类型。使用 this

关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型。如果在 each循环前使用 return

关键字，就可以使用您的插件维护链接性。清单 3显示了分配给一个函数处理程序且与 return关键字相结合的 each循环。

code 3.在 each循环之前使用 return关键字

(function($){

$.fn.accordion= function(){

return this.each(function(){

//使用 return

});

};

})(jQuery);

有了Code 3的代码后，示例 accordion插件可用在一个方法调用链中。有了链接性（另一个强大的 jQuery

特性），您的插件就可用在一个方法调用链中。例如，下面的代码显示了如何淡出 HTML元素，并在单一的方法调用链中将其从文档对象模型(DOM)

中删除。

$(“#my-div”).fadeOut().remove();

构造一个 accordion

一个典型的层叠设计包括标题栏和相关内容区域。定义列表是一个可供 accordions使用的很好的 HTML结构；dt元素供标题所用，而dd元素供内容区域所用。清单 4中的 HTML结构是一个定义列表，含有四个标题以及相应的内容区域。

Code 4.单一方法调用链

</dl>

Code 4中定义的列表也有一个分配给它的名为 accordion的 CSS类。没有应用任何 CSS，这个 accordion结构看起来类似于图 1中的基础设计

为了美观，我们再给Code 4中的Html美化一下，并命名为“jquery.accordion.css”

Code 5. CSS部分

.accordion{

width: 500px;

border: 1px solid#ccc;

border-bottom: none;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

.accordion dt,

.accordion dd{

border-bottom: 1px solid#ccc;

margin: 0px;

}

.accordion dt{

background:#eaeaea;

cursor: pointer;

padding: 8px 4px;

font-size: 13px;

font-weight: bold;

}

.accordion dd{

padding: 12px 8px;

}

效果如下图：

自定义插件

要制作一个功能性 accordion，必须将自定义代码应用到您上一小节创建 jQuery插件的函数。accordion

插件从遍历所有已定义的 accordion开始。要定义一个 accordion，在 HTML文档或外部嵌入式 JavaScript

文件中使用下列 jQuery。

$('dl#my-accordion').accordion();

对于每个 Accordion，您可以使用 jQuery的 children方法访问相关定义的标题，返回一个数组或 dt元素。应用一个

click事件到 dt元素，然后一个名为 reset方法应用到每个 dt。accordion首次加载时，该 reset方法会折叠所有

dd元素。单击 dt元素或者标题栏时，click事件会触发一个名为 onClick的自定义方法。自定义 onClick方法用于查找

accordion中的所有 dt元素。它调用一个自定义 hide方法，该方法通过使用 next方法找到紧挨着 dt元素的 dd

元素，隐藏每个相关的 dd元素，通过使用 next方法找到紧挨着 dt元素的 dd元素，然后向上滑动激活它。

所有 dd元素被隐藏后，使用 slideDown方法，就可以看见与单击过的 dt元素相关的 dd元素，并创建一个放大和收缩动画，如清单 8

所示。onClick方法的最后一行代码是 return false，确保任何被点击的主题栏没有显现出其一般行为。例如，如果您使用一个

anchor元素作为标题栏，您可能想要执行 return false，这样就不会将用户定向到另一个页面或现有页面的一部分。

Code 6.自定义用于创建一个 jQuery插件的 accordion函数

(function($){

$.fn.accordion= function(options){

return this.each(function(){

var dts=$(this).children('dt');

dts.click(onClick);

dts.each(reset);

});

function onClick(){

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

return false;

}

function hide(){

$(this).next().slideUp('fast');

}

function reset(){

$(this).next().hide();

}

})(jQuery);

如果该 accordion插件与一个 HTML定义列表结构相关联时，比如您之前创建的那个 accordion函数将被应用。有了

accordion函数，单击一个标题栏或 dt元素时，会打开其内容区域，而其他内容区域则关闭。换句话说，一次只能打开一个内容区域。

设定插件的默认值（Defaults）和设置项（options）

jQuery插件可以包括 defaults和 options。Options本质上就是传递给插件的参数。可以使用 options

发送一个参数作为 object literal，这是一个标准 jQuery实践，而不需要传递多个参数。如果您的插件支持 options，使用

defaults对象设置默认的 options将是一个最佳方式。和 options一样，defaults是一个 object

literal，应该包括您想要传递到插件中的属性。

例如，如果您支持一个可用于在首次加载时打开 accordion第一个内容区域的属性，那么在您的插件中应该包括一个 open

属性的默认值。在您的插件中使用 defaults确定默认函数，使用 options覆盖默认值。如果插件接收 options，可以使用

$.extend方法执行覆盖。jQuery的$.extend方法合并两个或多个对象。Code 7中的示例显示在一个自定义 jQuery

插件中使用$.extend方法合并用户定义选项和默认选项的一般实现。

Code 7.向一个自定义的 accordion jQuery插件添加 options和 defaults

(function($){

$.fn.accordion= function(options){

var settings=$.extend({},{open: false}, options);

return this.each(function(){

var dts=$(this).children('dt');

dts.click(onClick);

dts.each(reset);

if(settings.open)$(this).children('dt:first-child').next().show();

});

function onClick(){

$(this).siblings('dt').each(hide);

$(this).next().slideDown('fast');

return false;

}

function hide(){

$(this).next().slideUp('fast');

}

function reset(){

$(this).next().hide();

}

})(jQuery);

$.extend方法参数是一个目标对象和 2个或多个合并对象。在本示例中，目标对象是一个空 object

literal，充当合并对象容器。目标将成为一个包含合并对象值的单一对象（在该案例中是 settings变量）。第 2

个参数是一个包含默认插件属性的 object literal。第 3个参数是用户定义的 options参数。要在一个 HTML元素上使用

accordion插件传递 options，需要知道除了之前您作为 object literal传递的属性外还有哪些属性，如下所示。

$('dl#my-accordion').accordion({open:true});

在Code 7示例中，传递到插件的 options通过$.extend方法覆盖 defaults。如果没有传递 options，则使用默认值。对于示例插件，可使用 open属性确定加载时是否打开第一个内容区域。

可重用性

您可以在任何 HTML文档中重用示例 accordion插件，可以在单个 HTML文档中多次使用。您也可以包括多个

accordion结构，就像已创建的那个 accordion，使用刚创建的新 accordion插件通过 jQuery将每个单独定义为

accordion。要向一个 HTML文档添加多个 accordion，只需要添加尽可能多的 accordion结构。Code 8

中的代码包括两个 accordion结构，由一个段落隔开。

Code 8.在同一个 HTML文档中使用多个 accordion

</dl>

<dd>内容六dd>

</dl>

Code 8中的两个 accordion结构几乎一样，除了内容不一样外，更重要的是 ID值也不一样。第一个结构包含一个

my-accordion ID值。第 2个结构包含一个 my-accordion2 ID值。现在可以单独定向这些结构。例如，下列

jQuery脚本使用已创建的新插件将每个 accordion结构定义为一个 accordion。

$('dl#my-accordion').accordion({open:true});

$('dl#my-accordion2').accordion({open:true});

两个 accordion结构定义完成后，第一个面板默认设置为打开下图显示一个用在同一个 HTML文档的多个 accordion插件的示例。

关于jquery插件到此分享完毕，希望能帮助到您。

文章版权归作者所有，未经允许请勿转载。

THE END

SEO网站优化