Javascript封装id、class与元素选择器方法示例

 更新时间:2017年03月13日 11:03:16   作者:zengzeng91  
这篇文章主要给大家介绍了Javascript封装id、class与元素选择器的方法,文中给出了详细的示例代码,对大家的理解和学习具有一定的参考价值,需要的朋友们下面来一起看看吧。

由于各个浏览器都支持的选择方法只有如下三种:

     1、document.getElementById()

     2、document.getElementsByName()

     3、document.getElementsByTagName()

所以在封装选择器的时候要考虑浏览器的兼容性。

示例代码如下:

<script>//封装id选择器
  function $(selector){
    var c=selector.substring(0,1);//获取第一个字符
    if(c=="#"){
      return document.getElementById(selector.substring(1,selector.length));//返回相应的元素
    }
  }
  
  
  //封装class选择器
  function $(selector){
    var className=selector.substring(1);//从索引为1的元素往后取
    //判断浏览器是否支持getElementsByClassName
    if(document.getElementsByClassName){
      return document.getElementsByClassName(className)
      //document.querySelectorAll('.cls')兼容性有问题
    }else{
      //document.getElementsByTagName('*')+正则表达式
      //\s空白字符 ^开始 $结束
      var reg=new RegExp('^|\\s'+className+'$|\\s');
      var elems=document.getElementsByTagName("*");//获取页面中所有元素
      var arr=[];//保存获取到的指定className的元素
      for(var i=0;i<elems.length;i++){
        if(reg.test(elems[i].className)){//如果和模式匹配上
          arr.push(elem[i]);
        }
      }
      return arr;
    }
  }
  
  //封装标签选择器  
  function $(element){
    return document.getElementsByTagName(element);
  }
 </script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • bootstrap中的 form表单属性role=

    bootstrap中的 form表单属性role="form"的作用详解

    这篇文章主要介绍了bootstrap中的 form表单属性role="form"的作用详解,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • JavaScript实现九宫格抽奖

    JavaScript实现九宫格抽奖

    这篇文章主要为大家详细介绍了JavaScript实现九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • JavaScript窗口功能指南之在窗口中书写内容

    JavaScript窗口功能指南之在窗口中书写内容

    JavaScript窗口功能指南之在窗口中书写内容...
    2006-07-07
  • 关于AOP在JS中的实现与应用详解

    关于AOP在JS中的实现与应用详解

    这篇文章主要给大家介绍了关于AOP在JS中的实现与应用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • javascript实现贪吃蛇小游戏

    javascript实现贪吃蛇小游戏

    这篇文章主要为大家详细介绍了javascript实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 利用HTML5的画布Canvas实现刮刮卡效果

    利用HTML5的画布Canvas实现刮刮卡效果

    大家都玩过刮刮乐吧,都想一夜暴富,本文给大家分享一款利用HTML5的画布Canvas实现刮刮卡效果,需要的朋友可以参考下
    2015-09-09
  • Js 本页面传值实现代码

    Js 本页面传值实现代码

    记得以前在学校的时候,例如要修改信息,需要要修改的部分的值显示出来,都是先把数据传到后台,然后再在前台显示的,想想真够笨的,这个可以在客户端就实现的,何必要传到后台呢
    2009-05-05
  • JavaScript 引用类型之原始值包装类型String

    JavaScript 引用类型之原始值包装类型String

    这篇文章主要介绍了JavaScript 引用类型之原始值包装类型String,String是对应字符串的引用类型。要创建一个String 对象,使用String 构造函数并传入一个数值,更多相关内容需要的朋友可以参考一下
    2022-07-07
  • javascript Blob对象实现文件下载

    javascript Blob对象实现文件下载

    这篇文章主要为大家介绍了vue组件通信的几种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • JS导出PDF插件的方法(支持中文、图片使用路径)

    JS导出PDF插件的方法(支持中文、图片使用路径)

    下面小编就为大家带来一篇JS导出PDF插件的方法(支持中文、图片使用路径)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论