对元素属性的操作的实例方法。jQuery.fn.extend({ attr //调用工具的方法 attr removeAttr //调用工具的方法 removeAttr prop //调用工具的方法 prop removeProp //调用工具的方法 addClass removeClass toggleClass hasClass val});工具方法。jQuery.extend({ valHooks attr removeAttr attrHooks propFix prop propHooks});例子 : 添加属性 $('#div1').attr('title', 'dongdong'); alert($('#div1').attr('title'));设定属性 $('#div1').prop('title', 'dangdang'); alert($('#div1').prop('title'));原生的js设定, var oDiv = document.getElementById('#div1'); oDiv.setAttribute*('title', 'hello');或者使用 oDiv.title = 'hg'; oDiv['title'] = 'hg'; 传参可以用这个。这里 attr-->setAttribute poro-->[''] 或者 . prop 和 attr 还是有很多不一样的地方。一般用attr用的多一些。// 删除 removeProp(attr); // 无法删除id属性,其他可以 removeAttr(attr); // 可以干掉id这种,jQuery 支持 $('input').attr('checked', true); //选中当选框。通过hooks处理的。解决了兼容,但是个人觉得还是不要这么写还是用 $('input').attr('checked', 'checked'); //好一些,保持了语音话,和原生的习惯,写js多了,看了很多框架,最大的感觉,就是原生,框架都是衍生品。都是美丽的房子,但是在美丽,也需要原生的砖头去盖。能用原生,就用原生。只要有可能,就不用框架完成。removeAttr(string); //可以传入参数。比日 aa bb cc。那么就字符串分割,然后依次干掉。源码: attr: function( elem, name, value ) { var hooks, ret, nType = elem.nodeType; // don't get/set attributes on text, comment and attribute nodes // 不存在,就返回, 节点类型 文本,注视,属性。这几个类型无法设定属性。只有元素节点可以。 if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { return; } // Fallback to prop when attributes are not supported // 有些元素不支持属性操作的时候, // core_strundefined 是undefiend。// $(document).attr(); document 和 window 是无法设定这种的。// 但是,支持 obj['attr'] 这种类型的绑定。 if ( typeof elem.getAttribute === core_strundefined ) { return jQuery.prop( elem, name, value ); //转换成prop代替attr } // All attributes are lowercase // Grab necessary hook if one is defined // isXMLDoc 第一次见。是sizzle的方法,sizzle.isXML,判断当前节点是不是xml下的节点,是酒返回真 if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) { name = name.toLowerCase(); // attrHooks set 和 get 两种,兼容。返回值存在就兼容,不存在就兼容。 hooks = jQuery.attrHooks[ name ] || // jQuery.expr 是sizzle.selectors // "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped", // 就对上面这一串进行处理 ( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook ); } if ( value !== undefined ) { if ( value === null ) { jQuery.removeAttr( elem, name ); // hooks 存在, "set" 存在,并且不是undefined,就是做好了操作。 } else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { return ret; // 如果是undefined, 应该就执行这种设定。 } else { elem.setAttribute( name, value + "" ); return value; } } else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { return ret; } else { // jQuery.find 就是 sizzle的对象。 // sizzle.attr()--->> getattr的方法。 在里面已经实现了,就直接复用就好了。 ret = jQuery.find.attr( elem, name ); // Non-existent attributes return null, we normalize to undefined return ret == null ? undefined : ret; } },attrHooks: 钩子机制,让我想想到了windows,向总当时写了一个很牛的钩子。看的我很心动啊。哈哈这里一看,就一个set,那么兼容就是就是指针对设定。针对功能检测中的radio问题。 呃,具体细节不看了。。反正就是这个了。修复IE下面的bug attrHooks: { type: { set: function( elem, value ) { if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) { // Setting the type on a radio button after the value resets the value in IE6-9 // Reset value to default in case type is set after value during creation var val = elem.value; elem.setAttribute( "type", value ); if ( val ) { elem.value = val; } return value; } } } },干掉属性。 removeAttr: function( elem, value ) { var name, propName, i = 0, attrNames = value && value.match( core_rnotwhite ); if ( attrNames && elem.nodeType === 1 ) { while ( (name = attrNames[i++]) ) { propName = jQuery.propFix[ name ] || name; // Boolean attributes get special treatment (#10870) // jQuery.expr.match 这里有调用了sizzle中的方法。去判断是否有哪些属性。就进入,然后干掉[]的属性。 if ( jQuery.expr.match.bool.test( name ) ) { // Set corresponding property to false elem[ propName ] = false; } elem.removeAttribute( name ); //原生的js } } },先存入nodetype,然后判断是不是xml。不是开始兼容模式,是的话,进用xml的模式,不考虑兼容性。我都没用过xml在js里面,写其他语言用xml做个配置文件,做解析用。其实xml理解为语义话的标签就好了。实际上我感觉是解析用的。用个txt文件也一样可以做, 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 ) { return hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ? ret : ( elem[ name ] = value ); } else { return hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ? ret : elem[ name ]; } },// 设定光标的切换。table建。// html有个属性,tabindex = 'number'; 可以改变国标的切换的顺序。// rfocusable = /^(?:input|select|textarea|button)$/i; // 正则表示。看看事什么框。都是可以获取光标的节奏的节点。 propHooks: { tabIndex: { get: function( elem ) { return elem.hasAttribute( "tabindex" ) || rfocusable.test( elem.nodeName ) || elem.href ? elem.tabIndex : -1; } } }