合肥Web培训
达内合肥web培训中心

0551-64632511

热门课程

JavaScript中this的使用技巧

  • 时间:2016-05-18
  • 发布:合肥web培训
  • 来源:达内新闻

合肥达内web培训专家指出,JavaScript关键字this始JS脚本能够根据使用这个关键字的上下文将值传递给函数。

举个例子,有一个网页, 在用户单击链接之后,弹出一个alert框,然后再转到href属性所指的网页 。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript中的this妙用</title>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <p style="text-algin:center;">
        你好,点击这里去<a id="redirect" href="http://www.mybry.com/products/store/list.html">旧物商店</a>
    </p>
</body>
</html>

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值。

此外,this另一个作用是:如果用户的浏览器不理解JavaScript(比如禁用了JS),那么它只会加载HTML页面,而不显示alert提示,当他们点击链接时,会像一般情况下那样加载页面,不会出现bug。
上一篇:HTML优化技巧总结
下一篇:JQuery的12个小技巧

合肥达内Web培训机构:浅谈2017年web网页新趋势

合肥达内Web培训机构聊一聊web前端开发的行业前景

合肥达内Web前端培训培养软件开发工程师

合肥Web前端培训带给你专业web前端知识

选择城市和中心
贵州省

广西省

海南省