手撸jQuery源码：属性操作相关方法

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