jQuery中的常用内容总结(三)
jQuery中的常用内容总结(三)
转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html
内容提要
A>表单参数序列化提交
如果没有借助jQuery,表单可以直接提交,这样带来两个问题就是安全(get提交)或表单参数验证障碍,嗯~,可能很难懂,这样吧,我先放张图,这图是原生get提交的->
这下清楚了吧,所有的参数都在浏览器里面显示,稍稍别有用心的人就能轻易利用,这是其一;
如果是post提交,可能没有以上这个问题,但是。。。,如果参数值提交前需要在js中做处理(表单参数验证或参数拼接等等),这样直接把数据扔给后台的童鞋,肯定不太好~
额,还可以借助前两章中的方法。。。可能会累死啊~,毕竟每一个表单都要单独取值。。。总之,这样麻烦;哈哈~ヽ(●´ω`●)ノ,既然麻烦,jQuery给我们提供了两个好用的方法serializeArray()和serialize()
前者可以将表单的参数值序列化成一个Array的形式(用于post提交),后者会将表单参数值序列化成键值字符串的形式(用于get提交),二话不说,先放出源码以及效果图-->
<form style="padding-left: 100px;" id="forms">
姓名:<input type="text" name="name"/><br/>
班级:<select name="class">
<option value="1">一班</option>
<option value="2">二班</option>
<option value="3">三班</option>
</select>
<br/>
性别:男<input type="radio" name="sex" value="male"/>
女<input type="radio" name="sex" value="female"/>
<br/>
课程:<label><input name="course" type="checkbox" value="1" />语文 </label>
<label><input name="course" type="checkbox" value="2" />数学</label>
<label><input name="course" type="checkbox" value="3" />历史</label>
<label><input name="course" type="checkbox" value="4" />化学</label>
<br/>
<button type="submit">submit</button>
<button type="button" onclick="submitForm(1)">提交1</button>
<button type="button" onclick="submitForm(2)">提交2</button>
<button type="reset">取消</button>
</form>
function submitForm(val){
if(1==val){
//serializeArray
var serializeArray=$("#forms").serializeArray();
console.log("serializeArray:");
console.log(serializeArray);
for(var i in serializeArray){ }
}else{
var serialize=$("#forms").serialize();
console.log("serialize:");
console.log(serialize);
}
}
后者已经比较完美了,可以直接拼接到提交路径后面就好了,但~对于前者,这个serializeArray只是帮忙做了一部分,如果是post提交应该是{key1:value1,key2:value2}的形式,此时即使对于菜鸟也很容易写一个通用的方法处理成对象键值对的形式,在此就贡献一个吧(๑´ڡ`๑)-->
function submitForm(val){
if(1==val){
//serializeArray
var serializeArray=$("#forms").serializeArray();
console.log("serializeArray_before:");
console.log(serializeArray);
console.log("serializeArray_after:");
var paramsArray = $("#forms").serializeArray(),params = {};
for ( var i in paramsArray)
params[paramsArray[i].name] = paramsArray[i].value;
console.log(params);
}else{
var serialize=$("#forms").serialize();
console.log("serialize:");
console.log(serialize);
}
}
实际效果:
额,嗯~,其实有两个小问题,如果表单有一项没有填的话参数会不存在,还有一个问题是 多选框永远只会序列化第一个值,切记 切记。。。(ಠ .̫.̫ ಠ)
啊哈,这个问题就不折腾了 就交给聪明的读者吧~~~
哦~~~,还存在一个问题是,如果表单外层的form标签若不存在,则不能序列化参数,如果table标签里面嵌一个form的也不能,至于这个原因 个人猜想可能是与html规范冲突吧~,这个是我在实际开发中碰到的问题,希望各位不要踩坑啊!
B>遍历
由于js本身就是脚本语言的缘故,遂在js中可遍历的对象大致有三种 对象Object类型、数组Array类型以及混合类型(一般是Object+Array类型),相比较java是不是巨强大,O(∩_∩)O哈哈~
var obj={'a':1,'b':2,'c':3},
array=['a','b','c','d'],
mix={'data':['a','b','c'],'pp':99,'kk':21};
console.log("obj:"+obj);
for(var i in obj){
console.log("i="+i+" obj[i]="+obj[i]);
}
console.log("array:"+array);
for(var j in array){
console.log("j="+j+" array[j]="+array[j]);
}
console.log("mix:"+mix);
for(var k in mix){
console.log("k="+k+" mix[k]="+mix[k]);
}
通过代码和实际输出结果可以看出:
1.如果遍历的是对象类型,循环的每一项都会只输出这个对象item的键key,至于值就需要Object[key]来获取了;
2.如果遍历的是数组类型,循环的每一项都会只输出这个数组Array的下标,下标所指的值需要Array[index]来获取
3.如果是混合类型,最外层若是Array则同数组循环,若是对象Object则同对象循环
嗯哼...,看起来是不是超简单
(这里只讲了for in循环,这种写法是一种简略写法,由于非常常用,其他的形式用的少就不缀诉啦。。。)
嗯,以上只是提到了js中的遍历,现在给大家演示下jQuery中的遍历,这里需要说明的是一般对象或者数组遍历用js的遍历就好了,jQuery中的遍历(each)一般是用来遍历选定的dom对象的,这里给出样例哈-->
$("#forms button").each(function(idx,ele){
console.log("idx="+idx+" ele="+$(ele).text());
});
以上代码中的each方法的返回值有两个
idx:当前循环到的dom对象所在的下标位置
ele:当前循环到的dom对象可直接使用jQuery的方法对当前循环的dom进行操作
关于遍历这一节就不过多缀诉了,相信各位键盘上敲敲就轻松明了~
C>其他
关于实际开发中常用的小知识,这里单独拧出来说说(◍'౪`◍)ノ゙:
Number():这个方法是将字符串类型转换成数字(Number)的方法,经转换后的参数是Number类型,如果被转换的类型含有数字外的字符则返回NaN
toFixed(小数位数):此方法可以将Number四舍五入保留指定长度小数位
isNan(对象):此方法可以判断传入的对象是不是数字类型,如果是则返回false,反之为true,同时对象为数字的字符串类型也是可以的
window.location.reload():这个方法是可以刷新浏览器的,在js中可以直接写就好~
setTimeout(方法的字符串形式, 刷新的时间):此方法可以设置指定时间调用指定js方法,刷新时间为毫秒
preventDefault():这个方法一般用于阻止dom的默认事件而使用的,什么是默认事件,例如,点击提交按钮提交表单、点击a标签跳转等都是,如果用此类标签做其他事情的话dom的默认事件肯定是要阻止的
哈,可能不明白,给个例子(如果细究还是自行在浏览器打js脚本看吧。。。,说实话你这样我救不了你╰_╯)
$("a").click(function(event){
event.preventDefault();
});
关于js中的空、零、null、undefined的一些点拨:
在js中如果对象值不存在的时候一般返回undefined,这个undefined既不等于true也不等于false,但且记住undefined在if判断中是false,请区别于直接比较的值,
在js中如果除了空和零之外的变量在比较时都是true(undefined这个关键字除外哈)
在js中变量值是不存在null这一说,这个要区别于java中的空值
额,最后个大家一个在dom里面写js的简便方法,我就直接上代码,自行研究,不解释哈~●ω●
本节结束啦,真开心~↖(▔▽▔)↗
jQuery中的常用内容总结(三)的更多相关文章
- jQuery中的常用内容总结(一)
jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...
- jQuery中的常用内容总结(二)
jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距离上次博客更新已经有二十来天了(●′ω`●) ...
- js进阶 11-1 jquery中的页面内容操作的三个方法
jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...
- jquery中最常用的API有哪些
jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...
- JS的内置对象以及JQuery中的部分内容
[js中的数组] 1 数组的概念:可以再内存中连续存储的多个有序元素的结构 元素的顺序:称为下标,通过下标查找对应元素. ...
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- Html中Select的增删改查排序,和jQuery中的常用功能
这里主要通过select引出常用的jquery 前台页面 <select class="form-control" id="commonSelect"&g ...
- JQuery中一些常用函数的运用
一.JQuery的效果介绍 二.定时弹出广告图片JQ部分代码 <script type="text/javascript"> var time; $(function( ...
- jquery中ajax方法返回的三种数据类型:text、json、xml;
1.当dataType:"text"时,处理页面用的是DBDA类中的Strquery()方法,所以返回的数据是下面这样的,所以要对返回来的数据用split根据“|”和“^”来分割, ...
随机推荐
- 极化码的matlab仿真(4)——SC译码(2)
================================================ 首先自作多情的说一句--"抱歉!" 古语"有志者.事竟成",是 ...
- LINUX下C语言编程调用函数、链接头文件以及库文件
LINUX下C语言编程经常需要链接其他函数,而其他函数一般都放在另外.c文件中,或者打包放在一个库文件里面,我需要在main函数中调用这些函数,主要有如下几种方法: 1.当需要调用函数的个数比较少时, ...
- 从网络获取json数据,使用imageloader获取网络图片资源并显示在ListView上
http://www.93.gov.cn/93app/data.do?channelId=0&startNum=0 这是一个接口,通过这个接口来获取数据并解析 大体上就是把解析的数据还有图片u ...
- 使用HttpGet请求json数据
- JSONP的实现流程
在进行AJAX的时候会经常产生这样一个报错: 看红字,这是浏览器的同源策略,使跨域进行的AJAX无效.注意,不是不发送AJAX请求(其实就是HTTP请求),而是请求了,也返回了,但浏览器‘咔擦’一声, ...
- 我们为什么需要SDN?---致新人
引言:SDN为什么会出现?是什么原因使得学术界提出SDN?我们为什么需要SDN?如果你刚接触SDN方案时,你一定有这样的疑问.而问题的答案是:我们需要拥有更多可编程能力的网络,来支持快速增长的网络业务 ...
- 201521123069 《Java程序设计》 第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123085 《Java程序设计》 第3周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521123098 JAVA课程设计
1.团队课程设计博客链接 http://www.cnblogs.com/agts/p/7067948.html 2.个人负责模块或任务说明 个人任务:实现初始界面中的登录.注册模块,以及数据库的连接和 ...
- 201521123098 《Java程序设计》第14周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 1. 在使用命令执行框时一定要记住大小写的区分: 2. 数据库中表的数据删除后id还是继续自增的,目前只会使用" ...