1.什么是jQuery EasyUI
jQuery EasyUI是一组基于jQuery的UI插件集合，jQuery EasyUI的目标就是帮助Web前端开发人员能够很轻松的打造丰富且美观的前端界面。
官方网站：
2.jQuery EasyUI的特点1.基于jQuery用户界面的插件集合
2.为一些当前用于交互的js应用提供必要的功能
3.使用简单，不需要开发者写很多JavaScript代码，通常只需要写HTML标记来定义用户界面即可，功能很强大
4.支持HTML5
5.开发产品时可节省时间和资源
6.支持扩展，开发者可根据自己的需求扩展控件
7.有开源免费版本，可自己使用
3.学习jQuery EasyUI的条件jQuery EasyUI是基于jQuery的UI库，所以开发者必须需要jQuery的基础。
4.jQuery EasyUI的使用步骤：
1.到官网下载最新版的jQuery EasyUI版本：jquery-easyui-1.5.5.4.zip
2.解压后复制到需要使用到jQuery EasyUI的组件的项目中
3.在html代码里引入jQuery EasyUI的js文件和css文件就可以了
例子：
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI示例</title> <meta charset="UTF-8" /> // 引入jQuery，可以使用jQuery EasyUI里自带的jQuery,也可以使用自己下载的jQuery核心库 <script type="text/javascript" src="http://www.likecs.com/jquery-easyui/jquery.min.js"></script> // 引入jQuery EasyUI的核心库，这里使用的版本是1.5.5 <script type="text/javascript" src="http://www.likecs.com/jquery-easyui/jquery.easyui.min.js"></script> // 引入jQuery EasyUI的中文显示文件， <script type="text/javascript" src="http://www.likecs.com/jquery-easyui/locale/easyui-lang-zh_CN.js" ></script> // 引入自己开发的js文件 <script type="text/javascript" src="http://www.likecs.com/js/index.js"></script> // 引入jQuery EasyUI中自带的的核心CSS <link type="text/css" href="http://www.likecs.com/jquery-easyui/themes/default/easyui.css" /> // 引入jQuery EasyUI的图标文件 <link type="text/css" href="http://www.likecs.com/jquery-easyui/themes/icon.css" /> </head> <body> </body> </html> 5.加载jQuery EasyUI的组件方式 5.1 使用class方式加载使用class加载，把标签的class设置为：easyui-组件名
5.2 使用JS方式加载为需要渲染的标签设置一个id属性，然后使用jQuery的语法取出标签，对标签进行调用加载
在js文件对标签进行处理：
$("#div1").组件名() 5.3 实例:使用jQuery EasyUI加载出一个dialog对话框组件如图
3
各文件说明：
index.html为HTML代码存放文件
jquery-easyui文件夹用来存放jQuery EasyUI解压后的所有文件
js文件夹用来存放自己定义的js文件
在这里使用的jQuery是jQuery EasyUI自带的
5.3.1 使用class方式加载修改index.html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>jQuery Easy UI</title> <script type="text/javascript" src="http://www.likecs.com/jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <link type="text/css" href="http://www.likecs.com/jquery-easyui/themes/default/easyui.css"/> <link type="text/css" href="http://www.likecs.com/jquery-easyui/themes/icon.css"/> </head> <body> <div> jQuery EasyUI对话框实例 </div> </body> </html>使用浏览器打开index.html文件，如图所示
４
5.3.2 使用js方式加载修改index.html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>jQuery Easy UI</title> <script type="text/javascript" src="http://www.likecs.com/jquery-easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/jquery-easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://www.likecs.com/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="http://www.likecs.com/js/index.js"></script> <link type="text/css" href="http://www.likecs.com/jquery-easyui/themes/default/easyui.css"/> <link type="text/css" href="http://www.likecs.com/jquery-easyui/themes/icon.css"/> </head> <body> <div> jQuery EasyUI对话框实例 </div> </body> </html>index.js文件(dialog未使用任何装饰代码)
$(function () { $('#box').dialog({ }); });使用浏览器打开index.html文件，如图所示
5
一般推荐使用第二种js调用方式加载，因为一个UI组件有很多属性和方法，
使用class的用法将很不灵活，并且根据js和html分离的原则，js调用方式加载使用很灵活，且提高了代码的可读性