-
使用post()方法以POST方式从服务器发送数据 与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下： $.post(url,[data],[callback]) 参数url为服务器请求地址，可选项data为向服务器请求时发送的数据，可选项callback参数为请求成功后执行的回调函数。 例如，在输入框中录入一个数字，点击“检测”按钮，调用post()方法向服务器以POST方式发送请求，检测输入值的奇偶性，并显示在页面中，如下图所示： 在浏览器中显示的效果： 从图中可以看出，当点击“检测”按钮时，获取输入框中的值，并将该值使用$.post()方法一起发送给服务器，服务器接收该值后并进行处理，最后返回处理结果。查看全部
-
使用get()方法以GET方式从服务器获取数据 使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下： $.get(url,[callback]) 参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。 例如，当点击“加载”按钮时，调用get()方法向服务器中的一个.php文件以GET方式请求数据，并将返回的数据内容显示在页面中，如下图所示： 在浏览器中显示的效果： 从图中可以看出，通过$.get()方法向服务器成功请求数据后，在回调函数中通过data参数传回请求的数据，并以data.name格式访问数据中各项的内容。查看全部
-
使用getScript()方法异步加载并执行js文件 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示： jQuery.getScript(url,[callback])或$.getScript(url,[callback]) 参数url为服务器请求地址，可选项callback参数为请求成功后执行的回调函数。 例如，点击“加载”按钮，调用getScript()加载并执行服务器中指定名称的JavaScript格式的文件，并在页面中显示加载后的数据内容，如下图所示： 在浏览器中显示的效果： 从图中可以看出，当点击“加载”按钮调用getScript()方法加载服务器中的JavaScript格式文件后，自动执行文件代码，将数据内容显示在<ul>元素中。查看全部
-
使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中，它的调用格式为： jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]) 其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。 例如，点击页面中的“加载”按钮，调用getJSON()方法获取服务器中JSON格式文件中的数据，并遍历数据，将指定的字段名内容显示在页面中。如下图所示： 在浏览器中显示的效果： 从图中可以看出，当点击“加载”按钮时，通过getJSON()方法调用服务器中的sport.json文件，获取返回的data文件数据，并遍历该数据对象，以data[“name”]取出数据中指定的内容，显示在页面中。查看全部
-
使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为： load(url,[data],[callback]) 参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。 例如，点击“加载”按钮时，向服务器请求加载一个指定页面的内容，加载成功后，将数据内容显示在<div>元素中，并将加载按钮变为不可用。如下图所示： 在浏览器中显示的效果： 从图中可以看出，当点击“加载”按钮时，通过调用load()方法向服务器请求加载fruit.html文件中的内容，当加载成功后，先显示数据，并将按钮变为不可用。查看全部
-
post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面，调用格式如下： $.post(url,[data],[callback]) $.post("../data/check_f.php",{num: $("#txtNumber").val()}, function (data) { $("ul").append("<li>你输入的<b> " + $("#txtNumber").val() + " </b>是<b> " + data + " </b></li>"); });查看全部
-
调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。查看全部
-
调用live()方法绑定元素的事件 与bind()方法相同，live()方法与可以绑定元素的可执行事件，除此相同功能之外，live()方法还可以绑定动态元素，即使用代码添加的元素事件，格式如下： $(selector).live(event,[data],fun) 参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。 虽然按钮元素是在事件绑定声明之后，并且是通过追加的方式添加至页面的，但由于使用的是live()方法绑定元素的事件，因此，仍然生效。 注意：从 jQuery 1.7 开始，不再建议使用 .live() 方法。1.9不支持.live()，本节代码编辑器里的js引用版本改为了1.8 <body> <h3>live()方法绑多个事件</h3> <script type="text/javascript"> $(function () { $("#btntest").live("click mouseout", function () { $(this).attr("disabled", "true"); }) $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />"); }); </script> </body>查看全部
-
slideDown()仅适用于被隐藏的元素；slideup()则相反。查看全部
-
下拉列表框的change事件 当一个元素的值发生变化时，将会触发change事件，例如在选择下拉列表框中的选项时，就会触change事件。 <body> <h3>下拉列表的change事件</h3> <select id="seltest"> <option value="葡萄">葡萄</option> <option value="苹果">苹果</option> <option value="荔枝">荔枝</option> <option value="香焦">香焦</option> </select> <script type="text/javascript"> $(function () { $("select").bind("change", function () { if ($(this).val() == "苹果") $(this).css("background-color", "red"); else $(this).css("background-color", "green"); }) }); </script> </body>查看全部
-
文本框的focus和blur事件 focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件。 <body> <h3>表单中文本框的focus和blur事件</h3> <input id="txtest" type="text" value="" /> <div></div> <script type="text/javascript"> $(function () { $("input") .bind("focus", function () { $("div").html("请输入您的姓名！"); }) $("input").bind("blur", function () { if ($(this).val().length == 0) $("div").html("你的名称不能为空！"); }) }); </script> </body>查看全部
-
调用trigger()方法手动触发指定的事件 trigger()方法可以直接手动触发元素指定的事件，这些事件可以是元素自带事件，也可以是自定义的事件，总之，该事件必须能执行，它的调用格式为： $(selector).trigger(event) 其中event参数为需要手动触发的事件名称。 <body> <h3>trigger()手动触发事件</h3> <div>土豪，咱们交个朋友吧</div> <script type="text/javascript"> $(function () { $("div").bind("change-color", function () { $(this).addClass("color"); }); $("div").trigger("change-color"); }); </script> </body>查看全部
-
使用one()方法绑定元素的一次性事件 one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次，它的调用格式如下： $(selector).one(event,[data],fun) 参数event为事件名称，data为触发事件时携带的数据，fun为触发该事件时执行的函数。 <body> <h3>one()方法执行一次绑定事件</h3> <div>请点击我一下</div> <script type="text/javascript"> $(function () { var intI = 0; $("div").one("click", function () { intI++; $(this).css("font-size", intI + "px"); }) }); </script> </body>查看全部
-
调用show()和hide()方法仅是实现的元素的显示和隐藏功能，如果在这些方法中增加“speed”参数可以实现动画效果的显示与隐藏，同时，如果添加了方法的回调函数，它将在显示或隐藏执行成功后被调用。查看全部
-
使用unbind()方法移除元素绑定的事件 unbind()方法可以移除元素已绑定的事件，它的调用格式如下： $(selector).unbind(event,fun) 其中参数event表示需要移除的事件名称，多个事件名用空格隔开，fun参数为事件执行时调用的函数名称。 <body> <h3>unbind()移除绑定的事件</h3> <input id="btntest" type="button" value="移除事件" /> <div>土豪，咱们交个朋友吧</div> <script type="text/javascript"> $(function () { $("div").bind("click", function () { $(this).removeClass("backcolor").addClass("color"); }).bind("dblclick", function () { $(this).removeClass("color").addClass("backcolor"); }) $("#btntest").bind("click", function () { $(this).unbind(); $(this).attr("disabled", "true"); }); }); </script> </body>查看全部
举报
0/150
提交
取消