用jQuery+easyUI遇到的几个插件与文件详解

Posted 2020-08-16

很早就开始跟着老师学习jQuery课程，那时候是要求熟练使用jQuery中的easyUI插件中的控件，包括textbox、combobox、panel、checkbox、tree、datagrid等等

总之是关于基本表单控件、树和一些图表统计的应用，当然，还有一些后台数据库的连接使用。当时几乎都在学着怎么用，竟然没有去仔细深入思考关于jQuery，并且对在头部（head中）引入的一些诸如jquery-1.4.4.min.js 文件也没有太大感觉。果然，在自己需要用jQuery做前端的时候一顿茫然。

 

这两天终于又和最熟悉的陌生人--jQuery打上交道了。不说废话，赶紧开始。

 

1、jquery-1.4.4.min.js

这是jQuery库文件，本来jQuery就是javascript中的一个库（它有着快速、简洁的优点，是继prototype之後又一个优秀的Javascrīpt框架，使用户能更方便地处理一些DOM操作，并且为网站提供AJAX交互），而jquery-1.4.4.min.js是jQuery库的压缩版（min的含义所在），除去了一些无用占内存的空白、注释，优化了变量函数等等，使得该库更加适应环境。所谓1.4.4只是版本号，在此不加说明。

总而言之，这个文件的引用 （<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>） 是使用jQuery库的重要部分。值得注意的是这个文件的引用有时候要注意位置。（最好放在最开始引用，因为万一你的其他js文件是用jQuery写的，你就需要先引用jQuery才能使用不是。）

 

2、jquery.easyui.min.js

这是一组基于jQuery的UI插件集合（这个就是上文说到用jQuery写的js文件，所以顺序上先引用jquery-1.4.4.min.js文件，再用这个文件），也是压缩版，它的目标就是帮助我们更轻松的打造出功能丰富并且美观的UI界面。你不需要编写复杂的javascript，也不需要对css样式有深入的了解，只需要知道一些简单的html标签。比如我最开始提到的textbox、combobox、panel、checkbox、tree、datagrid等等

当然，要用jQuery写的easyUI插件还需要引用几个样式文件：icon.css（themes/icon.css）和 easyui.css（themes/default/easyui.css），这些样式文件其实就相当于皮肤或者说是一些支持easyUI的界面图。

类似样式文件，离不开的还有一些支持样式文件的图像需要，这个一般在images

 

3、easyui-lang-zh_CN.js

这是语言配置文件，有了这个文件，中文也可以使用并不出现乱码

 

4、以下是引用文件（记得要和自己文件放置路径相匹配）

<link rel="stylesheet" type="text/css" href="themes/icon.css" />
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" /> <!--控件的样式-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <!--jQuery库文件的压缩版-->
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> <!--easyUI-->

完成以上导入，就可以用jQuery+easyUI完成界面设计啦，有任何问题，欢迎讨论交流~~