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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
javascript实现动态标签云
Oct 16 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
react项目实践之webpack-dev-serve
Sep 14 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
Yii2 assets清除缓存的方法
2016/05/16 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python3调用R的示例代码
2018/02/23 Python
python如何让类支持比较运算
2018/03/20 Python
python合并同类型excel表格的方法
2018/04/01 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
审计主管岗位职责
2014/01/31 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
单位计划生育责任书
2015/05/09 职场文书
中学教师读书笔记
2015/07/01 职场文书
运动会致辞稿
2015/07/29 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
我去timi了,一起去timi是什么意思?
2022/04/13 杂记