1.jqueryä¸attråpropçåºå«
2.jQueryå¦ä¹ ä¹propåattrçåºå«
jqueryä¸attråpropçåºå«
ç¸æ¯attrï¼propæ¯1.6.1ææ°åºæ¥çï¼ä¸¤è ä»ä¸æææç解ï¼é½æ¯è·å/设置å±æ§çæ¹æ³ï¼attributesåpropertiesï¼ã
åªæ¯ï¼windowædocumentä¸ä½¿ç¨.attr()æ¹æ³å¨jQuery1.6ä¹åä¸è½æ£å¸¸è¿è¡ï¼å 为windowådocumentä¸ä¸è½æ
attributesãpropåºè¿èçäºã
æ¢ç¶æ们æ³ç¥éä»ä»¬ä¸¤çåºå«ï¼æ好就ççä»ä»¬çæºä»£ç ï¼ä¸è¦è¢«ä»£ç é¿åº¦æåå°ï¼æ们åªçå ³é®çå å¥ï¼
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;
}
}
propæ¹æ³ä»£ç ï¼jQueryçæ¬1.8.3ï¼
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 ];
}
}
}
attr
æ¹æ³éé¢ï¼æå ³é®ç两è¡ä»£ç ï¼elem.setAttribute( name, value + ââ )året =
elem.getAttribute( name )ï¼å¾ææ¾ççåºæ¥ï¼ä½¿ç¨çDOMçAPI
setAttributeågetAttributeæ¹æ³æä½çå±æ§å ç´ èç¹ãèpropæ¹æ³éé¢ï¼æå ³é®ç两è¡ä»£ç ï¼return ( elem[
name ] = value )åreturn elem[ name
]ï¼ä½ å¯ä»¥ç解æè¿æ ·document.getElementById(el)[name] = valueï¼è¿æ¯è½¬åæJS对象çä¸ä¸ªå±æ§ã
æ¢ç¶æç½äºåçæ¯è¿æ ·ï¼æ们æ¥ççä¸ä¸ªä¾åï¼
<input type="checkbox" id="test" abc="" />
$(function(){
el = $("#test");
console.log(el.attr("style")); //undefined
console.log(el.prop("style")); //CSSStyleDeclaration对象
console.log(document.getElementById("test").style); //CSSStyleDeclaration对象
});
el.attr(âstyleâ)
è¾åºundefinedï¼å 为attræ¯è·åçè¿ä¸ªå¯¹è±¡å±æ§èç¹çå¼ï¼å¾æ¾ç¶æ¤æ¶æ²¡æè¿ä¸ªå±æ§èç¹ï¼èªç¶è¾åº
undefinedel.prop(âstyleâ)è¾åºCSSStyleDeclaration对象ï¼å¯¹äºä¸ä¸ªDOM对象ï¼æ¯å ·æåççstyle对象
å±æ§çï¼æ以è¾åºäºstyle对象è³äºdocument.getElementById(âtestâ).styleåä¸é¢é£æ¡ä¸æ ·
æ¥ççï¼
el.attr("abc","")
console.log(el.attr("abc")); //
console.log(el.prop("abc")); //undefined
é¦å ç¨attræ¹æ³ç»è¿ä¸ªå¯¹è±¡æ·»å abcèç¹å±æ§ï¼å¼ä¸ºï¼å¯ä»¥çå°htmlçç»æä¹åäº
el.attr(âabcâ)è¾åºç»æ为ï¼åæ£å¸¸ä¸è¿äºel.prop(âabcâ)è¾åºundefinedï¼å 为abcæ¯å¨è¿ä¸ªçå±æ§èç¹ä¸ï¼æ以éè¿propæ¯åä¸å°ç
el.prop("abc", "");
console.log(el.attr("abc")); //
console.log(el.prop("abc")); //
æ们åç¨propæ¹æ³ç»è¿ä¸ªå¯¹è±¡è®¾ç½®äºabcå±æ§ï¼å¼ä¸ºï¼å¯ä»¥çå°htmlçç»ææ¯æ²¡æååçãè¾åºçç»æå°±ä¸è§£éäºã
ä¸é¢å·²ç»æåçè®²æ¸ æ¥äºï¼ä»ä¹æ¶åç¨ä»ä¹å°±å¯ä»¥èªå·±ææ¡äºã
æä¸ä¸ï¼å¨éå°è¦è·åæ设置checked,selected,readonlyådisabledçå±æ§æ¶ï¼ç¨propæ¹æ³æ¾ç¶æ´å¥½ï¼æ¯å¦åä¸é¢è¿æ ·ï¼
<input type="checkbox" id="test" checked="checked" />console.log(el.attr("checked")); //checked
console.log(el.prop("checked")); //true
console.log(el.attr("disabled")); //undefined
console.log(el.prop("disabled")); //false
æ¾ç¶ï¼å¸å°å¼æ¯å符串å¼è®©æ¥ä¸æ¥çå¤çæ´åçã
PSä¸ä¸ï¼å¦æä½ æJSæ§è½æ´ççè¯ï¼æ¾ç¶propçæ§è½æ´é«ï¼å 为attréè¦è®¿é®DOMå±æ§èç¹ï¼è®¿é®DOMæ¯æèæ¶çãè¿ç§æ åµéç¨äºå¤éé¡¹å ¨éååéçæ åµã
大
家é½ç¥éæçæµè§å¨åªè¦ådisabledï¼checkedå°±å¯ä»¥äºï¼èæçè¦åædisabled =
"disabled"ï¼checked="checked"ï¼æ¯å¦ç¨attr("checked")è·åcheckboxçcheckedå±æ§æ¶éä¸çæ¶
åå¯ä»¥åå°å¼,å¼ä¸º"checked"ä½æ²¡éä¸è·åå¼å°±æ¯undefinedã
jqæä¾æ°çæ¹æ³âpropâæ¥è·åè¿äºå±æ§ï¼å°±æ¯æ¥è§£å³è¿ä¸ªé®é¢çï¼ä»¥åæ们使ç¨attrè·åcheckedå±æ§æ¶è¿å"checked"å"",ç°å¨ä½¿ç¨propæ¹æ³è·åå±æ§åç»ä¸è¿åtrueåfalseã
é£ä¹ï¼ä»ä¹æ¶å使ç¨attr()ï¼ä»ä¹æ¶å使ç¨prop()ï¼1.æ·»å å±æ§å称该å±æ§å°±ä¼çæåºè¯¥ä½¿ç¨prop();2.æ¯ætrue,false两个å±æ§ä½¿ç¨prop();3.å ¶ä»å使ç¨attr();项ç®ä¸jqueryå级çæ¶å大家è¦æ³¨æè¿ç¹ï¼
以ä¸æ¯å®æ¹å»ºè®®attr(),prop()ç使ç¨ï¼
jQueryå¦ä¹ ä¹propåattrçåºå«
propæ¯jquery1.6æ°å¢çæ¹æ³ï¼å ¶ä¸attrçç¨æ³æ为ç¸ä¼¼ãç±äºä¸ç解ä»ä»¬çæ ¹æ¬åºå«ï¼é¾å 产ç离å¥çBUGã
éè¿åæattråpropçæºç ï¼å¾ç¥ï¼
attræ¹æ³éé¢ï¼æå ³é®ç两è¡ä»£ç ï¼elem.setAttribute( name, value + ââ )året = elem.getAttribute( name )ï¼å¾ææ¾ççåºæ¥ï¼ä½¿ç¨çDOMçAPI setAttributeågetAttributeæ¹æ³æä½çå±æ§å ç´ èç¹ã
èpropæ¹æ³éé¢ï¼æå ³é®ç两è¡ä»£ç ï¼return ( elem[ name ] = value )åreturn elem[ name ]ï¼ä½ å¯ä»¥ç解æè¿æ ·document.getElementById(el)[name] = valueï¼è¿æ¯è½¬åæJS对象çä¸ä¸ªå±æ§ã
å¼å ¥ä¸¤ä¸ªä¾åï¼
<input type="checkbox" id="test" abc="" />
$(function(){
el = $("#test");
console.log(el.attr("style")); //undefined
console.log(el.prop("style")); //CSSStyleDeclaration对象
console.log(document.getElementById("test").style); //CSSStyleDeclaration对象
});
1ãel.attr(âstyleâ)è¾åºundefinedï¼å 为attræ¯è·åçè¿ä¸ªå¯¹è±¡å±æ§èç¹çå¼ï¼å¾æ¾ç¶æ¤æ¶æ²¡æè¿ä¸ªå±æ§èç¹ï¼èªç¶è¾åºundefined
2ãel.prop(âstyleâ)è¾åºCSSStyleDeclaration对象ï¼å¯¹äºä¸ä¸ªDOM对象ï¼æ¯å ·æåççstyle对象å±æ§çï¼æ以è¾åºäºstyle对象
3ãè³äºdocument.getElementById(âtestâ).styleåä¸é¢é£æ¡ä¸æ ·
el.attr("abc","")
console.log(el.attr("abc")); www.hbbz.com //
console.log(el.prop("abc")); //undefined
é¦å ç¨attræ¹æ³ç»è¿ä¸ªå¯¹è±¡æ·»å abcèç¹å±æ§ï¼å¼ä¸ºï¼å¯ä»¥çå°htmlçç»æä¹åäº
1ãel.attr(âabcâ)è¾åºç»æ为ï¼åæ£å¸¸ä¸è¿äº
2ãel.prop(âabcâ)è¾åºundefinedï¼å 为abcæ¯å¨è¿ä¸ªçå±æ§èç¹ä¸ï¼æ以éè¿propæ¯åä¸å°ç