[原创]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 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
jquery 模板的应用示例
Nov 12 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
vue element-ui实现动态面包屑导航
Dec 23 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
图解上海144收音机
2021/03/02 无线电
五个PHP程序员工具
2008/05/26 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
js实现中文实时时钟
2020/01/15 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
感恩节红领巾广播稿
2014/02/11 职场文书
骨干教师培训方案
2014/05/06 职场文书
企业承诺书怎么写
2014/05/24 职场文书
美食节目策划方案
2014/05/31 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
公证委托书格式
2014/09/13 职场文书
校园运动会广播稿
2014/10/06 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python