Jemand hat Multiple gegeben
Plug-in auswählen hat eine Frage gestellt:
setSelects
funktioniert in Firefox nicht, wenn jQuery 1.9.0 verwendet wird. Ich habe die jQuery-Version 1.8.3 verwendet und die jQuery-Version 1.9.0 noch nicht ausprobiert.
Beginnen Sie also mit dem Debuggen des -Codes:
<input type="checkbox" />
<script>
$(function() {
$('input').click(function() {
$(this).attr('checked');
});
});
</script>Nach dem Login kopieren
Klicken Sie auf das Kontrollkästchen, und die -Ergebnisse sind alle undefiniert
In Version 1.8.3 werden die Ergebnisse überprüft und undefiniert
An diesem Punkt wird die Antwort auf die Frage gefunden, was das Problem ist Ich habe also die offizielle Dokumentation überprüft und herausgefunden, dass ab jQuery 1.6 eine neue Methode prop() hinzugefügt wurde, die jedoch nie verwendet wurde. Nach der chinesischen Bedeutung handelt es sich um Methoden zum Abrufen/Festlegen von Attributen bzw. Eigenschaften. Warum müssen wir also die Methode prop() hinzufügen?
Denn vor jQuery 1.6 hatte die Verwendung von attr() manchmal ein inkonsistentes
Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior.
Nach dem Login kopieren
Verhalten
. Also, wann sollte man attr() und wann prop() verwenden?
Gemäß offiziellen Empfehlungen:
To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
Nach dem Login kopieren
hat zwei
-Attribute: wahr und falsch. -Attribute, z. B. aktiviert, ausgewählt oder deaktiviert, verwenden prop(), andere verwenden attr(). Ändern Sie an dieser Stelle attr('checked') in prop('checked'), um die genannten Probleme zu beheben.
Warten Sie, es scheint, dass das Problem noch nicht gelöst wurde. Warum gibt es im Beispiel am Anfang einen Unterschied zwischen jQuery 1.8.3 und 1.9.0, wenn attr() verwendet wird?
Wenn Sie den Unterschied zwischen ihnen wissen möchten, schauen Sie sich am besten ihren Quellcode an:
1.8.3 attr():
1.9 .0 attr( ):
attr: function( elem, name, value, pass ) { var ret, hooks, notxml,
nType = elem.nodeType; // don't get/set attributes on text, comment and attribute nodes
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { return;
} if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) { return jQuery( elem )[ name ]( value );
} // Fallback to prop when attributes are not supported
if ( typeof elem.getAttribute === "undefined" ) { return jQuery.prop( elem, name, value );
}
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); // All attributes are lowercase
// Grab necessary hook if one is defined
if ( notxml ) {
name = name.toLowerCase();
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
} if ( value !== undefined ) { if ( value === null ) {
jQuery.removeAttr( elem, name ); return;
} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { return ret;
} else {
elem.setAttribute( name, value + "" ); return value;
}
} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { return ret;
} else {
ret = elem.getAttribute( name ); // Non-existent attributes return null, we normalize to undefined
return ret === null ?
undefined :
ret;
}
}Nach dem Login kopieren
Das prop() von 1.8.3 und 1.9.0 ist dasselbe:
attr: function( elem, name, value, pass ) {
var ret, hooks, notxml,
nType = elem.nodeType;
// don't get/set attributes on text, comment and attribute nodes
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return;
}
if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) {
return jQuery( elem )[ name ]( value );
}
// Fallback to prop when attributes are not supported
if ( typeof elem.getAttribute === "undefined" ) {
return jQuery.prop( elem, name, value );
}
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
// All attributes are lowercase
// Grab necessary hook if one is defined
if ( notxml ) {
name = name.toLowerCase();
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
}
if ( value !== undefined ) {
if ( value === null ) {
jQuery.removeAttr( elem, name );
return;
} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
return ret;
} else {
elem.setAttribute( name, value + "" );
return value;
}
} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
return ret;
} else {
ret = elem.getAttribute( name );
// Non-existent attributes return null, we normalize to undefined
return ret === null ?
undefined :
ret;
}
}Nach dem Login kopieren
prop: function( elem, name, value ) {
var ret, hooks, notxml,
nType = elem.nodeType;
// don't get/set properties on text, comment and attribute nodes
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
return;
}
notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
if ( notxml ) {
// Fix name and attach hooks
name = jQuery.propFix[ name ] || name;
hooks = jQuery.propHooks[ name ];
}
if ( value !== undefined ) {
if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
return ret;
} else {
return ( elem[ name ] = value );
}
} else {
if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
return ret;
} else {
return elem[ name ];
}
}
}Nach dem Login kopieren
首先，我们看下 attr() 和 prop() 的区别：
attr() 里面，最关键的两行代码
elem.setAttribute( name, value + "" );
ret = elem.getAttribute( name );
Nach dem Login kopieren
很明显的看出来，使用的 DOM 的 API setAttribute() 和 getAttribute() 方法操作的属性元素节点。
prop() 里面，最关键的两行代码
return ( elem[ name ] = value );return elem[ name ];
Nach dem Login kopieren
可以理解为 document.getElementById(el)[name] = value，这是转化成 element 的一个属性。
对比调试 1.9.0 和 1.8.3 的 attr() 方法，发现两者的区别在于
hooks.get( elem, name ))
Nach dem Login kopieren
返回的值不一样，具体的实现：
1.8.3 中
boolHook = {
get: function( elem, name ) {
// Align boolean attributes with corresponding properties
// Fall back to attribute presence where some booleans are not supported
var attrNode,
property = jQuery.prop( elem, name );
return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ?
name.toLowerCase() :
undefined;
}
}Nach dem Login kopieren
1.9.0 中
boolHook = { get: function( elem, name ) {
var
// Use .prop to determine if this attribute is understood as boolean
prop = jQuery.prop( elem, name ),
// Fetch it accordingly
attr = typeof prop === "boolean" && elem.getAttribute( name ),
detail = typeof prop === "boolean" ?
getSetInput && getSetAttribute ?
attr != null :
// oldIE fabricates an empty string for missing boolean attributes
// and conflates checked/selected into attroperties
ruseDefault.test( name ) ?
elem[ jQuery.camelCase( "default-" + name ) ] :
!!attr :
// fetch an attribute node for properties not recognized as boolean
elem.getAttributeNode( name );
return detail && detail.value !== false ?
name.toLowerCase() :
undefined;
}
}Nach dem Login kopieren
由此可见，1.9.0 开始不建议使用 attr() 来对具有 true 和 false 两个属性的属性进行操作了。
那么我们的结论是：
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()，具体见下表：
Das obige ist der detaillierte Inhalt vonWann sollte attr() und wann prop() in jquery verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
