JQuery 易混点

来源:互联网 发布:python怎么输入 编辑:程序博客网 时间:2024/06/05 15:07

后台小哥虽厉害,但有时候他们总喜欢乱用==,一旦找不到解决方案,就会把我们叫过去,看他们写的乱七八糟的js…他们还会时不时问一些细节的东西,说不上来的时候,感觉有点小羞愧,故作总结如下:

_ (function() {})() vs $(function() {})
_ window.load() vs document.ready()
- 一个页面能否引用不同的JQuery版本
- JQuery ajax data传参的区别


(function() {})() 和 $(function() {})

$(function() {}) 是 $(document).ready(function() {}) 的简写。(function() {})() 是立刻执行,同时也用来避免全局变量污染。

更详细的区别在这里

window.load() 和 document.ready()

window.load()  是必须等待网页内容全部加载完成(包括图片等),才会执行;document.ready() 是DOM结构加载完成,执行,这时候可能页面的其他内容并没有加载完成

也就是后者执行要比前者早

一个页面能否引用不同的JQuery版本?

答案是肯定的! 为了避免冲突可以使用JQuery的 noconflict 模式
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script><script type="text/javascript">    var jQuery_1_1_3 = $.noConflict(true);</script><script type="text/javascript"src="http://example.com/jquery-1.3.2.js"></script><script type="text/javascript">var jQuery_1_3_2 = $.noConflict(true);</script>

或者

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script><script>    var $j = jQuery.noConflict(true);</script><script>    $(document).ready(function(){        console.log($().jquery);// This prints v1.4.2        console.log($j().jquery);// This prints v1.9.1    });</script>

点击查看更多说明

JQuery ajax data传参方式的区别

data:{ 'id': id , 'name':name}   data:'id='+ id + '&name='+ name

这两种方式的区别:
如果参数中包含 & 符号,可能造成参数接收不完整 [假设 id = ‘0001’ name = ‘Jerry&John’]
第一种没有问题;第二种会把 & 符号当作参数的分隔符进行处理,得到name = ‘Jerry’,这时需要用encodeURIComponent()方法进行转义。

参照 http://stackoverflow.com

原创粉丝点击