-
表单插件——form 通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下： $(form). ajaxForm ({options}) 其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。 <script type="text/javascript"> $(function () { var options = { url: "http://www.imooc.com/data/form_f.php", target: ".tip" } $("frmV").ajaxForm(options); }); </script>查看全部
-
放置插件--droppable 除使用draggable插件拖拽任意元素外，还可以调用droppable UI插件将拖拽后的任意元素放置在指定区域中，类似购物车效果，调用格式如下： $(selector).droppable({options}) selector参数为接受拖拽元素，options为方法的配置对象，在对象中，drop函数表示当被接受的拖拽元素完全进入接收元素的容器时，触发该函数的调用。查看全部
-
表单验证插件——validate 该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下： $(form).validate({options}) 其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。 <script type="text/javascript"> $(function () { $("#frmV").validate( { /*自定义验证规则*/ rules: { email:{ required:true, email:true } }, /*错误提示位置*/ errorPlacement: function (error, element) { error.appendTo(".tip"); } } ); }); </script>查看全部
-
拖拽插件--draggable 拖拽插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖拽元素的效果，调用格式如下： $(selector).draggable({options}) options参数为方法调用的时候配置对象，根据该对象可以设置各种拖拽效果，如："containment"属性指定拖拽区域，"axis"属性设置拖拽时的坐标方向。查看全部
-
使用ajaxStart()和ajaxStop()方法 ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为： $(selector).ajaxStart(function())和$(selector).ajaxStop(function()) 其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。 （一） $(document).ajaxStart(function(){ $('#divload').html("正在请求数据..."); }); $(document).ajaxStop(function(){ $('#divload').html("数据请求完成！"); }); （二） $('#divload').ajaxStart(function(){ $(this).html("正在请求数据..."); }); $('#divload').ajaxStop(function(){ $(this).html("数据请求完成！"); });查看全部
-
自定义类级别插件--twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为： $.addNum(p1,p2)和$.subNum(p1,p2) 上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。查看全部
-
$("#btnShow_1").bind("click", function () { $.ajax({ data: { num: $("#txtNumber").val() }, url: "http://www.imooc.com/data/check.php" }); }) $("#btnShow_2").bind("click", function () { $.ajax({ data: { num: $("#txtNumber").val() }, url: "http://www.imooc.com/data/check_f.php" }); })查看全部
-
使用ajaxSetup()方法设置全局Ajax默认选项 使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为： jQuery.ajaxSetup([options])或$.ajaxSetup([options]) 可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。 $(function () { $.ajaxSetup({ dataType:"text", success:function(data){ $("ul").append("<li>你输入的<b> " + $("#txtNumber").val() + " </b>是<b> " + data + " </b></li>"); } }); });查看全部
-
使用serialize()方法序列化表单元素值 使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下： $(selector).serialize() 其中selector参数是一个或多个表单中的元素或表单元素本身。 <script type="text/javascript"> $(function () { $("#btnAction").bind("click", function () { if($(':checkbox').is(":checked")){ $("#litest").html($("form").serialize()) } }) }) </script>查看全部
-
自定义的lifocuscolor插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中是的背景色，调用格式为： $(Id).focusColor(color) 其中，参数Id表示<ul>元素的Id号，color表示<li>元素选中时的背景色。查看全部
-
$(selector).contextMenu(menuId,{options}); selector参数为绑定插件的元素，menuId为快捷菜单元素，options为配置对象查看全部
-
使用post()方法以POST方式从服务器发送数据 与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下： $.post(url,[data],[callback]) 参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。 <script type="text/javascript"> $(function () { $("#btnCheck").bind("click", function () { $.post('http://www.imooc.com/data/check_f.php',{num:$("#txtNumber").val()}, function (data) { $("ul").append("<li>你输入的<b> " + $("#txtNumber").val() + " </b>是<b> " + data + " </b></li>"); }); }) }); </script>查看全部
-
使用get()方法以GET方式从服务器获取数据 使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下： $.get(url,[callback]) 参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。 <script type="text/javascript"> $(function () { $("#btnShow").bind("click", function () { var $this = $(this); $.get('http://www.imooc.com/data/info_f.php',function(data){ $this.attr("disabled", "true"); $("ul").append("<li>我的名字叫：" + data.name + "</li>"); $("ul").append("<li>男朋友对我说：" + data.say + "</li>"); }, "json"); }) }); </script>查看全部
-
使用getScript()方法异步加载并执行js文件 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示： jQuery.getScript(url,[callback])或$.getScript(url,[callback]) 参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。 <script type="text/javascript"> $(function () { $("#btnShow").bind("click", function () { var $this = $(this); $.getScript('http://www.imooc.com/data/sport_f.js',function(){ $this.attr("disabled","true"); }); }) }); </script>查看全部
-
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，它的调用格式为： jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]) 其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。 <script type="text/javascript"> $(function () { $("#btnShow").bind("click",function(){ var $this = $(this);$.getJSON("http://www.imooc.com/data/sport.json",function(data){$this.attr("disabled","true");$.each(data,function(index, sport){if(index==3) $("ul").append("<li>"+sport["name"] + "</li>");});});}); }) }); </script>查看全部
举报
0/150
提交
取消