zoukankan      html  css  js  c++  java
  • javascript 基础 onclick(this)用法介绍

    http://www.5idev.com/p-javascript_events_onclick.shtml

    ------------------------------------------------------------------

    直接这样调用 thiTest()的话, 里面的两个 this 都是 window 对象。

    其实this.userName = 'outer userName'; 执行后,window.userName 被复制为 ‘outer userName’

    function thisTest()
      {
          this.userName= 'outer userName';
          function innerThisTest(){
            var userName="inner userName";
            alert(userName); //inner userName
            alert(this.userName); //outer userName
          }
         return innerThisTest;
      }
    
    thisTest()();  

    http://www.cnblogs.com/uedt/articles/1748422.html

    理解这里的前提是你必须了解js里的原型概念(说道这里,kao,我还真的需要面壁一下):js中对象的prototype属性,是用来返回对象类型原型的引用的。所有js内部对象都有只读的prototype属性,可以向其原型中动态添加功能(属性和方法),
    但该对象不能被赋予不同的原型。但是对于用户定义的对象可以被赋给新的原型。看个简单的示例

    ----------------------------------------------------

     这是《DOM编程艺术》的一段代码:

    <a href="images/fireworks.jpg" onclick="showPic(this)">Fireworks</a>
    书上仅简单的说了一下在showPic(this)中,this代表a对象,但没有说为什么。

    通俗来讲,this就是指调用者,谁调用它谁就是this,比如如果把onclick放入div,则div就是this:
    <div onclick="showPic(this)">Fireworks</div>

    -----------------------------------------------------------------------------
    <input id="btnTest" type="button" value="提交" />

    <script type="text/javascript">
    function thisTest(){
    alert(this.value);
    }
    document.getElementById("btnTest").onclick=thisTest; //给button的onclick事件注册一个函数
    </script>
    -----------------------------------------------------------------------------

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(e){ ////e就是this, 点击事件 this指触发事件的对象

    $('button').click(function(e){
    alert(e.target.getAttribute('name'));
    alert(e.target.name); // e.target 就是指出发事件的对象, 即 DOM 对象, button 对象
    $('#w3s').attr('href', function(i, oldhref){
    return i+oldhref;
    });
    })
    });
    </script>
    </head>

    <body>
    <p><a href="http://www.w3school.com.cn" id="w3s">w3school.com.cn</a></p>
    <button name="btn">改变 href 值</button>
    <p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值。</p>
    </body>
    </html>

     

      -------------------------------------------------void 操作符-----------------------

    原文: http://www.cnblogs.com/uedt/articles/1748422.html

    1、定义
    javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。
    2、语法
    void 操作符用法格式如下:
        (1). javascript:void (expression)
        (2). javascript:void expression
    注意:expression是一个要计算的js标准的表达式。表达式外侧的圆括号是可选的,但是写上去你可以一眼就知道括弧内的是一个表达式(这和typeof后面的表达式语法是一样的)。
    3、实例代码

    复制代码
    function voidTest() {

    void (alert("it is a void test")); //执行函数

    var oTestNum = 1;
    void (oTestNum++); //整数自加
    alert(oTestNum);

    oTestNum = 1;
    void (oTestNum += " void test"); //整数加字符串
    alert(oTestNum);
    }
    voidTest();
    复制代码

    4、在a元素下使用void(0)
    (1)适用情况
    在网页中,我们经常看到html里的a标签不需要它导航到某一个页面时,href属性设置的写法:

    <a href="#">link1</a>
    <a href="javascript:void(0);">link2</a>

    注意:第一种“#”的写法(其实#可以是多个,通常都是1个),当a元素所在的链接在浏览器一屏以下时,会导致页面回滚到顶部;所以当我们需要a标签不导航到其他页面,不需要网页位置的回滚,都会采取void(0)那种写法。
    (2)ie6下void(0)造成的诡异问题
    这个问题网上有很多讨论,个人认为“落叶满长沙”总结的很有代表性,这里就不再赘述了。

      

  • 相关阅读:
    Rebots协议是什么?
    Requests库入门
    jieba库的使用及实例
    第六周 python组合数据类型
    python 有基础入门程序
    字符与字符串操作归纳[持续更新]
    C++调用bat并实现传值
    Python如何运行程序
    Execl数据上传到数据库
    xml 文件操作
  • 原文地址:https://www.cnblogs.com/oxspirt/p/6005090.html
Copyright © 2011-2022 走看看