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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
微信小程序实现搜索功能
Mar 10 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
php生成EXCEL的东东
2006/10/09 PHP
main.php
2006/12/09 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
javascript拖拽应用实例
2016/03/25 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
a标签调用js的方法总结
2019/09/05 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
解决python对齐错误的方法
2020/07/16 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
广告设计专业自荐信范文
2013/11/14 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
庆八一活动方案
2014/01/25 职场文书
代办社保委托书范文
2014/10/06 职场文书
节水倡议书
2015/01/19 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
毕业典礼致辞
2015/07/29 职场文书
月考总结与反思
2015/10/22 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
MYSQL常用函数介绍
2022/05/05 MySQL