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 相关文章推荐
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
Vue响应式原理详解
Apr 18 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 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 水平的题目
2007/05/30 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
python实现百万答题自动百度搜索答案
2018/01/16 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
pycham查看程序执行的时间方法
2018/11/29 Python
详解python中init方法和随机数方法
2019/03/13 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
浅析Python3 pip换源问题
2020/01/06 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
中文专业毕业生自荐书范文
2014/01/04 职场文书
公益活动邀请函
2014/02/05 职场文书
大学学习计划书范文
2014/05/02 职场文书
借款担保书范文
2014/05/13 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
学年个人总结范文
2015/03/05 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
JavaScript canvas实现流星特效
2021/05/20 Javascript