jQuery原理-属性操作相关方法

attr方法

• 传递一个参数，返回第一个元素属性节点的值
• 传递两个参数，代表设置所有元素属性节点的值并且返回值就是方法调用者
• 传递一个对象，代表批量设置所有元素属性节点的值

attr : function(attr,value) {
    // 判断是否为字符串
    if(xqQuery.isString(attr)){
        // 判断传入的是一个参数还是两个参数
        if(arguments.length === 1){
            // 一个参数直接返回第一个元素的属性值
            return this[0].getAttribute(attr)
        }else{
            // 两个参数设置元素的属性值
            this.each(function (key, ele) {
                ele.setAttribute(attr,value)
            })
        }
    }
    // 判断是否为对象
    else if(xqQuery.isObject(attr)){
        let $this = this
        xqQuery.each(attr,function (key, value) {
            $this.each(function (k, ele) {
                ele.setAttribute(key,value)
            })	
        })
    }
    return this
}

prop方法

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

• 传递一个参数，返回第一个元素属性的值
• 传递两个参数，代表设置所有元素属性的值并且返回值就是方法调用者
• 传递一个对象，代表批量设置所有元素属性的值

prop : function (attr, value) {
    // 判断是否为字符串
    if(xqQuery.isString(attr)){
        // 判断传入的是一个参数还是两个参数
        if(arguments.length === 1){
            // 一个参数直接返回第一个元素的属性值
            return this[0][attr]
        }else{
            // 两个参数设置元素的属性值
            this.each(function (key, ele) {
                ele[attr] = value
            })
        }
    }
    // 判断是否为对象
    else if(xqQuery.isObject(attr)){
        let $this = this
        xqQuery.each(attr,function (key, value) {
            $this.each(function (k, ele) {
                ele[key] = value
            })	
        })
    }
    return this
}

CSS方法

设置或者获取元素样式

• 传递一个参数，返回第一个元素指定的样式
• 传递两个参数，代表设置所有元素的样式 返回调用者
• 传递一个对象，代表批量设置所有元素的样式

css : function (attr, value) {
    if(xqQuery.isString(attr)){
        if(arguments.length === 1){
            return xqQuery.getStyle(this[0],attr)
        }else{
            this.each(function(key, ele) {
                ele.style[attr] = value
            })
        }
    }
    else if(xqQuery.isObject(attr)){
        let $this = this;
        $.each(attr, function (key, value) {
            $this.each(function (k, ele) {
                ele.style[key] = value
            })
        })
    }
}

val方法

获取元素value值

• 不传参数，返回第一个元素的value值
• 传参，把指定元素的value值设置为传入的值

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

hasClass方法

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

hasClass : function (name) {
    let flag = false;
    if(arguments.length === 0){
        return flag;
    }else{
        this.each(function (key, ele) {
            // 获取元素中class的值
            let className = " " + ele.className + " ";
            // 给传入的字符串加上空格
            name = " " + name + " ";
            if(className.indexOf(name) != -1){
                flag = true;
                return false;
            }
        });
        return flag
    }
}

addClass方法

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

addClass : function (name) {
    if(arguments.length === 0) return this;
    // 对传入的类名以空格进行切割
    let names = name.split(" ");
    // 遍历取出所有元素
    this.each(function (key, ele) {
        //遍历取出每一个类名
        $.each(names, function (k, v) {
            // 判断指定和元素中是否包含指定的类名
            if(!$(ele).hasClass(v)){
                ele.className = ele.className + " " + v
            }
        });
    });
    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;
}

togglcClass方法

判断元素是否有指定的类，有则删除没有则添加

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;
}