要使用jQuery UI，需要访问两个文件：jquery-version.js和jquery-ui.js：
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
一、黄色淡出技术
toggle方法：选中元素，调用此方法，可让指定的元素从显示——>由黄到淡出；也可以让隐藏的元素变为黄色到普通颜色文本。
$("选择器").toggle("highlight", {}, 2000); 参数1：我们需要的效果；参数2：所需效果的选项，默认为黄色{}；参数3：效果显示的速度，以毫秒为单位。
二、创建可折叠菜单（accordion menu：在此菜单中，打开一个部分时，其他部分会自动关闭）
首先可以设置好我们菜单显示的主题，需要2个CSS文件：
第一个是选择来自于jquery的主题：（链接中的start即为jquery的一种主题）
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css" />
然后我们需要在第二个CSS中设置宽度，不然菜单会跟随主题填充整行：<link rel="stylesheet" href="css/script.css" />
然后选中元素，调用accordino方法，其参数设置：
animated：可以设置为显示菜单时，具有动画效果，如设置为"slide"或"easeslide"、"bounceslide"等。
collapsible：使所有菜单具有折叠效果——true。
header：将菜单的class统一设置，然后给header——header: ".menuLink"，jQuery即可识别该菜单。
heightStyle：设置为"content"，迫使可折叠区域具有固定的高度——根据内容所需的最大高度。
event：菜单是可以响应事件的，比如设置为"mouseover"，即可达到悬停就打开菜单的效果。
active：可以设置菜单初始状态，默认是打开第一个菜单(0)，也可以设置为其他的菜单：active: 1(或2等)，还可以关闭所有：active: false。
三、创建更漂亮的对话框
首先需要引用第二个技术中的两个CSS文件，在本例中第二个CSS设置模态对话框弹出后的背景颜色（只有模态框有背景）。
设置对话框背景的颜色为灰色：
.ui-widget-overlay {
background: #000 none;
}
然后加入对话框（选中某个元素，让这个原本该在网页中显示的元素，通过弹框的方式显示，网页中不再显示该元素）：
$("#ID").dialog({
modal: true,
resizable: false,
buttons: {
"按钮1": function() {$(this).dialog("close");},
"按钮2": function() {$(this).dialog("close");}
}
});
其中buttons部分还有一种写法：
buttons: [
{
text: "按钮1",
click: function() {$(this).dialog("close");}
}
{
text: "按钮2",
click: function() {$(this).dialog("close");}
}]
四、自动完成字段技术（输入一个字符，下拉提示包含输入字符的补全提示）——autocomplete函数
要实现自动完成字段的提示，则需要选中相应元素（就是正在操作的元素），然后在其autocomplete函数中写出对应操作。
下面是对文本框的自动完成提示：首先给出一个文本框（写在包含ui-widget类的标签中才可得到主题效果）
<div class="ui-widget"> <!--写在ui-widget类中，才可以得到主题效果-->
<label for="searchField">Please enter your state:</label>
<input id="searchField" />
</div>
然后，在js文件中，只需要选中文本框，然后向autocomplete函数传递一个数组就行了。
$(function() {
var stateList = "A...*B...*C...";
$("#searchfield").autocomplete({
source: stateList.split("*") //以*为分隔符将statelist的值分隔成一个数组
});
});