简单封装js的dom查询实例代码


Posted in Javascript onJuly 08, 2016

最近一直在啃犀牛书,有感,于是写了个简单的js的dom查询

$ = function (val) {
    switch(val.charAt(0)) {
      case '#' :
        return document.getElementById(val.substring(1));
        break;
      case '.' :
        val = val.replace('.','');
        if(document.getElementsByClassName)
          return document.getElementsByClassName(val);
        else {
          var obj = document.getElementsByTagName('*'),len = obj.length,arr=[];

          for(var i=0;i<len;i++) {
            if(obj[i].className == val) {
              arr[arr.length] = obj[i];
            }
          }

          return arr;
        }
        break;
      default :
        if(document.getElementsByName(val).length > 0)
          return document.getElementsByName(val);
        else 
          return document.getElementsByTagName(val); 
    }
  }

这样一实现,以后调用id时,只需 $('#idname'),class时$('.classname'),TagName和Name都是做了个简单的判断,都是直接传 $('name'),我试了下,感觉还可以。

以上这篇简单封装js的dom查询实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
vue中div禁止点击事件的实现
Apr 02 Vue.js
JS选取DOM元素的简单方法
Jul 08 #Javascript
封装获取dom元素的简单实例
Jul 08 #Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 #Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 #Javascript
Augularjs-起步详解
Jul 08 #Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 #Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 #Javascript
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
javascript判断非数字的简单例子
2013/07/18 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
详解angular element()方法使用
2017/04/08 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python实现2014火车票查询代码分享
2014/01/10 Python
Python命名空间详解
2014/08/18 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python异常处理例题整理
2019/07/07 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
python之随机数函数的实现示例
2020/12/30 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
广告设计应届生求职信
2014/03/01 职场文书
考勤制度通知
2015/04/25 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL