博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 源码:属性
阅读量:7163 次
发布时间:2019-06-29

本文共 5184 字,大约阅读时间需要 17 分钟。

对元素属性的操作的实例方法。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;			}		}	}

 

转载于:https://www.cnblogs.com/hgonlywj/p/4870426.html

你可能感兴趣的文章