智能社JavaScript学习笔记第二课

JS学习第二课

函数传参：参数就是占位符————当函数里定不下来东西的时候用参数

例子1：设置三个按钮点击改变div的颜色。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>color</title>

    <style>#div1 {width:100px;height:200px;background:red}</style>

    <script>

                function toGreen() {

            var oDiv = document.getElementById('div1');

            oDiv.style.background = 'green';

        }

                function toRed() {

            var oDiv = document.getElementById('div1');

            oDiv.style.background = 'red';

        }

                function toYellow() {

            var oDiv = document.getElementById('div1');

            oDiv.style.background = 'yellow';

        }

     

     

    </script>

</head>

<body>

 

<input type = "button" value = "变绿" onclick="toGreen()"/>

<input type = "button" value = "变红" onclick="toRed()"/>

<input type = "button" value = "变黄" onclick="toYellow()"/>

 

<div id = "div1"></div>

 

</body>

</html>

这种写法很笨用了，其实函数功能都一样，设置一个color参数会更简单。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>color</title>

    <style>#div1 {width:100px;height:200px;background:red}</style>

    <script>

                function setColor(color) {

            var oDiv = document.getElementById('div1');

            oDiv.style.background = color;

        }

    </script>

</head>

<body>

 

<input type = "button" value = "变绿" onclick="setColor('green')"/>

<input type = "button" value = "变红" onclick="setColor('red')"/>

<input type = "button" value = "变黄" onclick="setColor('yellow')"/>

 

<div id = "div1"></div>

 

</body>

</html>

操作属性的第二种方法

什么时候用：要修改的属性不固定

例子：设置三个button，分别是div变宽，变高，变黄。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>color</title>

    <style>#div1 {width:100px;height:200px;background:red}</style>

    <script>

                function changeDiv(name,value) {

            var oDiv = document.getElementById('div1');

            oDiv.style[name] = value;

          //若写成oDiv.style.name 会没有用，计算机会认为name是一个叫做name的样式

        }

    </script>

</head>

<body>

 

<input type = "button" value = "变宽" onclick="changeDiv('width','200px')"/>

<input type = "button" value = "变高" onclick="changeDiv('height','300px')"/>

<input type = "button" value = "变黄" onclick="changeDiv('background','yellow')"/>

 

<div id = "div1"></div>

 

</body>

</html>

注意此处获取属性的第二种方法用方括号（第一种用. 来获取），例如：oTxt.value = ‘abcd’ 和 oTxt[‘value’] = ‘abcd’,功能一样，用这种方法就可以将属性名作为参数传递。

变量和字符串

观察到上面例子里的程序，凡是变量和参数都不加单引号’ ’ ，其他都要加，例如name（参数），oDiv（变量）， ‘width’ 字符串。

style与className

—元素.style.属性 = xxx 是修改行间样式

— 之后再修改className不会有效果

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>color</title>

    <style>

    #div1 {width:100px;height:200px;border:1px solid black;}

    .box{background:red}

    </style>

    <script>

        function toRed() {

            var oDiv = document.getElementById('div1');

            oDiv.className = 'box';

        }

        function toGreen() {

            var oDiv = document.getElementById('div1');

            oDiv.style.background = 'green';

        }

 

    </script>

</head>

<body>

 

<input type = "button" value = "变红" onclick="toRed()"/>

<input type = "button" value = "变绿" onclick="toGreen()"/>

 

 

<div id = "div1"></div>

 

</body>

</html>

这里变了绿就不能再变红了，因为style加样式和获取样式都是行间样式，行间样式优先级高于class。（样式优先级顺序 *<标签<class<id<行间）

所以建议：对于同一个元素，例如div，要么从都到尾操作class要么操作style，不用混着来。

提取行间事件

现在前端开发公司都提倡行为、样式、结构三者分离，行为—js, 样式—css，结构—HTML。

所以尽量不写行间行为。

例子：小提示按钮。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload = function(){//页面加载完成发生

        var oBtn = document.getElementById('btn1');

        oBtn.onclick = function () {//匿名函数

            alert('a');

        }

     }

    </script>

</head>

<body>

 

<input id = "btn1" type = "button"  value = "按钮" />

</body>

</html>

这里注意两点：

1.把js放在head里若不用window.onload会报错，因为js里的btn1在body中还没有加载出来。 window.onload就是起到页面加载完成后发生的作用，注意后面 = function（）{…};的写法。

2.提取行间事件到js中，oBtn.onclick = function () {…} 为匿名函数写法，大部js中都这样写。也可以先定义 function abc(){…}，然后 oBtn.onclick = abc。

获取一组元素

—— getElementsByTagName

—— 利用循环

小例子：利用循环和获取一组元素来改变一组div颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{width:200px;height:200px;float:left;border:1px solid black;margin:10px;}

 

    </style>

 

    <script>

        window.onlaod = function () {

        var aDiv = document.getElementsByTagName('div');

        for (var i=0; i

        < aDiv.length; i++) {

        aDiv[i].style.background = 'red';

        }

        };

    </script>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

</body>

</html>

另一个例子：利用循环和获取组元素对十个checkbox 制作全选不选反选按钮。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload = function() {

            var oBtn1 = document.getElementById('btn1');

            var oBtn2 = document.getElementById('btn2');

            var oBtn3 = document.getElementById('btn3');

            var oDiv = document.getElementById('div1');//若不从oDiv中提取tagname会把所有标签为input的都提取了 包括了那三个button

            var aCh = oDiv.getElementsByTagName('input');

            oBtn1.onclick = function() {

                 for (var i = 0 ;i < aCh.length;i++) {

                     aCh[i].checked = true;

                 }

            };

            oBtn2.onclick = function() {

                for (var i = 0 ;i < aCh.length;i++) {

                aCh[i].checked = false;

                }

            };

            oBtn3.onclick = function() {

                for (var i = 0;i < aCh.length;i++) {

                    if(aCh[i].checked == true){aCh[i].checked = false;}

                    else{aCh[i].checked = true;}

                }

            }

        };

 

 

    </script>

</head>

<body>

<input id = "btn1" type = "button" value = "全选"/><br/>

<input id = "btn2" type = "button" value = "不选"/><br/>

<input id = "btn3" type = "button" value = "反选"/><br/>

<div id = "div1">

<input type ="checkbox"/><br/>

<input type ="checkbox"/><br/>

<input type ="checkbox"/><br/>

<input type ="checkbox"/><br/>

<input type ="checkbox"/><br/>

<input type ="checkbox"/><br/>

<input type ="checkbox"/><br/>

<input type ="checkbox"/><br/>

<input type ="checkbox"/><br/>

<input type ="checkbox"/><br/>

</div>

</body>

</html>

智能社JavaScript学习笔记第二课

猜你喜欢