Jquery(5)-Ajax速查与常用插件

慕课网学习地址

Part 1 ajax基础

• 使用load()方法异步请求数据 <code> load(url,[data],[callback])</code>
• 使用getJSON()方法异步加载JSON格式数据 <code> $.getJSON(url,[data],[callback])</code>
• 使用getScript()方法异步加载并执行js文件 <code>$.getScript(url,[callback])</code>
• 使用get()方法以GET方式从服务器获取数据<code>$.get(url,[callback]</code>
• 使用post()方法以POST方式从服务器发送数据<code>$.post(url,[data],[callback])</code>

$.post("http://www.imooc.com/data/check_f.php",
                    {num:$("#txtNumber").val()},    //data是json键值对格式
                    function (data) {
                       alert("Success");
                    });

• 使用serialize()方法序列化表单元素值<code>$(selector).serialize()</code>

 $("#litest").html($("form").serialize())
//结果：Text1=123&Select1=1&Checkbox1=on

• 使用ajax()方法加载服务器数据<code>$.ajax([settings])</code>
  其中参数settings为发送ajax请求时的配置对象，在该对象中，<code>url</code>表示服务器请求的路径，<code>data</code>为请求时传递的数据，<code>dataType</code>为服务器返回的数据类型，<code>success</code>为请求成功的执行的回调函数，<code>type</code>为发送数据请求的方式，默认为<code>get</code>。

           $.ajax({
                        method:"POST",
                        data: { num: $("#txtNumber").val() },
                        url:"http://www.imooc.com/data/check.php",
                        success: function (data) {
                          alert(data);
                        }
                    });

• 使用ajaxSetup()方法设置全局Ajax默认选项<code>$.ajaxSetup([options])</code>
• 使用ajaxStart()和ajaxStop()方法<code>$(selector).ajaxStart(function())</code>和<code>$(selector).ajaxStop(function())</code>
  用法：在调用ajax()方法请求服务器数据前，使用动画显示正在加载中，当请求成功后，该动画自动隐藏

Part 2 常用功能性插件(需自行引用js)

• 表单验证插件——validate <code>$(form).validate({options})</code>
• 表单插件——form <code>$(form). ajaxForm ({options})</code>
• 图片灯箱插件——lightBox <code>$(linkimage).lightBox({options})</code>
  LightBox2
  30个最佳 jQuery Lightbox 效果插件
• 图片放大镜插件——jqzoom<code>$(linkimage).jqzoom({options})</code>
• cookie插件——cookie 保存：<code>$.cookie(key，value)</code>；读取：<code>$.cookie(key)</code>，删除：<code>$.cookie(key，null)</code>
• 搜索插件——autocomplete<code>$(textbox).autocomplete(urlData,[options]);</code>
• 右键菜单插件——contextmenu<code>$(selector).contextMenu(menuId,{options});</code>
• 自定义对象级插件——lifocuscolor插件<code>$(ulid).focusColor(color)</code>
  参数ulid表示ul元素的Id号，color表示li元素选中时的背景色。

Part 3 UI型插件

• 拖曳元素插件——draggable <code>$(selector). draggable({options})</code>
• 放置插件——droppable<code>$(selector).droppable({options})</code>
• 拖曳排序插件——sortable<code>$(selector).sortable({options})</code>
  拖曳排序插件的功能是将序列元素（例如option、li）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能
• 面板折叠插件（手风琴）——accordion<code>$(selector).accordion({options})</code>
  面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容
• 选项卡插件——tabs<code>$(selector).tabs({options}) </code>
  使用选项卡插件可以将ul中的li选项定义为选项标题，在标题中，再使用a元素的“href”属性设置选项标题对应的内容
• 对话框插件——dialog<code>$(selector).dialog({options})</code>
• 菜单工具插件——menu<code>$(selector).menu({options})</code>
  selector参数为菜单列表中最外层ul元素
• 工具提示插件——tooltip<code>$(selector).tooltip({options})</code>

Part 4 jQuery 工具类函数

• 检测对象是否为空<code>$.isEmptyObject(obj)</code>返回true/false
• 检测对象是否为原始对象<code>$.isPlainObject (obj)</code>
• 删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格<code>$.trim (str)</code>
• 使用$.extend()扩展工具函数<code>$. extend ({options})</code>