jQuery基本选择器模块

选择器模块

1、获取元素的基本操作

• 案例：给页面中的div和p设置边框样式

1.1 传统方式 -获取元素并设置样式

实现思路

• 1 通过 标签名 获取元素
• 2 遍历循环 设置样式

var dvs = document.getElementsByTagName("div"),

    ps  = document.getElementsByTagName("p"),

    i = 0, j = 0,

    dvLen = dvs.length,

    pLen = ps.length;

for(; i < dvLen; i++) {

    dvs[i].style.border = "1px solid red";

}

for(; j < pLen; j++) {

    ps[j].style.border = "1px solid red";

}

• 小结：传统方式存在的不足

1 代码冗余

2 没有实现复用

3 错误率高

4 效率低

5 性能不好

1.2 使用函数 -获取元素并设置样式

• 优势：函数的复用
• 注意：函数命名，达到 “顾名思义” 的效果

var getElmsByTag = function(tagName) {

    return document.getElementsByTagName(tagName);

};

var dvs = getElmsByTag("div");

var ps = getElmsByTag("p");

// for 循环遍历两次来设置样式

1.3 封装 each 函数

• 目标：只要是能用循环完成的操作 each 函数都能完成

1.3.1 使用 each 函数简化设置样式

// 1 将 for 循环封装成 each 函数

var each = function(arr) {

    for(var i = 0; i < arr.length; i++) {

        arr[i].style.border = "1px solid red";

    }

};

// 2 修改 each 函数的功能 实现修改任何样式

var each = function(arr, style, value) {

    for(var i = 0; i < arr.length; i++) {

        arr[i].style[ style ] = value;

    }

};

• 不足：只能修改样式

var arr = [1, 3, 5, 7, 10, 9, 8];

例如：求和、求最大值、查找某值的索引号 等等

写出以上练习，并找出其中相同点（抽象的能力）

1.3.2 重新封装each函数 -1（添加回调函数）

• 目标：在回调函数中能访问到数组中每一项和索引号（使用参数）

var each = function(arr, fn) {

    var i = 0,

        len = arr.length;

    for(;i < len; i++) {

        fn(i, arr[i]);

    }

};

1.3.3 重新封装each函数 -2（添加跳出循环）

• 目标：让循环的终止可控

var each = function(arr, fn) {

    var i = 0,

        len = arr.length;

    for(; i < len; i++) {

        if(fn(i, arr[i]) === false) {

            break;

        }

    }

};

1.3.4 重新封装each函数 -3（添加this支持）

• 目标：在函数内部使用 this 表示当前元素

var each = function(arr, fn) {

    var i = 0,

        len = arr.length;

    for(;i < len; i++) {

        if(fn.call(arr[i], i, arr[i]) === false) {

            break;

        }

    }

};

• 练习：使用封装好的each遍历元素设置样式

1.4 封装 getElmsByTag 函数（使用容器存储结果）

• 目标：调用方法获得任意个结果（心想事成）

1.4.1 重新封装 getElmsByTag 函数

var getElmsByTag = function(tagName, results) {

    results = results || []; // 设置默认值

    results.push.apply(results, document.getElementsByTagName(tagName));

    return results;

};

• 验证优化之后的 get 函数:

each(getElmsByTag("div", getElmsByTag("p")), function() {

    this.style.background = "green";

});

2、封装通用 get 函数 -通过基本选择器获取元素

• 思路：实现get函数的两种方式

1 在原来的函数中直接修改

2 写一个新的函数，如果要通过标签名获取，则直接调用 getElmsByTag

推荐使用第二种方式

原因：获取元素的函数可能有多个，例如：通过id获取的函数/通过标签名获取/通过类名获取

2.1 封装 id/className 函数

• 目标：封装函数实现通过 id 或者 类名 来获取元素

2.1.1 封装getElmById函数 -通过id获取元素

var getElmById = function(id, results) {

    results = results || [];

    results.push( document.getElementById(id) );

    return results;

};

2.1.2 封装getElmsByClsName函数 - 通过类名获取元素

var getElmsByClsName = function(clsName, results) {

    results = results || [];

    results.push.apply(results, document.getElementsByClassName(clsName));

    return results;

};

2.2 封装get函数

• 目标：通用函数能通过 id/类名/标签名 获取元素

var get = function(selector, results) {

    results = results || [];

    var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w-]+)|(\*))$/,

        m = rquickExpr.exec(selector);

    if(m) {

        if(m[1]) {

            results = getElmById(m[1], results);

        } else if(m[2]) {

            results = getElmsByClsName(m[2], results);

        } else {

            results = getElmsByTag(m[3] || m[4], results);

        }

    }

    return results;

};

3、实现兼容 getElementsByClassName 函数

• 目标：封装 className 函数兼容所有浏览器
• 问题：

1 方法存在兼容性，IE8 及以下的浏览器不支持此方法

2 如何判断浏览器不支持该方法

3 如何实现该方法

3.1 浏览器能力检测

• 注意：

1 能力只需要检测一次即可

2 能力检测当心函数重写问题

• 思路：

1 提供一个：support 对象

2 对象中提供与被检测方法同名的属性，其值为布尔值

3 在js被加载的时候，就进行能力判断且只判断一次，并将判断的结果进行存储

4 凡是要用到能力检测的地方直接使用该对象

var support = {};

support.getElementsByClassName = !!document.getElementsByClassName;

3.2 检测 getElementsByClassName（了解，不做要求）

• 目标：不仅判断有没有这个方法，还要判断能力是否符合要求

var support = {};

support.getElementsByClassName = function() {

    var isExist = false,

        tempDiv = null, tempClsName;

    isExist = !!document.getElementsByClassName;

    if(!isExist || typeof document.getElementsByTagName !== "funtion") {

        return false;

    }

    tempDiv = document.createElement("div");

    tempClsName = "itcast_" + Math.random();

    tempDiv.className = tempClsName;

    document.body.appendChild(tempDiv)

    isExist = document.getElementsByClassName(tempClsName)[0] === tempDiv;

    document.body.removeChild(tempDiv);

    return isExist;

}();

3.2.1 jQuery中的实现

support.getElementsByClassName = function() {

    // function getElementsByClassName() { [native code] }

    var rnative = /^[^{]+\{\s*\[native \w/;

    return rnative.test(document.getElementsByClassName);

}();

3.3 实现兼容 getElementsByClassName 函数

• 思路：

1 通过 标签名 获取到所有元素

2 遍历集合，通过判断元素的 className 属性，看下是否符合要求

3 符合要求的添加到 数组 中

4 将数组返回

• 技巧：类名两端加空格，然后使用indexOf判断代替for循环

var getElmsByClsName = function (className, results) {

    results = results || [];

    var allNodes, i, len, cNode;

    if(document.getElementsByClassName) {

        results.push.apply(results,

            document.getElementsByClassName(className));

    } else {

        allNodes = document.getElementsByTagName("*");

        for(i = 0, len = allNodes.length; i < len; i++) {

            cNode = allNodes[i];

            if((" " + cNode.className + " ")

                .indexOf(" " + className + " ") > -1) {

                results.push(cNode);

            }

        }

    }

    return results;

};