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 相关文章推荐
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
jQuery 插件开发指南
Nov 14 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
React根据宽度自适应高度的示例代码
Oct 11 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
php header()函数使用说明
2008/07/10 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
python文件与目录操作实例详解
2016/02/22 Python
python实现Floyd算法
2018/01/03 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
Python如何telnet到网络设备
2021/02/18 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
团日活动总结书格式
2014/05/08 职场文书
幸福中国演讲稿
2014/09/12 职场文书
社区党建工作总结2015
2015/05/13 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
从原生JavaScript到React深入理解
2022/07/23 Javascript