jquery插件（jquery插件有什么用什么是jquery插件有什么用）

本文目录

• jquery插件有什么用什么是jquery插件有什么用
• 如何编写jquery插件
• 如何封装jquery插件
• 使用jQuery的dataTable的问题
• jQuery是一个常用的JavaScript库,但不属于轻量级的库是对还是错
• jquery插件库一般怎么使用
• 如何解决jQuery和其他库的冲突问题

jquery插件有什么用什么是jquery插件有什么用

jquery在网页设计中的作用

同时，JQuery也是一个紧凑、快速、丰富的JavaScript库。它通过一个易于使用的API在大量浏览器中运行，使HTML文档遍历和操作、事件处理、动画和Ajax变得更容易。JQuery结合了通用性和可扩展性，改变了数百万人编写JavaScript的方式。换句话说，多亏了JQuery，JavaScript以简化的形式呈现。读起来还是挺舒服的。

扩展信息:

JQuery的优势

1.易于使用:如果我们将它与标准JavaScript和其他库进行比较，它使用起来简单快捷。它由简单的语法组成，需要较少的代码行。

2.巨大的库:与其他库相比，它允许你执行很多功能。

3.插件的可用性:许多预先编写的插件可以用来立即压缩开发过程。这背后的另一个优势是脚本的效率和安全性。

4.综合教程:JQuery网站在绝对的编程初学者面前提供了自我说明的文档和教程供理解。

5.Ajax支持:它允许我们轻松开发AJAX模板。Ajax支持更平滑的界面，可以在页面上执行操作，而无需重新加载整个页面。

6.灵活性:所有浏览器中的契约，是目前最流行的JavaScript库。

用jquery怎么标题案例？

alert()提示框标题无法修改。建议自己写一个弹出框，这样就可以加标题了。简单点，用jQueryUI插件，dialog，很方便的。自己填一下参数就行。

jquery隐藏组件方法？

myCallBack去掉括号就行了这个效果用fadeIn和fadeOut也可以，渐隐渐现。

nwjs+angular技术方案的优点？

优点：

1.模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令。

2.是一个比较完善的前端MVVM框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能。

3.自定义Directive，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用$parse。

4.ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，我们的项目从上线到目前，UI变化很大，在摸索中迭代产品，但是js的代码基本上很少改动。

缺点：

1.验证功能错误信息显示比较薄弱，需要写很多模板标签。

2.ngView只能有一个，不能嵌套多个视图，虽然有angular-ui/ui-router解决，但ui-router对于URL的控制不是很灵活，必须是嵌套式的。

3.对于特别复杂的应用场景，貌似性能有点问题，特别是在Windows下使用chrome浏览器，不知道是内存泄漏了还是什么其他问题，没有找到好的解决方案，奇怪的是在IE10下反而很快，对此还在观察中。

4.这次从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级之后可能会导致一个兼容性的BUG，具体详细信息参考官方文档AngularJS，对应的中文版本：Angular1.0到1.2迁移指南，现在angularjs4都出来了，但是使用angularjs2的比较多。

5.ng提倡在控制器里面不要有操作DOM的代码，对于一些jQuery插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装插件，但是现在有很多插件的版本已经支持Angular了，最好能够和cordova插件结合进行混合式开发。

如何编写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" ).check();

});

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

$( "input" ).uncheck();

});

《/script》

【jQuery.extend()】

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

jQuery.extend( target )

例如，合并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插件

前言　　

如今做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()

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
如果不指定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的dataTable的问题

在bug中最多是JavaScript脚本错误，样式错误，功能错误等；对于cs代码引起的错误，几乎在开发时就修改了。而脚本的错误，样式的问题，是需要考虑浏览器，运行环境，部署是否完整等多个条件，导致修复的难度和再现的难度都比cs代码要困难的多。

具体问题： 

1. Javascript脚本：  在系统中，js是不可缺少的。而js的开源库更是少不了。本系统使用了   Jquery库/相关的UI库/插件库：这几个本身是没有问题的，兼容性也不错。    

   1）My97Datepicker：时间控件。在其中遇到的一个 “脚本权限”问题中，就是因为这个插件与Jquery冲突造成的。    

   2）其他脚本。  多种脚本的冲突导致了很多问题。这是在设计之初，没有考虑到功能的多样性，而在开发中随行而发，兴致所至则代码成。 

2. 脚本问题：万恶的Iframe加载：  在系统中，模拟多标签的浏览器做了一个可打开关闭的Tab多页面切换区。采用了一个控件。  apTabs是一个采用Prototype框架开发发HTML/JavaScript Tab控件。支持Tab横向滚动隐藏，以便在一个比较狭窄的空间中显示更多的Tab标签页。支持通过Ajax，iFrame加载内容。ApTabs在系统中，没打开一个tab会在客户端机器上产生5-8M的内存占用，而且关闭后就不会释放。nnd，打开20个界面后，再关闭再打开客户机器有1G内存就这么无声无息的没了。  原因：这个问题也是属于经典问题。采用Div等方式把Iframe给显示出来，然后再关闭div的隐藏属性，这样是无法释放Iframe的占用资源的。  需要在关闭div之前，把iframe的资源GC了才可以。  方法：在关闭tab时，循环该Tab的所有Element，包括iframe，设置：thisObject.removeNode(true)；  设置清理后，如果是IE浏览器可以使用：CollectGarbage()；进行GC。其他浏览器不兼容。

jQuery是一个常用的JavaScript库,但不属于轻量级的库是对还是错

对
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTMLDOM遍历和修改
AJAX
Utilities
提示：除此之外，jQuery还提供了大量的插件。

jquery插件库一般怎么使用

jQuery的插件使用方法具体步骤如下：
一、调用库文件
使用jQuery必须链接jQuery的库文件，无论是压缩版还是正常版，必须至少在网页中链接一个，如：
《script type="text/javascript" src="jquery.js"》《/script》
二、调用Jquery插件
应用做好的jQuery插件效果。
比如jQuery官网制作的插件jQuery，在使用它时不仅要链接库文件，还要链接UI文件以及UI的CSS文件，如：
***隐藏网址***
经过这几部的操作，jQuery插件效果才能真正被引用到网页文件中起到作用。
Jquery是一个优秀的Javascript库，还兼容各种浏览器。jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。

如何解决jQuery和其他库的冲突问题

在jQuery库中，几乎所有的插件都被限制在它的命名空间里。通常，全局对象都被很好地储存在jQuery的命名空间里，所以当把jQuery库和其他js库（Prototype，MooTools或YUI）一起使用时，不会引起冲突。
注意：默认情况下jQuery用“$”作为自身的快捷方式。
当我们使用的其他JavaScript库也是以"$"作为快捷方式时，这个时候如何解决jQuery和其他库的冲突呢？
1、jQuery库在其他库之后导入
（1）使用"jQuery"全名代替"$"在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交给其他JavaScript库。
示例：
//...省略其他代码
《p id="pp"》Text-prototype(将被隐藏)《/p》
《p》Text-jQuery(将被绑定单击事件)《/p》
《!-- 引入prototype --》
《script src="lib/prototype.js" type="text/javascript"》《/script》
《!-- 引入jQuery --》
《script src="../../scripts/jquery.js" type="text/javascript"》《/script》
《script》
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
})
})
$("pp").style.display = ’none’; //使用prototype隐藏元素
《/script》然后就可以在程序里将jQuery()函数作为jQuery对象的制造工厂。
（2）自定义快捷方式
可以自定义备用名称，例如jq，$j等等。示例：
var $j = jQuery.noConflict(); //自定义一个快捷方式
$j(function(){ //使用jQuery,利用自定义快捷方式——$j
$j("p").click(function(){
alert( $j(this).text() );
})
})
$("pp").style.display = ’none’; //使用prototype.js隐藏元素（3）使用$而不与其他库冲突
如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时又不想与其他库冲突，可以使用以下两种解决方法。
其一：
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery设定页面加载时执行的函数
$("p").click(function(){ //在函数内部继续使用 $()方法
alert( $(this).text() );
})
})
$("pp").style.display = ’none’; //使用prototype 其二：
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = ’none’; //使用prototype这是一种最理想的方式，可以通过改变最少的代码来实现全面的兼容性。
2、jQuery库在其他库之前导入如果jQuery库在其他库之前导入，那么$()的控制权默认归属于后面导入的JavaScript库。可以直接使用“jQuery”来做一些工作。同时，可以使用$()方法作为其他库的快捷方式。这里无需调用jQuery.noConflict()函数。示例：
《!-- 先导入jQuery --》
《script src="../../scripts/jquery.js" type="text/javascript"》《/script》
《!-- 后导入prototype --》
《script src="lib/prototype.js" type="text/javascript"》《/script》
《p id="pp"》Test-prototype(将被隐藏)《/p》
《p 》Test-jQuery(将被绑定单击事件)《/p》
《script》
jQuery(function(){ //直接使用 jQuery ,无需调用"jQuery.noConflict()"函数
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = ’none’; //使用prototype
《/script》