其实以前我偷偷学习正则表达式的时候,写过一个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. 夺命雷公狗—angularjs—24—extend继承对象

    我们的angularjs中也是给我们留下了方法来做继承的,那么他就是传授中的extend... 不过要如下所示,第二个参数是继承到第一个对象里面的... <!DOCTYPE html> & ...

  2. PAT乙级 1017. A除以B (20)

    1017. A除以B (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 本题要求计算A/B,其中A是不超过 ...

  3. Oracle中的rownum用法解析

    注意:rownum从1开始:  1.rownum按照记录插入时的顺序给记录排序,所以有order by的子句时一定要注意啊!  2.使用时rownum,order by字段是否为主键有什么影响?  3 ...

  4. 《zw版·delphi与halcon系列原创教程》zw版_THImagex控件函数列表

    <zw版·delphi与halcon系列原创教程>zw版_THImagex控件函数列表 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核心控件就是两 ...

  5. 鸟哥的linux私房菜学习记录之档案权限与目录配置

    在linux中可以通过ls来查看文件 如ls -al,可以看到类似以下的内容 给个例子来理解下 在目录中如果只有r权限没有x权限无法进入该目录

  6. django models数据类型

    Django Models的数据类型 AutoField IntegerField BooleanField true/false CharField maxlength,必填 TextField C ...

  7. 关于mac book 的启动选项

    苹果电脑是用EFI的,没有BIOS,唯一可以设置的是开机的启动选项.可以在基于 Intel 的 Mac 电脑上使用下列启动键组合启动时按住 C 键——从可启动 CD 或 DVD 光盘启动,如随机附带的 ...

  8. 利用arcigs制作出 源解析要用的ASCII文件

    准备:1.确定好模拟区域范围,精度,行列数          2.确定好源解析的城市规划 思路: 1.全国省级图+本地市县图-->合成一张区域图(联合) 合成之后,添加一个字段,一个数字类型字段 ...

  9. Java多线程中的进程,线程,并行,并发

    2:什么是进程? 通过任务管理器我们就看到了进程的存在. 而通过观察,我们发现只有运行的程序才会出现进程. 进程:就是正在运行的程序. 进程是系统进行资源分配和调用的独立单位.每一个进程都有它自己的内 ...

  10. 使用jprofiler8远程监控weblogic的配置方法

    jprofiler8的注册码:L-Larry_Lau@163.com#36573-fdkscp15axjj6#25257 未完待续