javaScript基础
javaScript基础
-
- 书写位置
- 输出
- 数据类型
- 数据类型转换
- 运算符
- 条件分支语句
- 循环语句
- 函数
- 数组
- 字符串
- 数字
- 时间
- BOM操作
- 定时器
- DOM操作
- 事件
书写位置
- 行内样式：需要依赖行为（不推荐）
a标签：书写在href属性上
href="javascript: alert('Hello world!');"- 非
a标签：书写在行为属性上
onclick="javascript: alert('Hello Mike!')"
- 内嵌式：不需要依赖任何行为，页面打开直接执行
- 外链式：不需要依赖任何行为，页面打开直接执行
案例：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javaScript书写位置title>
<script src="./js/demo.js">script>
head>
<body>
<a href="javascript: alert('Hello world!');">点我一下a>
<div onclick="javascript: alert('Hello Mike!')">点我一下div>
<script>
//内嵌式
alert('Hello Nancy!')
script>
body>
输出
//弹出层输出
alert('Hello world!')
//控制台输出
console.log('Hello Tom!')
//页面输出
document.write('Hello Mike!')
数据类型
javaScript数据类型：
- 基本数据类型：
- 数值类型(
number)：- 整数
- 小数
- 科学计数法
- 十六进制
- 八进制
- 二进制
- 字符串类型(
string)：使用双引号或者单引号包裹 - 布尔类型(
boolean)：- true
- false
- 空类型：
null (object)undefined(undefined)
- 数值类型(
- 对象数据类型
详见《javaScript面向对象》
获取数据类型的函数：获取数据的基本类型：typeof
基础数据类型案例：
// 整数 number
var num1 = 1;
var num2 = -1;
// 小数 number
var num3 = 0.5
var num4 = -0.5;
// 科学计数法 number
var num5 = 2e5; //2 * 10^5
// 十六进制 number
var num6 = 0x001;
// 八进制 number
var num7 = 0o001;
// 二进制 number
var num8 = 0b001;
// 字符串 string
var str1 = 'Hello world!';
var str2 = "Hello Tom!";
// 布尔类型 boolean
var flag1 = true;
var flag2 = false;
// 空类型
var a1 = null;
var a2 = undefined;
console.log(typeof a2);
对象数据类型案例：
定义对象：
var obj = {}
对象的操作：
增
增加一个key：
方式一：obj.hobby = 'play footBall'
方式二：obj['hobby'] = 'play footBall'
删
删除一个key：
方式一：delete obj.hobby
方式二：delete obj['hobby']
改
根据key修改值：
方式一：obj.sex = 'girl'
方式二：obj['sex'] = 'girl'
查
根据key查询值：
方式一：obj.sex
方式二：obj['sex']
数据类型转换
- 转换为数字：
Number(var)如果转换失败，返回NaNparseInt(var)可以转换以数字开头的字符串，遇到小数直接抹去小数位，如果转换失败，返回NaNparseFloat(var)可以转换以数字开头的字符串，如果转换失败，返回NaN
- 转换字符串：
String(var)var.toString()
- 转换boolean
Boolean(var)0、NaN、''、undefined、null转换为boolean时为false
运算符
- 算术运算符：
+、-、*、/、% - 赋值运算符：
=、+=、-=、*=、/=、%= - 比较运算符：
>、<、>=、<=、==、===、!=、!== - 逻辑运算符：
&&、||、! - 自增自减运算符：
++、--
条件分支语句
if(){} else {}
if(){} else if(){} else{}
switch(){
case 选项1:
代码内容
break;
case 选项2:
代码内容
break;
default:
默认内容
}
循环语句
while(){
}
do {
} while()
for(;;)
函数
- 定义函数
function 函数名(形参) { xxx return xxx; } - 调用函数
函数名(实参) - 函数可以嵌套，即函数中可以继续定义函数
- 函数的内部隐藏对象：
arguments，类型数组，里面的函数的形参
数组
- 创建数组
var arr = [1, 2, 3, 4]; - 数组的操作：
- 获取数组的长度：
arr.length - 修改数组长度：
arr.length = 3 - 清空数组：
arr.length = 0 - 根据下标输出值：
arr[2] - 根据下标设置值：
arr[2] = 5;
- 获取数组的长度：
- 遍历数组：
for(var i = 0; i < arr.length; i++) { console.log(arr[i]) } - 数组常用的方法：
arr.push(val)
作用： 向数组的末尾添加成员
返回值： 为数组的最新长度arr.pop()
作用： 删除数组的最后一个数据
返回值： 被删除的数据arr.unshift(val)
作用： 向数组的最前面添加成员
返回值： 为数组的最新长度arr.shift()
作用： 删除数组最前面的一个数据
返回值： 被删除的数据arr.reverse()
作用： 将数组反转
返回值： 返回新数组arr.splice(起始索引(默认值0),删除个数(默认值0)，要插入的数据(默认值空))
作用： 从指定索引开始删除数组中指定个数的数据，然后插入新的数据
返回值： 被删除的数据作为一个新数组返回arr.sort(function(a, b) {return a - b})
arr.sort(function(a, b) {return b - a})
作用： 将数组进行排序
返回值： 返回排序好的新数组arr.join(连接符)
作用： 将数组使用连接符拼接成一个字符串
返回值： 返回拼接的字符串arr.concat(arr2)
作用： 将数组与其他数组拼接在一起
返回值： 返回拼接的新数组arr.slice(开始索引（默认值0）,结束索引（默认值数组长度）)
作用： 截取数组中的一段数据
返回值： 返回被截取的数据的新数组arr.indexof(val)
作用： 返回val的第一次出现的索引，没有返回-1arr.forEarch(function(item,index,arr){})
作用： 遍历数组
函数：
item：数组遍历的当前成员
index：数组遍历的当前索引
arr：原始数组arr.map(function(item,index,arr){})
作用： 对数组中的每个成员进行加工，映射成一个新的数组
返回值： 返回加工后映射的新数组arr.filter(function(item,index,arr){return true})
作用： 对数组中的每个成员进行条件过滤，过滤出新的数组
返回值： 返回过滤后的新数组arr.every(function(item,index,arr){return true})
作用： 判断数组的每一项是不是都满足条件
返回值： 返回boolean值arr.some(function(item,index,arr){return true})
作用： 判断数组是不是有一项可以满足条件
返回值： 返回boolean值
字符串
字符串的索引从0开始计数
字符串常用的方法：
str.charAt(index)
作用： 获取对应索引位置的字符
返回值： 对应索引位置的字符str.toLowerCase()
作用： 字符串转小写
返回值： 返回新的小写字符串str.toUpperCase()
作用： 字符串转大写
返回值： 返回新的大写字符串str.replace(str1, str2)
作用： 将字符串中第一个匹配str1的位置替换为str2
返回值： 返回替换后新的字符串str.trim()
作用： 去除字符串两端空格
返回值： 返回去除两端空格后的字符串str.split(分隔符)
作用： 按照分隔符拆分字符串
返回值： 返回拆分后的字符串数组str.substr(startIndex, count)
作用： 从startIndex索引开始截取count个数的字符
返回值： 返回截取出来的字符串str.substring(startIndex, endIndex)str.slice(startIndex, endIndex)
作用： 从startIndex索引开始截取到endIndex索引
返回值： 返回截取出来的字符串
数字
数字常用的方法：
Math.random()
作用： 获取[0, 1)之间的随机小数
返回值： 返回[0, 1)之间的随机小数Math.round(num)
作用： 对num进行四舍五入取整
返回值： 返回四舍五入后的整数Math.ceil(num)
作用： 对num进行向上取整
返回值： 向上取整后的整数Math.floor(num)
作用： 对num进行向下取整
返回值： 向下取整后的整数Math.pow(底数， 指数)
作用： 取幂计算
返回值： 返回取幂计算后的结果Math.sqrt(num)
作用： 对num进行二次根运算
返回值： 返回二次根运算的结果Math.abs(num)
作用： 对num取绝对值
返回值： 返回绝对值结果Math.max(num1, num2, num3,...numn)
作用： 对一堆数组中的数字取最大值
返回值： 返回最大值Math.min(num1, num2, num3,...numn)
作用： 对一堆数组中的数字取最小值
返回值： 返回最小值Math.PI
作用： 返回一个近似π的值
时间
- 时间对象的创建：
- 创建当前时间对象
var time = new Date() - 创建指定时间节点的时间对象
var time = new Date(year, month, day, hour, min, second)
- 创建当前时间对象
- 时间常用的方法：
- 获取：
time.getFullYear()
作用： 获取时间对象中的年份信息time.getMonth()
作用： 获取时间对象中的月份信息time.getDate()
作用： 获取时间对象中的日期信息time.getHours()
作用： 获取时间对象中的小时信息time.getMinutes()
作用： 获取时间对象中的分钟信息time.getSeconds()
作用： 获取时间对象中的秒钟信息time.getDay()
作用： 获取时间对象中的星期信息，0-6表示周日到周六time.getTime()
作用： 获取时间对象中的时间戳
- 设置：
time.setFullYear(year)
作用： 设置时间对象中的年份信息time.setMonth(month)
作用： 设置时间对象中的月份信息time.setDate(date)
作用： 设置时间对象中的日期信息time.setHours(hour)
作用： 设置时间对象中的小时信息time.setMinutes(min)
作用： 设置时间对象中的分钟信息time.setSeconds(second)
作用： 设置时间对象中的秒钟信息time.setTime(times)
作用： 设置时间对象中的时间戳
- 获取：
BOM操作
window对象为浏览器隐藏对象，可以省略- 获取浏览器窗口尺寸：
窗口可视宽度：window.innerWidth
窗口可视高度：window.innerHeight - 浏览器弹出层：
window.alert('提示信息')：提示弹出框，无返回值，单纯提示
window.confirm('询问信息')：询问弹出框，有返回值，返回boolean
window.prompt('输入提示信息')：输入提示弹出框，有返回值，返回用户输入的内容 - 开启和关闭：
window.open(地址)：打开一个新的页签访问该地址
window.close()：关闭当前页签 - 浏览器常见事件：
- 资源加载完毕事件：
window.onload = function(){} - 可视尺寸改变事件：
window.onresize = function(){} - 滚动条位置改变事件：
window.onscroll = function(){}- 浏览器滚动的高度(存在兼容问题)：
document.documentElement.scrollTop
document.body.scrollTop - 浏览器滚动的宽度(存在兼容问题)：
document.documentElement.scrollLeft
document.body.scrollLeft - 设置浏览器滚动条滚动到：
window.scrollTo(left, top) window.scrollTo({ left:xx, top:xx, behavior:'smooth' })
- 浏览器滚动的高度(存在兼容问题)：
- 资源加载完毕事件：
- 浏览器历史记录操作：
回退页面：window.history.back()
前进页面：window.history.forward()
定时器
备注： time是毫秒值
- 间隔定时器：按照间断时间重复去执行
语法：setInterval(fun, time)
返回值： 表示当前window下定时器的索引，从1开始计数 - 延时定时器：按照延时时间去执行一次
语法：setTimeout(fun, time)
返回值： 表示当前window下定时器的索引，从1开始计数 - 关闭定时器：
clearInterval(定时器索引)
clearTimeout(定时器索引)
注意： 这两种关闭方法都可以关闭任何定时器，不区分定时器种类
DOM操作
- 获取元素对象：
document.getElementById('id')
作用： 根据id获取元素
返回值： 如果有就返回元素，否则返回nulldocument.getElementsByClassName('class')
作用： 根据class类名获取元素
返回值： 返回元素数组，否则返回空数组document.getElementsByTagName('标签名')
作用： 根据标签名获取元素
返回值： 返回元素数组，否则返回空数组document.querySelector('选择器')
作用： 根据选择器匹配元素
返回值： 返回第一个匹配到的元素，否则返回nulldocument.querySelectorAll('选择器')
作用： 根据选择器匹配元素
返回值： 返回元素数组，否则返回空数组
- 操作元素内容（开标签和闭标签之间的内容）：
- 元素.
innerText
作用： 获取元素内容（不含HTML标签的内容） - 元素.
innerText = ''
作用： 修改元素内容 - 元素.
innerHTML
作用： 获取超文本内容（含HTML标签的内容） - 元素.
innerHTML = ''
作用： 修改元素内容
- 元素.
- 操作元素属性
- 原生属性：
- 元素.属性名
作用： 获取元素属性的值 - 元素.属性名 = ‘’
作用： 修改元素属性的值
- 元素.属性名
- 自定义属性：
元素.getAttribute('属性名')
作用： 获取元素属性的值元素.setAttribute('属性名', '属性值')
作用： 给元素添加新的自定义属性并设置值元素.removeAttribute('属性名')
作用： 移除元素的某个自定义属性
- 原生属性：
- 操作元素类名（因为
class属于关键字，所以不能作为原生属性名，只能以className作为原生属性名）：元素.className
作用： 获取元素的类型元素.className = ''
作用： 修改元素的类名
- 操作元素行内样式：
元素.style.样式名
作用： 获取元素的样式值元素.style.样式名 = ''
作用： 修改元素的样式（注意：有些样式比如background-color，在CSS中是带中横线的，但是到js中需要去掉中横线）
- 操作元素非行内样式：
window.getComputedStyle(元素).样式名
作用： 获取元素的样式值（宝库行内样式也能获取） - 创建节点：
document.createElement('标签名')
作用： 创建一个指定的标签节点
返回值： 返回创建的标签元素 - 插入节点：
父节点.appendChild(节点)
作用： 向父节点中插入一个节点作为子节点，并且放在父节点中子节点的最后父节点.insertBefore(需要插入的节点, 目标子节点)
作用： 向父节点中的目标子节点前面插入需要插入的节点
- 删除节点：
父节点.removeChild(子节点)
作用： 从父节点中删除该子节点
节点.remove()
作用： 节点自己删除自己 - 替换节点：
父节点.replaceChild(换上节点， 换下节点)
作用： 将父节点中的子节点换下节点替换成换上节点 - 节点克隆：
节点.cloneNode(是否克隆后代节点)
作用： 克隆一个和自己一样的节点
返回值： 返回克隆后的新节点 - 获取元素的尺寸
元素.offsetHeight
元素.offsetWidth
尺寸包括： 内容大小 + 内边距 +border元素.clientHieght
元素.clientWidth
尺寸包括： 内容大小 + 内边距
事件
- 语法：
给元素绑定事件：
元素.on事件类型 = 事件处理函数 - 事件类型：
- 鼠标事件：
- 鼠标单击：
click - 鼠标双击：
dblclick - 左键单击：
contextmenu - 鼠标按下：
mousedown - 鼠标抬起：
mouseup - 鼠标移动：
mousemove - 鼠标移入：
mouseover - 鼠标移出：
mouseout - 鼠标移入：
mouseenter - 鼠标移出：
mouseleave
- 鼠标单击：
- 键盘事件：
- 键盘按下：
keydown - 键盘抬起：
keyup - 键盘键入：
keypress
- 键盘按下：
- 浏览器事件：
- 资源加载完毕：
load - 滚动：
scroll - 尺寸改变：
resize
- 资源加载完毕：
- 触摸事件：
- 触摸开始：
touchstart - 触摸结束：
touchend - 触摸移动：
touchmove
- 触摸开始：
- 表单事件：
- 聚焦：
focus - 失焦：
blue - 改变：
change - 输入：
input - 提交：
submit - 重置：
reset
- 聚焦：
- 鼠标事件：
- 事件对象：
- 鼠标事件：
offsetX和offsetY（相对于触发事件的元素）clientX和clientY（相对于浏览器可视窗口）pageX和pageY（相对于页面文档流）
- 键盘事件：
keyCode：获取当前操作的键盘码值
- 鼠标事件：
- 事件传播：
- 浏览器响应事件机制：
浏览器窗口最先知道事件的发生
捕获阶段：从window开始，按照层级结构传递到目标元素
目标阶段：目标元素准确触发事件并执行行为
冒泡阶段：从目标元素开始，按照层级结构一直向上传递，一直传递到window，本次事件传播结束 - 阻止事件传播：
事件对象.stopPropagation()
- 浏览器响应事件机制：
- 事件委托：
根据事件冒泡特性，将事件绑定到自己父级结构的某一层