简单封装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 07 Javascript
js 学习笔记(三)
Dec 29 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
JavaScript中的细节分析
Jun 30 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
详解Document.Cookie
Dec 25 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
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控制网页过期时间的代码
2008/09/28 PHP
php开发文档 会员收费1期
2012/08/14 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
php使用正则验证中文
2016/04/06 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
英国电子专家:maplin
2019/09/04 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
房屋买卖委托公证书
2014/04/08 职场文书
庆国庆活动总结
2014/08/28 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
小学远程教育工作总结
2015/08/13 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle