//属性操作相关方法:
dQuery.prototype.extend({
attr:function(attr,value){
//1.判断是否是字符串
if(dQuery.isString(attr)){
//判断是一个字符还是两个字符
if(arguments.length === 1){
return this[0].getAttribute(attr) //一个参数直接返回属性值
}else{
this.each(function(key,ele){ //遍历前面元素
//给元素添加属性
ele.setAttribute(attr,value);
})
}
}
//2.判断是否是对象
if(dQuery.isObject(attr)){
var $this = this;
//遍历取出所有属性节点的名称和对应的值
$.each(attr,function(key,value){
//遍历取出所有的元素
$this.each(function(k,ele){
ele.setAttribute(key,value);
})
})
}
return this;
},
//attr操作属性节点,prop操作属性 属性节点就是元素的attributes
//注意属性要去控制台 sources watch中查找
prop:function(attr,value){
//1.判断是否是字符串
if(dQuery.isString(attr)){
//判断是一个字符还是两个字符
if(arguments.length === 1){
return this[0][attr];
}else{
this.each(function(key,ele){ //遍历前面元素
//给元素添加属性
ele[attr] = value; //操作属性
})
}
}
//2.判断是否是对象
if(dQuery.isObject(attr)){
var $this = this;
//遍历取出所有属性节点的名称和对应的值
$.each(attr,function(key,value){
//遍历取出所有的元素
$this.each(function(k,ele){
ele[key] = value;
})
})
}
return this;
},
//与prop雷同
css:function(attr,value){
//1.判断是否是字符串
if(dQuery.isString(attr)){
//判断是一个字符还是两个字符
if(arguments.length === 1){
return dQuery.getStyle(this[0],attr);
}else{
this.each(function(key,ele){ //遍历前面元素
ele.style[attr] = value;
})
}
}
//2.判断是否是对象
if(dQuery.isObject(attr)){
var $this = this;
//遍历取出所有属性节点的名称和对应的值
$.each(attr,function(key,value){
//遍历取出所有的元素
$this.each(function(k,ele){
ele.style[key] = value;
})
})
}
return this;
},
//这个方法利用的原理就是input不仅有个属性节点叫value,同时还有个属性也叫value
//利用属性就可以实现value的实时更新
val:function(content){
if(arguments.length === 0){
//没有传参
return this[0].value;
}else{
this.each(function(key,ele){
ele.value = content;
});
return this;
}
},
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){
//indexOf判断会判断到aabb中的bb这种情况,因此需要加空格
flag = true; //如果在这里直接返回true代表each继续循环,所以需要用flag
return false;
}
})
return flag;
}
},
addClass:function(name){
//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:function(name){
//没传参就删除指定元素所有class
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)){
//同理加空格匹配 将其中的value替换为空
ele.className = (" "+ele.className+" ").replace(" "+value+" ","");
}
})
})
}
return this;
},
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;
}
})
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
//attr方法:
//console.log($("span").attr("id","a")); //两个参数
//console.log($("span").attr("class")); //一个参数
// $("span").attr({ //对象
// "class":"123",
// "name":"666"
// });
//prop方法:
//console.log($("span").prop("class","dgg"))
//css:
//console.log($("div").css("height",'100px'));
//val:
//console.log($("input").val("新设的"))
//addClass:会返回this方便链式编程,如果已有指定类就不添加
//console.log($("div").addClass("abc"))
//removeClass:
//console.log($("div").removeClass("aa"))
//toggleClass:
//console.log($("div").toggleClass("bb"))
//console.log($("div").toggleClass())
}
//on:
// $(".btn0").on("click",function(){
// alert("click1");
// })
// $("button").on("click",function(){
// alert("click2");
// })
//off:
//1.不传参,会移出所有事件
//$("button").off();
//2.传递一个参数,会移除对应类型所有事件
//$("button").off("click");
//3.传递两个参数,会移除对应类型对应事件
//$("button").off("click",test1);
//clone:
// $btn1 = $(".btn0").clone(true);
// console.log($btn1);
// $(".bb").append($btn1)
</script>