[原创]javascript typeof id==='string'?document.getElementById(id):id解释


Posted in Javascript onNovember 02, 2016

一般来说想要理解这段代码,需要掌握如下两个函数

一个是 typeof 一个就是三元运算符

看完了上面的文章再看下面的就比较好理解了

一般来说常用的函数代码

function $(id){ return typeof id==='string'?document.getElementById(id):id;}
var GetBy = function (id) {
      return "string" == typeof id ? document.getElementById(id) : id;
    };

功能都是一样的。

这个函数的作用就是之后用到id选择器可以简写,至于判断的意义就是传入的参数为字符串就返回document.getElementById(id),其他的就返回参数本身,这个只是一个获取页面dom元素的一个简陋版本的函数,还不够完善。

1、这是一段JavaScript代码
$就是一个标示符。 也可以用getID等,如果你的页面中使用了jquery不建议使用$,因为jquery默认使用的就是$
?:是运算符
return "string" == typeof id ? document.getElementById(id) : id;
也可以写成是

if("string" == typeof id )
  return document.getElementById(id);
else
  return id;

有人感觉上面的代码,为什么不用{}括起来,因为代码比较短只有一行是不需要{}

如下所示

if("string" == typeof id )   {
  return document.getElementById(id);
  }
else {
  return id; 
   }

具体的可以参考这篇文章:https://3water.com/article/50197.htm

2、表达式1?表达式2:表达式3

这是一个式子;他的运算过程是:先计算表达式1,如果为true,这个式子就取表达式2的运算结果,否则整个式子取值就是表达式3的运算结果,不懂的朋友可以参考这篇文章:https://3water.com/article/64237.htm

在你这个例子中 表达式1是 "string" == typeof id,功能是判断id的数据类型是否为string ,==就是判断是否相等的运算符啊
表达式2是 document.getElementById(id) 获取ID为 参数id的值的html元素
表达式3 就是 id这个变量(一般来说这个变量多为object),如果是对象就不用document.getElementById了,直接就可以使用了。

三水点靠木原创整理,转载请注明出处

Javascript 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
删除节点的jquery代码
Jan 13 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
详解ES6中的let命令
Apr 05 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 #Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 #Javascript
bootstrap基础知识学习笔记
Nov 02 #Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 #Javascript
Bootstrap table的使用方法
Nov 02 #Javascript
AngularJS指令用法详解
Nov 02 #Javascript
AngularJS表单和输入验证实例
Nov 02 #Javascript
You might like
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
python装饰器使用方法实例
2013/11/21 Python
python中sleep函数用法实例分析
2015/04/29 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Django实现web端tailf日志文件功能及实例详解
2019/07/28 Python
Python笔记之工厂模式
2019/11/20 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
金属材料工程个人求职的自我评价
2013/12/04 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
关于爱情的广播稿
2014/01/16 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
承诺书模板大全
2015/05/04 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
TypeScript 内置高级类型编程示例
2022/09/23 Javascript