JS-02

JS-02

一、函数

1.初识函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数也是一个对象，只不过这个函数对象里面封装的时一些可执行的代码

2.创建函数

function命令， 使用关键词 function来声明函数

function 函数名（）{}

​ 注：关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

3.函数的调用

函数会在什么情况下调用：

1、当事件发生时（点击按钮，例如轮播图中的小圆点）
2、当js代码调用时 cfb();

4.函数的参数

形参：形式上的参数，没有实际值，形参只作用于函数内部
（函数体后面（）中的参数是形参）

实参：实际上有值的参数
（调用函数的时候（）中传入的参数值是实参）

二、DOM

1.基本概念

1.１、文档对象模型（Document Object Model，DOM）是表示和操作HTML和XML文档内容的基础API。

1.２、当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。

1.３、Document和Element是两个重要的DOM类。

2.选取文档元素

2.１.用指定ID选取元素

用Document对象的getElementById()方法

2.2.用指定名字选取元素

使用Document对象的getElementsByName()方法

2.3用指定标签名选取元素

getElementsByTagName()

2.4.用指定CSS类选取元素

调用getElementsByClassName()

3.类名的修改和操作

①添加和删除类名 元素.classList.add(); 元素.classList.remove();

②切换类名 元素.classList.toggle();
toggle在有相同类名时执行删除，没有相同类名时执行添加

4.获取和设置元素内容和属性

4.1.获取和设置元素内容

①innerText方法
②innerHTML方法

三、BOM

1.基本概念

1.1.简称浏览器对象模型
1.2.能利用BOM做什么？

BOM提供了一些访问窗口对象的一些方法；

我们可以用它来移动窗口位置，改变窗口大小，
打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息；

如：浏览器品牌版本，屏幕分辨率。

2.window对象的方法和属性

window对象是浏览器窗口对文档提供的一个现实的容器，代表打开的浏览器窗口，是每一个加载文档的父对象

window的属性和方法调用方法:window.属性，window.方法
也可以直接调用省略 window.

2.１.对话框

alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示可提示用户输入的对话框。返回值为布尔值
prompt() 显示带有一段消息以及确认按钮和取消按钮的对话框。

2.２.窗体控制

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
	１.URL:声明了要在新窗口中显示的文档的 URL。
	２.name:声明了新窗口的名称或者窗口目标。
	３.features:声明了新窗口要显示的标准浏览器的特征。
	４．窗口的属性：
		width:新建窗口宽度
		heigth:新建窗口高度
		top:左上角垂直坐标
		left:左上角水平坐标 

3. 定时器

设置定时器

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

清除定时器

clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

４.其他方法

print() 打印当前窗口的内容。
blur() 把键盘焦点从顶层窗口移开。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。

５.Window 对象属性

innerWidth 返回窗口的文档显示区的宽度。
innerHeight 返回窗口的文档显示区的高度。

name 设置或返回窗口的名称。
opener 返回对创建此窗口的窗口的引用。
closed 返回窗口是否已被关闭。
self 返回对当前窗口的引用。
top 返回最顶层的先辈窗口。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
status 设置窗口状态栏的文本。

6.History对象的常用方法

history对象有back和forward两个方法，它可以跳转到当前页的上一页和下一页，可以用length属性查看客户端浏览器的历史列表中访问的网页个数

back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。

7.Location 对象

Location 对象的属性

href 设置或返回完整的 URL。
host 设置或返回主机名和当前 URL 的端口号。
hash 设置或返回从井号 (#) 开始的 URL（锚）。
hostname 设置或返回当前 URL 的主机名。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
Location 对象的方法
assign() 加载新的文档。
reload() 重新加载当前文档。

replace() 用新的文档替换当前文档。
replace() 方法不会在 History 对象中生成一个新的记录。
当使用该方法时，新的 URL将覆盖 History 对象中的当前记录。

8.Screen 对象

availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
height 返回显示屏幕的高度。
width 返回显示器屏幕的宽度。
bufferDepth 设置或返回调色板的比特深度。

9.Navigator 对象属性

appCodeName 返回浏览器的代码名。
appMinorVersion 返回浏览器的次级版本。
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
userAgent 返回由客户机发送服务器的 user-agent 头部的值
onLine 返回指明系统是否处于脱机模式的布尔值。

四、事件

事件就是Web浏览器通知应用程序发生了什么事情。

事件名称：

load	页面或图像被完成加载
click	鼠标点击某个对象
mousedown	鼠标按键被按下
mouseup	鼠标按键被松开
mouseout	鼠标从某元素移开
mouseover	鼠标被移到某元素之上
abort	图像加载被中断
blur	元素失去焦点
change	用户改变域的内容
dblclick	鼠标双击某个对象
error	当加载文档或图像时发生某个错误
focus	元素获得焦点
keydown	键盘的键被按下
keypress	键盘的键被按下或按住
keyup	键盘的键被松开
mousemove	鼠标被移动
reset	重置按钮被点击	
resize	窗口或框架被调整尺寸
select	文本被选定
scroll  元素滚动条在滚动时触发。
submit	提交按钮被点击
unload	用户退出页面