web-03-js-01
1、js外部对象
BOM对象(Browser Object Model)：浏览器对象模型（主要操作浏览器的），主要操作浏览器窗口，不跟页面发生直接联系
DOM对象(Document Object Model)：文档对象模型（主要操作html的），主要是用来实现对html页面的操作（增删改查-页面的节点），在js中已经事先定义了访问和操作html文档的标准方法
2、window(BOM对象)：浏览器窗口对象
所有js的全局对象，函数和变量都在window中
1）常用属性
-1. history：可以获取浏览器的历史记录对象
-2. document：用于获取窗口中显示的html文档对象
-3. location：用于获取窗口文件地址对象
-4. screen：获取当前的屏幕对象
-5. navigator：获取浏览器信息对象
2）常用方法
-1. 对话框
alert(); confirm(); -属于确定对话框
-2. 定时器
一般用来制作网页时钟、倒计时、 轮播
1）周期性定时器
var tid=setInterval(执行语句/函数名,间隔毫秒数,[回调函数]) -回调函数是在执行语句后执行的操作
clearInterval(tid) -关闭指定计时器
2）一次性定时器
var tid=setTImeOut(执行语句/函数名,间隔毫秒数);
clearTimeOut(tid);
3）常用对象
-1. Location
href属性：指的是当前窗口正在浏览的网页地址
Location.href="http://www.baidu.com";
reload()：重新加载当前页面（等同于按下刷新按钮）
-2. Screen -包含客户端的显示屏信息，常用于获取分辨率
width/height：当前屏幕的宽高
availWidth/availHeight：当前屏幕的可用宽高
-3. Navigator：包含浏览器的相关信息
userAgent
-4. History：用户通过浏览器访问过得URL
back(); //回退
forward()； //前进
go(num); //num>0前进 num<0后退
-5. Document
3、document
DOM树：在页面加载时由浏览器创建的，通过js可以创建动态的html，js可以修改html的属性、样式、事件
3.1 DOM操作
前提：
节点.属性 -用于获取属性的值
节点.属性=值 -用于修改节点上属性的值
节点.fangf () -获取方法
节点.方法(值) -修改值
1）查找节点
document.getElementById("id的值"); //查询的整个html文档，如果找不到，返回的是null
document.getElementsByTagName("标签名称"); //返回的是数组（含多个）
-> 返回指定的标签名元素组成的数组
-> 若找不到返回空数组[]，可以通过下标获取数组中的指定元素
document.querySelectorAll("选择器"); //根据选择器查询所有
document.querySelector("选择器"); //找单个节点
如：var uname_E=document.querySelector("[type='text']"); //根据属性名找到用户名节点
2）读取 ---- 属性/值（前提找到节点）
innerHTML：获取双标记中间的html内容
innerText：获取双标记中间的文本内容
修改双标记内容：
innerHTML=html值;
div_E.innerHTML="<span>大家好</span>"; //向div中添加span节点
修改样式：
style=值;
style.属性名(驼峰)=值;
className=值;
4、js操作DOM
1）增加元素
-字符串拼接
-通过方法创建
-1)document.createElement(元素名称);
-2)parentNode.appendChild(新节点); //将新节点作为父节点的最后一个子元素添加进去
parentNode.insertBefore(新节点,在哪个节点前面添加);
2）删除元素
-字符串删除
-parentNode.removeChild(要删除的节点);
3）改元素
-改属性（改样式）
-改事件
5、js中的事件
1）什么是事件
页面的元素状态变化，触发的动作
* 鼠标事件
* 键盘事件
* 状态改变
2）常见事件
onclick：单击
onchange：状态发生改变
onblur：失去焦点
onfocus：获取焦点
onsubmit：提交
onload：页面完成加载
3）事件的定义方式
-1）元素上添加<a onclick="f1()">点击</a>
-2）元素节点.onclick=function(){}
元素节点.onclick=f1;
-3）事件冒泡（是默认的）
当内层节点事件触发时，会默认向上触发祖先节点的同名事件
要取消事件冒泡：event.cancelBubble=true;
-4）事件对象 （event）
* 任何事件触发后都会产生一个event对象
* 记录事件触发时鼠标的位置，键盘的状态，触发对象等信息
event.target/event.srcElement
event.clientX/event.clientY //横纵坐标
6、js中的自定义对象
1）模拟构造器创建对象
function UserModel(){
this.name="";
this.age=0;
}
val u1=new UserModel();
u1.name="张三"; //给name赋值，JSON格式{"属性":值,"属性":值}，json是一种数据交换格式
var user={"id":001,"sex":"男"};
var user1={
'id':002,
'age':25,
'name':'王五',
'sayHello':function(){
var str=this.age+"岁的"+this.name+"你好";
alert(str);
}
};
//调用自定义方法
user1.sayHello();
//若为多个对象
var users=[{},{},{}]; //{}会转为true，在需要定义不确定是否存在的对象时，就需要赋值为""/underfine，清空对象，需要对象=null
