-
调用toggle()方法实现动画切换效果 第一节我们学过实现元素的显示与隐藏需要使用hide()与show()，那么有没有更简便的方法来实现同样的动画效果呢？ 调用toggle()方法就可以很容易做到，即如果元素处于显示状态，调用该方法则隐藏该元素，反之，则显示该元素，它的调用格式是： $(selector).toggle(speed,[callback]) 其中speed参数为动画效果时的速度值，可以为数字，单位为毫秒，也可是“fast”、“slow”字符，可选项参数callback为方法执行成功后回调的函数名称。 <body> <h3>toggle()方法的动画切换效果</h3> <div> <h4> <span class="fl">我喜欢吃的水果</span> <span class="fr" id="spnTip">显示</span> </h4> <ul> <li>苹果</li> <li>甘桔</li> <li>梨</li> </ul> </div> <script type="text/javascript"> $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").toggle(3000,function(){ $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏"); }) }); }); </script> </body>查看全部
-
<body> <h3>show()和hide()方法动画方式显示和隐藏元素</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").show(3000,function(){ $("#hidval").val(1); }) } else { $("ul").hide(5000,function(){ $("#hidval").val(0); }) } }) }); </script> </body>查看全部
-
调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为： $(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。 <body> <h3>使用show()和hide()方法显示和隐藏元素</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").show(); $("#hidval").val(1); } else { $("ul").hide(); $("#hidval").val(0); } }); }); </script> </body>查看全部
-
案例流程分析：查看全部
-
功能介绍：查看全部
-
分析讲解：查看全部
-
实现界面：查看全部
-
mark查看全部
-
在id号为test的div元素中,异步加载一个完整页面b.html的方法是:$("#test").load("b.html");查看全部
-
使用ajaxStart()和ajaxStop()方法 ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为： $(selector).ajaxStart(function())和$(selector).ajaxStop(function()) 其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。 例如，在调用ajax()方法请求服务器数据前，使用动画显示正在加载中，当请求成功后，该动画自动隐藏，如下图所示： 在浏览器中显示的效果： 从图中可以看出，由于使用ajaxStart()和ajaxStop()方法绑定了动画元素，因此，在开始发送Ajax请求时，元素显示，请求完成时，动画元素自动隐藏。 注意：该方法在1.8.2下使用是正常的查看全部
-
$(function () { $("#btnCheck").bind("click", function () { $.ajax({ url:"http://www.imooc.com/data/check.php", data: { num: $("#txtNumber").val() }, type:"post", success: function (data) { $("ul").append("<li>你输入的<b> " + $("#txtNumber").val() + " </b>是<b> " + data + " </b></li>"); } }); }) });查看全部
-
使用ajaxSetup()方法设置全局Ajax默认选项 使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为： jQuery.ajaxSetup([options])或$.ajaxSetup([options]) 可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。 例如，先调用ajaxSetup()方法设置全局的Ajax选项值，再点击两个按钮，分别使用ajax()方法请求不同的服务器数据，并将数据内容显示在页面，如下图所示： 在浏览器中显示的效果： 从图中可以看出，使用ajaxSetup()方法设置了Ajax请求时的一些全局性的配置选项后，在两次调用ajax请求服务器txt文件时，只需要设置url地址即可。查看全部
-
使用ajax()方法加载服务器数据 使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值，它的调用格式如下： jQuery.ajax([settings])或$.ajax([settings]) 其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get。 例如，点击页面中的“加载”按钮，调用ajax()方法向服务器请求加载一个txt文件，并将返回的文件中的内容显示在页面，如下图所示： 在浏览器中显示的效果： 从图中可以看出，当点击“加载”按钮时，调用$.ajax()方法请求服务器中txt文件，当请求成功时调用success回调函数，获取传回的数据，并显示在页面中。查看全部
-
mark查看全部
-
使用serialize()方法序列化表单元素值 使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下： $(selector).serialize() 其中selector参数是一个或多个表单中的元素或表单元素本身。 例如，在表单中添加多个元素，点击“序列化”按钮后，调用serialize()方法，将表单元素序列化后的标准URL编码文本字符串显示在页面中，如下图所示： 在浏览器中显示的效果： 从图中可以看出，当点击“序列化”按钮后，调用表单元素本身的serialize()方法，将表单中元素全部序列化，生成标准URL编码，各元素间通过&号相联。查看全部
举报
0/150
提交
取消