在开发过很多 jQuery 插件以后，我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式。这样我就可以 copy & paste 大部分的代码结构，只要专注最主要的逻辑代码就行了。
使用相同的设计模式和架构也让修复bug或者二次开发更容易。一套经过验证的架构可以保证我的插件不出大的问题，不论插件简单还是复杂。 我在这里分享10条我总结的经验。
1. 把你的代码全部放在闭包里面
这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。不过你的插件的代码只为你自己的插件服务，所以不存在这个问题，你可以把所有的代码都放在闭包里面。而方法可能应该放在Prototype方法内部，我们后面会讲到这一点。
(function($){
//code here})(jQuery);
2. 提供插件的默认选项
你的插件应该会有一些选项是可以让开发者设置的，所以提供恢复默认选项是以有必要的。你可以通过jQuery的extend功能来设置这些选项：
var defaultSettings = {mode : 'Pencil',
lineWidthMin : '0',
lineWidthMax : '10',
lineWidth : '2'
};
settings = $.extend({}, defaultSettings, settings || {});
3. 使用返回一个元素
JavaScript/jQuery有一个很好的特点就是可以进行方法级联，所以我们不应该破坏这个特性，始终在方法中返回一个元素。我在我的每一个jQuery插件中都遵守这一条。
【IT168 资讯】jQuery 2.0如期发布，该版本不再支持IE 6/7/8浏览器，因此变的更轻更快，但仍然可以继续运行在JavaScript环境中，在兼容这些老版本浏览器时，由于自身原因，常会产生一些错误。但别担心，jQuery团队将继续对1.x 版本分支进行维护，如果你无法抛弃IE 6/7/8，那么你可以继续使用jQuery 1.9和即将发布的1.10。
随着jQuery 2.0的发布，jQuery团队对1.x版本的一些环境将不再提供支持，因为2.x版本会是更好的选择。但对支持老版本IE的非网站场景是提供支持的，它们包括：
Google Chrome附加组件
Mozilla XUL应用程序和Firefox扩展
Firefox OS应用程序
Chrome OS应用程序
Windows 8 Store (“Modern/Metro UI”) 应用程序
BlackBerry 10 WebWorks应用程序
PhoneGap/Cordova应用程序
Apple UIWebView类
Microsoft WebBrowser控件
node.js
由于这些应用处于开发阶段，它们自身拥有一套规则或限制，并且与jQuery用在互联网上的浏览器是不同的。虽然我们不能定期在这些非浏览器场景下测试，但我们仍然希望听到，你们在这种情况下使用jQuery的感受。
jQuery 2.0有哪些的变化：
不再支持IE 6/7/8：如果在IE9/10版本中使用“兼容性视图”模式也将会受到影响。
更轻更快：2.0版本文件与1.9.1相比小了12%。
可以构建一个更小、更轻量的版本。
jQuery 2.0 API完全兼容jQuery 1.9 API。
此外，为了兑现承诺，减少API 1.x与2.x之间的分歧，我们将在未来一两个月内发布jQuery 1.10版本。
下载地址
http://code.jquery.com/jquery-2.0.0.min.js (minified, for production)
http://code.jquery.com/jquery-2.0.0.js (unminified, for testing)
【IT168 资讯】实时搜索是一种增强的搜索表单，它使用AJAX技术在同一视图中提供结果或建议。这是一个常规的HTML输入字段，它通过Chrome、Firefox或Safari等现代浏览器自动完成搜索功能。
在应用程序中使用实时搜索大大提高了网站的用户友好性。无论使用什么后端技术— PHP、Java、Python、Ruby——JavaScript都是实现客户端实时搜索功能的最佳选择。
实时搜索一词有点含糊不清，该术语没有权威的定义。我遇到过一些标签为实时搜索的解决方案，但缺乏某些关键功能。
1、Ajax实时搜索
这是一个开源的实时搜索jQuery插件，具有良好的记录，在Chrome、Firefox、Safari、Opera和IE8中均可完美呈现。 最令人印象深刻的功能是它可以以复制表的形式返回结果!
程序员可在官网或Github上了解更多信息(Github地址为：https://github.com/iranianpep/ajax-live-search)
2、Semantic UI搜索组件
如果程序员使用CSS框架，可以考虑Semantic UI。它有一个很酷的搜索组件，使程序员可以很容易地在表单上实现实时搜索。以下是示例代码：
HTML：
JavaScript：
小但很强大，如果使用API设置选项，可以执行自定义，例如将结果分组。同时，Semantic UI还专为React，Meteor，Ember和Angular设计了不同的风格。
要了解更多信息，可以查看相关Demo或者查看官网(https://semantic-ui.com/modules/search.html)。
3、jQueryUI AutoComplete
这是一个jQuery小部件，它是jQuery UI库的一部分。库本身是一组精心设计的用户界面组件，主题是建立在jQuery之上。
自动填充带有几个模板，可以提供不同的实现。以下是简单示例：
HTML：
JavaScript：
4、DevBridge jQuery AutoComplete
DevBridge jQuery AutoComplete是一个小型JavaScript库，可让将常规文本输入字段转换为自动填充建议框。它的API功能丰富、文档良好，可以执行相当多的不同配置。
实现它很简单，看看这个例子：
HTML：
JavaScript(AJAX查找)：
JavaScript(本地查找)：
5. EasyAutocomplete
EasyAutocomplete是一个高度可定制的jQuery自动完成插件，具有所有常用的功能。 它支持JSON，XML和纯文本格式的本地和远程数据集。它还支持回调处理程序以及一些默认样式。
将这个插件分开的是它们的模板功能，模板用于定义结果视图。程序员可以创建自定义模板或使用其中一种可用的内置预设，其中包括：
1、描述模板
2、Icon 右/左模板
3、链接模板
使用此插件实现基本的自动完成非常简单，请参阅以下示例代码：
HTML：
JSON：
Javascript：
6、PixaBay jQuery-autoComplete
这是一个开源的自动完成jQuery插件，您可以用于您的项目。最初该项目团队使用DevBridge的jQuery自动填充功能。后来他们创建了一个fork，并开始更新它以满足自己的需求。最终，他们对原始的源代码进行了多次迭代优化，开源了这款超轻量级优化插件。
该插件只有1.4 kB压缩，支持多个数据源，回调和智能缓存系统。这是插件的一个示例实现：
JavaScript：
程序员要了解更多信息，可以去官网或Github上查看(github链接：https://github.com/Pixabay/jQuery-autoComplete)
7、Marco Polo
这是一个jQuery自动完成插件，它具有高质量的文档、缓存、内存选择、自定义样式、回调处理和WAI-ARIA支持。它需要jQuery v1.4.3或更高版本，并支持所有现代浏览器(甚至IE6!)。
实现Marco Polo很简单。这是一个示例实现：
HTML：
JSON(源数据)：
Javascript：
程序员要了解更多信息，可以去官网或Github上查看(github链接：https://github.com/jstayton/jquery-marcopolo)
8、xDSoft Autocomplete Like Google
这是一个轻量级的自动完成jQuery插件，具有本地和远程数据源支持。
以下是一个示例代码：
JavaScript：
程序员要了解更多信息，可以去官网或Github上查看，自行百度即可。
9、 jQuery Typeahead Search
jQuery Typeahead Search是一个自动完成插件，内置深度自定义选项。它适用于所有来自IE8 +的现代浏览器，并支持多种内部和外部AJAX回调。
如果查看演示页面，你会发现许多不同代码实现的示例。
10、Algolia Autocomplete
该JavaScript库能够在搜索框中添加快速且功能齐全的自动填充菜单，它可以与Algolia搜索引擎结合使用。
它支持来自IE9的所有现代浏览器，可用作jQuery插件，Angular指令和独立库。除了常规功能，它还具有诸如防止XSS攻击的安全功能。
11、ng-bootstrap Typeahead
如果在项目中使用Angular和Bootstrap，则应使用ng-bootstrap框架。它具有一个类似于常规jQuery自动完成插件的aTypeahead组件。
它支持模板，本地和远程数据集，以及通常的搜索功能。以下是维基百科搜索的部分代码实现：
HTML：
Typescript：
12、React Autosuggest
你可以从标题中知道这不是一个jQuery插件，但是它仍然是JavaScript。React Autosuggest是一个具有大量配置选项的开源库。它符合移动设备，符合WAI-ARIA，完全可定制，并且与Redux和Flux完美结合。
经过恰当的配置，程序员会得到一个真正的搜索插件，这是组件的部分代码示例：
尽管源文档说明了使用本地阵列进行数据源的解决方案，但可以通过onSuggestionsFetchRequested()函数中的远程提取调用轻松地交换。
程序员要了解更多信息，可以去官网或Github上查看(github链接：https://github.com/moroshko/react-autosuggest)
13、W3Schools Ajax Live Search
如果希望避免依赖并使用纯JavaScript实现解决方案，那么应该尝试使用w3schools提供的解决方案。
本示例中的后端使用PHP服务器。显然，程序员可以用喜欢的服务器技术来代替。该代码需要XML格式的数据，可以重写代码以接受JSON格式。
这个解决方案的伟大之处在于，它适用于所有现代浏览器和较早的IE5!
HTML：
Javascript：
14、WordPress Live Search
如果使用WordPress，程序员可以使用最少的编码来实现实时搜索。只需要安装和设置具有实时搜索功能的WordPress插件。最受欢迎的是Dave的WordPress Live Search，目前有超过10,000个活动安装。它与大多数主题兼容，具有多种可配置选项，并且易于集成，最小化。
总结
希望这份清单可以帮助程序员为项目选择合适的实时搜索解决方案。根据您的经验和项目环境，选择比其他环境更容易实现和定制的方案。
没有列出的其他有能力的解决方案，也许你可以在下面的评论中列出来。
【IT168 评论】jQuery得以流行的主要原因是可让程序员轻松地选择DOM元素，遍历并修改其内容。但这是在很多年前，那时程序员还被IE7困扰，ECMAScript 5还未面世。
在那之后，世界发生了翻天覆地的变化。浏览器已经变得称心如意，JavaScript出现了跨越式发展。这时，就有程序员站出来说，“我们还需要jQuery吗?”恐怕你是不知道这六个原生DOM方法吧!看完，没准你会因为jQuery库够酷而爱上JavaScript!
1、append()
append方法执行插入操作，即将节点添加到DOM树。它将参数附加到被调用节点的子节点列表中，请考虑以下示例：
程序员或许会问：这与本机appendChild方法有什么不同呢?第一个区别是，anappend()可以一次使用多个参数，相应的节点将被附加到子列表中。继续代码：
此外，一个参数可以是一个字符串。所以，使用appendChild()时，必须使用相当详细的语法：
parent.appendChild(document.createTextNode('just some text'))
与append()操作一样短：
字符串转换为Text节点，因此不会解析任何HTML：
这与jQuery方法形成对照，该方法分析了标记字符串，并生成相应节点插入到DOM树中。
通常情况下，如果附加节点已存在于树中，则首先从其旧位置移除：
append()和appendChild()之间的最后一个区别是后者返回附加节点，而前者返回undefined。
2、prepend()
prepend方法与append()非常相似。添加了子项，但是它们将被添加到调用该方法节点的子节点之前，就在第一个子节点之前：
方法的返回值为undefined。
3、after()
after方法是另一种插入方法，但它必须在子节点之后调用，也就是一个具有确定父节点的节点。节点作为相邻的兄弟节点插入，如以下所示：
返回值是undefined。
4. before()
before()与after()类似，但是在子节点之前插入：
返回值同样是undefined。
5. replaceWith()
假设程序员想替换一个DOM节点。当然，他们可能有子节点，所以这个操作将替代整个DOM子树。在介绍这套方法之前，将使用replaceChild()：
可以使用replaceWith以不冗长的方式执行相同的操作：
除了较短的语法之外，此方法的一个特点是接受几个参数，允许用其他节点列表替换一个节点。继续以前的交互式JavaScript会话：
方法的返回值也是undefined。
6、remove()
从DOM树中删除节点怎么办?常用的方法是removeChild()。 如其名称所示，它必须在被删除节点n的父节点上调用：
然而，使用remove()，操作相当简单：
本机与jQuery操作的不同之处在于如何处理附加到已删除节点的事件侦听器。 jQuery删除与元素相关联的所有绑定事件和数据，而本机方法不会触及事件侦听器：
这种行为更类似于jQuery detach方法。
浏览器支持
写这篇文章时，这几种方法所获得的浏览器支持为：
prepend()>append()>before()>after()>replaceWith()
桌面浏览器如下：
1、谷歌浏览器从54版开始，全面支持上述方法。
2、Firefox从49版本开始，全面支持上述方法。
3、Safari从10版开始，全面支持上述方法。
4、Opera从41版开始，全面支持上述方法。
但是，请注意：Internet Explorer并不支持，Microsoft Edge也不支持(尽管对于Edge而言，该功能正在开发中)。remove方法得到了更广泛的支持，Microsoft Edge自14版本以来就实现了。
insertAdjacentHTML
结束之前，还想说几句insertAdjacentHTML。它提供类似于上面列出的前四种方法的插入操作：append()，prepend()，after()，before()，并且要添加的内容使用HTML字符串指定：
请注意，我们必须使父节点成为另一个节点的子节点才能使用该位置参数beforebegin andafterend。
幸运的是，insertAdjacentHTML()随处可见。
结论
看完这些方法之后，你认为jQuery如何?还是因为缺乏IE支持而打算放弃呢?程序员来说说你们的看法吧!万一让这个世界有点不同了呢!
【IT168 评论】jQuery表单向导是一个jQuery插件，与某种表格流协助表单创建(不用刷新页面)。举个例子，如果你有一个巨大的表格来输入用户数据，你可以使用表单向导来将其分成一系列相关步骤。这一优点使用户不会被超长表单吓到，并且当用户输入信息时为其提供一些进度指示。
在这篇文章中，我们列出了开发者最喜欢的六大jQuery表单向导，考量了它们的不同功能以及如何创立你自己的向导。这不会是一个冗长的列表，如果你正在寻找一个jQuery表单向导，这一定会为你指明正确的方向。
此列表在2017年8月30日更新，从列表中删除了损坏和弃用的插件，并加入了新的插件来提供开发者要求的功能。
1. jQuery Steps
jQuery Steps是一个智能UI元素，使开发者可以很方便地创建向导界面。这个插件将内容分成区块来形成更有结构和顺序 的页面外观。它有多种功能，例如、状态保持(这会保存你每一步的输入)以及每个区块的过渡效果。它可以通过NuGet或者bower安装，拥有内容和功能丰富的API。
2. jQuery Smart Wizard
Smart Wizard是一个灵活且高度客户化的jQuery步骤向导插件，有Bootstrap支持。它很容易执行，并且可以为你的表单、检出屏幕、注册步骤创建一个整洁而时髦的界面。它的功能包括主题支持(包括了多个主题)、URL导航、步骤选择和动态隐藏或关闭步骤。它可以通过npm、bower和composer安装，拥有内容和功能丰富的API。
3. formToWizard
这个小型插件可以用jQuery将任何网络表格转换成多步骤的向导，每个表格
京公网安备 11010502049343号