数组的概念
数组是一种数据类型,可以存储多个变量。
内置基本类型和引用类型在内存中存储的区别
内置类型在内存中只有一块栈空间,存储的是就是数值
引用类型在内存中有两块空间,一块是栈空间,存储的是堆空间的地址
一块是new出来的堆空间,存储的是真正的数值
数组的定义
a.构造方法
所有的引用类型对象在创建时,必须开辟空间(也就是必须new)
new是在堆上开辟空间的关键字
Array代表开辟的空间类
var arr = new Array(11, 22, 33, 44);
console.log(arr);
b.字面量
var arr = [1, 2, 3, 4];
console.log(arr);
数组元素的访问
数组名[下标]
下标是元素的索引
注意事项:1.从零开始
2.下标必须为自然数
3.每两个索引之间相差1
4.下标可以为变量
5.下标千万不要越界 0~数组长度长度-1
数组对象.length:数组的长度
数组的遍历
对数组的所有元素做相同的操作.依赖于循环实现
多维数组
一个数组中的元素,依然是一个数组
多维数组是由一维数组嵌套实现的
冒泡排序-- - 对于数组元素的一种排序方法
核心思想:两两比较
外层循环决定趟数:N-1
内层循环决定每趟的次数:N-i(趟)-1
数组常见的API和属性
push 尾插 返回值:新数组的长度
pop 尾删 返回值:被删除的元素
shift 头删 返回值:被删除的元素;
unshift 头插 返回值:新数组的长度;
reverse 倒序 返回值:无(逆序,直接改变原数组)
splice 返回值:被删除的元素;
功能:删除数组的某个区间,且用新数组代替,并返回删除的数据
改变原数组;
splice(起始位置,偏移量)偏移量指一共几个元素
slice 返回值:被截取的元素
功能:数组区间的截取,返回被截取的字符串,元素数组不变
参数:slice(起始位置,结束位置)左闭右开[2,5)
concat 返回值:新数组;
功能:数组的拼接,不会改变原数组
参数:concat(数组)
join 返回值:被转换的字符串;
功能:将数组转为字符串;
参数:join([分隔符])默认是逗号;
字符串常见的API和属性
length: 字符串的长度
charAt(索引):返回索引对应的字符
charCodeAt(索引):返回索引对应的字符的asc码值
fromCharCode
功能:返回asc码对应的字符
参数:fromCharCode(asc1,asc2...)
返回值:asc码对应的字符
注意事项:该方法直接通过类名String调用
indexOf("字符串"):查找字符串出现的位置,找到返回下标,找不到返回-1
只能返回第一次的字符串下标
lastIndexOf("abc") 查找字符串最后一次出现的位置 如果没找到 返回-1
replace
功能:替换,用参数2替换参数1
参数:replace(被替换字符串,替换的字符串)
返回值:被替换的字符串
只能替换一次
截取字符串
slice
substring
参数:[起始位置,结束为止) 左闭右开
split
功能:将字符串按分隔符转为数组
参数:split(分隔符)
返回值:一个字符串数组
字符串转大写
console.log("HeiHei".toUpperCase());
字符串转小写
console.log("HeiHei".toLowerCase());
json对象
描述数据的一种格式, 将若干繁杂的属性封装为一个整体
可以直接通过json对象,操作各个属性
1.定义,由{}括起来的键值对,每两个键值对用逗号分开
key:value
注意事项:所有的key请用双引号括起来
2.属性的访问 常用
a.通过点运算符访问
对象名.属性名
b.下标法
对象名[key]
c.为json对象添加新的自定义属性
对象名.新属性名 = 属性值
d.json对象的遍历
每次循环式=时变量代表索引
for(var 变量 in json对象){
循环体
}
e.在一个成员方法中使用其他的成员,需要添加前缀this
严格模式-- - 你必须使用定义过的变量
被"use strict"修饰的作用域,所有变量必须定义才能使用
数组的函数indexOf
功能:查找目标元素
参数:indexOf(目标元素)
返回值:找到返回下标,找不到返回-1
回调函数
回调函数: 一个被当做参数的函数
为什么需要回调函数
场景:
需要使用别人提供的功能模块,但别人的功能模块不能完全实现自己的需求
需要在别人的模块中调用自己的函数
但是我们无法打开第三行模块的函数体,不能直接修改第三方的代码
字符串的定义和创建
a.字面量
var str = "hello"
console.log(str)
console.log(typeof str)
b.构造方法
var str1 = new String("world")
console.log(str1)
console.log(typeof str1)
Ascll码表
65 'A'
97 'a'
48 '0'
32 空格
13 回车
Math
Math.floor(参数):向下取整
Math.ceil(参数):向上取整
Math.round(参数):四舍五入取整
Math.sqrt(number) 开平方根
Math.pow(m,n) 返回m的n次方
Math.min(1,-2,3,4) 返回N个数最小值
Math.max(1,-2,3,4) 返回N个数最大值
Math.abs(number) 返回绝对值
Math.random():返回0~1的随机数,左闭右开
日期对象
如何获取年月日时分秒星期几
getFullYear:获取年
getMonth 月 0~11
getDate 日
getHours 时
getMinutes 分
getSeconds 秒
getDay 星期几 0~6
toLocaleString按照本地格式打印日期
时间戳
new Date(时间戳);
时间戳:距离1970年1月1日相差的毫秒数
Date.parse(日期字符串): 返回时间戳
修改日期对象
setDate()
setHours()
setMinutes()
setMonth()
setSeconds()
setFullYear()
三个弹出框
所有弹出框都具备阻塞行为 弹出框必须下载body体内
alert("我是一个弹出框");
prompt([提示信息],[默认值]):返回字符串
confirm([提示信息]):返回布尔值
两个定时器
循环定时器:周期性执行回调函数的功能
setInterval(回调函数,时间间隔):返回值为关闭定时器的钥匙
clearInterval(钥匙)
延时定时器
setTimeout(回调函数,时间间隔):返回值为关闭定时器的钥匙
clearTimeout(钥匙)
onload延迟加载
onload延迟加载,整个页面全部执行完后,再去执行事件体的代码
location: 地址对象
herf:对于地址的读写
读
console.log(location.href)
写:通过js的方式跳转页面
location.href = "http://www.baidu.com"
window.document
1.write
a.拥有HTML字符串解析(如果该字符串打印至页面的时候,可以被当做HTML元素,则该字符串以HTML元素的形式展现)
b.出现在事件体中,会覆盖原页面
2.找html元素,转换成js对象
找单个元素(返回一个元素)
document.getElementById("ID名"):返回ID对应的元素
document.querySelector("选择器"):返回ID,类,标签对应的单个元素
找批量元素(返回数组)
document.getElementsByTagName("标签名"):批量返回标签名对应的HTML元素,存放在数组中
document.getElementsByClassName("类名"):批量返回类名对应的HTML元素,存放在数组中
document.getElementsByName("name名"):批量返回name名对应的HTML元素,存放在数组中
document.querySelectorAll("选择器");批量返回类或标签对应的元素,存在数组中
Dom节点的遍历: 已知任意dom元素, 可以根据节点遍历的属性访问dom树中的任意节点
获取dom节点和文本节点(不常用,正常人一般不太关注文本节点)
firstChild 返回节点的第一个子节点,
最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
节点遍历属性总结-- - 元素节点
父找子
firstElementChild: 返回节点的第一个子节点, 最普遍的用法是访问该元素的文本节点
lastElementChild: 返回节点的最后一个子节点
childNodes: 批量获取父元素的子元素, 存放在数组中, 获取文本和元素节点
children: 批量获取父元素的子元素, 存放在数组中, 获取元素节点
兄弟
nextElementSibling: 下一个节点
previousElementSibling: 上一个节点
子找父
parent: 找父元素
nodeType: 判断该节点是元素还是文本节点
1.代表元素节点
3.代表文本节点
节点的操作
增
a.创建
document.createElement("标签名"):返回创建好的dom对象
b.追加
父节点.appendChild(子节点)
document.body.appendChild(oH1);
删
被删除元素
dom.remove()
表格动态创建
事件头部
事件体:在页面渲染的时候,并不执行只有当用户触发该事件时,才会去执行事件体的代码
parentNode:找当前元素的父元素
解决方案:
this:是函数体的内置对象(只能出现在函数体内部),在与事件体连用时,
this代表触发该事件的对象本身。
各种文本内容
innerText:将元素的内容获取出来不包括HTML标签
outerHTML:将自身以及子元素所有的内容都获取出来 包括HTML标签 包括自身标签
innerHTML:除了自身标签的所有内容,最常用
dom普通属性的读写
a. 通过点运算符
读
console.log(oBox.id)
写
oBox.id = "heihei"
b. 通过getAttribute/setAttribute
读
console.log(oBox.getAttribute("id"))
写
oBox.setAttribute("id", "haha")
添加自定义属性
oBox.aaa = 666
console.log(oBox.aaa)
domstyle属性的读写
写
dom对象.style.属性名 = 属性值
读
只有行内样式可以dom.style.属性名的方式读取数据,非行内样式不行
非行内样式
getComputedStyle(dom对象, false)["属性名"];
offset属性的读写
offset相关属性的读必须用offset读
读
读出来的数据都是数字
写
加px的字符串