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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 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实现等比例压缩图片
2018/07/26 PHP
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
javascript中常用编程知识
2013/04/08 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
js变量提升深入理解
2016/09/16 Javascript
JS高级运动实例分析
2016/12/20 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python新手学习标准库模块命名
2020/05/29 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
大学校运会广播稿
2014/02/03 职场文书
运动员口号
2014/06/09 职场文书
小学社会实践活动总结
2014/07/03 职场文书
个人作风建设总结
2014/10/23 职场文书
家装业务员岗位职责
2015/04/03 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
让文件路径提取变得更简单的Python Path库
2021/05/27 Python