课程咨询 :0551-64632520

合肥web前端培训

合肥web培训 > 达内新闻 > JavaScript中this的使用技巧
  • JavaScript中this的使用技巧

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

  • 合肥达内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零基础周末班

WEB零基础周末班

开班日期:

WEB零基础全日制班

WEB零基础全日制班

开班日期:3-08

WEB前端业余班

WEB前端业余班

开班日期:3-08

WEB前端就业班

WEB前端就业班

开班日期:3-08

  • 地址:合肥市蜀山区肥西路66号汇金大厦21楼
  • 课程培训电话:0551-64632520     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56