首页 > 代码库 > 函数初步接触

函数初步接触

2024-09-15 09:42:28   220人阅读

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

【函数的声明及调用】
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名称；

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

函数初步接触


联系
我们