下载文档原格式
jQuery1.7.1API手册本文基于jQuery1.7.1版本，是对官方API的整理和总结，完整的官方API见/browser/0、总述jQuery框架提供了很多方法，但大致上可以分为3大类：获取jQuery对象的方法、在jQuery 对象间跳转的方法，以及获取jQuery对象后调用的方法其中第一步是怎样获取jQuery对象。
大致来说，是通过最核心的$()方法，将页面上的元素（或者在页面上不存在的html片段）包装成jQuery对象。
$()方法里面支持的语法又包括3大类，分别是表达式（包括类表达式.，id表达式#，元素表达式等）、符号（包括后代符号space，next符号+等）、过滤器（包括:过滤器和[]过滤器）。
通过以上3种的组合，“查询”得到想要操作的元素或者元素集合，作为$()的参数，得到jQuery 对象（或者jQuery对象的集合）第二步是在jQuery对象间的跳转。
也就是说，已经得到了一个jQuery对象，但是并不是想要的，那么可以通过一系列的跳转方法，比如parent()、next()、children()、find()等，或者过滤筛选的方法，比如eq()、filter()、not()等，来得到最终想要操作的jQuery对象。
用跳转和过滤方式得到的jQuery结果，往往通过比较复杂的表达式组合，可以达到同样的目的。
比如说$("div").eq(3)，也可以用$("div:eq(3)")达到同样的目的。
又比如说$("div").find("span")，可以用$("div span")取到同样的元素。
方法是很灵活的，要根据具体的情况来选择。
一般来说，HTML页面写得越规范，使用jQuery 就越简单还有一种情况，在得到了jQuery()对象之后，想要判断其是否满足条件，那么可以调用is()、hasClass()等方法，返回一个boolean值，进行后续的判断。
前言jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。
从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。
随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。
如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。
目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。
作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。
本文档为jQuery UI datePicker日期组件的应用基础，主要涉及datePicker组件的技术特性、datePicker组件主要的成员属性及应用示例、datePicker 组件dialog成员方法、getDate成员方法和option等成员方法的应用示例，体现datePicker 组件的技术特性的应用示例等方面的内容。
杨教授大学堂精心创作有系列化的优秀程序员职业提升必读技术资料，这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流，涉及作者对软件开发设计思想和原则、课程设计、项目实训、软件实现技术等方面的学习心得体会和应用技巧、经验总结。
本文目录1.1datePicker组件的技术特性 (3)1.1.1datePicker组件主要的成员属性及应用示例 (7)1.1.2datePicker组件dialog成员方法及应用示例 (15)1.1.3datePicker组件getDate成员方法及应用示例 (19)1.1.4datePicker组件option成员方法及应用示例 (22)1.1.5体现datePicker组件的技术特性的应用示例 (29)1.1 datePicker组件的技术特性1、在多种平台中都提供有datePicker组件由于在UI界面开发中，经常需要输入日期和时间等格式的数据，而日期和时间是有一定的格式和语言规范的要求。
jquery和jquery ui有什么区别_jquery ui是什么(1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。
(2) jQuery UI则是在jQuery的基础上，利用jQuery的扩大性，制定的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
(3) jquery和jquery ui有什么区别_jquery ui是什么，jQuery 本身注重于后台，没有美丽的界面，而jQuery UI则补充了前者的不够，他提供了华丽的展示界面，使人更容易接受。
既有强大的后台，又有华丽的前台。
jQuery UI是jQuery插件，只不过专指由jQuery官方维护的UI方向的插件。
2jquery ui是什么jQuery UI是以jQuery为基础的开源Java锝擄絻锝掞綁锝愶綌网页用户界面代码库。
包涵底层用户交互、动画、特效和可改换主题的可视控件。
我们可以直接用它来构建具有很好交互性的web应用程序。
所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。
jQuery UI包涵了许多维持状态的小部件(Widget)，因此，它与典型的 jQuery 插件使用模式略有不同。
所有的 jQuery UI 小部件(Widget)使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件(Widget) 3jquery ui有什么功能jQuery UI 主要分为3个部分：交互、微件和效果库。
交互交互部件是一些与鼠标交互相关的内容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。
微件主要是一些界面的扩大，包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,Da tePicker,Magnifier,ProgressBar,Spinner等，新版本的UI将包涵更多的微件。
37款开源jQuery表格插件我们一般使用HTML表格来显示数据，我们都知道div 更容易设计，更灵活。
但是现在你使用这些精彩的jQuery 表格插件，将更简单、灵活、更多风格。
下面介绍了37款开源jQuery表格插件。
感谢FineReport报表软件公司的整理。
jQuery网格插件jqGridjqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。
主要特点:-Full control with JavaScript API-Data returned from the server is XML-Simple configuration-Ability to load big datasets (paging)-Resizable columns-Server-side sorting-Support of links, images, checkboxes-You can add more than one grid on a sigle page (master-detail)-Paging授权协议：MIT开发语言：JavaScript操作系统：跨平台jQuery表格插件jQuery grid view pluginjqGridView是新的，富客户端的，基于XML ，Ajax网格插件的jQuery库。
jqGridView提供专业的解决方案，代表和编辑表格数据在网络上。
精心设计的，具有强大的脚本API 的，这可编辑网格是很简单的DHTML与XML 的配置，并显示出令人信服的成果与大量数据。
jqGridView可以轻松地执行好期待（管理通过的CSS ）。
jqGridView并不平台根据插件，它可用于不同的网络编程平台，如：ASP技术.NET /的ASP ，PHP中，爪哇岛，CGI脚本等jqGridView已高度鲍泽兼容性。
主要特性:* Column resizing.* Server-side sorting.* Server-side paging.* Server-side filtering.* 100% XML support.* Inline row edit.* Columns templates.支持的浏览器包括:* Opera 9.0* Firefox 1.5* Safari 3.0* IE 6.0授权协议：未知开发语言：JavaScript操作系统：跨平台jQuery表格插件Flexigrid for jQueryFlexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。
jquery弹出框插件jquery.ui.dialog⽤法分析本⽂实例讲述了jquery弹出框插件jquery.ui.dialog⽤法。
分享给⼤家供⼤家参考，具体如下：1. jquery.ui.dialog2. ⽂件引⽤要使⽤jquery.ui.dialog,需要引⽤两个⽂件，1个是js，另外1个是css在contentpage中添加：<script type="text/javascript" src="/Content/ui.js"></script>在masterpage中添加：<link href="jquery-ui.css" rel="stylesheet" type="text/css">3. 使⽤⽅法jquery.ui.dialog相⽐thinkbox要有优势，thinkbox是在$.ready中指定的，导致不能灵活的扩展弹出层的弹出时机，针对⼀个逻辑判断，⼀种情况下弹出，另外⼀种不弹出,thinkbox就缺乏应变能⼒，⽽jquery.ui.dialog()采⽤ $('..').dialog(..);的⽅式使得弹出更加灵活1)弹出简单的对话框$("#dialog").dialog();2）弹出模式对话框$("#dialog").dialog({ modal: true });3）弹出模式对话框，并有遮罩效果复制代码代码如下:$("#dialog").dialog({ modal: true, overlay: { opacity: 0.5, background: "black" } });4）带确定与取消按钮复制代码代码如下:$("#dialog").dialog({ buttons: { "Ok": function() { alert("Ok"); }, "Cancel": function() { $(this).dialog("close"); } } });5）如何关闭对话框$("#dialog").dialog("close");<!DOCTYPE html><html><head><link href="/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><script src="/ajax/libs/jquery/1.5/jquery.min.js"></script><script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script><script>$(document).ready(function() {$("#dialog").dialog();});</script></head><body style="font-size:62.5%;"><div id="dialog" title="Dialog Title">I'm in a dialog</div></body></html><!DOCTYPE html><html><head><link href="/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><script src="/ajax/libs/jquery/1.5/jquery.min.js"></script><script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script><script>$(document).ready(function() {$("#dialog").dialog();});</script></head><body style="font-size:62.5%;"><div id="dialog" title="Dialog Title">I'm in a dialog</div></body></html>jQuery boxy使⽤该jQuery插件要想使⽤该jQuery插件，需要把$(selector).boxy();放在document.ready中。
jQueryEasyUIAPI中⽂⽂档-组合树（ComboTree）ComboTree 组合树扩展⾃ $bo.defaults 和 $.fn.tree.defaults。
⽤ $botree.defaults重写了defaults。
依赖combotree⽤法1. <select id="cc" style="width:200px;"></select>1. <input id="cc" value="01">1. $('#cc').combotree({2. url:'tree_data.json'3. });特性其特性扩展⾃ combo 和 tree，下列是为 combotree重写的特性。
名称类型说明默认值editable boolean定义⽤户是否可以直接往⽂本域中输⼊⽂字。
false事件其事件扩展⾃ combo 和 tree。
⽅法其⽅法扩展⾃ combo，下列是为 combotree追加或重写的⽅法。
名称参数说明options none返回 options 对象。
tree none返回 tree 对象。
loadData data加载本地的 tree 数据。
reload url再⼀次请求远程的 tree 数据。
clear none清除组件的值。
setValues values把数组设置给组件的值。
setValue value设置组件的值。
：focusjQueryAPI1.12中文文档jQueryAPI在线手册返回值:jQuery:focus概述匹配当前获取焦点的元素。
如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。
换句话说，$(':focus')等同为$('*:focus')。
如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。
示例描述:添加一个"focused"的类名给那些有focus方法的元素css 代码:.focused {background: #abcdef;}html 代码:<div id="content"><input tabIndex="1"><input tabIndex="2"><select tabIndex="3"><option>select menu</option></select><div tabIndex="4">a div</div></div>jQuery 代码:$( "#content" ).delegate( "*", "focus blur", function( event ) { var elem = $( this );setTimeout(function() {elem.toggleClass( "focused", elem.is( ":focus" ) ); }, 0);});。
怎样在插件中设置和使用API接口哎呀，一说到在插件中设置和使用 API 接口，可能很多朋友会觉得这是个超级复杂、让人头疼的事儿。
但别担心，跟着我一起来，其实也没那么难！我先给您讲讲我自己的一段经历。
有一次，我参加一个编程比赛，其中就涉及到在插件中设置和使用API 接口。
当时，我那叫一个紧张，感觉自己就像在黑暗中摸索，完全找不到方向。
咱们先说设置这一块哈。
首先，您得找到合适的插件。
就好比您要装修房子，得先选对工具一样。
比如说，如果您是搞网页开发的，可能会用到一些常见的浏览器插件。
找到插件之后，就得搞清楚它支持哪些 API 接口啦。
这就像是您知道了工具能做啥，才能更好地发挥它的作用嘛。
有些插件会在文档里写得清清楚楚，支持哪些接口，怎么用；可有些就没那么贴心了，这时候就得靠您自己去摸索尝试。
设置的时候，可一定要细心。
比如说，您得准确填写 API 密钥，这就像是给房子开门的钥匙，错一个字符都不行。
还有一些参数的配置，比如请求的频率限制、返回的数据格式等等，都得根据实际需求来，千万别马虎。
再来说说使用 API 接口。
这就好比您拿着钥匙打开了门，得知道怎么在房间里找到您想要的东西。
您得清楚每个接口的功能和返回的数据含义。
比如说，有个接口是获取天气信息的，那它返回的数据可能包括温度、天气状况、风力等等。
使用的时候，还得注意错误处理。
万一接口返回了错误信息，您得知道怎么去解决。
就像您在房子里遇到了个小麻烦，得有应对的办法。
总之，在插件中设置和使用 API 接口，虽然有点小复杂，但只要您有耐心，仔细琢磨，多尝试，肯定能搞定。
就像我那次比赛，一开始也是手忙脚乱，但后来静下心来，一点点弄清楚，最终还是顺利完成了任务。
相信您也一定行！。
jquery的api以及⽤法总结-数据操作事件数据1. .data()在匹配元素上存储任意相关数据或返回匹配的元素集合中的第⼀个元素的给定名称的数据存储的值.data(obj) ⼀个⽤于更新数据的键/值对.data()⽅法允许我们再dom元素上绑定任意类型的数据，避免了循环引⽤的内存的泄露风险从div元素存储然后找回⼀个值此例中可以将#log内存储的数据分别提取到span中<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test', {first: 16,last: 'jianmei',});//将test的first内容添加到#log上$('span:first').text($('#log').data('test').first);$('span:last').text($('#log').data('test').last);2. .removeData()在元素上移除绑定的数据.removeData([name]),要移除的存储数据名.removeData([list]),⼀个数组或者空间分隔的字符串命名要删除的数据块<div id="log">the value is<span></span>and<span></span></div>$('#log').data('test1', {first: 16,});$('#log').data('test2', {last: 'jianmei',});$('span:first').text($('#log').data('test1').first);//移除绑定在#log上的test1数据$('#log').removeData('test2');$('span:last').text($('#log').data('test2').last);操作拷贝.clone 创建⼀个匹配的元素集合的深度拷贝副本.clone()⽅法深度复制所有匹配的元素集合，包括所有匹配元素，元素的下级元素，⽂字节点当和插⼊⽅法联合使⽤的时候，.clone()对于复制页⾯上的元素很⽅便__注意__:当使⽤clone的时候，在将它插⼊到⽂档之前，我们可以修改克隆后的元素或者元素内容复制所有的b元素然后将他们插⼊到所有的段落中<b>hello</b><p>have a good day</p>// prependTo是将元素插⼊到前⾯// $('b').clone().prependTo('p');// appendTo是将元素插⼊到后⾯,就是添加的意思$('b').clone().appendTo('p');DOM插⼊、包裹1. .wrap()在集合中匹配的每⼀个元素周围包裹⼀个html结构在所有的p外⾯包裹⼀层div，此例中会有两个div<p>have a good day</p><p>have a nice day</p>//在p外⾯包裹⼀个class为demo的div$('p').wrap("<div class = 'demo'></div>")2. wrapAll()在集合中所有匹配元素的外⾯包裹⼀个html元素，此例中只有⼀个包裹在两个p元素怒外⾯的div，div的数量只有⼀个 <p>have a good day</p><p>have a nice day</p>// 与wrap不同的是wrap是在匹配符合的每⼀个元素外⾯都要加⼀个div// ⽽wrapAll只在所有匹配的元素外⾯加⼀层div$('p').wrapAll("<div class = 'demo'></div>")3. wrapInner()在匹配元素⾥的内容外包⼀层结构选择所有的段落，包裹每⼀个匹配元素的内容注意:wrap和wrapInner都是包裹每⼀个匹配的元素但是不同的是wrap是在选择的每⼀个元素外包裹⼀层，但是wrapInner是在选择的每个元素的内容外包裹⼀层<p>have a good day</p><p>have a nice day</p>//包裹的是内容have a good day$('p').wrapInner("<div class = 'demo'></div>")DOM插⼊，内部插⼊1. append()在每个匹配元素⾥⾯的末尾处插⼊参数内容// 在div内插⼊p$('div').append($('b'));2. appendTo()将匹配的元素插⼊到⽬标元素的最后⾯<b>hello</b><div class="demo"></div>// 将p插⼊到div内$('b').appendTo($('.demo'));3. html()获取集合中第⼀个匹配元素的html内容或者设置每⼀个匹配元素的html内容<div class="demo">123</div><div class="demo">123</div><div class="demo">123</div>// 如果添加的是空的字符串,则代表清空div内的内容// $('.demo').html('');// 向div内添加内容$('.demo').html('jianmei');4.prepend()将参数内容插⼊到每个匹配元素的前⾯（元素内部）<b>hello</b><div class="demo">123</div>// 在div内插⼊b// b元素的内容会放在原本div内容的前⾯,跟append是相反的$('.demo').prepend($('b'));5. prependTo()将所有元素插⼊到⽬标前⾯（元素内）<b>hello</b><div class="demo">123</div>// 将b插⼊到div内$('b').prependTo($('.demo'));6. text()得到匹配元素集合中每个元素的⽂本内容，包括他们的后代，或者设置匹配元素集合中每⼀个元素的⽂本内容为指定的⽂本内容 <p>have a good day</p><p>have a nice day</p>// 在段落p中添加⽂本$('p').text('jianmeinew text');DOM插⼊、外部插⼊1、after()在匹配元素集合中的每个元素后⾯插⼊参数所指定的内容，作为其兄弟节点<div class="demo">123</div><div class="demo">123</div>// 在demo类之后插⼊p标签// $('.demo').after('<p>jianmei</p>')// 在demo类后插⼊所有的p$('.demo').after($('p'));2、 before和after的理论是⼀样的，根据参数的设定，在匹配的元素前⾯插⼊内容，外部插⼊// 在demo类之前插⼊p标签$('.demo').before('<p>jianmei</p>')3、 insertAfter和after是⼀样的功能，主要是插⼊内容和⽬标的位置不同，//将p插⼊到demo类之后$('p').insertAfter('.demo');4、同理可知insertBefore的原理// 将p插⼊demo类之前$('p').insertBefore('.demo');DOM移除1、 detach(),从DOM中去掉所有匹配的元素detach和remove⽅法⼀样，除了deach保存所有jquery数据和被移⾛的元素相关联当需要移⾛⼀个数据，不久⼜将该元素插⼊DOM时，常⽤此⽅法。
jquery formbuilder用法一、前言jQuery Formbuilder是一款功能强大的表单生成器插件，它能够帮助开发者快速构建各种类型的表单，支持多种表单控件和验证方式。
本文将详细介绍jQuery Formbuilder的用法，包括其基本概念、使用方法、常见用法和注意事项。
二、基本概念jQuery Formbuilder是一个基于jQuery的插件，它提供了一系列表单构建工具和API，帮助开发者创建、管理和提交表单。
Formbuilder允许开发者自定义表单的外观和功能，支持各种表单控件和验证方式，如文本框、下拉框、单选框、复选框、文件上传等。
此外，Formbuilder还提供了丰富的表单数据处理和发送功能，方便开发者进行数据收集和发送。
三、使用方法1. 引入插件：在使用jQuery Formbuilder之前，需要将其引入到网页中。
可以通过下载插件文件或使用CDN链接来引入。
2. 创建表单：使用Formbuilder的API创建表单。
可以通过调用相关方法来添加各种表单控件和验证方式。
3. 添加控件：可以使用Formbuilder提供的各种控件类，如text、select、checkbox、radio等，来添加各种类型的表单控件。
还可以使用自定义控件类来创建自定义的表单控件。
4. 添加验证：可以使用Formbuilder提供的验证方法，如required、minlength、email等，来添加各种类型的表单验证。
还可以使用自定义验证方法来创建自定义的表单验证。
5. 处理表单数据：可以使用Formbuilder提供的数据处理方法，如submitForm、validateForm等，来提交表单数据和处理验证结果。
四、常见用法1. 动态生成表单：可以使用Formbuilder的API动态生成表单，根据不同的条件和数据生成不同的表单控件和验证方式。
2. 表单分组：可以将多个表单控件分组，以便于管理和提交数据。
前端开发常用插件教程第一章：jQuery插件1.1 基础概念jQuery是一个快速、简洁的JavaScript库，广泛应用于前端开发中。
使用jQuery插件可以为网页添加丰富的交互效果和功能。
1.2 常用插件介绍1.2.1 jQuery UIjQuery UI是一个基于jQuery的用户界面库，包含了丰富的UI 组件，如对话框、日期选择器、进度条等。
可以通过简单的API 调用实现各种功能，提高用户体验。
1.2.2 Slick CarouselSlick Carousel是一款功能强大的轮播插件，适用于创建各种类型的轮播效果。
可以自定义轮播项的数量、自动播放、响应式布局等。
1.2.3 jQuery ValidationjQuery Validation是一款表单验证插件，通过为表单元素添加规则和提示信息，可以方便地进行表单验证。
支持包括必填、邮箱、手机、密码等多种验证规则，提高表单的数据准确性。
1.3 使用示例1.3.1 引入插件库在HTML文件中，使用script标签引入jQuery库和相应的插件库。
1.3.2 初始化插件通过JavaScript代码初始化插件，指定相应的参数和选项，实现所需的功能。
1.3.3 调用插件方法通过JavaScript代码调用插件提供的方法，实现一些交互操作，如动态添加、删除元素等。
第二章：Vue插件2.1 基础概念Vue是一款流行的JavaScript框架，用于构建用户界面。
Vue插件可以扩展Vue的功能，提供更多的特性和组件。
2.2 常用插件介绍2.2.1 Vue RouterVue Router是一款用于构建单页面应用的插件，通过定义路由映射，实现页面的切换和导航。
提供了丰富的路由选项和路由导航方法，方便管理页面状态。
2.2.2 VuexVuex是一款用于Vue应用的状态管理插件，用于解决组件之间共享状态的问题。
通过定义全局的状态、提交状态变更的行为和监听状态的变化，可以实现数据的一致和响应式更新。
jQuery EasyUI中文帮助手册目录jQuery EasyUI中文帮助手册 (1)API版本：1.2.4 ........................................................... 错误！未定义书签。
1. 基本 (4)1.1 语法解析 (4)语法解析 (4)1.2 简单载入器 (4)简单载入器 (4)1.3 一般拖动 (6)可拖动 (6)1.4 拖动至容器 (7)拖动至容器 (7)1.5 缩放 (8)缩放 (8)1.6 分页 (9)分页 (9)1.7 搜索框 (11)搜索框 (11)1.8 进度条 (13)进度条 (13)2. 布局管理器 (14)2.1 控制面板 (14)2.2 选项卡 (20)选项卡切换 (20)2.3 可伸缩面板 (24)可伸缩面板 (24)2.4 布局面板 (27)布局面板 (27)3. 菜单和按钮 (30)3.1 菜单 (30)菜单 (30)3.2 链接按钮 (33)链接按钮 (33)3.3 菜单按钮 (34)菜单按钮 (34)3.4 分隔按钮 (35)分隔按钮 (35)4. 表单 (36)4.1 表单 (36)表单 (36)4.2 表单验证 (38)表单验证 (38)4.3 自定义组合框 (40)自定义组合框 (40)4.4 可装载组合框 (42)可装载组合框 (42)4.5 组合树 (45)组合树 (45)4.6 组合表格 (46)组合表格 (46)4.7 数字验证框 (48)数字验证框 (48)4.8 日期组合框 (49)日期组合框 (49)4.9 日期时间组合框 (51)日期时间组合框 (51)4.10 日历 (53)日历 (53)4.11 调节器 (54)调节器 (54)4.12 数字调节器 (56)数字调节器 (56)4.13 时间调节器 (57)时间调节器 (57)5. 窗口 (58)5.1 窗口 (58)窗口 (58)5.2 对话窗口 (60)对话窗口 (60)5.3 消息窗口 (61)消息窗口 (61)6. 数据表格和树形菜单 (63)6.1 数据表格 (63)数据表格 (63)6.2 属性表格 (73)属性表格 (73)6.3 树形菜单 (74)树形菜单 (74)6.4 树形表格 (80)树形表格 (80)1.基本1.1语法解析语法解析使用方法属性事件方法1.2简单载入器简单载入器使用方法属性名称 类型描述默认值modules （模块） object （对象） 预定义模块。
Jquery ui widget开发Jquery ui 提供了一些基本的widget，但是他提供了很好的机制来创建widget。
下面就简单的介绍下jquery ui 的开发指引Jquery的官方文档中对此写的很清晰。
一般来说，jquery ui都是继承自jquery.ui.widget.js这个文件的。
这个文件提供了一个工厂方法来创建widget对象。
其方法是$.widget(String name, Options prototype).下面简单介绍下这个类提供的方法和属性。
在创建widget的时候将重写这些。
destroy()：将widget实例从dom对象上移除，在开发widget的时候一般此方法是必须的。
就是移除你自己在dom element上添加的样式和行为以及dom结构options：在这里面保存的是widget的配置信息，在创建widget的时候需要设置一些配置参数。
element：就是widget作用的dom对象。
enable()和disable()这两个方法就是禁用和启用widget的。
其实是修改options.disabled。
还有两个私有方法是创建widget的时候要重写的。
_create() 这个方法就是创建widget的方法，在页面调用widget的时候，就会执行此方法，来构建widget。
Widget的绝大大多数行为和结构都是在这里创建的。
_init() 这个方法大多数时候不会被重写，这个方法在构建widget的时候在_create 后执行。
从相关的文档上查询到：_create()方法在widget构建的时候执行，而_init()方法在构建和重新初始化的时候执行。
而destroy方法则是在移除widget的时候被执行。
在widget中，所有的私有方法都将加以"_"前缀_setOption():此方法提供了options的属性的设置，一般情况下如果options里面的参数不需要特殊处理（校验，类型转换，以及设置属性的时候触发某一操作等）的时候不需要对此方法进行重写事件如果有自定义的事件，可以采用widget为我们封装好的方法来处理_trigger()这个方法来处理，其调用方法this._trigger(type, event, data)，第一个参数为时间类型，第二个参数为事件event对象，第三个参数为事件要传递的参数。
AJAX应用Ajax函数$("XXX").load(url [, data][, callback]);// 用于加载HTML代码，并将其插入到XXX DOM文档中// data为参数，为字符串或映射（键值对）例如：key1=value1&key2=value2 // 若参数data为字符串或无，则发送的请求类型为get，否则为post// callback为回调函数，callback可以接受三个参数，例如：// function (responseText, textStatus, XMLHttpRequest){ // responseText为响应文本// textStatus为响应状态文本}$.getJSON(url [, data][, callback(data, textStatus)]);// 用于加载JSON数据// callback为回调函数：// function (data, textStatus){// data为服务器返回的数据// textStatus为响应状态文本}$.getScript(url [, callback(data, textStatus)]);// 用于动态加载JavaScript脚本文件// function (data, textStatus){// data为服务器响应的数据，即JavaScript文件包含的源代码}$.get(url [, data][, callback][, dataType]);// 用于加载更多类型的数据// dataType为字符串，用于指定服务器返回的数据类型// 可选值有：“xml”、“html”、“script”、“json”、“jsonp”、“text”// callback为回调函数：// function (data, textStatus, XMLHttpRequest){// data为服务器返回的数据}$.post(url [, data][, callback][, dataType]);// 参数用法同$.get();// 使用post请求永远都不会缓存$.ajax(settings);// 使用ajax请求访问服务器// settings为json类型的对象，用于设置参数的属性，例如：{url:"test.html"} // settings的选项：// async：指定是否以异步请求方式发送；默认为true// cache：指定是否进行缓存；默认为true，当dataType为script或jsonp时，则默认为false；// contentType：发送的数据类型；默认为application/x-www-form-urlencoded若传入的为内容类型，则它将始终被发送到服务器。
// data：发送到服务器的参数；必须为键值对或序列化的字符串。
// dataType：请求的数据类型的字符串表示形式；可选值有：xml、html、script、json、jsonp、text// username：指定用于响应HTTP访问认证的用户名// password：指定用于响应HTTP访问认证的密码// timeout：指定请求超时时间// type：指定请求的类型；可以为post、get等// url：指定请求的服务器地址// beforeSend(XMLHttpRequest)：用于设置请求之前的回调函数，并传入XMLHttpRequest作参数// error(XMLHttpRequest, textStatus, errorThrown)：用于设置请求失败的回调函数，并传入XMLHttpRequest、一个表示错误类型的字符串和异常对话作为参数// success(data, textStatus, XMLHttpRequest)：用于设置请求成功时的回调函数，并传入返回的数据、一个包含成功代码的字符串和XMLHttpRequest作为参数// complete(XMLHttpRequest, textStatus)：用于设置请求完成时的回调函数（无论成功还是失败）传入XMLHttpRequest对象和一个包含成功或失败代码的字符串数据处理$("XXX").serialize();// 将DOM元素的数据，序列化成标准的URL编码方式的字符串数据// 一般选择的元素为<form>标签$("XXX").serializeArray();// 将DOM元素的数据，序列化成JSON类型的数组$.param(object [, traditional]);// 将指定数据序列化成标准的URL编码方式的字符串数据// object为要进行序列化的对象或数组// traditional为Boolean类型，表示是否执行传统的“浅”序列化jQuery UI界面主题库若需要更多的主题包，可以下载主题包jquery-ui-themes-1.8.1.zip，解压后其中的每一个文件夹代表一个主题。
Draggable拖动组件需要导入以下ui文件：jquery.ui.core.jsjquery.ui.widget.jsjquery.ui.mouse.jsjquery.ui.draggable.js属性方法$(selector).draggable("disable"); // 禁止其拖动功能$(selector).draggable("enable"); // 激活其拖动功能$(selector).draggable("destory"); // 完全删除拖动功能$(selector).draggable("option", name[, value]); // 获取/设置属性值事件1、start事件：类型：dragstart，当开始拖动时触发2、drag事件：类型：drag，当拖动过程中移动鼠标时触发3、stop事件：类型：dragstop，当停止拖动时触发事件绑定：$(select).draggable(eventName:function(event, ui){1、event：表示事件对象2、ui：表示拖动元素对象，具有如下属性：a)helper：jQuery对象，表示辅助元素b)position：包含top属性和left属性的对象，表示辅助元素相对于起始位置点的位置c)offset：包含top属性和left属性的对象，表示辅助元素相对于页面的绝对位置});Droppable投放组件jquery.ui.core.jsjquery.ui.widget.jsjquery.ui.mouse.jsjquery.ui.draggable.jsjquery.ui.droppable.js属性$(selector).droppable("disable"); // 禁止投放功能$(selector).droppable("enable"); // 激活投放功能$(selector).droppable("destroy"); // 完全删除投放功能$(selector).droppable("option", name[, value]); // 获取/设置属性值事件1、activate事件：类型：dropactivate，当可接受对象开始拖动时触发2、deactivate事件：类型：dropdeactivate，当可接受对象停止拖动时触发3、over事件：类型：dropover，当可接受对象位于目标对象上方时触发4、out事件：类型：dropout，当可接受对象移出目标对象时触发5、drop事件：类型：drop，当可接受对象投放到目标对象时触发事件绑定：$(selector).droppable(eventName:function(event, ui){1、event：事件对象2、ui：包含附加信息的ui对象，具有以下属性：a)draggable：表示当前可拖动元素b)helper：表示当前可拖动元素的辅助元素c)position：一个包含top属性和left属性的对象，表示辅助元素相对于起始点的位置d)offset：一个包含top属性和left属性的对象，表示辅助元素相对于页面的绝对位置});Resizable缩放组件需要添加样式表：ui.all.cssjquery.ui.core.jsjquery.ui.widget.jsjquery.ui.mouse.jsjquery.ui.resizable.js方法$(selector).resizable("disable"); // 禁用缩放功能$(selector).resizable("enable"); // 激活缩放功能$(selector).resizable("destroy") // 完全删除缩放功能$(selector).resizable("option", name[, value]); // 获取/设置属性1、start事件：类型：resizestart，当开始缩放操作时触发2、resize事件：类型：resize，当通过缩放手柄操作时触发3、stop事件：类型：resizestop，当停止缩放操作时触发事件绑定：$(selector).resizable({eventName:function(event, ui){1、event:事件对象2、ui:包含附加信息的ui对象，有以下属性：a)helper:一个包含helper元素的对象b)originalPosition:一个包含top属性和left属性的对象，表示缩放前的位置c)position:一个包含top属性和left属性的对象，表示当前位置d)size:一个包含width属性和height属性的对象，表示当前大小}});Selectable选择组件jquery.ui.core.jsjquery.ui.widget.jsjquery.ui.mouse.jsjquery.ui.selectable.js然后利用$(selector).selectable([option])函数，将目标元素（如<ol>）包装成jQuery对象。
通过按<Ctrl>可以点击选择多项CSS样式.ui-selecting类：选择某个项目时添加该类.ui-selected类：选定了某个项目时添加该类.ui-selectee类：可选择的元素添加该类属性方法可选对象，也包含disable、enable、option、destroy方法。
