jquery中常见的坑

对于新手来说,刚开始学习的时候会对jQuery的html,prop()获取属性的方法模拟两口,分不出他们的区别,我在这里简单的介绍区分下,希望能给大家带来点帮助吧。

原文地址:

Pl

  1. 使用了被废弃的jQuery.fn.live方法

Hellofine

jQuery Migrate库对此错误也在控制台有相应的警告:

1、html()方法,类似于javascript众的InnerHtml属性,可以用来读取或者设置某个元素中的HTML内容。有两种用法,不带参数的,它表示提取里面的html代码,带参数的表示设置其html代码,传的是string或返回string的函数。
例: $ 返回:Pl

JQMIGRATE: jQuery.fn.live() is deprecated

Hello fine

live方法原本的作用是设置事件代理,该方法在jQuery
1.7之后就不推荐使用了,取代之的是jQuery.fn.on函数。他们的接口分别是:

$.html 设置div的内容为html代码’

$(selector).live(‘click’, function(){/* some code */});

H1

‘;

2、val()方法,设置或提取具有value属性的html代码,也支持select或其它。与html类型,带参数表示设置,可用传入string或返回string的函数。
例: $ 返回: dd $ 返回: 选择了selected的Array数组 $
设置id为input1的value为ss

3、text()方法,类似于javascript众的InnerText方法,可以用来读取或者设置某个元素的文本内容
。使用方法与val类似。
4、attr()方法,来获取和设置元素的各种属性。带一个string参数的是返回这个属性的值,带两个参数的是设置这个属性的值。也可直接使用json来设置其属性,这样方便多了。
例: $.attr 返回 dd $.attr 设置其value为新
$.attr({name:’new’,value:’新’}) 设置基name为new,value为新

5、prop()方法,返回值是标准属性:true/false,而不会跟attr()方法一样返回”disabled”或者””。在某些时候,比如访问input的disabled属性的时候,会有些问题,在有些浏览器里,只要写了disabled属性就可以,有些则要写disabled=”disabled”。所以从1.6版本开始,jQuery提供新的方法prop()来获取这些属性啦。
那么,哪行属性应该用attr访问呢?第一个原则:只添加属性名称该属性就会生效使用prop();第二个原则:只存在true/false的属性应该使用prop()。按照官方说明,如果是设置disabled和checked这些属性,应该使用prop方法。

$(selector).on(‘click’, [selector,] function(){/* some code */});

乍一看,中括号里面的参数可以省略掉,俩函数不是一模一样么?于是天真地把函数名live直接替换成on,大部分时候,这么做好像没有引起任何异常。但是如果在你调用on函数的时候,前面的$(selector)在当前的网页上根本不匹配任何元素(该元素可能是后面的代码才加到DOM里的),那是不会绑定成功的。事实上,live函数将$(selector)代理到了document元素上,这个元素是肯定存在的,所以不会出现类似情况。正确的替换方法应该是:

$(selector).live(‘click’, function(){/* some code */}); 替换为

$(document).on(‘click’, selector, function(){/* some code */});

  1. 使用了被废弃的jQuery.fn.die方法

jQuery Migrate对此错误的警告是:

JQMIGRATE: jQuery.fn.die() is deprecated

这个方法和前面的live刚好反过来,取消事件处理函数的绑定。新版本中应该使用off函数代替之,替换方式类似。

  1. 使用了被废弃的jQuery.fn.toggle函数

jQuery Migrate对此错误的警告是:

JQMIGRATE: jQuery.fn.toggle(handler, handler…) is deprecated

早期jQuery中名字叫toggle的函数有两个,一个是用于控制元素的显示和隐藏,这个用途的函数目前jQuery中依旧存在;另一个就是上面提到的被废弃的toggle函数,它用于绑定至少两个函数到同一个元素,点击该元素的时候两个函数交替着执行。这两个同名函数功能相差甚远,为了不引起误导,在jQuery
1.8中就不再建议使用了。替换的方式是把两个函数合并成一个函数的if-else两个区段,然后自己设置一个boolean变量,控制每次点击时应该执行哪个区段即可。

  1. 使用了被废弃的jQuery.browser属性

jQuery Migrate对此错误的警告是

JQMIGRATE: jQuery.browser is deprecated

在前端开发中我们经常要根据不同的浏览器版本做出不同的处理,jQuery.browser本来是通过浏览器的userAgent字段来提取浏览器相关信息的。新版本中已经将其废弃,而是建议使用特征检测的方法去判断,并且给了一个Modernizr库作为推荐。不过,改成这个库可能改动成本有点大,如果你还是想沿用jQuery.browser的思路的话,可以自己去实现一下它。例如,判断是不是IE浏览器,可以用

/msie/.test(navigator.userAgent.toLowerCase());

即自己手动获取userAgent字段,并且做一个正则表达式匹配。其他浏览器思路类似,都是对navigator.userAgent做一个正则匹配。

5.$(html)格式书写错误

在jQuery Migrate中,出现以下三种警告中的任何一种,都是属于这个错误:

  1. JQMIGRATE: $(html) HTML strings must start with ‘<‘ character

  2. JQMIGRATE: $(html) HTML text after last tag is ignored

  3. JQMIGRATE: HTML string cannot start with a ‘#’ character

这个错误还是蛮值得注意的,因为我们文章开头所说的jQuery低版本有XSS漏洞,其实就是和这个错误有关系。在javascript中我们经常会直接将一段html格式的字符串写在jQuery引用里面,比如$(‘

‘)。按照新版本的jQuery要求,这段html格式的字符串必须是以左尖括号(小于号)开头,其他字符都不可以。以下几种写法,都是错误的:

  1. $(“

“); //错误,字符串最开头有一个空格,不是以小于号'<‘开头的

  1. $(“

test”); //不标准,html标签结束后后面还有多余的”test”,它会被忽略

  1. $(“#

塞班岛贵宾会,); //错误,以井号开头并且后面并不是一个css选择器

这一点在书写的时候注意一下就可以了,其实还是很容易避免的。其中第三种错误其实就不仅仅是警告了,jQuery会直接抛出一个错误,停止javascript代码的继续执行。一般情况以井号开头,例如$(“#test”),其实就是一个普通的选择器,但是上面例子中后面又夹杂着html字符串,这会被jQuery判断为潜在的XSS攻击。

6.jQuery.fn.attr方法的错误使用(这是个非常易犯的错误!)

jQuery Migrate中,关于attr方法的警告有以下这些:

  1. JQMIGRATE: jQuery.fn.attr(‘value’, val) no longer sets properties

  2. JQMIGRATE: jQuery.fn.attr(‘value’) no longer gets properties

  3. JQMIGRATE: jQuery.fn.attr(‘checked’) may use property instead of
    attribute

  4. JQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated

实践中我发现,早期写的代码里面,获取一个input输入表单的值时,是怎么获取的呢?$(‘input’).attr(‘value’);又是怎么设置的呢?$(‘input’).attr(‘value’,
‘helloworld’)。这在新版本中都是不正确的!正确的做法应该是

$(‘input’).val(); //获取input表单现在所输入的值

$(‘input’).val(‘helloworld’); //设置input表单输入的值

到底是获取还是设置,只取决于调用val方法时有没有带着参数。

如果你想手动设置单选框(例如)被选中,应该怎么设置呢?老的代码里面可能会看到这样$(‘input’).attr(‘checked’,
true)或者$(‘input’).attr(‘checked’,
‘checked’)。这些现在也都是不正确的!正确的做法应该是

$(‘input’).prop(‘checked’, true); //把单选框设为选中状态

$(‘input’).prop(‘checked’); //获取单选框是不是被选中了,返回true或false

这是从jQuery
1.6版本开始使用的写法。如果设置disabled和selected属性,也是使用prop方法。那到底什么时候使用attr方法呢?两者的区别是:prop设置的是某元素固有的属性,而attr设置的是写在html标签上的自定义属性。举个例子:

var v1 = $(‘input’).prop(“checked”);
//返回true/false,是否被选中,随状态改变而改变

var v2 = $(‘input’).attr(“checked”);
//返回”checked”,这是你设置在标签上的,不会变

var v3 = $(‘input’).attr(“haha”); //返回”hello”,自定义属性

var v4 = $(‘input’).prop(“haha”); //返回undefined,根本没有这个固有属性

上面提到的第四个错误,jQuery.fn.attr(props, pass) is
deprecated这个警告在真实项目中从未见到过,看了一下源码,触发该警告的jQuery写法很少见,可忽略。

  1. 向$.parseJSON传入了非法的参数

在jQuery Migrate中,该错误产生如下警告

JQMIGRATE: jQuery.parseJSON requires a valid JSON string

jQuery之所以改这个接口,是为了和浏览器自带的JSON.parse接口对齐,从jQuery
1.9开始生效。这个问题常见于AJAX接收服务端返回值的时候。服务端可能返回一个空字符串,这时候调用该接口会产生错误。必须向$.parseJSON传入合法的JSON字符串。修正方法如下:

var v1 = $.parseJSON(str); 替换为

var v1 = $.parseJSON( str ? str : “null” );

  1. 使用了被废弃的’hover’事件字符串

在jQuery Migrate中该错误产生如下警告

JQMIGRATE: ‘hover’ pseudo-event is deprecated, use ‘mouseenter
mouseleave’

在注册事件处理函数时,’hover’以前可以看作是’mouseenter
mouseleave’两个事件的别称。目前已经将该别称去掉了,所以代码中请用’mouseenter
mouseleave’替换之。

9.jQuery.fn.andSelf已经被替换,不能再使用

jQuery Migrate中是这样的警告:

JQMIGRATE: jQuery.fn.andSelf() replaced by jQuery.fn.addBack()

两个函数功能是完全一样的,可以直接替换。

以上,就是在jQuery升级中常见的问题。

附:

jQuery开发团队前一段时间发布了jQuery
1.9版本,删除了1.8版本中的部分API,为了使前端开发者能够顺利迁移至该版本,该团队还发布了迁移插件jQuery
Migrate。

当开发者需要在代码中使用新版本的jQuery时,可以在1.9或2.0版本中使用该插件来检测哪些功能已经弃用或移除,并可以在必要时恢复这些功能。更多信息见项目README

jQuery Migrate 1.1在之前版本的基础上,进行了一些改进,包括:

支持console.trace()来跟踪警告信息,更易于诊断错误。

对于无效JSON,会返回警告信息。

提示“Logging is active”信息,以表明插件正在运行。

出于安全因素,jQuery
1.9限制了字符串的处理,你可以通过新版Migrate插件来恢复该功能。但还是建议使用$.parseHTML()来处理HTML。

对$(“”, { type: “button” })会显示一个错误警告

最后,需要注意的是,你可以使用该插件将jQuery恢复到jQuery
1.6.4之后的任何一个版本的功能。

详细信息:http://blog.jquery.com/2013/01/31/jquery-migrate-1-1-0-released/

下载:

jquery-migrate-1.1.0.js

jquery-migrate-1.1.0.min.js

发表评论

电子邮件地址不会被公开。 必填项已用*标注