简单封装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实现ajax提交form表单的方法总结
Mar 03 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
js闭包用法实例详解
Dec 13 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
js replace替换字符串同时替换多个方法
Nov 27 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 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中读取和写入WORD文档的代码
2008/04/09 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
深入理解vue Render函数
2017/07/19 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python列表list保留顺序去重的实例
2018/12/14 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
逻辑链路控制协议
2016/10/01 面试题
志愿者服务感言
2014/02/27 职场文书
党员承诺书格式
2014/05/21 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers