新葡亰496net Web前端 jquery中常见的坑

jquery中常见的坑

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

原文地址:

【自己总结,详情见下面转录的文章】:

Pl

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

attr()用于操作html属性,prop()属性用于操作DOM属性

Hellofine

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

①: 很多情况下可以互用

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

JQMIGRATE: jQuery.fn.live() is deprecated

②:attr()独自适用的情况,自定义的html属性,html属性和dom属性不同名的情况,如具有同一个值的属性:class(html),className(DOM)

Hello fine

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

③:prop()独自适用的情况,①html属性和dom属性不同名时;②表单中的checked,selected,disabled等属性

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

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

HTML属性与DOM属性差别最大的地方,恐怕就要数表单控件的值了。比如,文本输入框的

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 */});

value 属性在DOM中的属性叫 defaultValue
,DOM中就没有 value 属性。而选项列表( select )
元素呢,其选项的值在DOM中通常是通过
selectedIndex 属性,或者通过其选项元素的
selected 属性来取得。
由于存在这些差异,在取得和设置表单控件的值时,最好不要使用
.attr() 方法。而对于选
项列表呢,最好连 .prop()
方法也不要使用。那使用什么呢,建议使用jQuery提供的 .val()

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

val()函数用于设置或返回当前jQuery对象所匹配的DOM元素的value值。

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

该函数常用于设置或获取表单元素的value属性值。例如:<input>、<textarea>、<select>、<option>、<button>等。

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

方法:
//取得文本输入框的当前值
var inputValue =
$(‘#my-input’).val();
//取得选项列表的当前值
var selectValue =
$(‘#my-select’).val();
//设置单选列表的值
$(‘#my-single-select’).val(‘value3’);//必须是选项中的值才有效
//设置多选列表的值
$(‘#my-multi-select’).val([‘value1’,
‘value2’]);
与 .attr() 和 .prop() 一样, .val()
方法也可以接受一个函数作为其setter参数。有了这个
多用途的 .val()
方法,使用jQuery做Web开发你又会倍感高效。

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

以下转自  
 

jQuery Migrate对此错误的警告是:

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。

JQMIGRATE: jQuery.fn.die() is deprecated

但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。

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

1、操作对象不同

很明显,“attr”和“prop”分别是单词“attribute”和“property”的缩写,并且它们均表示”属性”的意思。

不过,在jQuery中,“attribute”和“property”却是两个不同的概念。attribute表示HTML文档节点的属性,property表示JS对象的属性。

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>

在jQuery中,prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

<!-- attr()函数针对的是该文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>

当然,在jQuery的底层实现中,函数attr()prop()的功能都是通过JS原生的Element对象(如上述代码中的msg)实现的。attr()函数主要依赖的是Element对象的getAttribute()setAttribute()两个方法。prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */

// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);

// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145



/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */

// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");

// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>

当然,jQuery对这些操作方式进行了封装,使我们操作起来更加方便(比如以对象形式同时设置多个属性),并且实现了跨浏览器兼容。

此外,虽然prop()针对的是DOM元素的property,而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如,property的id对应attribute的“id”,property的className对应attribute的“class”。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>

运行代码

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

2、应用版本不同

attr()是jQuery
1.0版本就有的函数,prop()是jQuery
1.6版本新增的函数。毫无疑问,在1.6之前,你只能使用attr()函数;1.6及以后版本,你可以根据实际需要选择对应的函数。

jQuery Migrate对此错误的警告是:

3、用于设置的属性值类型不同

由于attr()函数操作的是文档节点的属性,因此设置的属性值只能是字符串类型,如果不是字符串类型,也会调用其toString()方法,将其转为字符串类型。

prop()函数操作的是JS对象的属性,因此设置的属性值可以为包括数组和对象在内的任意类型。

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

4、其他细节问题

在jQuery
1.6之前,只有attr()函数可用,该函数不仅承担了attribute的设置和获取工作,还同时承担了property的设置和获取工作。例如:在jQuery
1.6之前,attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。

直到jQuery
1.6新增prop()函数,并用来承担property的设置或获取工作之后,attr()才只用来负责attribute的设置和获取工作。

此外,对于表单元素的“checked”、“selected”、“disabled”等属性,在jQuery
1.6之前,attr()获取这些属性的返回值为Boolean类型:如果被选中(或禁用)就返回true,否则返回false

但是从1.6开始,使用attr()获取这些属性的返回值为String类型,如果被选中(或禁用)就返回“checked”、“selected”或“disabled”,否则(即元素节点没有该属性)返回undefined。并且,在某些版本中,这些属性值表示文档加载时的初始状态值,即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。

因为jQuery认为:attribute的“checked”、“selected”、“disabled”就是表示该属性初始状态的值,property的checkedselecteddisabled才表示该属性实时状态的值(值为truefalse)。

因此,在jQuery
1.6及以后版本中,请使用prop()函数来设置或获取checkedselecteddisabled等属性。对于其它能够用prop()实现的操作,也尽量使用prop()函数。

<input id="uid" type="checkbox" checked="checked" value="1">

<script type="text/javascript">
// 当前jQuery版本为1.11.1
var uid = document.getElementById("uid");
var $uid = $(uid);

document.writeln( $uid.attr("checked") ); // checked
document.writeln( $uid.prop("checked") ); // true

// 取消复选框uid的选中(将其设为false即可)
// 相当于 uid.checked = false;
$uid.prop("checked", false);

// attr()获取的是初始状态的值,即使取消了选中,也不会改变
document.writeln( $uid.attr("checked") ); // checked
// prop()获取的值已经发生变化
document.writeln( $uid.prop("checked") ); // false
</script>

早期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

标签:

相关文章

发表评论

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

网站地图xml地图