jquery使用注意点以及建议

  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(){
         //
         主体代码
     });
时间: 2024-10-04 06:00:13

jquery使用注意点以及建议的相关文章

10条建议帮助你创建更好的jQuery插件

本文总结了帮助你创建更好jQuery插件的10条建议.分享给大家供大家参考.具体说明如下: 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了.使用相同的设计模式和架构也让修复bug或者二次开发更容易.一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂.我在这里分享10条我总结的经验. 1. 把你的代码全部放在闭包里面 这是我用的最多的一条.

Jquery对象和DOM对象的区别

1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;复制代码 代码如下: var domObj = document.getElementById("id"); //DOM对象var $obj = $("#id"); //j

JQuery之初探

软考过后又进入了紧张的B/S学习阶段,由于自己的进度比较慢,所以更要加进学习.现在就来总结下JQuery的一些基础知识: JQuery定义 jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. JQuery特点 1.以强大的CSS选择器为基础,几乎所有的操作都先使用选择器查找DOM对象,然后对其进行各种操作. 2.屏蔽浏览器差异,对DOM的操作提供了方便的扩展,易用的事件处

[译]怎样在Vue.js中使用jquery插件

原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候. 问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力. 我试图寻找一些东西来帮助自己解决这个问题,但是我发现一些组件所做的工作不是很让我满意,所以

关于jquery对象和DOM对象的区别

这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所以有空jquery也要好好学习!(列为工作时间之外的任务) 下面摘自某些作者的论述,感觉总结的很到位,分享如下,并作为一个记录! jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象

DOM对象与jquery对象有什么不同

jQuery对象和DOM对象使用说明,需要的朋友可以参考下. 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;代码如下: 1 var domObj = document.getElementById("id"); //DOM对象 2

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。

jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;复制代码 代码如下: var domObj = document.getElementById("id"); //DOM对象va

DOM对象和Jquery对象区别(转)

来源:http://www.cnblogs.com/yellowapplemylove/archive/2011/04/19/2021583.html 感谢作者分享 jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQue

dom对象和jQuery对象的区别

1.jQuery对象和DOM对象 在第一次学习Jquery的时候也许大家都不是很清楚Jquery对象和DOM对象两者之间的关系,下面就解释两点,便于对Jquery和Dom加深理解DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;复制代码 代码如下: var domObj = document.getElementById("id"); //DOM对象var $obj = $("#id");