函数初步接触

Posted 2020-09-11 李大宝

---恢复内容开始---

【函数的声明及调用】

1、函数声明的格式：

function 函数名(参数1,参数2,参数3,……){

//函数体

return 结果;

}

>>>函数的调用格式：

直接调用：函数调用的格式：函数名(参数一的值，参数二的值，……)；

事件调用：事件名=函数名( );

2、函数声明的几点强调：

①函数名的声明，必须符合小驼峰法则 (首字母小写，之后每个单词首字母大写)；

②参数列表，可以有参数，可以无参数，分别称为有参函数、无参函数；

③声明函数时的参数列表，称为“形参列表”（变量的名）；

调用函数时的参数列表，称为“实参列表”（变量的值）；

函数中，实际有效的参数取决于实参的赋值，未被赋值的形参，将为Undefined；

④函数如果需要返回值，可用return返回结果。

调用函数时，使用var 变量名=函数名（）；的方式，接受返回结果；

如果函数没有返回值，则接受结果为Undefined。

 

⑤函数中变量的作用域：

在函数中，使用var声明的变量，默认为函数局部变量，只在函数内部能用；

不用var声明的变量，默认为全局变量（函数中的全局变量，必须在函数调用后才能使用）；

函数的形参列表，为函数局部变量，只在函数内部使用。

 

⑥函数声明与函数调用，没有先后之分。即，调用语句可以写在声明语句之前。

 

 

 

【匿名函数的声明及调用】

1、声明一个匿名函数，直接赋给某个事件；

window.onload=function(){ };

2、使用函数表达式声明匿名函数;

声明函数表达式：var func=function(){ }

调用函数表达式：func（）；

>>>使用匿名函数表达式，则调用语句，必须在声明语句之后，否则报错（对比

常规函数声明与调用区别？)

 

3、使用自执行函数，声明并直接调用匿名函数：

①！function（）{ }（）；//使用任意运算符开头，一般使用！

②（function ( ){ }( )）；//使用（）将匿名函数之后的括号包裹

③(function( ){ })( ) //使用( )只包裹匿名函数表达式

三种写法特点：

①结构清晰，开头加！，结尾加()。不容易乱，推荐使用；

②可以表明匿名函数与之后的()为一个整体，推荐使用；

③无法表明函数与之后()为一个整体，不推荐使用：

 

 

arguments对象

1.作用 用于保存调用函数时，所赋值的实参列表

>>> 当我面调用函数，并使用实参赋值时，实际上参数已经保存到arguments数组中，即使没有形参，也可以使用arguments(n)的形式调用函数

2.arguments数组的个数，取决于实参列表，与形参无关(顺序从0开始)

但，第N个位置实参，形参，arguments都存在时，arguments与形参同步，其中一个改变另一个也改变

 

 

3.arguments.callee是arguments的重要属性，用于返回arguments所在函数的引用

arguments.callee()可以调用自身函数执行

在函数内部调用函数自身的写法，被称为递归，所以arguments.callee()是递归调用的常用方式

 

this函数调用语句所在的作用域，即，谁调用函数，this指向谁

 

【JS中代码执行顺序】

JS中代码运行，会先进行检查、装载，即声明变量、函数等操作；

然后再进入执行阶段，（变量的赋值等属于执行阶段）。

 

所以，函数的声明属于检查装载阶段，函数的调用属于执行阶段。so，函数调用语句写在函数声明语句之前，并没有任何关系。

 

 所以，上述代码，执行流入

 ------检查装载阶段------

 var num;//声明变量

 function funcN() //声明函数

 

 ------执行阶段------

 console.log(num);

 num=10;

 funN(); //执行函数的{}中代码

 

JS-BOM

 

1.screen对象

screen.width 屏幕宽度

screen.height 屏幕高度

screen.availWidth 可用宽度

screen.availHeight 可用高度=屏幕高度-底部任务栏

 

2.location对象

完整的URL路径：

协议://主机名(IP地址):端口号/文件路径？传递参数(name1=value1&name2=value2)#锚点

 

3.使用JS设置页面跳转

location.assign() 加载新的文档，加载以后，可以回退

location.replace() 使用新的文档，替换当前文档。替换以后，不能回退

location.reload() 重新加载当前页面。

reload(true)：从服务器重新加载当前页面

reload():在本地刷新当前页面

 

4.history

1、length：浏览历史列表的个数

2、history.forward(); 前进到前一个页面

3、history.back(); 后退到后一个页面

4、history.go(-1); 跳转到浏览历史列表的任意位置

位置标志： 当前页为第0个，前一个页面第1个，后一个页面-1个

 

5.navigator.plugins。返回一个数组，检测浏览器安装的所有插件

>>>主要的属性：

description:插件的描述信息

filename:插件在本地磁盘的文件名

length:插件的个数

name：插件名

 

6.navigator.mimeTypes 浏览器插件，所支持的文件类型

>>>主要属性

description：MIME类型描述

enabledPlugin：支持此类型的浏览器插件

suffixes：此类型可能的后缀名

type：MIME类型的写法，例如： image/x-icon text/css

 

【重点】 window对象的常用方法

>>> window对象中的所有方法，均可以省略前面的window. ,比如close();

 

1、prompt：弹窗接收用户输入；

2、alert:弹窗警告；

3、confirm：带有确认/取消 按钮的提示框；

4、close:关闭当前浏览器选项卡

5、open：重新打开一个窗口，传入参数：URL/窗口名称/窗口特征

6、setTimeout：设置延时执行，只会执行一次；

7、setInterval：设置定时器，循环每个N毫秒执行一次；

两个参数：需要执行的function / 毫秒数

 

8、clearTimeout：清除延时

9、clearInterval：清除定时器

传入参数：调用setInterval时返回一个ID，通过变量接受ID,传入clearInterval

 

 

【DOM树节点】

DOM节点分为三大类：元素节点、文本节点、属性节点

 

文本节点、属性节点，为元素节点的两个子节点；

通过getElement系列方法，可以去到元素节点。

【查看节点】

1、getElementById：通过ID获取唯一的节点；多个同名ID，只会取第一个；

2、getElementsByName：通过Name取到一个数组，包含1到多个节点；

使用方式：通过循环，取到每一个节点。循环次数：从0开始,<数组.length

 

【查看和设置属性节点】

1、查看属性节点： getAttribute("属性名");

2、设置属性节点： setAttribute("属性名","属性值");

【JS修改样式总结】

1、.className : 为元素设置一个新的class名字；

div1.className = "class1";

2、.style : 为元素设置一个新的样式，注意驼峰命名法；

div1.style.backgroundColor = "red";

3、.style.cssText : 为元素同时修改多个样式；

div1.style.cssText = "width:100px;height100px;";

【查看节点】

1、tagName属性：获取节点的标签名；

2、innerhtml:设置或者获取节点内部的所有HTML代码；

3、innerText:设置或者获取节点内部的所有文字；

 

JS节点操作及DOM表格

 

[获取层次节点的常用属性]

 

1 .childNodes：(数组)获取元素的所有子节点

2 .firstChild：获取元素的第一个子节点；

3 .lastChild:获取元素的最后一个子节点；

4 .ownerDocument:获取当前文档根节点。在html文档中，为document节点

5 .parentNode:获取当前节点的父节点；

6 .previousSibling:获取当前节点的前一个兄弟节点

7 .nextSibling:获取当前节点的后一个兄弟节点

 

注：上述属性，均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应Element属性，例如：firstChild--->firstElementChild

 

8 .attributes:获取当前元素节点的所有属性节点

 

 

【创建并新增节点】

 

1、.createElement("标签名"): 创建一个新的节点。需要配合.setAttribute()方法设置新节点的相关属性；

2、 .appendChild(节点名): 在某元素的最后追加一个新节点

3、 .insertBefore(新节点名,目标节点名):将新节点，插入到目标节点之前

4、 克隆节点.cloneNode(true/false): 需要克隆谁，就用谁去调用克隆对象；

>>>传递参数可以为true或false:

① true表示：克隆当前节点及所有子节点；

② false表示：只克隆当前节点，不可隆子节点(默认)

 

 

【删除/替换节点】

 

1、 .removeChild(需删除节点):从父容器中，删除指定节点；

2、 .replaceChild(新节点,被替换节点):用新节点替换指定节点。如果新节点为页面中已有节点，会将此节点删除后，替换到指定节点。

 

[表格对象]

1、 rows属性： 返回表格中的所有行，数组；

2、 insertRow(index)： 在表格的第index+1行，插入一个新行

3、 deleteRow(index)： 删除表格的第index+1行。

 

[表格的行对象]

1、 cells属性： 返回当前行中的所有单元格，数组；

2、 rowIndex属性： 返回当前行，在表格中的索引顺序，从0开始；

3、 insertCell(index)： 在当前行的第index+1处插入一个<td>

4、 deleteCell(index)： 删除当前行的第index+1个<td>

 

[表格的单元格对象]

1、 cellIndex属性：返回单元格在改行的索引顺序，从0开始；

2、 innerHTML属性： 返回或设置当前单元格中的HTML代码；

3、 align属性： 设置当前单元格的水平对齐方式；

4、 className属性： 设置单元格的class名称；

---恢复内容结束---