js
// 定义一个数组
var ay1 = new Array(10);
// 获取数组的长度
console.log(ay1.length);
// 创建一个数组并赋值
var ay2 = new Array(1,2,6,9);
console.log(ay2.length);
console.log(ay2[2])
// 对ay1数组中下标为0的元素进行赋值
ay1[0]=1;
// 通过下标去数组中下标为0的元素的值
console.log(ay1[0])
// push方法，返回值是数字的长度
console.log(ay2.push(1))
console.log(ay2[4])
// length可读可写，返回值是数字的长度
ay1.length=100;
console.log(ay1.length)
// splice可以将原数组中的元素替换
// 参数1：要替换的元素起始下标
// 参数2：从该元素开始替换几个元素
// 参数3：替换后的内容
ay2.splice(2,1,"tom");
// 数组遍历 i为下标 in后指代需要遍历的数组
for(var i in ay2){
console.log(ay2[i])
}
// 元素拼接并返回
console.log(ay2.join("."))
创建json对象
// 创建json对象，以键值对的方式存储数据
// 通常将key设置为字符串，value值设置为object
var json1={"name":"tom","birth":new Date(),"sex":"男"};
// json取值操作
// 1、直接用对象.key值取值
console.log(json1.name)
// 2、使用对象["key"]取值
console.log(json1["birthday"])
// json赋值
// 使用json对象["key"]赋值,若键存在,更改为原value
// 若键不存在,创建一个新的key-value存入对象中
json1["age"]=26
console.log(json1.name)
console.log(json1.age)
json除了可以当作一种类似“映射map”的对象使用之外，也是常用于组织pojo的方式之一
// json遍历
// json键值对存在顺序固定，并且稳定，可以将key值看成是一种索引
for(var k in json1){
console.log(json1[k])
}
// json的value可以是普通数值、字符串、对象、或者json以及json数组
var student={
"stid":23,
"stuname":"ww",
"getStid":function(){
return this.stid
},
"stusubject":{
"subid":1,
"subname":"java"
},
};
// 取值
console.log(student["stusubject"]["subname"])
console.log(student.getStid())
function
可以命名并复用的js代码块
function对象拥有js环境最高编译优先级
function也是js引用（变量）的生命周期以及作用域
内置对象
document对象
可以理解为整个html页面上所有元素的集合或管理者
每个页面上的js环境中都会内置一个document对象作为当前页面的管理者
拿过来直接用，管理页面上的元素
常用方法
write
向页面输出，符合语法的输出视图，不符合语法的原文输出
document.write("<button id='bt7' class='bts'>ok7</button>")
返回页面上的链接数，包括map中的链接
console.log(document.links)
页面上定位元素的常用方法：
鼠标事件
onclick：单击
ondblclick：双击
onmousedown：鼠标被按下时出发
onmouseup：释放鼠标时触发
onmouseover：当鼠标经过元素时触发
onmouseout：当鼠标离开元素时触发
onmousemove：当鼠标移动时触发
onchange：当元素值发生改变时触发，下拉菜单使用较多
onblur：当失去焦点时触发
onfocus：获取焦点时触发
onscroll：当滑动滚轮时触发
onload：元素加载完毕之后触发
document.body.onload=function(){
alert(1)
}
当页面所有元素加载完毕之后触发事件
保证页面加载完成后展开操作，并且可避免外接js对当前页面同名引用或同名function设计造成冲突
事件流
☞相关元素在触发相同或相似事件时，事件的监听器（function）所执行的顺序，以及对这种顺序进行控制的设计行为（如执行顺序，阻塞传播等）
事件流的执行顺序
冒泡
由子节点向父节点进行事件传播，是系统的默认方式
捕获
由父节点向子节点进行事件传播，可根据西药用dom2级事件添加设置
dom0级只能使用冒泡方式
设置监听时的三个参数
type：事件类型
listener：function
// dom0级事件添加，只能使用冒泡方式进行事件流顺序
dv1.onclick=function(){
alert("dv1")
}
dv2.onclick=function(event){
alert("dv2")
event.stopPropagation()
}
// dom2级事件添加，可以控制事件流顺序，为捕获方式传播
// 设置捕获传播时，将父节点的事件添加第三个参数为true即可将事件流顺序调整为捕获
// 可以通过stopPropagation属性控制组织事件流传播
// 冒泡方式在子元素内部进行设置
// 捕获方式在父元素内部进行设置
dv1.addEventListener("click",function(event){
alert("dv1")
},)
dv2.addEventListener("click",function(){
alert("dv2")
event.stopPropagation()
})
var sayBye=function?(){
}
此种方法也可以声明function，但本质上只是一种赋值行为，不过赋的值是一个function，不具备function的最高优先级
节点编程（dom节点控制、dom节点编程）
dom编程
使用js针对dom上下文（页面环境）中的节点进行相关的定位、添加、嗯行、删除等操作
dom上下文可以简单理解为document对象管理的整个页面环境，包括“html元素、js引用等
dom节点
在原生的js环境中分为
-
tag标记节点
-
attribute属性节点
-
text文本节点
元素定位
指定元素节点的父节点、子节点、相邻节点（兄弟节点）
// 通过id定位元素
var dv2=document.getElementById("dv2")
// 定位父节点
var pn=dv2.parentNode;
console.log(pn)
// 定位父元素
var pe=dv2.parentElement;
console.log(pe)
// 定位子节点
var cn=dv2.childNodes;
console.log(cn)
// 定位子元素
var dv_ce=dv2.children;
console.log(dv_ce)
// 定位下一个节点
var ns=dv2.nextElementSibling;
console.log(ns)
// 定位下一个元素
var nel=dv2.previousSibling;
console.log(ps)
// 定位上一个节点
var ps=dv2.previousSibling;
console.log(ps)
// 定位上一个元素
var pel=dv2.previousElementSibling
console.log(pel)
添加节点
-
由document创建指定的标记节点
-
根据需要为节点属性赋值
-
定位新节点所处位置的父节点
-
由父节点添加新节点
// 1. 由document创建指定的标记节点
var ipt1=document.createElement("input");
// 2. 根据需要为节点属性赋值
ipt1.type="text";
// 3. 定位新节点所处位置的父节点
var dv5=document.getElementById("dv5");
// 4. 由父节点添加新节点
dv5.appendChild(ipt1);
还可以通过其他方式设置属性
// 设置属性
ipt1.setAttribute("type","radio");
// 获取属性
console.log(ipt1.getAttribute("type"));
set、get属性设置时，兼容性最好
使用.进行属性操作时，类似自定义属性无法获取
向标记中添加文本
1.固定嵌套关系
2.不能单独使用
满足上述两个条件可以使用text属性为文本赋值
var star=document.createElement("option");
var stars=document.getElementByld("stars");
star.text="天秤座";
stars.appendChild(star);
可以独立使用的双标记可以使用innerHTML属性为文本赋值
star.innerHTML="狮子座";
但由于每个浏览器客户端兼容器不同，建议两个都写
删除节点
1.由document锁定要删除的节点
var bt1=document.getElementById("bt1");
2.定位此节点的父节点
var dv5=document.getElementById("dv5");
3.由父节点调用方法删除节点
dv5.removeChild(bt1);
// 或者直接通过元素定位父节点后移除
bt1.parentElement.removeChild(bt1);
更新节点
// 1.由document锁定要改变的节点
var bt1=document.getElementById("bt1");
// 2.document创建新节点（要去掉所有节点的新节点）
var ipt.document.createElementById("input");
ipt.setAttribute("type","text");
// 3.定位此节点的父节点
var dv5=document.getElementById("dv5";)
// 4.由父节点调用犯法用新节点取代旧节点
dv5.replaceChild("ipt,bt1");
innerHTML
var dv5=document.getElementById("dv5");
// 在原有基础上增加内容
dv5.innerHTML+="<input type='radio' checked='checked'>男"
// 对内部元素清除
dv5.innerHTML="";
outerHTML
var bt1=document.getElementById("bt1");
// 对元素本身进行操作
bt1.outerHTML="<input type='radio' checked='checked'>男";
//清空，包括标记本身
bt1.outerHTML="";
元素的尺寸和定位
使用想要获取元素的尺寸（height、width）通过例如
dv1.style.height
前提是必须设置过该属性，该元素的内接样式（style属性进行设置的），才能正常获取 元素在css央视表中设置的元素的样式，需要通过其他方式进行获取
clientWidth
可以获取元素在客户端浏览器dom节点中所占的实际宽度（元素本身width+padding）尺寸，默认单位xp
clientHeight
可以获取元素在客户端浏览器dom节点中所占的实际高度（元素本身height+padding）尺寸，默认单位xp
offsetWidth
: border+clientWidth
offsetHeight
: border+clientHeight
offsetLeft
元素距离定位父节点左边距
offsetTop
元素距离定位父节点上边距
事件监控
pageX
事件触发时，鼠标相对于页面显示区左侧的距离，包括和滚动隐藏部分
pageY
事件触发时，鼠标相对于页面显示区上侧的距离，包括和滚动隐藏部分
clientX
事件触发时，鼠标相对于页面显示区左侧的距离，不包括和滚动隐藏部分
clientY
事件触发时，鼠标相对于页面显示区上侧的距离，不包括和滚动隐藏部分
offsetX
事件触发时，鼠标距离事件源左侧的距离
offsetY
事件触发时，鼠标距离事件源上侧的距离
var dv1=document.getElemrntByld("dv1");
//console.log(dv1.style.height)
console.log("clientHeight:"+dv1.clientHeight)
console.log("clientWidth:"+dv1.clientWidth)
console.log("offsetHeight:"+dv1.offsetHeight)
console.log("offsetWidth:"+dv1.offsetWidth)
console.log("offsetLeft:"+dv1.offsetLeft)
console.log("offsetTop:"+dv1.offsetTop)
dv1.onclick=function(e){
console.log("pageX:"+e.pageX)
console.log("pageY:"+e.pageY)
console.log("clientX:"+e.clientX)
console.log("clientY:"+e.clientY)
console.log("offsetX:"+e.offsetX)
console.log("offsetY:"+e.offsetY)
}
拖拽案例
var dv1=document.getElementById("dv1");
// 设置鼠标按下事件
dv1.onmousedown=function(e){
// 页面移动
document.onmousemove=function(evt){
// 设置鼠标按下时鼠标央视由默认改为小手
dv1.style.cursor="pointer";
// 元素距离左侧的距离为鼠标距离左侧边距-鼠标距离事件源左侧的距离
dv1.style.left=evt.pageX-e.offsetX+"px";
dv1.style.top=evt.pageY-e.offsetY+"px";
}
}
// 当鼠标抬起时
dv1.onmouseup=function(ev2){
// 页面移动事件清空
document.onmousemove=null;
// 鼠标央视改回默认
dv1.style.cursor="default";
}
window对象
document时window的一部分 是显示区
window：包括地址栏、关闭钮、边框、显示区、滚动条
window.setInterval、setTimeout：可以模拟线程操作
setInterval：定时器操作 每隔...执行一次
window.setInterval(function(){
document.write(new Date())
},1000)
setTimeout：预设值操作 每隔...执行一次
window.setTimeout(function(){
document.write(new Date())
},1000)
var si=window.setTimeout(function(){
// document.write(new Date())
document.getElementById("dv1").innerHTML=new Date();
},1000)
// window.clearTimeout(si);
function sayHi(){
document.getElementById("dv1").innerHTML=new Date();
window.setTimeout(function(){
sayHi();
},1000)
}
sayHi();
浙公网安备 33010602011771号