今天學習了easyUI的基礎知識，個人總結了一下幾點：
一、EasyUi是基於jquery的基礎上開發的第三方插件，內部提供了大量的用於交互的JavaScript代碼，所以我們只要簡單的定義我們的用戶界面就可以實現一個具有交互的界面了。使用EasyUi的幾個注意點：
1.首先我們要引入Easyui的樣式包：
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
引入EasyUi的圖標包：
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
之前說過EasyUi是基於jquery的基礎上開發的所以在引入EasyUi的js包之前我們要先引入jquery包：
<script type="text/javascript" src="easyui/jquery.min.js"></script>
引入EasyUi的核心js包：
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
引入EasyUi中文提示包：
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
引入EasyUi中文提示包：
<script type="text/javascript" src="js/index.js"></script>
引入完這些包我們就可以設計我們EasyUi界面了，並且能很簡單的就實現交互。
二、如何使用EasyUi定義的組件，主要由兩種方式（以dialog組件爲例）
1.使用class方式加載：
<ol class="linenums"><li class="L0"><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"dd"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"easyui-dialog"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"My Dialog"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">width</span><span class="pun">:</span><span class="lit">400px</span><span class="pun">;</span><span class="pln">height</span><span class="pun">:</span><span class="lit">200px</span><span class="pun">;</span><span class="atv">"</span></li><li class="L1"><span class="pln"> </span><span class="atn">data-options</span><span class="pun">=</span><span class="atv">"iconCls:'icon-save',resizable:true,modal:true"</span><span class="tag">></span></li><li class="L2"><span class="pln"> Dialog Content.</span></li><li class="L3"><span class="tag"></div></span></li></ol>通過給dom對象添加class屬性就可以實現將div變成dialog組件，其中data-options（數據設置）屬性使用來設置dialog的一系列屬性的。
2.使用dom對象利用js的方式加載
<ol class="linenums"><li class="L0"><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"dd"</span><span class="tag">></span><span class="pln">Dialog Content.</span><span class="tag"></div></span></li></ol>
<ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#dd'</span><span class="pun">).</span><span class="pln">dialog</span><span class="pun">({</span></li><li class="L1"><span class="pln"> title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'My Dialog'</span><span class="pun">,</span></li><li class="L2"><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">400</span><span class="pun">,</span></li><li class="L3"><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200</span><span class="pun">,</span></li><li class="L4"><span class="pln"> closed</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></li><li class="L5"><span class="pln"> cache</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></li><li class="L6"><span class="pln"> href</span><span class="pun">:</span><span class="pln"> </span><span class="str">'get_content.php'</span><span class="pun">,</span></li><li class="L7"><span class="pln"> modal</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span></li><li class="L8"><span class="pun">});</span></li></ol>通過{ }中的json形式來設置dialog組件的屬性和外觀。
三、如何調用組件的方法
調用組件的方法都是類似的，首先要獲得組件對象然後在調用組件的方法並給出參數。下面還是以dialog組件對象來調用其方法
<ol class="linenums"><li class="L0"><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"dd"</span><span class="tag">></span><span class="pln">Dialog Content.</span><span class="tag"></div></span></li></ol>
<ol class="linenums"><li class="L0"><span class="pln">$</span><span class="pun">(</span><span class="str">'#dd'</span><span class="pun">).</span><span class="pln">dialog</span><span class="pun">({</span></li><li class="L1"><span class="pln"> title</span><span class="pun">:</span><span class="pln"> </span><span class="str">'My Dialog'</span><span class="pun">,</span></li><li class="L2"><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">400</span><span class="pun">,</span></li><li class="L3"><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">200</span><span class="pun">,</span></li><li class="L4"><span class="pln"> closed</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></li><li class="L5"><span class="pln"> cache</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span></li><li class="L6"><span class="pln"> href</span><span class="pun">:</span><span class="pln"> </span><span class="str">'get_content.php'</span><span class="pun">,</span></li><li class="L7"><span class="pln"> modal</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span></li><li class="L8"><span class="pun">}); //這是定義了dialog組件</span></li></ol><p>$("#dd").dialog('方法名'，參數 ) //參數要根據具體的參數類型給</p>經過這麼簡單的總結接下來對照EasyUi的API學習就輕鬆很多了