其实以前我偷偷学习正则表达式的时候，写过一个getbyclass的方法，最近翻了翻到处都是错，或者好多重复的，没有用的 代码，于是显得没事我就把这个精简了一下，其实这个方法现在我觉得也是有问题的，问题在于我不知道原生的getElementsByClassName获取元素后生产的是不是数组，不管这个到不是重点，以后有时间了我在验证一下就可以了，另外我发现css是区分大小写的，看来没事看看正则还是能涨很多知识的，因为我感觉这次简化的时候收获比较大，于是我决定把这次也简化记录下来，反正记录不花钱。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>getbyclass</title>

<style>

.a{ color:green!important;}

</style>

</head>

<body>

<ul id="oUl">

    <li class="A">111111111111111111111</li>

    <li class="as dfd">222222222222222222222</li>

    <li class="asd ad">333333333333333333333</li>

    <li class="sdfsd dfd 22df">444444444444444444444</li>

    <li class="jhasd gksdj">555555555555555555555</li>

    <li class="asd dfgf b as era">666666666666666666666</li>

    <li class="fgfa as efgf5 fghf2asdf">777777777777777777777</li>

</ul>

</body>

</html>

<script type="text/javascript">

var oUl=document.getElementById("oUl");

var aLi=document.getElementsByTagName("li");

var as=getbyclass("as",oUl);

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

    as[i].style.color="red";

}

function getbyclass(oClass,Oparent){

    var oParent=oParent||document;

    if(Oparent.getElementsByClassName){

        return Oparent.getElementsByClassName(oClass)

    }else{

        var re=[];

        var reg=new RegExp("\\b"+oClass+"\\b")

        var ch=oParent.getElementsByTagName("*");

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

            var str=ch[i].className;

            if(reg.test(str)){

                re.push(ch[i]);

            }

        }

        return re;

    }

}

</script>

getbyclass的更多相关文章

  1. 原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 封装getByClass

    方法一:(普通版),获取单一的class: function getByClass(oParent, sClass) { var aResult = []; var aEle = oParent.ge ...

  4. 正则版----getByClass函数

    function getByClass(oParent,sClass){ var arr = []; var aEle = oParent.getElementsByTagName('*'); //v ...

  5. js中getByClass()函数

    js中getByClass()函数进化史 对于js来说,我想每一个刚接触它的人都应该会抱怨:为什么没有一个通过class来获取元素的方法.尽管现在高版本的浏览器已经支持getElementsByCla ...

  6. js getByClass函数封装

    function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; v ...

  7. js 中class选择器，addClass，removeClass，hasClass，toggleClass，getByClass

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. 原生JS编写getByClass、addClass、removeClass、hasClass

    前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...

  9. 封装getByClass（JS获取class的方法封装为一个函数）

    获取方法一(普通版) 获取单一的class: function getByClass(oParent, sClass) {//两个形参,第一个对象oParent 第二个样式名class var aEl ...

随机推荐

  1. springmvc转发与重定向

    摘自http://elf8848.iteye.com/blog/875830 (1)我在后台一个controller跳转到另一个controller,为什么有这种需求呢,是这样的.我有一个列表页面,然 ...

  2. android studio 自用快捷键方案

    自用改建方案,一切为了更加顺手 以windows平台为例,为了清晰明了,字母键盘都以大写注明 代码篇 格式化代码            ctl+alt+L 快速修复               alt ...

  3. Install Hive

    一.Hive将元数据存储在RDBMS中,有三种模式可以连接到数据: 1.single User Mode:此模式连接到一个In-memory的数据库Derby,一般用于Unit Test. 2.Mul ...

  4. 25、oracle（一）

    1)了解oracle背景,概念和特点 2)掌握oracleSQL对单表各种查询操作 3)掌握oracleSQL中函数的使用 4)掌握数值型number,字符串型varchar2,日期型date,条件判 ...

  5. 对页面制定区域进行打印,以及打印不显示页脚URL的方法

    第一种方式 - 此种方式简单易用,但不能进行页面设置,会在底部显示页面的URL地址. 打印命令:只需在页面上的按钮事件调用这段JS代码 javascript:window.print(); ===== ...

  6. shell脚本中变量$$、$0等的含义

    $0 这个程式的执行名字$n 这个程式的第n个参数值,n=1..9$* 这个程式的所有参数,此选项参数可超过9个.$# 这个程式的参数个数$$ 这个程式的PID(脚本运行的当前进程ID号)$! 执行上 ...

  7. myeclipse 常用快捷键总结

    1 shift+enter 不管鼠标在当前行的什么位置,重新开启一行(向下) 2 shift+ctrl+enter 不管鼠标在当前行的什么位置,重新开启一行(向上) 3 Ctrl+D     删除一行 ...

  8. [HTML]页面间传值的五种方法

    一.QueryString传值:1. 这是最简单的传值方式,但缺点是传的值会显示在浏览器的地址栏中且不能传递对象,只适用于传递简单的且安全性要求不高的整数值,例如: 2. 新建一个WEB项目,添加一个 ...

  9. 网络编程中获取域名和id的方法

    package com.lanqiao.java.test; import java.net.InetAddress;import java.net.UnknownHostException; pub ...

  10. 验证码识别--type7

    验证码识别--type7 一.干扰分析 有黑色边框,然后点干扰,线干扰 去边框 去点干扰 变成这样的结果,方便运算吗?也可以多种方式联合起来运算的.我相信在很多情况下,都可能会遇到类似的结果.我们人类 ...