zoukankan      html  css  js  c++  java
  • 封装getByClass(JS获取class的方法封装为一个函数)

    获取方法一普通版 获取单一的class:
    function getByClass(oParent, sClass) {//两个形参,第一个对象oParent 第二个样式名class
    var aEle = oParent.getElementsByTagName("*");//从对象里选择所有元素
    var aResult = [];//存放匹配出来结果的数组
    for (var i = 0; i < aEle.length; i++) {//遍历所有oParent元素里面的所有元素
    if (aEle[i].className == sClass) {//如果选出了的第i个元素等于传进来的参数的类名
    aResult.push(aEle[i]);//就把结果添加到数组里面
    }
    }
    return aResult; //返回数组
    }
     
    获取方法二完美版
     1、多个class获取—>正则表达式


    function getByClass(oParent, sClass) {
    var aEle = oParent.getElementsByTagName('*');
    var aResult = [];
    var re = new RegExp('\b' + sClass + '\b', 'i');//正则表达式,是单词分界处,

    for ( var i = 0; i < aEle.length; i++) {
    if (re.test(aEle[i].className)) {//test方法返回Boolean的值
    aResult.push(aEle[i]);
    }
    }

    return aResult;
    }

       2、 多个class获取—>数组:

     function getByClass(oParent, sClass) {
    var aResult = [];
    var aEle = oParent.getElementsByTagName('*');
    for (var i = 0; i < aEle.length; i++) {
    var arr = aEle[i].className.split(/s+/);
    for (var j = 0; j < arr.length; j++) {
    if (arr[j] == sClass) {
    aResult.push(aEle[i])
    }
    }
    }
    return aResult;
    };

    获取方法三(复杂版)
    function getClass(classname, obj) {//obj就是找的标签范围;  
    var obj = obj || document;//如果obj没有参数传进来的话就为假,就返回document;
    var arr = [];//设置一个数组来存储在ie下标签的className属性值等于类名的元素;
    if (document.getElementsByClassName) {//如果条件为真,就代表浏览器为火狐;
    return document.getElementsByClassName(classname)//火狐下面直接返回结果;
    } else {//不是火狐
    var alls = document.getElementsByTagName("*");//首先找到页面所有的标签;
    for (var i = 0; i < alls.length; i++) {
    if (checkclass(alls[i].className, classname)) {//1.1.回调函数判断类名,因为同一标签可能有多个类名;
    arr.push(alls[i])//1.3.如果是真的,就把这个元素推进数组里面;
    }
    }
    return arr;
    }
    }
    function checkclass(startclass, endclass) {//判断类名
    var arr = startclass.split(" ");//多个类名用空格分隔成不同元素的数组;
    for (var i = 0; i < arr.length; i++) {
    if (arr[i] == endclass) {//1.2.被分割的数组元素里面如果有一个等于classname就返回真;
    return true;
    }
    }
    return false;
    }
     
     
  • 相关阅读:
    C#编写最小花时隐藏为任务栏图标的Window appllication
    XML与HTML的结合
    敏捷思维-架构设计中的方法学(1)从方法论看架构设计
    敏捷思维-架构设计中的方法学(4)团队设计
    敏捷思维-架构设计中的方法学(2)架构设计的敏捷视图
    敏捷思维-架构设计中的方法学(5)简单设计
    hdu 1116(并查集+欧拉路判断)
    hdu 2145(最短路+排序)
    hdu 2377
    hdu 2962(最短路+二分)
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5268859.html
Copyright © 2011-2022 走看看