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页面滚动浮动层智能定位实例代码
Aug 23 Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
js遍历td tr等html元素
Dec 13 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 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取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
Python 基础教程之str和repr的详解
2017/08/20 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
python可迭代对象去重实例
2020/05/15 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
医学生自荐信
2013/12/03 职场文书
给老师的检讨书
2014/02/11 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
golang生成并解析JSON
2022/04/14 Golang