当前位置: 爱符号 - 所有分类 - Web开发 - js - jQuery 1.3.1 之后的版本问题集合
jQuery 1.3.1 之后的版本问题集合 jQuery 1.3.1 ZhiHouDeBanBenWenTiJiHe
符号空间 发表于:2013-10-09 12:28:16 阅读(2350)
关键词:jQuery jQuery prop prop attr attr jQuery问题 jQuery问题
摘要:把 jQuery-1.3 (1.4以前)升级到最新jQuery版本之后,发现原本正常运作的效果出现许多异常,不是没反应就是反应变慢。

把 jQuery-1.3 (1.4以前)升级到最新jQuery版本之后,发现原本正常运作的效果出现许多异常,不是没反应就是反应变慢,如果你也遇到这种问题,那就参考一下,希望对你有帮助。


部分来自网络现有资料的整理,陈述性文字已经去除,直接上代码吧!!


1.状况:原先透过 AJAX 取得服务器回传资料来显示,在升级后不能显示或动作。
  检查:用 firebug 侦查不会出现错误讯息,捕捉回传讯息时会在 .error 显示 「Invalid JSON」。
  问题:jquery 在 1.3 以前是用 javascript 的 eval 来解析 json 资料,而在 1.4 以后(包含 jquery 1.5 、 1.6、1.7)都改用更严格的方式来解析。
  解决:回传的资料无论是键 key 或值 value 都必须用双引号「"」呈现(单引号 ' 不行) — 但数字除外。
  举例来说:
  原本回传 { name:'王小明', year:20}
  在 1.3.x 以前是可以解析的。

  但在 jquery 1.4 以后就要写成 {"name":"王小明", "year":20}


2.状况:某些物件  bind() 、 unbind()  效果失效。
  检查:在浏览器开发工具中不会显示错误讯息。
  问题:有几个物件透过 bind() 不同效果,例如

  <div id=”123″>点这里会有效果</div>


$(‘#123′).bind(‘click’,function(){alert(‘Hello’);});
$(‘#123′).bind(‘mouseover’,function(){ $(this).css(‘color’,'red’);});
$(‘#123′).bind(‘click’,function(){ $(‘#other1′).hide();});

$(‘#other1′).cilick(function(){
$(‘#123′).unbind().bind(‘click’,function(){ $(‘#other2′).hide();});
});


希望出现点击 #123 时会出现两个效果–跳出提示、把另一个物件隐藏。
而点击  #other1 时会把 #123 最后 bind 的 #other1.hide() 效果移除,换上 bind #other2.hide();

在 jquery 1.3.2 中用 unbind 似乎只会移除最后 bind() 效果,不过因为在此桉中其它的 click 效果有用其它 jquery 封装所以这点需要确定,总之原先是正常 unbind 最后加的效果,但不影响其它 mousehove 、click 。

换成 jquery  1.7 后,採用 $(‘#123′).unbind() 会把 $(‘#123′) 上所有 bind() 效果一起移除。

◾方案一:

var way1= function(){   $('#other1').hide();  }
$('#123').bind('click',way1);
$('#123').unbind(way1);
这样就不会影响其它 bind 效果。



◾方二:
如果 function 需要代变数又希望用直觉方式编码,方桉一就不怎么合用,这时候可以用事件命名空间来 bind。


$('#123').bind('click.myEvent',function(){$('#other1').hide();});
$('#123').unbind('click.myEvent').bind('click.myEvent',function(){$('#other2').hide();});  //先移除原先效果再附上其它效果


这样 unbind 时就不会影响其它点击效果。

如果要移除所有自定点击效果可以这样写:.unbind('.myEvent');

附带一提, jquery 1.7 建议改採 .on .off 来取代 .bind() .unbind()。


3.状况:改为 jquery 1.7 之后,检查 checked、selected 效果失效
  检查:浏览器无提示错误。
  问题:checkedbox 用 if($(':checkbox').attr('checked')){alert('已选取');}
  在 jquery 1.6 以后改为
   attr(‘checked’) 只能检查元件在载入页面时的值,之后要动态变动或取得变动后的状态,要用 prop(“checked”)才可以。
  解决:改为

if( $(':checkbox').prop('checked') ){ alert('已选取');  $(this).prop('checked',false); }

问题解决!


4.状况:原本可以用 .css('background-color':'none')  或 .css('background-color':'') 把背景色去除掉。现在不行!
  解决:改用继承父元素即可。
  .css('background-color':'inherit')


5.juqery radio写法的兼容性问题


//老版本(1.3以前):
$("[@name='radio_name'][checked]").val(),或者$("[@name='radio_name']:checked").val();
//新版本:
$("[name='radio_name'][checked]").val(),或者$("input[name='radio_name']:checked").val();



—————————————————————————————

JQuery-新版本开始.attr 用法变化很大,一句.prop导致众多老代码出问题。

好吧,就算方向是对的,带为此带来的兼容性问题,影响相当严重,所以1.6.1又改回去了。

其实内部是悄悄的调用了.prop,虽然问题看似解决了,但是建议以后的用法中,使用.prop。


具体看示例:

$(":checkbox").attr("checked", true);
$("option").attr("selected", true);
$("input").attr("readonly", true);
$("input").attr("disabled", true);
if(  $(":checkbox").attr("checked") ) { /* Do something */ }

其它Boolean属性:autofocus, autoplay, async, checked, controls, defer,
 disabled, hidden, loop, multiple, open, readonly, required, scoped, selected

另外,jQuery Team提供一張DOM元素屬性適用attr()/prop()的對照表:

Attribute/Property .attr() .prop()
accesskey
align
async
autofocus
checked
class
contenteditable
defaultValue
draggable
href
id
label
location *
multiple
nodeName
nodeType
readOnly
rel
selected
selectedIndex
src
style
tabindex
tagName
title
type
width **

注意:红色部分是可以支持,但是不建议使用。



jquery 1.7

----------------
新的事件 APIs: .on() and .off()


之前绑定事件使用:
$(‘a’).bind(‘click’, myHandler);
jquery 1.7就可以使用下面代码:
$(‘a’).on(‘click’, myHandler);
在取消绑定事件
$(‘a’).unbind(‘click’, myHandler);
$(‘a’).off(‘click’, myHandler);


被删除的方法:

1、event.layerX and event.layerY
2、jQuery.isNaN()
3、jQuery.event.proxy()




声明:以上内容仅代表作者观点,不代表爱符号赞成此内容或立场