jquery是一个非常优秀的js框架,相信大部分人都用过,也都非常熟悉它的应用,用起来也非常简单,基本的操作也都不用说了。这里不在罗列jquery的api,总结下需要注意的点,都是平时容易犯错误的地方,分享下,感觉还有比较有价值的,具体内容如下:
一、ajax相关:
$.ajax({ type : "post", url : "XXX.action", //data : ‘name=John&location=china‘ data : {name:John, location:china}, dataType : "json", async : false, success : function(data) { } });
1.data两种参数的用法区别
①一种时参数值为特殊情况时(值本身含有字符‘&‘): 例如 name=John&John2, data就变成了‘name=John&John2&location=china‘ ,这时数据传到后台可能会得到不可预知的结果。
②正常情况下,也就是参数的值不带有特殊字符 ‘&’,有时也会出现“参数接收不到或不完整”的情况,具体原因我也清楚,这个确实亲身经历过,代码什么的都没有问题,到了后台有个参数就是传不过去,所以结论就是使用第二种写法较好:data : {name:John, location:china},从来没有出现过参数丢失的情况,而且容错性也强。
2.async同步方式:true or false ?
①如果需要等待ajax的执行结果,用false,否则永远得不到正确的结果。原因很简单,如果不用false,代码会直接往下执行,这时ajax的值还没返回过来,程序没有按照想象的顺序执行,结果也就可想而知了。
②如果不需要等待ajax的执行结果最好用true,因为采用“同步的方式”(async=false)时页面会处于“假死”状态,用户看起来就是“卡住”了, 特别是假死次数太多时,体验不佳(ajax不要滥用,能在后台做的工作就在后台做,特别是一些初始化的工作)。
3.dataType:一般我们的返回值类型都是“json”,这个一定要写,并且写正确,(即便后台指定了HTTP包MIME类型) 曾经犯过一个错误,将返回值错写成“html”,结果总是取不到自己想要的值,最后将返回值一打印,发现是包含 HTTP信息的一大堆信息,好像就是一个页面HTML代码,这时想到(ajax本就是一个HTTP请求)。
4.总结,要养成良好习惯,不管你的ajax多么简单,这个5个最基本的参数都带上,并且根据自己的情况将参数值写正确。
二、小知识:
1.jquery选择器返回的永远是个数组,也正因为如此,通过id选择的元素不存在也不会报错,但我们不能因为不报错写代码时就可以随意写,如果不确定元素是否存在,取时最好还是要做“非空”判断,示例:
if ($("#btn1").length > 0) { //主体代码 }
2.页面上有多个id或者name一样的元素时,如果取?一般是通过“相对路径”来取,因为如果要取值,总要由一些“事件”触发,如果点击了某个按钮,那么就以此按钮为出发点往上找或者往下找,常用的函数:
parent : 取父节点元素
child : 取子节点元素
prev : 取兄弟节点(同级)的前一个
next : 取兄弟节点(同级)的前一个
一个例子:购物车展示页面,一个table里很多组商品,每组可以单独结算,也就是都有结算“按钮”,而本组商品的某个位置度有个隐藏的元素,他们的name是一样的,这时可以这么取值:
$(this).parents("tr").prev().find("td").find("input[name=‘activecode‘]").val();
意思为从结算按钮前一行的某列中找到名字为activecode的元素的值,这里的“td”如果能确定的话后面还可以加上eq(索引值)。
3.取没有id的元素(有时候有些元素是没有id的,往往都是些list,如果自己的不好加或者不想加id,又或者不能加) 我遇到过这样一种情况,页面上有一个li集合,他们的值都来自定义好的集合A,手里有些数据A1也来自A,A1中的数据也能在页面li中出现,也可能没有。需求是A1中的值,li集合中也同时出现的做些样式调整,li中的任何元素都没有id,只有外面的ul有id。在这种“极端条件下”,还有
最后的办法,就是循环li,然后通过值相等判断。(也就说只要遇到取值,就要有循环,代码写出来非常臃肿,不过真没有办法了,也只能这样)
$(li集合).each(function(){ // 主体代码 });