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 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 Javascript
JavaScript 性能提升之路(推荐)
Apr 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php微信开发之图片回复功能
2018/06/14 PHP
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python pickle模块用法实例分析
2015/05/27 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python自动化之Ansible的安装教程
2019/06/13 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
成考报名单位证明范本
2014/01/16 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
玲玲的画教学反思
2014/02/04 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
学前班语言教学计划
2015/01/20 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS