第二课JavaScript函数传参

来源：互联网发布：怎么利用大数据抄股票编辑：程序博客网时间：2024/06/06 01:23

函数参数是占位符

    <script>        function show(a,b)        {            alert(a*b);        }        show(5,12);    </script></head><body>

优化前代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #div1{width:200px; height:200px; background:red;}    </style>    <script>        function toGreen()        {            var oDiv=document.getElementById('div1');            oDiv.style.background='green';        }        function toYellow()        {            var oDiv=document.getElementById('div1');            oDiv.style.background='yellow';        }        function toBlack()        {            var oDiv=document.getElementById('div1');            oDiv.style.background='black';        }    </script></head><body><input type="button" value="变绿" onclick="toGreen()" /><input type="button" value="变黄" onclick="toYellow()" /><input type="button" value="变黑" onclick="toBlack()"/><div id="div1"></div></body></html>

优化后代码

函数传参

    <style>        #div1{width:200px; 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('yellow')" /><input type="button" value="变黑" onclick="setColor('black')"/><div id="div1"></div>

不确定值作为参数

    <script>        function setStyle(name,value)        {            var oDiv=document.getElementById('div1');            oDiv.style.name=value;        }       /* function toWidth()        {            var oDiv=document.getElementById('div1');            oDiv.style.width='300px';        }        function toHeight()        {            var oDiv=document.getElementById('div1');            oDiv.style.height='300px';        }        function toGreen()        {            var oDiv=document.getElementById('div1');            oDiv.style.background='green';        }        */    </script></head><body><input type="button" value="变宽" onclick="setStyle('width','400px')">

这样传参数不行因为计算机不知道 oDiv.style.name 就是setStyle()中的name

第二种操作属性的方法,第一种是. ODiv.value

第二种是oDiv[name],[]的优势是[]中的东西可以变

    <script>        function setStyle(name,value)        {            var oDiv=document.getElementById('div1');            oDiv.style[name]=value;        }       /* function toWidth()        {            var oDiv=document.getElementById('div1');            oDiv.style.width='300px';        }        function toHeight()        {            var oDiv=document.getElementById('div1');            oDiv.style.height='300px';        }        function toGreen()        {            var oDiv=document.getElementById('div1');            oDiv.style.background='green';        }        */    </script></head><body><input type="button" value="变宽" onclick="setStyle('width','400px')"><input type="button" value="变高" onclick="setStyle('height','400px')"><input type="button" value="变绿" onclick="setStyle('background','green')">

变量和字面量

变量和参数不加引号,字符串必须加引号 ,不加引号js会把它当成变量,然后去找变量的值,

style和className

style加样式是加在行间,读也是从行间读

样式优先级,要么只动class,要么只动style

行间事件

<body><input id="btn1" type="button" value="按钮"  /><script>    var oBtn=document.getElementById('btn1');    function abc()    {        alert('a')    }    oBtn.onclick= abc;</script></body>

onclick需要加一个函数

匿名函数

<body><input id="btn1" type="button" value="按钮"  /><script>    var oBtn=document.getElementById('btn1');     oBtn.onclick= function () //匿名函数    {        alert('a')    };</script></body>

js标签<script></script>一般不放在body中,放在head中会报错,要加个window.onload()，页面加载完成时发生

    <script>        window.onload=function () {            var oBtn = document.getElementById('btn1');            oBtn.onclick = function () //匿名函数            {                alert('a')            };        }    </script></head><body><input id="btn1" type="button" value="按钮"  />

提取行间事件

行为、样式、结构三者分离，行为就是JavaScript 样式就是css 结构就是html 别加行间样式，别加行间样式，别加行间事件

getElementById一次只能获取一个元素，getElementsByTagName一次可以获取一组

<style>    div {width:200px; height:200px; float:left; border:1px solid black; margin:10px;}</style><script>    window.onload=function()    {        var aDiv=document.getElementsByTagName('div');        alert(aDiv.length);    };</script><body></body><div></div><div></div><div></div><div></div>

aDiv.length length 长度，数组的长度就是其中元素的个数

操作数组

<style>    div {width:200px; height:200px; float:left; border:1px solid black; margin:10px;}</style><script>    window.onload=function()    {        var aDiv=document.getElementsByTagName('div');        //alert(aDiv.length);        //aDiv.style.background='red';        aDiv[1].style.background='red';    };</script>

循环

<script>    var i=0;  //初始化    while(i<5) // 条件    {                alert(i); //语句        i=i+1;    //自增 或写成 i++        }</script>

<script>    window.onload=function()    {        var aDiv=document.getElementsByTagName('div');                for(var i=0;i<4;i++)        {        aDiv[i].style.background='red';        }    };</script>

代码的健壮性

for(var i=0;i<aDiv.lengthD;i++)        {        aDiv[i].style.background='red';        }

全选、反选、不选

<script>        window.onload=function()        {            var oBtn1=document.getElementById('btn1');            var oBtn2=document.getElementById('btn2');            var oBtn3=document.getElementById('btn3');            var oDiv=document.getElementById('div1');            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="全选"/><input id="btn2" type="button" value="不选"/><input id="btn3" type="button" value="反选"/><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><input type="checkbox" /><br></div>

选项卡

   <style>        #div1 .active{background:yellow;}        #div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;}    </style>    <script>        window.onload=function()        {            var oDiv=document.getElementById('div1');            var aBtn=oDiv.getElementsByTagName('input');            var aDiv=oDiv.getElementsByTagName('div');            for(var i=0;i<aBtn.length;i++)            {                aBtn[i].index=i;                aBtn[i].onclick=function()                {                    for(var i=0;i<aBtn.length;i++)                    //alert(this.value);                    {                        aBtn[i].className='';                        aDiv[i].style.display='none';                    }                    this.className='active';                    //alert(this.index);                    aDiv[this.index].style.display='block';                };            }        }    </script></head><body><div id="div1">    <input class="active" type="button" value="教育" />    <input type="button" value="培训"/>    <input type="button" value="招生" />    <input type="button" value="出国" />    <div style="display:block;">1111</div>    <div>222</div>    <div>333</div>    <div>4444</div></div>

this 代表当前的按钮

innerHTML

阅读全文

0 0