属性操作相关方法
- 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;
}