web 前端 js 函数定义、传参、argument、案例、数组编辑多条、函数作用域、return、获取元素样式

最新推荐文章于 2023-06-03 17:06:46 发布
最新推荐文章于 2023-06-03 17:06:46 发布
阅读量412 收藏
点赞数
分类专栏： javascript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45304069/article/details/116273104
版权

1、函数定义：就是把一些代码包装起来，方便重复使用函数声明之后必须调回，才会执行
2、声明：function 函数名（）{ 代码块 }
3、函数表达式： var 函数名=function(){ 执行代码 }
4、函数声明之后，它不会自动执行，需要函数名（）调用
注意：函数声明的调用在函数的前面或者后面都可以，但是函数表达式只能在函数后面调用
5、函数参数传递：如果实参比形参少，没有匹配上的是undefined

    var n = 0;
    var fn = function(x) {
        for(var i=1; i<=x; i++){
            n += i;
        }
    }
   fn(50);
   console.log(n);

6、arguments 是一个对象，即一个类数组（有长度，可以循环，可以通过下标读取每一个，但是不能使用数组的方法）
arguments[0]代表第一个参数，arguments[1]代表第二个参数，依次类推，与形成是一一对应的。arguments只在函数里有。

function fn() {
            var sum = 0;
            for(var i=0; i<arguments.length; i++){
                sum += arguments[i];
            }
            console.log(sum);  
        }
        fn(1,2,2,4,5,6,7,8);

当实际参数不确定是，可以用arguments,，形式参数省去，然后循环让i<=arguments.length

7、函数中的“this”指向，不是在定义的时候确定的，而是在调用的时候确定的

8、编辑标题案例（文件或标题重命名）
先编辑一条，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li div:nth-child(2){
            display:none;
        }
    </style>
    <script>
        window.onload = function () {
            // 第一步，先定义li
            var aLi = document.getElementsByTagName("li");
            // 第二步，定义li中的元素（定义写逻辑时需要的元素）
            var span = aLi[0].getElementsByTagName("span")[0];
            var input = aLi[0].getElementsByTagName("input")[0];
            var div = aLi[0].getElementsByTagName("div");  //把第一个li中的所有div全部赋给div
            var a = aLi[0].getElementsByTagName("a");
            // 以上的span,input,div,a都是数组
            // 第三步，点击DIV中的第一个a标签，然后隐藏li中的第一个div,弹出第二个div,span的值赋给了input
            a[0].onclick = function () {
                div[0].style.display = "none";
                div[1].style.display = "block";
                input.value = span.innerText;
            }
            // 第三步，保存，点击第二个a标签，然后把input的值赋给span标签,第一个div显示，第二个div隐藏
            a[1].onclick = function () {
                span.innerText = input.value;
                div[0].style.display = "block";
                div[1].style.display = "none";
            }
            // 第四步，取消。点击第三个a标签，然后显示第一个div,隐藏第二个div
            a[2].onclick = function () {
                div[0].style.display = "block";
                div[1].style.display = "none";
            }
        }
    </script>
</head>
<body>
    <ul>
        <li>
            <div>
                <span>我的名字是邓</span>
                <a href="javascript:;">编辑</a>
            </div>
            <div>
                <input type="text">
                <a href="javascript:;">保存</a>
                <a href="javascript:;">取消</a>
            </div>
        </li>
        <li>
            <div>
                <span>我的名字是邓</span>
                <a href="javascript:;">编辑</a>
            </div>
            <div>
                <input type="text">
                <a href="javascript:;">保存</a>
                <a href="javascript:;">取消</a>
            </div>
        </li>
    </ul>
</body>
</html>

用数组编辑多条，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li div:nth-child(2){
            display:none;
        }
    </style>
    <script>
        window.onload = function () {
            // 数组实现,先写好一组，然后定义一个相同的参数，然后用数组进行传参
            var aLi = document.getElementsByTagName("li");
            var fn = function (obj) {
                var span = obj.getElementsByTagName("span")[0];
                var input = obj.getElementsByTagName("input")[0];
                var div = obj.getElementsByTagName("div");  
                var a = obj.getElementsByTagName("a");
                    a[0].onclick = function () {
                    div[0].style.display = "none";
                    div[1].style.display = "block";
                    input.value = span.innerText;
                }
            // 第三步，保存，点击第二个a标签，然后把input的值赋给span标签,第一个div显示，第二个div隐藏
                a[1].onclick = function () {
                    span.innerText = input.value;
                    div[0].style.display = "block";
                    div[1].style.display = "none";
                }
            // 第四步，取消。点击第三个a标签，然后显示第一个div,隐藏第二个div
                a[2].onclick = function () {
                    div[0].style.display = "block";
                    div[1].style.display = "none";
                }
            }   
            for(var i=0; i<aLi.length; i++){
                fn(aLi[i]);
            }        
        }
    </script>
</head>
<body>
    <ul>
        <li>
            <div>
                <span>我的名字是邓</span>
                <a href="javascript:;">编辑</a>
            </div>
            <div>
                <input type="text">
                <a href="javascript:;">保存</a>
                <a href="javascript:;">取消</a>
            </div>
        </li>
        <li>
            <div>
                <span>我的名字是邓</span>
                <a href="javascript:;">编辑</a>
            </div>
            <div>
                <input type="text">
                <a href="javascript:;">保存</a>
                <a href="javascript:;">取消</a>
            </div>
        </li>
    </ul>
</body>
</html>

9、函数作用域

10、return
return后面的结果就是函数的返回值，如果没有手动return,默认都是返回undefined,，return后面的代码都不再执行

11、获取元素的样式

元素的样式在

console.log(getComputedStyle(box).width);    getComputedStyle在ie9以上支持
console.log(box.currentStyle.width);      currentStyle支持所有ie

元素样式封装：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 10px;
        top:50px;
    }
</style>
<script>
    window.onload = function () {
        var btn = document.getElementById("btn");
        var box = document.getElementById("box");
        console.log(getStyle(box,"width"));
    }
    function getStyle(obj, attr) {
        if(window.getComputedStyle){
            //IE9以上支持
            return getComputedStyle(obj)[attr];
        } else {
            // IE8及以下
            return obj.currentStyle[attr];
        }
    }
</script>
<body>
    <button id = "btn">按钮</button>
    <div id="box"></div>
</body>
</html>
柔光dyx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS回调函数 callback的理解与使用案例分析
12-11
本文实例讲述了JS回调函数 callback的理解与使用。分享给大家供大家参考，具体如下： 基本理解一个概念 回调函数回头再调用函数，等主干事情干完了，再回头干分支上的事情。 官方定义 A callback is a function ...
web前端开发第二阶段——arguments/获取标签样式/封装函数/定时器/swiper
qq_43151638的博客
10-22 240
1、arguments是一个类数组，实参的集合 只能在函数内部使用 2、获取标签表现出来的样式 getComputedStyle()系统定义好的函数 低版本IE无此函数 使用方法：例如 var 变量=getComputedStyle(元素).样式 var width=getComputedStyle(box).width; 通过style属性只能获取行间样式 3、获取元素的属性（IE专属） bo...
Web前端开发笔记——第四章 JavaScript程序设计 第六节 函数
小宇y的博客
04-30 484
目录一、函数的定义和声明（一）function关键字声明（二）函数表达式定义函数（三）Function()构造函数二、函数的参数三、变量作用域四、函数的调用（一）直接调用（二）方法调用（三）构造器调用（四）Apply调用四、递归函数（一）（二）（三） 一、函数的定义和声明 JavaScript中的函数与其它语言中的也是一样的含义，都是将一组语句打包，使其可重复地使用，函数的声明有以下三种方式： （一）function关键字声明 直接通过function关键字声明的格式如下，其中function必须是小写：
WEB前端网页设计 - JavaScript 函数篇
最新发布
君逍遥o
06-03 944
WEB前端网页设计 - JavaScript 函数篇
Web前端基础知识之web前端函数使用
qf2019的博客
06-04 1665
首先，我们来看一下MDN的定义：函数是 JavaScript 中的基本组件之一。 一个函数是 JavaScript 过程 — 一组执行任务或计算值的语句。要使用一个函数，你必须将其定义在你希望调用它的作用域内。函数就是一段预先定义好的一段代码，可以在需要的位置调用。 接下来，我们来学习函数如何使用函数。 定义一个函数，用关键字function来定义，function就是英语“功能”的意思。表示这里面定义的语句，完成了一些功能。function后面有一个空格，后面就是函数名字，函数的名字也是关键字，命名规范和
web前端自定义函数工具库
weixin_45969832的博客
03-15 191
1、call函数封装实现 // 手写call函数 function call(Fn,obj,...arg){ // 如果obj为null或者undefined，则指向window if(obj === undefined || obj === null){ // globalThis是ES11的新特性，指向全局 obj = globalThis } //为obj添加临时方法 obj.temp = Fn // 调用 temp
JS回调函数基本定义与用法实例分析
12-08
本文实例讲述了JS回调函数基本定义与用法。分享给大家供大家参考，具体如下： 初学js的时候，被回调函数搞得很晕，现在回过头来总结一下什么是回调函数。 我们先来看看回调的英文定义：A callback is a function ...
php数组函数array_key_exists()小结
10-23
本文给大家汇总介绍了php数组函数array_key_exists()的相关知识以及与in_array的性能对比，与isset的区别分析，非常的详细，有需要的小伙伴可以参考下。
函数实参(Argument)与形参(Parameters)的区别及应用（默认值与实参可选） | Python
12-21
形参（parameter）：在函数greet_user()的定义中，变量username是一个形参——函数完成其工作所需的一项信息。 实参（argument）：在代码greet_user('jesse')中，值'jesse'是一个实参——调用函数时传递给函数的信息...
JS函数的定义与调用方法
weixin_33859665的博客
08-25 1137
JS函数调用的四种方法：方法调用模式，函数调用模式，构造器调用模式，apply,call调用模式 1.方法调用模式：先定义一个对象，然后在对象的属性中定义方法，通过myobject.property来执行方法，this即指当前的myobject 对象。var blogInfo={　　blogId:123,　　blogName:"werwr",　　showBlog:function(){alert...
js函数传参——参数与arguments对象
weixin_44283589的博客
04-14 1822
arguments 函数接收参数，实际上是接收到一个数组 ECMAScript函数即使定义的函数只接收2个参数，在调用此函数时也不是必须要传2个参数才行，可以传一个、多个甚至是不传。之所以会这样是因为ECMAScript中的参数在内部是用一个数组来表示的； 函数接收到的始终是这个数组，而不关心数组中包含了哪些参数。 用arguments访问参数数组 在函数的体内可以通过arguments这个对象来访问这个参数数组，来获取传递给数组的每一个参数。 arguments与数组类似（但不是arr的实例）因为和数组一
Web 页面之间传递参数的几种方法
热门推荐
忧郁的蛋的专栏
02-19 1万+
可以在不同的页面之间共享全局变量，或者在一个页面内使用模块化开发来传递参数。10、Fetch API：通过 Fetch API 发送 HTTP 请求，并通过请求的 body 传递数据。11、AJAX：通过 XMLHttpRequest 对象发送异步 HTTP 请求，通过请求的参数传递数据。2、URL hash传递：通过 URL 的 hash 值来传递参数。5、Cookie：通过在浏览器中存储 Cookie 来传递参数。3、URL 路径传递：通过 URL 的路径参数来传递参数。方法来发送请求，并通过。
web----js定义函数和调用函数
qq_43766304的博客
04-11 498
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati...
Javaweb中JavaScript的函数定义
小明的博客
11-28 1334
<head> <script type="text/javascript">函数:函数的定义格式：function 函数名(形参列表){ 函数体 ; } javascript的函数要注意的细节： 1. 在 javascript中函数定义形参时是不能使用var关键字声明变量的。 2. 在javascript中的函数是没有返回值类型的，如果函数需要返回数据给调用者，直
javaweb之EL自定义函数
weixin_30784945的博客
11-05 188
1.什么是EL自定义函数 EL自定义函数是在EL表达式中调用的某个java类的静态方法，这个静态方法需在web应用程序中进行配置才可以被EL表达式调用。EL自定义函数可以扩展EL表达式的功能，让EL表达式完成普通java程序代码所能完成的功能。 2.EL自定义函数开发步骤 编写EL自定义函数映射的java类中的静态方法：这个Java类必须带有public修饰符，方法必须是这个类的带有pu...
javascript 常见自定义函数
还不是【web】的博客
12-12 460
数组扁平化 function flattenDepth(array, depth = 1) { let result = [] array.forEach(item =&gt; { let d = depth if (Array.isArray(item) &amp;&amp; d &gt; 0) { result.push(...(flattenDepth...
JS高级---argument详解（一看机会）
一个前端小学生的博客
05-28 8368
JS---arguments对象 1. 什么是 arguments 百度说：arguments 是一个类数组对象。代表传给一个function的参数列表。（读不懂，看下面代码） 先看一段代码： function printArgs() { console.log(arguments); } printArgs("A", "a", 0, { foo: "Hello, arg
js中argument的用法
Nick_0704的专栏
06-18 2226
pageEncoding="UTF-8"%> argument解析 //js中不允许方法的重载。arguments就是实现方法重载的， //在js中 不需要明确指出参数名，就能访问它们，例如： function test() {         var s = "";         for (var i = 0; i            
js中arguments的使用
编程之路
01-19 1822
参考： https://www.cnblogs.com/LMJBlogs/p/6024148.html /** * * arguments ： * 1. 此对象能够模拟重载(参数个数不同) * 2. 每个函数都有一个Arguments对象实例arguments,它引用着函数的实参 * 3. 用数组下标的形式引用arguments元素 "[]"...
shell函数删除传参的目录
03-28
下面是一个shell函数，可以删除传参的目录： ``` function delete_directory { if [ $# -eq 0 ]; then echo "Please provide a directory path as an argument." return 1 fi if [ ! -d "$1" ]; then echo ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值