2018-05-29

一。script放在前面与后面的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页换扶</title>
</head>
<script type="text/javascript">
    alert("aaaaaaaaaaaaaaaaaa"); //可执行
    document.getElementById("btn").onclick= function(){
        alert("abcde");//可执行
    }
</script>
<body>
<input type="button" id="btn" value="test"/>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页换扶</title>
</head>
<body>
<input type="button" id="btn" value="test"/>
<script type="text/javascript">
    alert("aaaaaaaaaaaaaaaaaa");//可执行
    document.getElementById("btn").onclick= function(){
        alert("abcde");//不可执行
    }
</script>
</body>
</html>

二者区别：
如果JavaScript文件是从HTML文档的部分用

   <script type="text/javascript">
        alert("aaaaaaaaaaaaaaaaaa");
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
            alert("abcde");
        }
        };
    </script>

浏览器渲染页面和加载页面机制
二.js获取属性的三个方法
1.点表示法
用于查找本来就存在的属性名，不能找到变量或者函数的参数。
2.方括号法
可以通过变量来访问属性。
3.通过DOM的方式

获取属性的值：getAttribute(属性名)
设置属性的值：setAttribute(属性名，要设置的值)
删除属性：removeAttribute(属性名)

三.js闭包作用域问题
例子：在for循环中嵌套一个事件函数

<!--html-->
 <div class="but">
        <button type="button" class="but1">变宽</button>
        <button type="button" class="but1">变高</button>
        <button type="button" class="but1">变色</button>
        <button type="button" class="but1">隐藏</button>
        <button type="button" class="but1">重置</button>
    </div>
<!--script-->
var but = document.getElementsByClassName("but1");
for(var i = 0;i < but.length; i++) {
but[i].onclick = function () { 
     alert(i); //i永远是5
}
}

onclick事件是个匿名函数，它在用户点击的时候才会被调用（即for循环已执行完毕，此时i=5。因此，在onclick事件内形成了闭包，使它无法访问外部的i，此问题的关键在于作用域的问题。
解决方案:
法一:我们可以让i在每次迭代的时候，都产生一个私有的作用域，在这个私有的作用域中保存当前i的值。

//法一
for(var i = 0;i < but.length; i++) {
（function (i) {
      but[i].onclick = function () { 
         alert(i); 
}
})(i);
}

//法二
for(let i = 0;i < but.length; i++) {
but[i].onclick = function () { 
     alert(i); 
}
}

猜你喜欢