简单封装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利用Array.splice实现Array的insert/remove
Jan 13 Javascript
小型js框架veryide.librar源代码
Mar 05 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
vue proxy 的优势与使用场景实现
Jun 15 Javascript
vue实现下载文件流完整前后端代码
Nov 17 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
基于PHP创建Cookie数组的详解
2013/07/03 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
java解析json方法总结
2019/05/16 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
js格式化时间小结
2014/11/03 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python模拟三级菜单效果
2017/09/11 Python
python构建深度神经网络(续)
2018/03/10 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
学Python 3的理由和必要性
2019/11/19 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
小学语文课后反思精选
2014/04/25 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
经验交流材料格式
2014/12/30 职场文书
超市督导岗位职责
2015/04/10 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python