最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript中this有什么用 JavaScript中this妙用代码实例分析
时间:2020-05-09 编辑:袖梨 来源:一聚教程网
JavaScript中this有什么用?本篇文章小编给大家分享一下JavaScript中this妙用代码实例分析,代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数。
我们先来看如下一个网页,在用户单击链接之后,弹出一个alert框,然后再转到href属性所指的网页
HTML:
JavaScript中的this妙用 你好,点击这里去旧物商店
JS:
window.onload = initAll; function initAll(){ document.getElementById("redirect").onclick = initRedirect; } function initRedirect(){ alert("这是我创建的旧物商城,欢迎访问!"); window.location = this; return false; }
你可能会主要到,代码中并没有引用特定的网页——这是this关键字的作用之一。this替我们完成的工作之一是从HTML链接获得URL(也就是a标签的href属性)。由于采用这种方式,如果以后脚本改为指向其他的页面而不是旧物商店页面,就不必修改JS。实际上,可以让WEB站点上的所有链接都调用这个相同的JS代码,这一行代码都会自动获得相应的href值。
这样写还有一个好处:如果用户的浏览器不理解JavaScript(比如禁用了JS),那么它只会加载HTML页面,而不显示alert提示,当他们点击链接时,会像一般情况下那样加载页面,不会发生错误,没有任何问题。
我们在来看一个switch/case例子,创建如下页面:
HTML:
JavaScript中的this妙用 闲置二手图书
JS:
window.onload = initAll; function initAll(){ document.getElementById("Java").onclick = viewDetail; document.getElementById("JavaScript").onclick = viewDetail; document.getElementById("MySQL").onclick = viewDetail; document.getElementById("Html").onclick = viewDetail; } function viewDetail(){ console.log("this.id="+this.id); switch(this.id){ case "Java" : alert("《Java程序员基本功》这本书是李刚写的,在我的商店售价30元!"); break; case "JavaScript" : alert("《JavaScript语言精粹》这本书是Yahoo的一位工程师写的,在我的商店售价15元!"); break; case "MySQL" : alert("《MySQL入门很简单》这本书附带关盘,这个年代其实没什么卵用了,它在我的商店售价28元!"); break; case "Html" : alert("《HTML5秘籍》这本书是图灵系统的图书,非常值得拥有,它在我的商店售价25元,卖的非常好!"); break; default : alert("没有这本书"); } }
直接用this.id作为switch的参数也是可以的。
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12