首页 > 代码库 > jQuery中样式和属性模块简单分析

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

2024-08-14 23:18:17   220人阅读

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

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


联系
我们