JS封装通过className获取元素的函数示例_javascript技巧

本文实例讲述了JS封装通过className获取元素的函数。分享给大家供大家参考,具体如下:

<div id="box">
  <div class="star"></div>
  <div class="star"></div>
  <div class="app"></div>
  <p class="star"></p>
  <p class="ar"></p>
</div>

假设要获取所有.star元素

function getByClass(oparent,sClass){
  var aEle=oparent.getElementsByTagName("*");
  var aResult=[];
  var i;
  for(i=0;i<aEle.length;i++){
    if(aEle[i].className==sClass){
      aResult.push(aEle[i]);
    }
  }
  return aResult;
};
window.onload=function(){
  var box=document.getElementById("box");
  var star=getByClass(box,"star");
};

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 函数
, 封装
, 元素
, 获取
classname
javascript classname、js中getclassname封装、javascript脚本示例、javascript示例、javascript代码示例,以便于您获取更多的相关知识。

时间: 2024-10-02 21:59:38

JS封装通过className获取元素的函数示例_javascript技巧的相关文章

js正确获取元素样式详解_javascript技巧

在说js获取元素样式之前,简单地谈一下样式 样式分三种 外部样式 External Style Sheet 以CSS为扩展名的文件(又称为"超文本样式表"文件),它的作用范围可以是多张网页,或整个网站,甚至不同的网站.与网页链接后,才能应用. 嵌入式样式 internal Style Sheet 包含在网页内部的样式设置,它的作用范围仅限于嵌入的网页. 内联式样式 inline Style 在HTML文档中,内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中,作为其HTM

JS getStyle获取最终样式函数代码_javascript技巧

复制代码 代码如下: #flower { width:100px; font-size:12px; float:left; opacity:0.5; filter:alpha(opacity=50); } 定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性 <div id="flower" >...</div> getStyle函数: 这里用到了三个原型扩展 String.p

JS中setTimeout的巧妙用法前端函数节流_javascript技巧

什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等等事情,那么这时候窗口缩放的时候,有可能连续发多个请求,这并不是我们想要的,或者是说我们常见的鼠标移入移出tab切换效果,有时候连续且移动的很快的时候,会有闪烁的效果,这时候我们就可以使用函数节流来操作.大家都知道,DOM的操作会很消耗或影响性能的,如果是说在窗口缩放的时候,为元素绑定大量的dom操作的话,会引发大量的连续计算,比如

JavaScript中常见获取元素的方法汇总_javascript技巧

常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象.使用的时候请注意区分大小写. 它是document对象特有的函数,只能通过其来调用该方法.其使用的方法如下: 复制代码 代码如下: document.getElementById('demo') //demo是元素对应的ID 该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用. ge

js封装可使用的构造函数继承用法分析_javascript技巧

本文实例讲述了js封装可使用的构造函数继承用法.分享给大家供大家参考.具体如下: 先来看下面这段代码 (YUI)库所用的方法: 复制代码 代码如下: function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prot

JS/jQ实现免费获取手机验证码倒计时效果_javascript技巧

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

js只执行1次的函数示例_javascript技巧

在我们日常开发的时候,经常会碰到一种这样的情况:想让某个函数只执行一次,特别是在一些循环或定时执行的时候. 废话不多说,直接上代码: function runOnce(fn, context) { //控制让函数只触发一次 return function () { try { fn.apply(context || this, arguments); } catch (e) { console.error(e);//一般可以注释掉这行 } finally { fn = null; } } } /

使用JS实现jQuery的addClass, removeClass, hasClass函数功能_javascript技巧

废话不多说,直接上代码 复制代码 代码如下: function addClass(obj, cls){     var obj_class = obj.className,//获取 class 内容.     blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.     added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.     obj

JS删除数组元素的函数介绍_javascript技巧

split将字符串转为数组并输出的代码: 复制代码 代码如下: <script language="javascript">    function spli(){             datastr="2,2,3,5,6,6";         var str= new Array();     str=datastr.split(",");           for (i=0;i<str.length ;i++ )