第二课JavaScript函数传参

最新推荐文章于 2023-07-20 10:09:50 发布

草帽hhh

最新推荐文章于 2023-07-20 10:09:50 发布

阅读量313

点赞数

本文介绍JavaScript编程中的实用技巧，包括函数参数使用、DOM操作优化、事件处理改进及常见任务实现等，帮助读者提升代码质量和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数参数是占位符

    <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>