JS2

javascript知识体系：
该框架一共4个页面构成：
一共有4个window对象，window对象就是一个html文档。
ECMAScript, BOM(没有规范)、DOM
window对象代表一个html文档,.
//方法: alert confirm prompt close
//open => 打开一个新的窗口
//语法window.open(URL,name,features,replace)
//参数1.新打开窗口的地址
//参数2.（没有用）新打开窗口的名称
//参数3.新窗口的一些特征
//参数4.（没有用）需不需要用新打开的窗口记录来替换调用open方法
//返回新打开的窗口；
总结：window对象是由浏览器创建的，加载文档时，浏览器就自动创建，我们直接使用方法和属性即可
//理论上window对象调用方法和属性时，不需要加前缀，推荐加上“window.”

//方法：
//setInterval clearInterval
//setTimeout clearTimeout

//设置定时器，清楚定时器

//参数1：接受一个字符串，这个字符串是js代码.还可以接受一个函数对象.
//参数2：接受一个整数，单位是毫秒.

//window.setInterval("alert('aaa');",3000)；
window.setInterval(fun1, 3000);

//function fun1(){
setTime();
//3.调用setInterval 每隔一秒调用一次setTime方法.
id = window.setInterval(setTime, 10000);
}
function setTime(){
//1.获取当前时间
var date = new Date();
//2.交给文本输入框显示
document.getElementById("one").value = date.toLocaleString();
}
function fun2(){
clearInterval(id);
id = undefined;
}
//作业1： 使用setTimeout方法完成页面始终，需求跟刚才一模一样；
//属性：
c.self -> c
c.parent -> b
c.parent -> top
拿到别的页面的window对象，实现夸页面。

image.png

//history对象代表当前页面的访问历史
//获得：history对象是window对象的属性。
//方法
//forword =》 前进
//back =》 后退
//go =》 前进或后退
//Location对象代表了当前页面的地址
//属性：href ==> 用来改变当前页面的地址
//方法：参数1：可以填一个url，刷新到url指定页面。
reload() ==> 刷新当前页面

DOM： Document Object Model文档对象模型
功能：使用DOM技术可以控制页面中HTML.css
DOM一句话来说，就是把页面中的所有内容都封装成了对象。
Document文档对象、Element元素、Attribute属性、text文本、Commons注释。

Node节点：自身属性：nodeName、nodeValue、nodeType；

image.png

DOM树： Document、Element

image.png

DOM树体现了文档各个树之间的关系。

//以下这些对象全都不是我们自己创建的，浏览器加载时，就已经创建了。

image.png

//获得文档对象
var doc = window.document;
alert(doc.nodeName);//#document
alert(doc.nodeValue);// null
alert(doc.nodeType);//9
//获得元素对象
var font = document.getElementById("one");
alert(font.nodeName);//#font
alert(font.nodeValue);// null
alert(font.nodeType);//1
//获得属性对象
var color = font.getAttributeNode("one");
alert(font.nodeName);//#font
alert(font.nodeValue);// 属性值
alert(font.nodeType);//1
//获得文本对象
var text = font.text;
alert(text.nodeName);//#text
alert(font.nodeValue);// w文本内容
alert(font.nodeType);//3

//事件：给对应的元素对象，添加一个Function类型的属性。
//这个function对象会在相应的实际被调用。
//1.div获得到
var one = document.getElementById("one");
//2.为div新增一个属性( Function)
one.onclick = function() {
alert('aaa')；
}

//onblur
//onfocus
var two = document.getElementById("two");
two.onfocus = function( ){
}
two.onblur = function(){
}

onkeydown用户按下键盘弹出

动态为div增加一个a元素，点击之后跳转网页
function addNode(){
//1.创建a元素
document.createElement(“a”）;
//2.为a元素添加属性
aEle.setAttribute("href","http://www.itcast.cn")
//3.为a元素添加文本
aEle.innerHTML = "传智博客"
//4.获得目标div
var div_1 = document.getElementById("div_1")
//5.添加
div_1.appendChild(aEle);
}
//把div_2删除
function deleteNode(){
//1 获得要删除的元素
var div_2 = document.getElementById("div_2");
//2 找到该元素的父亲
var parent = div_2.parentNode;
//3 删除
parent.removeChild(div_2);
}
function updateNode(){
//1 找到要替换的div
var div_3 = document.getElementById("div_3")
//2 找到div的父亲
var parent = div_3.parentNode;
//3 创建一个img元素对象
var imgEle = document.createElement("img");
//4 添加属性(src)
imgEle.setAttribute("src", "001.jpg")
//5 替换
parent.replaceChild(imgEle, div_3);
}
//将div_4 复制，并加入到页面末尾
function copyNode(){
//1 获得要复制的div
var div_4 = document.getElementById("div_4");
//2 复制
var div_copy =
}
//DHTML ==> Dynamic HTML ==> 动态HTML ==》 z整合 HTML CSS JavaScript DOM

// 对页面中的DOM对象的增强
//

//1 获得添加按钮，添加点击事件
document.getElementById("addUser").onclick = function{
//2.获得表单中，用户名，邮箱，电话的值
//3.创建一个tr对象
//4.创建4个td，分别放入 用户名,邮箱，电话
//5.将4个td 添加到tr中
//6.tr添加到table中

//删除一行
function del(a) {
a.parentNode.parent
}

}

//反选
//1 获得反选按钮，添加点击事件
//2 获得到操作4个input 对象
//3 遍历
//判断，当前遍历的input的选中状态
//选中 ==> 不选中
//没选中 ==> 选中

//1 通过a元素得到下面的div
//2 取得页面中所有div
//3 遍历所有div
//判断当前遍历的div是不是第一步获得的div
//是 --> 设置该div属性为block
//不是 --> 设置div属性为none

//1 为id为add元素添加时间
//2 获得左侧select元素下拉所有option
//3 遍历并判断当前遍历的option是否被选中

二级联动：
//json 对象
//java 中的map key:value
//创建json对象
var json = {"name":"tom","age":18};
//拿到json中的所有键
for (var key in json){
//根据键取得对应的值
alert(key+ "==>" + json[key]);
}

//遍历json中的所有key，把key封装到option对象中，将option对象添加到省的select中
//0 获得省得select对象
//1 遍历json中所有key
//2 key封装到option对象中
//3 添加

//为province添加onchange事件
//0
//1 获得用户选择的省
//2 根据选择的省区json中取得对应市数组
//3 遍历数组中的所有市，封装到option对象中
//4 将option添加到city中