一、JS中的函数
【关于注释】
/**
【文档注释】:开头两个*。写在函数上方,在调用函数时可以看到文档上方的描述信息。
*/
![](https://i-blog.csdnimg.cn/blog_migrate/fe9c1c7401e554cf02211902b8c7e7a8.png)
// 单行注释
/* 多行注释 */
1、函数的声明及调用
(1)函数的声明格式
function 函数名(参数1,参数2,......){
//函数体代码
return 返回值;
}
![](https://i-blog.csdnimg.cn/blog_migrate/4678ad5a8010a6f9ee422731737f6fdb.png)
(2)函数的调用
① 直接调用:函数名(参数1的值,参数2的值,......);
② 事件调用:直接在HTML标签中,直接使用事件名="函数名()";
eg. <button οnclick="sayHello('Hello,Genista!','pink')">点击按钮,打印内容</button>
【 函数的注意事项 】
① 函数名必须要符合小驼峰法则,首字母小写,之后每个单词首字母大写;
② 函数名后面的括号()中,可以有参数,也可以无参数,分别称为有参函数和无参函数。
③ 声明函数时的参数列表,称为形参列表,形式参数,即变量的名字;
eg. function sayHello( str,color ){}
调用函数时的参数列表,称为形参列表,实际参数,即变量的赋值;
eg. sayHello("Hello,Genista!","blue");
④ 函数的形参列表个数与实参列表个数没关系;
函数的参数个数,取决于实参列表;实参多了不出错,只是没有形参接收他的值。
如果实参列表的个数 < 形参列表,则未赋值的形参,将为undefined;
⑤ 函数可以有返回值,使用return返回结果,调用函数时,可以使用一个变量接收函数的返回结果。
如果函数没有返回值,则接收结果为undefined;
eg. function func(){
return "haha";
}
var num = func(); // num = "haha"
⑥ 函数中变量的作用域:
在函数中,使用var声明的变量,为局部变量,只能在函数内部访问;
在函数中,不用var声明的变量,为全部变量,在函数外面也能访问;
函数的形参列表,默认为函数的局部变量,只能在函数内部使用;
⑦ 函数的声明与函数的调用没有先后之分,即可以再声明函数前调用函数;
eg. func(); //声明func之前调用也是可以的
function func(){}
2、匿名函数的声明和使用
(1)声明一个匿名 函数,直接赋值给某一个事件;
window.onload = function(){} 窗口加载完成函数
【区别】function 函数名(参数1,参数2,......){
//函数体代码
return 返回值;
}
![](https://i-blog.csdnimg.cn/blog_migrate/145d158effcf665477260e17c4b505bf.png)
(2)匿名函数表达式。(变量函数-即 将匿名函数赋值给一个变量)
声明: var func = function(){}
调用: func();
【注】使用匿名函数表达式时,函数的调用语句,需要放在函数声明语句之后!!!(与普通函数的区别)
![](https://i-blog.csdnimg.cn/blog_migrate/740ca464ef5749db819586b6d12060b4.png)
(3)自执行函数。
① !function(){}(); //可以使用多种运算符开头,但一般用!
!function(形参列表){}(实参列表);
② ( function(){}(); ) //使用()将函数及函数后的括号包裹
③ ( function(){})(); //使用()只包裹函数部分
三种写法的特点:
① 使用!开头,结构清晰,不容易混乱,推荐使用;
② 官方推荐写法,能够表明匿名函数与调用的()是一个整体。
③ 无法表明匿名函数与调用的()的整体性,不推荐使用。
![](https://i-blog.csdnimg.cn/blog_migrate/fbdb5dc55e3aebf2047ee01b6996f5b4.png)
(4)JS代码的执行顺序问题
JS代码在运行时,会分为两大部分:
检查装载阶段:会先检测代码的语法错误,进行变量、函数的声明;
执行阶段:变量的赋值和函数的调用等
以下面代码为例:
console.log(num); //undefined
var num = 10;
func1(); //函数可以正常执行
var function func1(){}
func2(); //函数不能正常执行,打印func2时显示undefined。
var func2 = function(){} //函数表达式(匿名函数)
【原因】:上述代码执行顺序为:
检查装载阶段运行的代码 —— 变量、函数的声明
var num;
var function func1 (){}
var func2;
执行阶段运行的代码 —— 变量的赋值、函数的调用
console.log(num);
num = 10;
func1();
func2();
var func2 = function(){}
3、函数的内部属性
(1)arguments 对象数组
① 作用:用于储存调用函数时的所有实参。
当我们调用参数,并使用实参赋值时,实际上参数列表已经保存到arguments数组中,
可以在函数中,使用arguments[n]的形式调用。n从0开始。
② arguments数组的个数,取决于实参列表,与形参无关。
但是,一旦第n个位置的形参、实参、arguments都存在时,形参将与arguments绑定,同步变化, 即,在函数中修改形参的值,arguments也会改变,反之,也成立。
![](https://i-blog.csdnimg.cn/blog_migrate/6a3b5989f5fa5211e61686033ca33f6b.png)
③ arguments.callee 是arguments的重要属性。
表示当前所在函数的引用地址。 在函数里面可以使用arguments.callee调用函数本身,
在函数内部调用函数自身的写法,叫做递归。
递归分为两部分:递和归。以递归调用语句为界限,可以将函数分为上下两部分。
递:当函数执行上半部分遇到自身的调用语句时,继续进入内层函数,在执行上半部分,直到执行完最内层函数。
归:当最内层函数执行完以后,再从最内层函数开始,逐渐执行函数的下半部分。
当最外层函数值形式,遇到自身调用语句,会进入内层函数执行,而外层函数的后半部分暂不执行,直到最内层函数执行完以后,在逐渐向外执行。
![](https://i-blog.csdnimg.cn/blog_migrate/689d6f115d6db367ca811a06bf054bf9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2347d2729ad758a006a1528f1c537e07.png)
【补充】confirm 弹出确认、取消对话框
var is = confirm("在吗???");
if(is){
alert("在");
}else{
alert("不在");
}
二、BOM 浏览器对象模型
1、screen 对象
console.log(window.width); //屏幕宽度
console.log(window.height); //屏幕高度
console.log(window.availWidth); //屏幕可用宽度
console.log(window.availHeight); //屏幕高度 = 屏幕高度-底部工具栏
2、location 对象
console.log(location); 取到浏览器的URL信息
完整的URL的路径:
协议名://主机名(IP地址):端口号/文件所在路径?传递参数 (name1=value1&name2=value2)#锚点
eg. http://127.0.0.1:8080/wenjianjia/index.html?name=jredu#top
【location 常见属性】
console.log(location);
console.log(location.href); //返回当前完整路径
console.log(location.protocol); //返回协议名 http://
console.log(location.host); //返回主机名+端口号 127.0.0.1:8080
console.log(location.hostname); //返回主机名 127.0.0.1
console.log(location.port); //返回端口号 :8080
console.log(location.pathname); //返回文件路径 wenjianjia/index.html
console.log(location.search); //返回问好?开头的参数列表 name=jredu
console.log(location.hash); //返回井号#开头的锚点 #top
使用JS跳转页面
<1> window.location= "http://www.baidu.com";
![](https://i-blog.csdnimg.cn/blog_migrate/6a8d8c94e05835052c9fb23fcc49ace6.png)
<2>
![](https://i-blog.csdnimg.cn/blog_migrate/669f2de7e6d4c969185b92fcf489e329.png)
3、history 浏览历史
![](https://i-blog.csdnimg.cn/blog_migrate/b7ae5abd239cf0e277b5db6e6abc9f76.png)
4、navigator 包含浏览器的各种系统信息
![](https://i-blog.csdnimg.cn/blog_migrate/b5b6544fbcc97e68f15257d09c663e37.png)
三、JS中的DOM操作
1、DOM树 节点
分为三大类:元素节点、属性节点、文本节点;
文本节点、属性节点属于元素子节点,操作时均需要先取到元素节点,再操作子节点;
可以使用getElement系列方法,取到元素节点;
【查看元素节点】
1、getElementById() : 通过ID取到唯一节点;如果id重名,只能取到第一个。
getElementsByName() :通过name属性
getElementsByTagName() :通过标签名
getElementsByClassName() :通过class名
【注】获取元素节点时,一定注意:获取节点的语句,必须在DOM渲染完成之后执行,可以有两种实现方式:① 将JS代码写在body之后;② 将 代码写到window.onload函数之中。
后面三个得到的是数组格式。不能直接添加各种属性,而应该取出数组的每一个单独操作
eg. getElementsByName("name1")[0].onclick = function(){}
【查看/设置属性特点】
1、查看属性节点:getAttribute("属性名");
2、设置属性节点:setAttribute("属性名","新属性值");
【注】查看和设置属性节点 必须先取到元素节点,才能使用!
内容到此结束了~
由于本周对于基础知识掌握的并不扎实,这篇博客更多的是在帮助小女回顾一下基础知识。
希望跟我一样在学习JS的同志们,可以稳扎稳打,掌握好基础知识。
Fighting!