接上期,我们继续学习了函数
一、函数的定义:①输入一些内容,经过函数处理,输出一些内容。
②函数里会封装一些代码,可以重复使用。
二、函数的声明
①语法:function(关键字) 函数名(自定义的标识符) (){}
var 函数名 = function(){}
2.声明函数之后,类似于定义好一个变量,需要去使用。
3.调用函数
语法:函数名();
()里放传入的参数(形式参数)
参数概念:①实参:调用函数的时候,必须传入声明时,可以传入小于等于形参个数的声明。
②形参(可以看作是变量):声明函数的时候,可以声明形参,不限个数(可以是0个或多个)。
4.作用域
①全局作用域:全局变量,在全局作用域中都能使用。
②局部作用域:函数的{ }内就是局部作用域,局部变量会在代码执行到局部作用域结束时自动销毁
形参可以看作局部变量。
③规则:全局作用域内不可以使用局部变量,会出现未定义错误。
局部作用域内可以使用全局变量,会修改全局变量的值.。
5.立即执行函数:①没有函数名
②函数定义被()包裹
③立即在最后传入实参
④只会执行一次
(function(a,b){
alert(a+b);
})(4,5)
Dom节点(document object model)
一、概念:在 js中 页面由节点组成,一个 节点就是一个对象。
对象:代码世界里,除了有基本数据类型,还有对象。
对象是一种复杂的数据结构:由属性和函数组成.。
二、节点的分类:
1、整个文档是一个节点
2、每一个html是一个元素节点
3、html元素内的文本是文本节点
4、属性节点
5、注释节点
三、可以通过js代码获取节点(获取节点dom的方法)
1、根据元素的id值获取元素,因为id是唯一的,获取的是单个元素.
语法:document.getElementById("id值")
2、根据元素的class值,因为class值可以赋值给多个元素,所以这种方法获取的是元素数组,数组内存放的是元素节点对象。
语法:document.getElementsByClassName("class值")
3、根据标签获取元素,因为标签可能重复,所以这种方法返回的也是元素数组。
语法:document.getElementsByTagName(“标签名称”)
4、根据选择器获取元素.
语法:document.querySelectorAll("选择器")
5、根据name属性值.
因为name的值可以重复,所以这个方法返回也是元素组。
四、页面元素
获取页面元素后
1、可以修改标签内的文本
通过对象.innerHTML的方式可以修改元素的文本
2、可以修改标签的属性
通过对象.属性名的方式修改属性值
通过对象.setAttribute(要修改的属性名称,修改后的属性值)
3、可以修改元素的样式
增加页面元素
1.使用js代码创建一个页面元素
语法:doument.creatElement(元素标签名)
返回创建好的元素节点
2.将元素增加到文档流中
1、 父元素.appenChild(子元素);
需要找到父元素,如果没有父元素,可以用body作为父元素,向父元素中最后添加子元素
2、 父元素.insertBefore(待插入的子元素,被插队的子元素);
在某个元素之前插入新元素
3.删除页面元素
语法:父元素.removeChild();
事件
一、概念:事件就是用户与浏览器的互动
分类:鼠标点击
键盘事件
滚轮事件
聚焦事件
失焦事件
二、事件的绑定
语法: 元素.事件 = 触发函数
可以给同一个元素,添加多个不同事件
语法: 元素对象.addEventListener()
1、参数:
①事件字符串,而且字符串内没有on.
②事件触发的回调函数。
③是布尔值,是否在事件捕获阶段执行触发函数。
2、特点:给相同元素添加多个相同点击事件时,不会覆盖前面的事件,执行的顺序按照添加事件 的顺序执行。
三、事件的冒泡
1.当后代元素事件被触发时,祖先元素上的相同事件也会被触发
2.通常情况下,冒泡是需要的,一般不做处理,但是也有特殊情况
3.如果需要事件不冒泡:使用event对象的canceBubble属性(值是布尔类型)
四、事件的委派
把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
五、事件的传播
1、事件流:事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点 都会收到该事件,这个传播过程即DOM事件流。
2、事件流的三个阶段
①捕获阶段:事件对象从目标的祖先节点Window开始传播直至目标。
②目标阶段:事件对象传递到事件目标。如果事件的type属性表明后面不会进行冒泡操作,那么事件到此就结束了。
③冒泡阶段:事件对象以一个相反的方向进行传递,从目标开始,到Window对象结束。
以上就是我对JS的第二阶段的学习啦,之后就再更~