[原创]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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
IE与firefox之jquery用法区别
Oct 03 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
js事件机制----捕获与冒泡机制实例分析
May 22 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
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
如何快速上手Vuex
2017/02/14 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
python发送告警邮件脚本
2018/09/17 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
招聘专员岗位职责
2014/03/07 职场文书
村道德模范事迹材料
2014/08/28 职场文书
环境建议书
2015/02/04 职场文书
消费者理赔投诉书
2015/07/02 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript