javascript中获取class的简单实现


Posted in Javascript onJuly 12, 2016

js中没有获取class的办法,找了一些封装好的方法,这里整理一下

(1)先进行封装

//封装getClass 
      function getClass(tagName,className) //获得标签名为tagName,类名className的元素 
      { 
        if(document.getElementsByClassName) //支持这个函数 
        {    return document.getElementsByClassName(className); 
        } 
        else 
        {    var tags=document.getElementsByTagName(tagName);//获取标签 
          var tagArr=[];//用于返回类名为className的元素 
          for(var i=0;i < tags.length; i++) 
          { 
            if(tags[i].class == className) 
            { 
              tagArr[tagArr.length] = tags[i];//保存满足条件的元素 
            } 
          } 
          return tagArr; 
        } 
      }

(2)主体程序

<ul>
  <li class="dicTap">1</li>
  <li class="dicTap">2</li>
  <li class="dicTap">3</li>
  <li class="dicTap">4</li>
</ul>

(3)获取class为dicTap的所有li内容程序

window.onload = function()
{  var topMenus = getClass('li','dicTap');
  for(var i=0;i < topMenus.length; i++)
  {
    alert(topMenus[i].innerHTML);    
  }

}

(4)项目中实际应用

//点击的  自定义属性personid,打开详情页面并且进行跨页面传值 
      var dicTap = getClass('li','dicTap'); 
        for(var i=0;i <dicTap.length; i++) 
        { 
          dicTap[i].addEventListener('tap',function(){ 
            var personId=this.getAttribute("personid"); 
            localStorage.a=personId; 
            mui.openWindow({ 
            url: 'disciplineDetail.html', 
            id:'disciplineDetail' 
            }); 
          }) 
        } 
 
      //封装getClass 
      function getClass(tagName,className) //获得标签名为tagName,类名className的元素 
      { 
        if(document.getElementsByClassName) //支持这个函数 
        {    return document.getElementsByClassName(className); 
        } 
        else 
        {    var tags=document.getElementsByTagName(tagName);//获取标签 
          var tagArr=[];//用于返回类名为className的元素 
          for(var i=0;i < tags.length; i++) 
          { 
            if(tags[i].class == className) 
            { 
              tagArr[tagArr.length] = tags[i];//保存满足条件的元素 
            } 
          } 
          return tagArr; 
        } 
      }

以上这篇javascript中获取class的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
js实现图片懒加载效果
Jul 17 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
springMVC结合AjaxForm上传文件
Jul 12 #Javascript
require简单实现单页应用程序(SPA)
Jul 12 #Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 #Javascript
javascript中Date对象应用之简易日历实现
Jul 12 #Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 #Javascript
浅谈angularJS中的事件
Jul 12 #Javascript
深入剖析JavaScript面向对象编程
Jul 12 #Javascript
You might like
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python版的文曲星猜数字游戏代码
2013/09/02 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python实现二分查找算法实例
2015/05/26 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
出纳员岗位职责
2014/03/13 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
避暑山庄导游词
2015/02/04 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书