第一章基于jQuery插件的使用

jQuery插件的使用

本文使用JQuery官网的JQuery UI的一个插件做简单介绍。首先在说插件之前说两句：

第一、什么是JQ插件：

JQ插件相当于JQ的封装。好比JQ是JS的封装，只不过插件已经完成功能了。好比面包：

JS是小麦，JQ是面包片，JQ插件是成品的面包！

第二、为什么要用JQ插件:

JQ插件前面已经说过了。是个成品的东西。具体到。比如登录框，日历表。各种成品下拉框，按钮，等等。

我们通过加入插件的形式就可以直接使用。我们在使用完插件还可以丰富插件。得到自己想要的结果。这样可以大大减少我们的开发周期。其实是很好的一个工具。

不过也是有缺点的。缺点就是你用别人的JQ插件，你需要去读他的API文档。如果一个插件比较简单还好一点。如果是一个功能复杂，界面繁琐等等的插件，需要读作者的文档。了解他的一些写法跟逻辑。而且基本上现在也是英文。对英文水平要求很高。比如JQUI都是英文的。

第三、怎么使用JQ插件：这边直接用JQuery的JQuery UI来做介绍吧。

基本上流程差不多。下面就开始步骤：

第一步：打开jQuery官网http://jquery.com/;找到左上角第二个橙色ui图标：如下

根据提示选择适合JQ版本。有提示的！

下载完打开文件发现跟自己的开发项目很像，里面包含最终的要的几个东西是：css+html+js

老生常谈了：这边开始介绍怎么使用JQ插件

第一、打开文件里面的index.html.因为别人把插件的所有功能基本上都写到了一个界面上。你直接去看一下这个插件能提供给你多少成品。比如JQ UI提供了。各种按钮。选择。下拉框。含有日历等等，很丰富。

第二、现在我对插件的日历比较感兴趣。因为我发现它在html里面只写了一行就实现了日历功能！是不是很精彩：看一下图片：

显然已经完全体现了插件的妙处！如果你自己手写这个日历。是不是需要思索需要尝试。而且需要时间。

然后这边已经用一句话给您提供了。如果业务需求对这边没有太大要求！显然我可以直接用。并且很节约时间。下面我来说一下怎么使用这个日历的插件。

自己新建一个html文档，将上面的html：直接写到你的body下面。

	<h2 class="demoHeaders">Datepicker</h2>
	<div id="datepicker"></div>

然后最重要的是导入css样式变成跟JQ文件。记住一定要选择合适的版本！css或者JQ版本过低，可能导致出不来效果！

我们先导入css样式。可以直接拿UI文件里面的样式。但是因为封装了很多样式。建议找出其所在的样式。自己手动添加到你的项目中去。这边自己复制#datepicker关键字去去找。把所有关于此的css样式复制到自己css文件里。

css就加载好了。

然后先看一下官网ui提供的index.html里面的<script>标签里面看导入了哪些js文件，因为文件jq文件已经帮你放到文件夹里面了。所以可以不用写自己的。这样还能避免版本问题。（官网是这样的，别人写的我就不知道了！），这边举例：

很显然加载了两个。那我们依然把他们直接复制到我们的html里面下面。记住！注意路径。建议以后插件放在一个文件里面。以后直接使用那个文件。这边弄好之后。基本上已经完成了。

最后一步：在自己html里面调用js方法：同样也是参考官网给的格式。

<script>
    $( "#datepicker" ).datepicker({
        inline: true
    });
</script>

第一章 基于jQuery插件的使用