JQuery的attr 与 val区别
.attr(attributeName)
attributeName:需要获取属性的名称。
获取匹配集中第一个元素的属性值。1.6中attr返回属性的值为undefined，如果没有设置（set）。另外，.attr不应该在普通对象、数组(array)、窗口(window)或者文档中（document)。如果需要获取或者设置DOM属性，则应该使用.prop()方法。
使用.attr方法获取元素属性的值有两个主要优点：
方便(Convenience):这个方法可以在JQuery对象上直接调用和串联别的JQuery的方法。
跨浏览器的一致性（Cross-browserconsistency):有报告说一些属性值在跨浏览器时的不一致性，甚至在同一浏览器的不同版本上也有不一致性。.attr减少这种不一致性
.val()
获取匹配集中第一个元素当前的值。
.val()就去主要用来获取表单中元素的值，例如input，select或者textarea。
不同
<inputdata-name="user"id="name"value="aaaa"/>
?$('#name').val();/*'aaaa'*/
$('#name').attr('data-name');/*user*/
下面通过一段代码给大家介绍jQueryattr("value")和val的区别
//2509行
if(!getSetInput||!getSetAttribute){
jQuery.attrHooks.value={
get:function(elem,name){
varret=elem.getAttributeNode(name);
returnjQuery.nodeName(elem,"input")?
//Ignorethevalue*property*byusingdefaultValue
elem.defaultValue:
ret&&ret.specified?ret.value:undefined;
},
}
这边返回值的逻辑判断有变化
jQuery.nodeName(elem,"input")?elem.defaultValue:ret&&ret.specified?ret.value:undefined; //Ignorethevalue*property*byusingdefaultValue
要我们使用defaultValue.
JavaScript
attrHooks:{
type:{
set:function(elem,value){
if(!jQuery.support.radioValue&&value==="radio"&&jQuery.nodeName(elem,"input")){
//SettingthetypeonaradiobuttonafterthevalueresetsthevalueinIE6-9
//Resetvaluetodefaultincasetypeissetaftervalueduringcreation
varval=elem.value;
elem.setAttribute("type",value);
if(val){
elem.value=val;
}
returnvalue;
}
}
}
},
而1.8.3代码如下
JavaScript
//2361行
attrHooks:{
type:{
set:function(elem,value){
//Wecan'tallowthetypepropertytobechanged(sinceitcausesproblemsinIE)
if(rtype.test(elem.nodeName)&&elem.parentNode){
jQuery.error("typepropertycan'tbechanged");
}elseif(!jQuery.support.radioValue&&value==="radio"&&jQuery.nodeName(elem,"input")){
//SettingthetypeonaradiobuttonafterthevalueresetsthevalueinIE6-9
//Resetvaluetoit'sdefaultincasetypeissetaftervalue
//Thisisforelementcreation
varval=elem.value;
elem.setAttribute("type",value);
if(val){
elem.value=val;
}
returnvalue;
}
}
},
//Usethevaluepropertyforbackcompat
//UsethenodeHookforbuttonelementsinIE6/7(#1954)
value:{
get:function(elem,name){
if(nodeHook&&jQuery.nodeName(elem,"button")){
returnnodeHook.get(elem,name);
}
returnnameinelem?
elem.value:
null;
},
set:function(elem,value,name){
if(nodeHook&&jQuery.nodeName(elem,"button")){
returnnodeHook.set(elem,value,name);
}
//DoesnotreturnsothatsetAttributeisalsoused
elem.value=value;
}
}
},
可见1.9删除了attrHooks.value方法导致非IE的attr("value")为undefined或默认值,而IE的attr("value")为""或默认值