其实以前我偷偷学习正则表达式的时候，写过一个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. Hibernate开始上手总结

    1,导入hibernate 的jar包,c3p0jar包 2,创建和表关联的实体类,创建关联实体类的配置文件 package com.entity; public class News { priva ...

  2. 夺命雷公狗mongodb之----mongodb---1---的下载，安装，连接

    首先登录mongodb的官方网站即可进行下载: https://www.mongodb.com/download-center?jmp=nav#community 然后到wamp目录下创建一个mong ...

  3. 通过restore database时重命名数据库rename database

    backup database testdb to disk='c:\testdb_ful.bak' with compression backup log testdb to disk='c:\te ...

  4. 各种类型的Writable（Text、ByteWritable、NullWritable、ObjectWritable、GenericWritable、ArrayWritable、MapWritable、SortedMapWritable）转

    java原生类型 除char类型以外,所有的原生类型都有对应的Writable类,并且通过get和set方法可以他们的值. IntWritable和LongWritable还有对应的变长VIntWri ...

  5. HTTP请求流程（一）----流程简介

    最近一直在研究如何让asp.net实现上传大文件的功能,所以都没怎么写技术类的文章了.可惜的是至今还没研究出来,惭愧~~~.不过因为这样,也了解了一下http消息请求的大致过程.我就先简单介绍下,然后 ...

  6. sql数据库(资料库)的基本操作

    1 Character Set与Collation 任何资讯技术在处理资料的时候,如果只是单纯的数值和运算,那就不会有太复杂的问题:如果处理的资料是文字的话,就会面临世界上各种不同语言的问题.以资料库 ...

  7. access数据库导入Oracle

    1.对着当前的表右击->导出->选择下面的保存类型为"ODBC数据库"找一个路径输入文件名2.将x导出到x,点击->确定3.在弹出的对话框中DSN名称,点击-&g ...

  8. jdk8飞行记录器配置

    jdk8提供了jmc工具,应该比visualvm厉害吧 下面贴一份tomcat的配置,自己留个备份,把下面的内容粘贴到tomcat setenv.sh就可以了 nowday=`date +%Y%m%d ...

  9. linux下配置环境变量【原创】

    用户目录下的.profile, 你只需要在用户目录下,创建bin目录,在里面放入你想要执行的可执行文件,就可以在命令行下就可以使用了 # ~/.profile: executed by the com ...

  10. （转）java线程安全问题之静态变量、实例变量、局部变量

    java多线程编程中,存在很多线程安全问题,至于什么是线程安全呢,给出一个通俗易懂的概念还是蛮难的,如同<java并发编程实践>中所说: 写道 给线程安全下定义比较困难.存在很多种定义,如 ...