JS函数相关用法

最新推荐文章于 2024-04-04 01:28:03 发布

Joshua_yi

最新推荐文章于 2024-04-04 01:28:03 发布

阅读量117

点赞数 1

分类专栏： web开发文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44984664/article/details/104865297

版权

web开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

主要内容

参数个数不确定，arguments使用
事件驱动函数

1.arguments

关键用法

arguments[i]下标
arguments.length

<!DOCTYPE html>
<html>
<head>
<title>arguments use</title>
<style type='text/css'>
</style>
</head>
<body>
    <script type="text/javascript"> 
        // =====================================================================
        // 计算所有传入参数的和，具体传入多少参数不确定
        // 使用arguments
        // 在每一个函数内，都有一个内置的数组，是一个变量——arguments
        // arguments可以存储当前函数传入的所有参数，而且是通过传参的顺序，进行排列的
        // arguments.length 传入参数的个数
        // 要访问arguments的数据，需要通过下标进行访问
        // function sum(){
        //     // alert(arguments);//[object Arguments]
        //     alert(arguments[1]);//6
        //     var sum2=0;
        //     for(var i=0;i<arguments.length;i++)
        //         sum2+=arguments[i];
        //    alert(sum2);//18
        // }
        // sum(5,6,7);
        // =====================================================================
        
    </script>
</body>
</html>

2.事件驱动函数

关键用法

<input type="button" value="按钮" id="btn">
<input type="text" value="修改前的文本" id="txt">
window.onload =function(){}
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){}
oTxt.value = "修改后的文本内容";

<!DOCTYPE html>
<html>
<head>
<title>事件驱动函数1</title>
<style type='text/css'>
</style>
<script type="text/javascript"> 
    // =====================================================================
    // 事件驱动函数？
    // 在和页面进行交互的过程中所调用的函数叫做事件驱动函数
    // 事件？
    // 和页面交互的行为称之为事件。eg：鼠标的相关问题，点击，获取焦点失去焦点
    // -------------------------------------------------------------
    // 步骤
    // 我们可以通过document.getElementById()找到符合条件的标签节点
    // 然后可以和事件驱动函数一起给当前的按钮绑定一系列的操作，完成用户操作

    // var oBtn = document.getElementById("btn");
    // alert(oBtn);//null 程序是自上而下运行的 ,这个时候button还没出被加载
    // -------------------------------------------------------------
    // window.onload 的使用
    window.onload =function() {
        var oBtn = document.getElementById("btn");
        // alert(oBtn);//[object HTMLInputElement] 这个时候就可以了
        // -------------------------------------------------------------
        // 给按钮添加事件驱动函数
        oBtn.onclick = function(){
            alert('点击');
        }
    }
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn">
</body>
</html>

事件驱动函数——修改文本内容

<!DOCTYPE html>
<html>
<head>
<title>事件驱动函数2 修改文本内容</title>
<style type='text/css'>
</style>
<script type="text/javascript"> 
    // window.onload 的使用
    window.onload =function() {
        var oBtn = document.getElementById("btn");
        var oTxt = document.getElementById("txt");

        // -------------------------------------------------------------
        // 给按钮添加事件驱动函数
        // oTxt.value 是字符串
        alert(oTxt.value);
        oBtn.onclick = function(){
            alert('修改文本啦');
            oTxt.value = "修改后的文本内容";
        }
    }
</script>
</head>
<body>
    <input type="text" value="修改前的文本" id="txt">
    <input type="button" value="按钮" id="btn">
</body>
</html>