简单封装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代码
Jan 01 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
JavaScript实现下拉列表
Jan 20 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP 文件上传限制问题
2019/09/01 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
详解webpack+express多页站点开发
2017/12/22 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
详解JS函数防抖
2020/06/05 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
酒吧创业计划书
2014/01/18 职场文书
给市场的环保建议书
2014/05/14 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技