同学们大家好啊, 很欢迎大家来到我们本周的知识小课堂, 本周我们给大家带来了精彩的JS大餐! 相信大家也迫不及待了吧! 时间紧迫,让我们一起来品味JS带给我们的乐趣吧!
Javascript总结
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…（万物皆对象）此外，JavaScript 允许自定义对象。
浏览器对象模型
组成:
ECMAScript——基本语法(if,for,var变量，function)
DOM——文档对象模型，操作页面元素
主要包括HTML文档的属性和方法，像对HTML节点的操作，CSS的操作和HTML事件的监听和处理。
BOM——浏览器对象模型，操作浏览器
BOM的常见对象
BOM对象
window:浏览器顶级核心对象是window,它表示浏览器的一个实例
BOM的核心对象是window是顶级对象,它表示浏览器的一个实例—–皇上。
页面文档顶级对象是document—-总管太监
no.1
window对象:
对象的常用属性和方法:window对象作为BOM的顶层对象，拥有众多的 “方法、属性和事件。
Navigator location history screen 都是最为window的属性保存的,可以通过window对象操作,也可以直接操作。
固定对话框:
alert(警告对话框) alert(“Hello world”);
confirm(确认对话框)返回值为boolean类型，返回值为boolean类型 确定true / 取消false
打开窗口:用open打开新窗口 open(features) ，
var win = window.open() 返回参数为被打开的窗口引用
window.opener 可以通过opener获取打开着的引用
function openW1(){
window.open(“X.html”,”W1″,”width=400px,height=300px”);
}
function openW2(){
window.open(“X.html”,”W1″,”width=400px,height=300px,toolbar=1″);
}
function openW3(){
window.open(“X.html”,”W1″,”width=400px,height=300px,toolbar=yes,status=1,menubar=1″);
}
</script>
倒计时执行(setTimeout):倒计时器:
setTimeout: 方法可以返回一个倒计时器（延时调用）,只会执行一次, 不能循环执行, 清除指定的延时调用clear Timeout（）
定时执行 (setInterval):定时器::
setInterval:定时重复调用. 方法可以返回一个定时器（可以每隔一段时间来执行指定的内容）。
注意: 无论是setTimeout setInterval当多次调用时会加快
倒计时:clearTimeout();或clearInterval();
代码里面的3000指的是3秒
在代码里秒的换算是毫秒与秒的换算
1000毫秒=3秒
no.2
history对象:
history对象是window对象的一个属性，我们通过history来控制浏览器访问过的历史记录，可以在历史记录中进行导航。（只有有了历史记录才能前进后退）
length:当前访问的链接数量
其提供了以下常用的方法：
名称
说明
back()
后退
forward
前进
go(数值)
其中go(1) 相当于forward()；而go(-1)相当于back()。
将新子节点插入到指定子节点之前
第
1
点
—节点（node）—
我们把上图DOM树中的每一个矩形称之为”节点”(node)，节点用来表达树的结构，节点可以分为很多种类型(nodeType)，常用的如下：
名称
值
说明
元素节点
1
html标签。例如：title、a、h1
属性节点
2
html标签中的属性。例如：href
文本节点
3
文本信息。例如：“我的标题”
节点与节点之间的关系可以是：
父子关系。例如 元素a 的parentNode 为body节点；而body的firstNode是元素a；body的lastNode是元素h1。
兄弟关系：例如 元素a 的nextSibling 为 元素h1。
第
2
点
—获取元素节点—
通过document对象调用对应方法
getElementById(); 通过元素id属性值获取一个对应元素对象
getElementsByTagName();
通过标签元素的标签名来获取一组的元素对象,
方法返回一个类数组对象,所有查询的元素都会到该类数组对象中
即使元素只有一个也会封装操作
getElementsByName();
通过标签元素的name属性值来获取一组的元素对象
方法返回一个类数组对象,所有查询的元素都会到该类数组对象中
即使元素只有一个也会封装操作
getElementsByClassName();
根据class属性值查询一组元素对象
方法返回一个类数组对象,所有查询的元素都会到该类数组对象中
但是该方法不兼容IE8及其以下版本浏览器
DOM为每个节点引入了多个属性，来表达关系：
名称
描述
childNodes
当前节点的所有子节点组成的集合。
firstChild
长子节点。
lastChild
小儿子节点。
parentNode
父亲节点。
nodeValue
文本节点的内容值。
nodeName
节点的名称，文本节点的nodeName默认为#text。
nodeType
节点的类型。
nextSibling
弟弟节点。
previousSibling
哥哥节点。
文档document:一个页面就是一个文档
节点Node:页面中所有的HTML标签、属性、文本、注释
元素Element(对象):页面中所有的HTML标签
常用节点分四类:
文档节点:整个HTML文档
元素(标签)节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点:标签中的文本内容
<div id = “m”>文本内容</div>
第
3
点
—创建节点(create Element)—
1.创建一个元素对象，将创建好的元素节点对象作为返回值返回
语法：document.createElement(“标签名“)
2、createTextNode()
创建一个文本节点对象,
需要一个文本内容作为参数,方法将会根据文本内容创建文本节点,并将创建好的节点作为返回值返回。
语法：document.createTextNode(“文本内容”);
appendChild()向一个父节点中添加一个新的子节点
语法: 父节点.appendChild(子节点);
insertBefore() insertBefore(a,b);的意思是在b的前面插入a
第
4
点
—节点关系—
1、父级关系（父节点） 2、子级关系（子节点） 3、兄弟关系（兄弟节点）
2、属性节点：（attributes）
nodeValue:查看节点的属性值
nodeName:查看节点的属性名
children：不是标准的属性，但是所有浏览器都支持（找到某个元素下的所有元素的子节点）（不包括换行）
parentNode:查找某个元素的父节点
nextElementSibling:找到某个元素的下一个兄弟节点
previousElementSibling:找到某个元素的上一个兄弟节点
firstElementChild:某个元素的第一个子节点
lastElementChild:某个元素的最后一个子节点
childNodes:找到某个元素的所有子节点（包括文本节点，换行……）
children：找到某个元素的所有文本节点（但其不是标准的属性）
offsetParent:最近的有定位属性的祖先节点（如果都没有定位，则走向body）
1>document.createElement(tagName);//通过标签名的形式创建一个元素
2>parentNode.appendChild(childNode);//往一个节点里边添加一个子节点，注意是添加在最后
3>parent.insertBefore(childNode1,childNode2);//忘一个节点的指定子节点前边插入一个节点（注意：如果第二个参数为假的，那么会将某个元素添加到父元素的末位）
4>parentNode.removeChild(childNodes);//从一个节点中删除指定的子节点（注意：如果指定的子节点没有，那么就会报错）
obj.remove()//删除自身
5>parentNode.replaceChild(node,childNode) node是用来替换的节点，childNodes被替换的子节点（两个参数都必须写）
6>node.cloneNode(boolean)克隆一个节点
如果为true：克隆元素和元素包含的子孙节点
如果为false：克隆元素但不包含元素的子孙节点（事件是不会被克隆的）
注意：appendChild/insertBefore/replaceChild在操作一个已有的元素时，是将已有的元素移动，而不是复制一份进行操作
document对象:管控页面内容
document对象也是window对象的一个属性，它就是来管控页面内容的。
document常见属性:
bgColor
获取或设置页面的背景颜色。
documentElement
获取html节点的引用。
title
获取或设置页面的标题。
all
所有html元素构成的数组
forms
所有form构成的数组
images
所有img构成的数组
frames
页面中所有frame构成的数组
dom树中的元素拥有的常见方法
getElementsByTagName：获取指定标签名称对应的js对象集合。
appendChild：给当前节点添加子节点对象（追加的方式）。
insertBefore：给当前节点添加子节点对象（插入的方式，需要指定 一个参考点插入到它之前）。
removeChild：移除指定的子节点。
cloneNode：克隆指定节点得到一个新节点
document.documentElement.scrollTop:获取滚动条向下滚动的距离
parentNode：父节点document.getElementById(“txtA”)：用来获取一个id为txtA的js对象。document.title：获取或设置当前页面的title。document.write：是写入HTML的内容。
1.可以通过className属性为js对象指定class值，来控制其显示。
2.可以通过style属性为js对象指定单个的样式呈现
3.在使用style时，原来在样式中的写法 例如：font-size要去掉中划线并将第二个单词的首字母大写
窗口交互：
在当前窗口中，通过window对象的parent或top属性，获取父窗口或顶层窗口对象。
通过父窗口或顶层窗口的frames属性来获取某个子窗口对象
进而就可以访问子窗口的内容了。
iframe交互:
<script type=”text/javascript”>
在iframe子窗口中，关闭父窗口。
function btn_click(){
alert(“ABC”);
}
</script>
top等于parent么?只有在出现多层框架时，才会不同。
01
集合数组及其应用
1,数组: 同一种数据类型的集合。（长度是固定的）可存储一系列值(相当于集合) ,变量只能保存一个值，而数组可以存储一系列值
优点: 数组中的元素从0开始编号，方便操作这些元素。
格式1: var 数组名 = new 元素类型[元素个数或数组长度]var arr = new int [8];
var 数组名=new Array(长度)；//声明并分配内存空间；
数组名[下标]=值；//赋值，下标从0开始。
格式2: var 数组名 = new 元素类型{元素，元素，……}
var arr = new int {9,8,0,7,0};
var 数组名=[值1,值2，……];
标志符号:“[ ]” 计数从零开始 索引(下标)
new关键字，表示创建一个新的对象。
创建一个空的数组，虚拟机会自动给数组赋值为0。
赋值：Var [7]＝8；//为下标为7的那项赋值
alert(arr[7])；//取值
alert(arr.length);//取数组长度
理解:array数组可以存储一系列值，如果我们把变量当成一个数据点，那么数组就是一个数据线
向数组最后加一个元素
语法：数组名[数组名.length]=值
数组的长度不是固定的，而是动态修改的。
语法：Arrays.sort(数组名);可以使用 sort( ) 方法实现对数组的排序，只要将数组名放在 sort( ) 方法的括号中，就可以完成对该数组的排序（按升序排列）
数据类型可以是纯数字，也可以是数字,字符串,日期,布尔等混合在一起。
如果只写一个数值，那么默认为给数组定义的长度语法：Arrays.toString(数组名);
可以使用 toString( ) 方法将一个数组转换成字符串，该方法按顺序把多个数组元素连接在一起，多个元素之间使用逗号和空格隔开
方法和属性
名称
说明
length()属性
像Java或C#，length表示数组中元素的个数。
concat(xArr)方法
将多个数组合并为一个。
join(分隔符)方法
将数组中的内容自动拼接为一个字符串（默认以逗号作为分隔符）。
reverse()方法
将数组中的元素顺序进行反转。
sort()方法
对数组中的元素进行排序。（但是大家要注意：由于数组中的元素多样，此方法的排序不准确）
push(obj)方法
在数组的末尾追加元素
pop()方法
删除并返回数组末尾的元素
splice(i,n)方法
删除数组中从指定下标i开始长度为n个的元素。
shift()方法
删除并返回数组头部的元素
unshift(obj)方法
向数组的0下标位置插入元素
长风破浪会有时 直挂云帆济沧海
冒泡排序:
N个数字来排序，两两相比小靠前
口诀（升序):N个数字来排序，两两相比小靠前，外循环N-1,内循环N-1-i。temp的作用:中间容器.
常见方法与属性
length()属性，表示数组中元素个数；
join(分隔符)方法，表示自动拼接;
concat()方法，多个数组合并；
reverse()方法，数组顺序反转；
1、通过JS修改元素的内联样式
语法: a、元素.style.样式名 = 样式值;
b、元素.style.setProperty(‘样式名’,’值’);
例如：
元素.style.width = 样式值;
元素.style.height = 样式值;
元素.style.backgroundColor = 样式值;
但是,如果CSS的样式名中有-,这样的名称在JS中不合法,需要将样式名去掉-修改为驼峰命名法. backgroudColor, -后的单词首字母大写
需要注意的是,通过style属性设置的样式是内联样式 行内样式,并且行内样式的优先级高于行外样式,所有修改完样式就会立即显示。
float写法特殊: style.cssFloat
如果在样式中设置了 !important ,则该样式会有最高的优先级,即使JS修改了也无法覆盖该样式,导致JS修改失效.所以尽量不要给样式添加!important
2、读取CSS样式
语法: 元素.style.样式名;
注意:通过JS读取元素的内联样式,通过style属性设置和读取的都是内联样式,无法读取行外样式,如果内联中没有CSS样式,那么读取出来的就是空。
3、移除某个 CSS样式
元素.style.removeProperty(‘样式’);
DOM查询其他方法
获取body标签
因为document中只有一个body标签,不需要在她通过ByTagName获取,document为我们提供了一个属性 body,属性中存储的是关于body的引用。
