[jQuery原理] jQuery属性操作相关方法

属性操作相关方法

• attr()

设置或者获取元素的属性节点值

attr: function (attr, value) {
	// 1.判断是否是字符串
	if(njQuery.isString(attr)){
		// 判断是一个字符串还是两个字符串
		if(arguments.length === 1){
			return this[0].getAttribute(attr);
		}else{
			this.each(function (key, ele) {
				ele.setAttribute(attr, value);
			});
		}
	}
	// 2.判断是否是对象
	else if(njQuery.isObject(attr)){
		var $this = this;
		// 遍历取出所有属性节点的名称和对应的值
		$.each(attr, function (key, value) {
			// 遍历取出所有的元素
			$this.each(function (k, ele) {
				ele.setAttribute(key, value);
			});
		});
	}
	return this;
},

 
 

• prop()

设置或者获取元素的属性值

prop: function (attr, value) {
	// 1.判断是否是字符串
	if(njQuery.isString(attr)){
		// 判断是一个字符串还是两个字符串
		if(arguments.length === 1){
			return this[0][attr];
		}else{
			this.each(function (key, ele) {
				ele[attr] = value;
			});
		}
	}
	// 2.判断是否是对象
	else if(njQuery.isObject(attr)){
		var $this = this;
		// 遍历取出所有属性节点的名称和对应的值
		$.each(attr, function (key, value) {
			// 遍历取出所有的元素
			$this.each(function (k, ele) {
				ele[key] = value;
			});
		});
	}
	return this;
},

 
 

• css()

设置获取样式

css: function (attr, value) {
	// 1.判断是否是字符串
	if(njQuery.isString(attr)){
		// 判断是一个字符串还是两个字符串
		if(arguments.length === 1){
			return njQuery.getStyle(this[0], attr);
		}else{
			this.each(function (key, ele) {
				ele.style[attr] = value;
			});
		}
	}
	// 2.判断是否是对象
	else if(njQuery.isObject(attr)){
		var $this = this;
		// 遍历取出所有属性节点的名称和对应的值
		$.each(attr, function (key, value) {
			// 遍历取出所有的元素
			$this.each(function (k, ele) {
				ele.style[key] = value;
			});
		});
	}
	return this;
},

 
 

• val()

获取设置value的值

val: function (content) {
	if(arguments.length === 0){
		return this[0].value;
	}else{
		this.each(function (key, ele) {
			ele.value = content;
		});
		return this;
	}
},

 
 

• hasClass()

判断元素中是否包含指定类

hasClass: function (name) {
	var flag = false;
	if(arguments.length === 0){
		return flag;
	}else{
		this.each(function (key, ele) {
			// 1.获取元素中class保存的值
			var className = " "+ele.className+" ";
			// 2.给指定字符串的前后也加上空格
			name = " "+name+" ";
			// 3.通过indexOf判断是否包含指定的字符串
			if(className.indexOf(name) != -1){
				flag = true;
				return false;
			}
		});
		return flag;
	}
},

 
 

• addClass()

给元素添加一个或多个指定的类

addClass: function (name) {
	if(arguments.length === 0) return this;
	
	// 1.对传入的类名进行切割
	var names = name.split(" ");
	// 2.遍历取出所有的元素
	this.each(function (key, ele) {
		// 3.遍历数组取出每一个类名
		$.each(names, function (k, value) {
			// 4.判断指定元素中是否包含指定的类名
			if(!$(ele).hasClass(value)){
				ele.className = ele.className + " " + value;
			}
		});
	});
	return this;
},

 
 

• removeClass()

删除元素中一个或多个指定的类

removeClass: function (name) {
	if(arguments.length === 0){
		this.each(function (key, ele) {
			ele.className = "";
		});
	}else{
		// 1.对传入的类名进行切割
		var names = name.split(" ");
		// 2.遍历取出所有的元素
		this.each(function (key, ele) {
			// 3.遍历数组取出每一个类名
			$.each(names, function (k, value) {
				// 4.判断指定元素中是否包含指定的类名
				if($(ele).hasClass(value)){
					ele.className = (" "+ele.className+" ").replace(" "+value+" ", "");
				}
			});
		});
	}
	return this;
},

 
 

• toggleClass()

没有则添加,有则删除

toggleClass: function (name) {
	if(arguments.length === 0){
		this.removeClass();
	}else{
		// 1.对传入的类名进行切割
		var names = name.split(" ");
		// 2.遍历取出所有的元素
		this.each(function (key, ele) {
			// 3.遍历数组取出每一个类名
			$.each(names, function (k, value) {
				// 4.判断指定元素中是否包含指定的类名
				if($(ele).hasClass(value)){
					// 删除
					$(ele).removeClass(value);
				}else{
					// 添加
					$(ele).addClass(value);
				}
			});
		});
	}
	return this;
}