简单封装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 相关文章推荐
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
使用JQuery中的trim()方法去掉前后空格
Sep 16 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
如何在vue中使用HTML 5 拖放API
Jan 14 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
网络方面基础面试题
2012/11/16 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
婚前协议书怎么写
2014/04/15 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
golang中字符串MD5生成方式总结
2021/07/04 Golang