jQuery中样式和属性模块简单分析

Posted 2020-08-11 萧诺

1、行内样式操作

• 目标：扩展框架实现行内样式的增删改查

1.1 创建 css 方法

• 目标：实现单个样式或者多个样式的操作

1.1.1 css方法 -获取样式

• 注意：使用 style 属性只能获取行内样式
• 解释：获取类或者外部样式文件中设置的样式要使用
  • W3C规范：window.getComputedStyle(dom)
  • IE中 ：dom.currentStyle

itcast.fn.extend({
    css: function(name, value) {
        return window.getComputedStyle(this[0])[name];
    }
});

1.1.2 css方法 -设置样式

• 解释：两个参数表示设置样式

itcast.fn.extend({
    css: function(name, value) {
        if(value === undefined) {
            return window.getComputedStyle(this[0])[name];
        }

        return this.each(function() {
            this.style[name] = value;
        });
    }
});

1.1.3 css方法 -对象字面量参数

• 解释：参数为对象字面量同时设置多个样式属性

itcast.fn.extend({
    css: function(name, value) {
        if(value === undefined) {
            if(typeof name === "object") {
                return this.each(function() {
                    for(var k in name) {
                        this.style[k] = name[k];
                    }
                });
            }

            return window.getComputedStyle(this[0])[name];
        } else {
            return this.each(function() {
                this.style[name] = value;
            });
        }
    }
});

2、类操作

• 目标：扩展框架实现类样式的增删改查

2.1 hasClass方法 -判断有没有类

• 注意：判断匹配的所有元素中是否具有指定的类

itcast.fn.extend({
    hasClass: function(cName) {
        var hasCName = false;
        // 判断第一个元素
        itcast.each(this[0].className.split(" "), function(i, v) {
            if(v === cName) {
                hasCName = true;
                return false;
            }
        });
        return hasCName;

        // 判断所有元素
        // this.each(function() {
        //     hasCName = (" " + this.className + " ")
        //                     .indexOf( " " + trim(cName) + " ") !== -1;
        //     if(hasCName) {
        //         hasCName = true;
        //         return false;
        //     }
        // });
        // return hasCName;
    }
});

2.2 addClass方法 -添加类

itcast.fn.extend({
    addClass: function(cName) {
        return this.each(function() {
            var className = this.className;
            className += " " + cName;
            this.className = itcast.trim(className);
        });
    }
});

2.3 removeClass -移除类

itcast.fn.extend({
    removeClass: function(cName) {
        return this.each(function() {
            var cArr = this.className.split(" "),
                i, len = cArr.length;

            for(i = 0; i < len; i++) {
                if(cArr[i] === cName) {
                    break;
                }
            }

            cArr.splice(i, 1);
            this.className = cArr.join(" ");

            // 2 replace 替换
            // var className = " " + this.className + " ";
            // this.className = itcast.trim(className.replace(" " + cName + " ", " "));

            // 处理多个相同类名的情况
            // var clsName = " " + this.className.trim() + " ";
            // while(clsName.indexOf(" " + name + " ") > -1) {
            //    clsName = clsName.replace(" " + name + " ", " ");
            // }
            // this.className = clsName.trim();
        });
    }
});

2.4 toggleClass -切换类

itcast.fn.extend({
    toggleClass: function(cName) {
        if(this.hasClass(cName)) {
            this.removeClass(cName);
        } else {
            this.addClass(cName);
        }
        return this;
    }
});

3、属性模块

3.1 演示jQuery中的相关方法

• 目标：复习jQuery中常用的属性操作方法
• 内容：attr / val / html / text
• 特点：
  • 设置：给所有匹配到的元素设置
  • 读取：只获取第一个元素的属性或内容

3.2 attr方法 -属性操作

• 注意：setAttribute 只能用来设置默认值。要访问或修改当前值，使用 elt[name] = value 代替

itcast.fn.extend({
    attr: function(name, value) {
        if(value === undefined) {
            return this[0].getAttribute(name);
        }

        return this.each(function() {
            // this.setAttribute(name, value);
            this[name] = value;
        });
    }
});

• 案例：随机切换图片

3.3 表单值操作

itcast.fn.extend({
    val: function(value) {
        if(value === undefined) {
            return this[0].value;
        }

        return this.each(function() {
            this.value = value;
        });
    }
});

3.4 html 和 text操作

3.4.1 html 操作

itcast.fn.extend({
    html: function(html) {
        if(html === undefined) {
            return this[0].innerHTML;
        }

        return this.each(function() {
            this.innerHTML = html;
        });
    }
});

3.4.2 text 操作

• 注意：innerText是非标准属性

itcast.extend({
    getInnerText: function(dom) {
        var textArr;
        if(dom.innerText !== undefined) {
            return dom.innerText;
        }
        textArr = getNodeText(dom);
        return textArr.join("");

        function getNodeText(node) {
            var cNodes = node.childNodes,
                len = cNodes.length, i, cNode,
                arr = [];

            for(i = 0; i < len; i++) {
                cNode = cNodes[i];
                if(cNode.nodeType === 3) {
                    arr.push(cNode.nodeValue);
                } else if(cNodes.nodeType === 1) {
                    arr = arr.concat( getNodeText(cNode) );
                }
            }
            return arr;
        }
    },
    setInnerText: function(dom, str) {
        if("innerText" in dom) {
            dom.innerText = str;
        } else {
            dom.innerHTML = "";
            dom.appendChild( document.createTextNode(str) );
        }
    }
});

itcast.fn.extend({
    text: function(text) {
        if(text === undefined) {
            return itcast.getInnerText(this[0]);
        }

        return this.each(function() {
            itcast.setInnerText(this, text);
        });
    }
});