2021-05-17

Easy UI简介

jQuery EasyUI是一组基于jQuery的UI插件集合，其目标是帮助web开发者更轻松的打造出功能丰富且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，只需要了解一些简单的HTML标签即可。jQuery EasyUI提供了大多数UI控件，如：accordion、combobox、menu、dialog、tabs、validatebox、datagrid、window以及tree等。jQuery EasyUI是基于jQuery的一个前台UI界面的插件，页面非常美观，同时支持各种themes以满足使用者对于页面不同风格的喜好，其功能足够开发者使用，且相对于ExtJS更轻量。

jQuery EasyUI有以下特点：

（1）基于jQuery用户界面插件的集合。

（2）为一些当前用于交互的js应用提供必要的功能

（3）EasyUI支持两种渲染方式，分别为javascript方式（如：$("#p").panel({...})）和html标记方式（如：class=“easyui-panel”）。

（4）支持HTML5（通过data-options属性）

（5）开发产品时可节省时间和资源

（6）简单，但很强大

（7）支持扩展，可根据自己的需求扩展控件

（8）目前，各项不足正以版本递增的方式不断完善

jQuery EasyUI下载地址

jQuery EasyUI官方网址：http://www.jeasyui.com

中文帮助：http://www.zi-han.net/case/easyui

jQuery EasyUI下载包文件介绍

jQuery.min.js文件：

此文件是jQuery包，EasyUI是基于此来编写的，下载包中的jQuery版本为2.0，添加建议使用2.0以下版本，可以兼容IE低版本浏览器。

jQuery.easyui.min.js文件：

此文件基于jQuery包，包含EasyUI的基础函数库

themes文件夹：

用于存放内置皮肤css文件，当使用EasyUI插件时，无需编写任何CSS代码，插件仍然具有相应的样式。

Iocale文件夹：

用于存储语言相关的js文件，如果想要将EasyUI默认的提示信息显示为汉字，可以在程序中引入该目录下的easyui-lang-zh_CN.js

demo文件夹：

包含使用插件的一些Demo文件。

plugins文件夹：

功能插件

<script src="Scripts/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="UI/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <link href="UI/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="UI/EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />

console对象简介

控制台（console）主要作用是显示网页加载过程中产生的各类信息。

除了console.log()外，根据信息的不同性质，console对象还有4种显示信息的方法

（1）一般信息console.info()

（2）除错信息console.debug()

（3）警告信息console.warn()

（4）错误信息console.error()

JSON简介

JSON（javascript Object Notation）是一种轻量级的数据交换格式，非常适合于服务器程序与javascript的交互，它是一种轻量级的数据交换格式。

JSON语法声明

JSON语法声明了一个对象，是一种用于传输和生成数据的协定。

（1）对象：对象包含于{}之间

（2）属性：采用Key-Value对表示，属性之间使用逗号隔开

（3）对象数组：数组存放于[]之间

（4）元素：元素之间用逗号隔开

（5）值：值可以是字符串、数字、对象、数组、true、false和null（任意类型）

var customerObj = {
                name: "付同学",
                sex: "男",
                national: "中国",
                worker: "程序员",
                address: "武汉",
                culturaldegree: [{ "IP": "大专", Num: "01" }, { "IP": "本科", Num: "02" }, { "IP": "博士", Num: "03"}]
            }