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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
vue input输入框关键字筛选检索列表数据展示
Oct 26 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
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
Opacity.js
2007/01/22 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
js操作二进制数据方法
2018/03/03 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
利用python实现数据分析
2017/01/11 Python
Python实现的建造者模式示例
2018/08/06 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Python定义函数实现累计求和操作
2020/05/03 Python
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
C# .NET面试题
2015/11/28 面试题
财务经理的岗位职责
2013/12/17 职场文书
高中生期末评语大全
2014/01/28 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
根叔历年演讲稿
2014/05/20 职场文书
民事和解协议书格式
2014/11/29 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android