jquery插件库？jquery库
大家好，今天来为大家分享jquery插件库的一些知识点，和jquery库的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！
jquery插件库一般怎么使用。
jQuery的插件使用方法具体步骤如下：
一、调用库文件
使用jQuery必须链接jQuery的库文件，无论是压缩版还是正常版，必须至少在网页中链接一个，如：
<script type="text/javascript" src="jquery.js"></script>
二、调用Jquery插件
应用做好的jQuery插件效果。
比如jQuery官网制作的插件jQuery，在使用它时不仅要链接库文件，还要链接UI文件以及UI的CSS文件，如：
<link rel="external nofollow" href="" rel="stylesheet" type="text/css"/><script src=""></script><script src=""></script>
经过这几部的操作，jQuery插件效果才能真正被引用到网页文件中起到作用。
Jquery是一个优秀的Javascript库，还兼容各种浏览器。jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。
如何创建一个自定义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 class="accordion" id="my-accordion">
<dt>第1部分</dt>
<dd>内容一</dd>
<dt>第2部分</dt>
<dd>内容二</dd>
<dt>第3部分</dt>
<dd>内容三</dd>
<dt>第4部分</dt>
<dd>内容四</dd>
</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 class="accordion" id="my-accordion">
<dt>第1部分</dt>
<dd>内容一</dd>
<dt>第2部分</dt>
<dd>内容二</dd>
<dt>第3部分</dt>
<dd>内容三</dd>
<dt>第4部分</dt>
<dd>内容四</dd>
</dl>
<dl class="accordion" id="my-accordion">
<dt>第5部分</dt>
<dd>内容五d>
<dt>第6部分</dt>
<dd>内容六dd>
<dt>第7部分</dt>
<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插件的示例。
快速云:25个可遇不可求的jQuery插件
随着jQuery插件在网站建设过程中的使用率持续增长，开发一些新的插件或代码片段，以提升用户体验，变得尤为重要。接下来推荐的jQuery插件集合，涵盖了滑块、地图、图片旋转块等，都是高质量、免费的工具，旨在优化用户体验。
例如，Flat jQuery Price Slider插件，其设计用于在一定范围内选择价格，无论是开发项目还是设计项目，都能带来巨大便利。该插件完全免费。
GMaps.js插件为应用程序引入谷歌地图，提供多种功能，如地图、方向、信息框等。脚本简洁，易于安装，但需要手动实现代码功能。
FormChimp插件是可定义的MailChimp Ajax插件，简化注册流程，使用户在你的MailChimp列表注册变得轻松。
OWL Carousel插件是一个响应式的旋转滑块插件，支持触摸功能，使创建美观的旋转效果变得简单。
jQuery Spellchecker插件轻量级，可检查文本文档中的单词拼写，适用于表单字段或DOM目录。
Chart.js图表库基于HTML5 Canvas，支持多种图表类型，如折线图、条形图等，且独立于其他JavaScript库，体积小，定制性强。
Email-autocomplete插件自动填充或建议电子邮件地址，简化注册过程。
Draggabilly插件用于创建可拖动的jQuery代码片段。
Interact.js插件提供拖放、大小调整和手势功能，适用于电脑和移动设备。
Sortable插件是一个简单但功能强大的JavaScript库，适用于现代浏览器和触摸设备。
rowGrid.js插件将图片或项目以连续行排列，易于使用。
Scattered Polaroid gallery插件在容器中随机排列照片，选中项目时自动移动至屏幕中央，其他项目自动调整位置。
Viewport Image Resize插件简单易用，支持图像大小重新设置和裁剪，基于伪视图实现。
jQueryUI Limitslider插件允许在选择线上设置多个滑块，用于位置、尺寸等表示，支持标签和悬浮标题。
Freewall插件创建响应式的网格布局，适用于各种设备。
Bootstrap-dialog插件让使用Bootstrap模型更加便利。
jQuery fontIconPicker插件提供简单、带有搜索功能的图标选择器。
Bootstrap-dialog插件让使用Bootstrap模型更加便利。
jQuery tabelizer插件用于表格的多层次分组。
Facebook Badge Jquery Plugin插件在网站上添加Facebook页面标记。
Croppic插件提供图片裁剪功能，效果超出预期。
jQuery Plugin for Google Drive API插件支持不同设备上的Google Drive同步和文件传输。
Pick-a-Color插件界面基于Twitter Bootstrap风格，易于使用。
Simple Vertical Menu插件使用CSS3和jQuery技术，自定义字体和标记图案。
jQuery Message Form插件是一个简单的字符计数实验。
Magnifying Glass Plugin插件在鼠标经过区域放大显示，提供放大镜效果。
如果你还想了解更多这方面的信息，记得收藏关注本站。