1.操纵界面 find 选择器,获取form表单中值
var age = theForm.find('select[name=age] option:selected'),
sex = theForm.find('select[name=sex] option:selected'),
addr = theForm.find('input[name=addr]'),
name = theForm.find('input[name=name]');
2.jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器
使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2…)后提交。serialize() 方法使用标准的 URL-encoded 编码表示文本字符串。下面是使用serialize()序列化表单的实例: url-encoded,不是json数据类型?
jQuery ajax原型:
| 1 | $.ajax({ |
| 2 | type: "POST", |
| 3 | url: ajaxCallUrl, |
| 4 | data: "Key=Value&Key2=Value2", |
| 5 | success: function(msg){alert(msg);} |
| 6 | }); |
ajax serialize():
| 1 | $.ajax({ |
| 2 | type: "POST", |
| 3 | url:ajaxCallUrl, |
| 4 | data:$('#formID').serialize(),// 要提交的表单 |
| 5 | success: function(msg) {alert(msg);} |
| 6 | }); |
serialize()序列化表单实例:
| 01 | <script type="text/javascript" src="/demo/jquview source ery/jquery-1.7.2.min.js" |
| 02 | ></script> |
| 03 | <script type="text/javascript"> |
| 04 | $(document).ready(function(){ |
| 05 | $("#button").click(function(){ |
| 06 | alert($("#myForm").serialize()); |
| 07 | }); |
| 08 | }); |
| 09 | </script> |
| 10 | <form id="myForm"> |
| 11 | 姓名 <input value="liming" name="Name" /><br /> |
| 12 | 职位 <input value="CEO" name="position" /><br /> |
| 13 | <input id="button" value="序列化表单" type="button" /> |
| 14 | </form> |
3.jquery中closest()和prev()方法
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上
| .closest() | .parents() |
| 从当前元素开始 | 从父元素开始 |
| 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 | 沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。 |
| 返回包含零个或一个元素的 jQuery 对象 | 返回包含零个、一个或多个元素的 jQuery 对象 |
检索每个段落,找到类名为 "selected" 的前一个同胞元素:
$("p").prev(".selected")
4.jQuery中this与$(this)的区别
- alert("this取值:"+this.value+"--"+this);//this是js中返回html对象,所以要这样用。
- alert("$(this)取值:"+$(this).val()+"--"+$(this));//$(this)返回封装后的jquery对象,所以要用jquery的方法。
- $("#textbox").hover(
- function() {
- this.title = "Test";
- },
- fucntion() {
- this.title = "OK”;
- }
- );
这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了,Error--报了。this与$(this)的区别在此。
- Error Code:
- $("#textbox").hover(
- function() {
- $(this).title = "Test";
- },
- function() {
- $(this).title = "OK";
- }
- );
这里的$(this)是一个JQuery对象,而jQuery对象沒有title 属性,因此这样写是错误的。
JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样:
正确的代码:
- $("#textbox").hover(
- function() {
- $(this).attr(’title’, ‘Test’);
- },
- function() {
- $(this).attr(’title’, ‘OK’);
- }
- );
使用jQuery的好处是它包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。
本文介绍jQuery中表单数据的获取与提交方法,包括使用find选择器获取表单元素值、通过serialize()方法序列化表单数据及ajax提交方式。同时探讨了closest()与prev()方法的应用场景及this与$(this)的区别。

被折叠的 条评论
为什么被折叠?



