H5edu -第二周-----js基础(2)

1、数组
声明数组
var arr=[1,2,3]
var arr=new Array(1,3,5)
数组长度 arr.length
2、数组操作
①末尾添加数据
arr.push(7);//返回值是数组长度
②前面添加数据
arr.unshift(8);//返回值是数组长度
③删除数组元素-最后一个值
arr.pop();//返回值是删掉的元素值
④删除第一个元素
arr.shift()//返回值是删掉的元素值
⑤连接两个数组---不会改变现有的数组，仅仅会返回一个连接数组的副本
var aa = [1,3,5]; var bb = [“a”,”b”,”c”];
aa.concat(bb);
⑥将数组转换为字符串
join();
数组名.join(符号);//符号为指定的分隔符，如果省略，则使用逗号作为分割符
⑦将字符串转换为数组
字符串名.split（要替换的符号，返回的数组的最大长度）
例： var text="aa-aa"
text.split("-");//要与字符串中的一样
3、DOM树

image.png

4、节点关系

image.png

5、dom节点操作
①创建节点
var div=document.createElement(“div”);
创建一个新的div标签
②插入节点
appendChild();添加孩子，放到最后面
demo.insertBefore(插入的节点，参照节点)；//放到参照节点的前面，若参照节点为空，则默认放到最后面
③移除节点---移除父节点的一个子节点
demo.removeChild(要移除的节点)
④克隆节点
cloneNode(参数);//参数为true，深层复制，除了复制本盒子，还有子节点
参数为false,浅层复制，只复制本节点，不包括子节点
6、设置节点属性
1、setAttribute("属性名"，属性值)；//添加属性
2、getAttribute("属性名");//获取属性
3、removeAttribute("属性名");//删除某个属性
7、计时器
setInterval("执行的函数"，间隔时间)；//间隔时间以毫秒为单位
每隔多长时间执行一次
setTimeout(function，tim)；//隔tim时间执行function函数，只执行一次
clearInterval(计时器名)；//清除计时器
8、添加事件监听器
要添加的对象.addEventListener("监听的事件",“事件触发的回调函数”,"捕获/冒泡");
冒泡：点击子代会向外传递，默认，false
捕获：从父代向子代传递 true
默认时冒泡
9、字符串操作
<1>转换为字符串
1、+“” 2+""="2"
2、String()
3、toString(基数)；基数就是进制
var text=10;
text.toString(2) 二进制 1010
<2>获取字符串位置方法
chartAt(字符位置);//获取相应位置的字符
charCodeAt(字符位置);//获取相应位置的Unicode编码
<3>根据字符返回位置
indexOf("字符");//从左开始数，找到第一个相对应的字符，返回字符的位置，（从0开始）
lastIndexOf("字符")；//从后面开始数，返回值 还是从 左边开始 数的 索引号 。
<4>concat();连接字符串
<5> 获取一段字符串
slice("取字符串的起始位置"，[“结束位置”]);[]可选的
起始位置一定要有，结束位置可以省略，要是省略默认到最后
substr("起始位置",[取的个数]);//不写取的个数默认取到最后
substring 同slice 一样的 但是有一点不同
substring 始终会把 小的值作为 起始位置 大的值作为结束位置
例如： substring(6,3) 实际中 自动变成 substring(3,6);
10、保留小数位数
通过indexOf（"."）;返回小数点的位置,再使用substr()截取字符串
toFixed(2);//保留2位小数
11、大小写转换
toUpperCase();//转换为大写（参数：无）
toLowerCase();//转换为小写（参数：无）
12、获取元素尺寸
① offsetWidth 得到对象的宽度
offsetWidth=width+border+padding
② offsetHeight 得到对象的高度
③offsetLeft 返回距离上级盒子（最近的带有定位）左边的位置，从父级的padding开始算，父级的border不算

image.png

④offsetTop 返回距离上级盒子（最近的带有定位）顶部的位置，从父级的padding开始算，父级的border不算
⑤offsetParent
返回对象的父级（带有定位）
13、事件对象 event

image.png

event常见属性
属性 作用
data 返回拖拽对象的URL字符串（dragDrop）
width 该窗口或框架的高度
height 该窗口或框架的高度
pageX 光标相对于该网页的水平位置（ie无）
pageY 光标相对于该网页的垂直位置（ie无）
screenX 光标相对于该屏幕的水平位置
screenY 光标相对于该屏幕的垂直位置
target 该事件被传送到的对象
type 事件的类型
clientX 光标相对于该网页的水平位置 （当前可见区域）
clientY 光标相对于该网页的水平位置
14、