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 10 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
利用python分析access日志的方法
Oct 26 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
Nuxt.js实战详解
Jan 18 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 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中慎用双等于(==)的详解
2013/06/06 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
CI框架的安全性分析
2016/05/18 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
ES6函数实现排它两种写法解析
2020/05/13 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
我们的节日端午节活动方案
2014/03/02 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
三方股份合作协议书
2014/10/13 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
PHP新手指南
2021/04/01 PHP
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python