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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
JavaScript DOM 添加事件
Feb 14 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
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下载xls文件(自己动手写的)
2014/04/18 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
vant实现购物车功能
2020/06/29 Javascript
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
Python中几个比较常见的名词解释
2015/07/04 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python实现四人制扑克牌游戏
2020/04/22 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
会计专业自荐信范文
2013/12/02 职场文书
网络管理专业求职信
2014/03/15 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS