简单封装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 相关文章推荐
flexigrid 参数说明
Nov 23 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
js实现简单计算器
Nov 22 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
BackBone及其实例探究_动力节点Java学院整理
Jul 14 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
JavaScript fetch接口案例解析
Aug 30 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中使用smarty生成静态文件的例子
2014/04/24 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
javascript之函数直接量(function(){})()
2007/06/29 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
anaconda如何查看并管理python环境
2019/07/05 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
keras slice layer 层实现方式
2020/06/11 Python
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
Hibernate持久层技术
2013/12/16 面试题
新闻专业学生的自我评价
2014/02/13 职场文书
组织鉴定材料
2014/06/02 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
培训讲师开场白
2015/06/01 职场文书