-
使用post()方法以POST方式从服务器发送数据 与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下： $.post(url,[data],[callback]) 参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数 <body> <div id="divtest"> <div class="title"> <span class="fl">检测数字是否大于0</span> <span class="fr"><input id="btnCheck" type="button" value="检测" /></span> </div> <ul> <li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /></li> </ul> </div> <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></body>查看全部
-
使用get()方法以GET方式从服务器获取数据 使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下： $.get(url,[callback]) 参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数 <body> <div id="divtest"> <div class="title"> <span class="fl">我的个人资料</span> <span class="fr"> <input id="btnShow" type="button" value="加载" /> </span> </div> <ul></ul> </div> <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></body>查看全部
-
使用getScript()方法异步加载并执行js文件 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示： jQuery.getScript(url,[callback])或$.getScript(url,[callback]) 参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数 <body> <div id="divtest"> <div class="title"> <span class="fl">我最喜欢的运动</span> <span class="fr"> <input id="btnShow" type="button" value="加载" /> </span> </div> <ul></ul> </div> <script type="text/javascript"> $(function () { $("#btnShow").bind("click", function () { var $this = $(this); $.getScript("http://www.imooc.com/data/sport_f.js",function(data) { $this.attr("disabled", "true"); }); }) }); </script> </body>查看全部
-
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为： jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]) 其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。 <body> <div id="divtest"> <div class="title"> <span class="fl">我最喜欢的一项运动</span> <span class="fr"> <input id="btnShow" type="button" value="加载" /> </span> </div> <ul></ul> </div> <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></body>查看全部
-
使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为： load(url,[data],[callback]) 参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。 <body> <div id="divtest"> <div class="title"> <span class="fl">我最爱吃的水果</span> <span class="fr"> <input id="btnShow" type="button" value="加载" /> </span> </div> <ul></ul> </div> <script type="text/javascript"> $(function () { $("#btnShow").bind("click", function () { var $this = $(this); $("ul") .html("<img src='Images/Loading.gif' alt=''/>") .load("http://www.imooc.com/data/fruit_part.html",function(){ $this.attr("disabled", "true"); }); }) }); </script> </body>查看全部
-
几种获取元素的办法 $("element") 通过元素名获取 $("id") 通过id获取，反应慢，慎用 $(".class") 通过类名获取 $("*") *号获取所有元素 $("div *") 获取元素下的所有子元素查看全部
-
调用delay()方法延时执行动画效果 delay()方法的功能是设置一个延时值来推迟动画效果的执行，它的调用格式为： $(selector).delay(duration) 其中参数duration为延时值，它的单位是毫秒，当超过延时值时，动画继续执行。 <body> <h3>调用delay()方法延时执行动画效果</h3> <span></span> <input id="btnStop" type="button" value="延时" /> <div id="tip"></div> <script type="text/javascript"> $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=60px', width: '+=60px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); $("#btnStop").bind("click", function () { $("span").delay(3000); $("#tip").html("正在延时!"); }); }); </script> </body>查看全部
-
调用stop()方法停止当前所有动画效果 stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画，它的调用格式为： $(selector).stop([clearQueue],[goToEnd]) 其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false。 <body> <h3>调用stop()方法停止当前所有动画效果</h3> <span></span> <input id="btnStop" type="button" value="停止" /> <div id="tip"></div> <script type="text/javascript"> $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=60px', width: '+=60px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); $("#btnStop").bind("click", function () { $("span").stop(); $("#tip").html("执行停止!"); }); });</script></body>查看全部
-
调用animate()方法制作移动位置的动画 调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了 <body> <h3>制作移动位置的动画</h3> <span></span> <div id="tip"></div> <script type="text/javascript"> $(function () { $("span").animate({ left: "+=100px" }, 3000, function () { $("span").animate({ height: '+=30px', width: '+=30px' }, 3000, function () { $("#tip").html("执行完成!"); }); }); }); </script> </body> span { position:absolute; width:80px; height:80px; border: solid 1px #ccc; margin: 0px 8px; background-color: Red; color:White; vertical-align:middle }查看全部
-
调用animate()方法制作简单的动画效果 调用animate()方法可以创建自定义动画效果，它的调用格式为： $(selector).animate({params},speed,[callback]) 其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。 <body> <h3>制作简单的动画效果</h3> <span></span> <div id="tip"></div> <script type="text/javascript"> $(function () { $("span").animate({ width: "80px", height: "80px" }, 3000, function () { $("#tip").html("执行完成!"); }); }); </script> </body>查看全部
-
提示文字消失的样式不错查看全部
-
使用fadeTo()方法设置淡入淡出效果的不透明度 调用fadeTo()方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值，该方法的调用格式为： $(selector).fadeTo(speed,opacity,[callback]) 其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名。 <body> <h3>使用fadeTo()方法设置淡入淡出效果的不透明度</h3> <span class="red"></span><span class="orange"></span><span class="blue"></span> <script type="text/javascript"> $(function () { $("span").each(function (index) { switch (index) { case 0: $(this).fadeTo(3000,0.2); break; case 1: $(this).fadeTo(3000,0.6); break; case 2: $(this).fadeTo(3000,1.0); break; } }); }); </script> </body>查看全部
-
使用fadeIn()与fadeOut()方法实现淡入淡出效果 fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果，前者淡入隐藏的元素，后者可以淡出可见的元素，它们的调用格式分别为： $(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback]) 其中参数speed为淡入淡出的速度，callback参数为完成后执行的回调函数名。 <body> <h3>使用fadeIn()与fadeOut()方法实现元素淡入淡出的效果</h3> <div> <h4>我喜欢吃的水果</h4> <ul> <li>苹果</li> <li>甘桔</li> <li>梨</li> </ul> <input id="hidval" type="hidden" value="0"/> </div> <script type="text/javascript"> $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").fadeIn(3000,function() { $("#hidval").val(1); }) } else { $("ul").fadeOut(3000,function() { $("#hidval").val(0); }) } }) });</script></body>查看全部
-
使用slideToggle()方法实现图片“变脸”效果 使用slideToggle()方法可以切换slideUp()和slideDown()，即调用该方法时，如果元素已向上滑动，则元素自动向下滑动，反之，则元素自动向上滑动，格式为： $(selector).slideToggle(speed,[callback]) 其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。 <body> <h3>使用slideToggle()方法切换滑动效果</h3> <div> <h4> <span class="fl">我喜欢吃的水果</span> <span class="fr" id="spnTip">向下滑</span></h4> <ul> <li>苹果</li> <li>甘桔</li> <li>梨</li> </ul> <input id="hidval" type="hidden" value="0"/> </div> <script type="text/javascript"> $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").slideToggle(3000,function() { $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑"); }) }) }); </script> </body>查看全部
-
使用slideUp()和slideDown()方法的滑动效果 可以使用slideUp()和slideDown()方法在页面中滑动元素，前者用于向上滑动元素，后者用于向下滑动元素，它们的调用方法分别为： $(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback]) 其中speed参数为滑动时的速度，单位是毫秒，可选项参数callback为滑动成功后执行的回调函数名。 要注意的是：slideDown()仅适用于被隐藏的元素；slideup()则相反。 滑动与淡入淡出的区别：滑动改变元素的高度，淡入淡出改变元素的透明度 <body> <h3>使用slideUp()和slideDown()方法的滑动效果</h3> <div> <h4>我喜欢吃的水果</h4> <ul> <li>苹果</li> <li>甘桔</li> <li>梨</li> </ul> <input id="hidval" type="hidden" value="0"/> </div> <script type="text/javascript"> $(function () { $("h4").bind("click", function () { if ($("#hidval").val() == 0) { $("ul").slideDown(3000,function() { $("#hidval").val(1); }) } else { $("ul").slideUp(3000,function(){ $("#hidval").val(0); }) } }) }); </script> </body>查看全部
举报
0/150
提交
取消