文章目录
一.初始js1.1 输入、输出1.2 变量1.3 常量1.4 数据类型1.5 运算符算术运算符赋值运算符自增/自减运算符比较运算符逻辑运算符
1.6 分支语句if 分支语句if双分支语句if 多分支语句三元运算符（三元表达式）switch语句
1.7 循环语句while循环for 循环循环嵌套
1.8 对象1.8.1 对象创建和调用1.8.2 方法及调用1.8.3 null
1.9 函数(方法)函数定义及调用形参/实参返回值匿名函数立即执行函数定时函数计时器
二.数组2.1 数组定义、赋值 、访问2.2 数组操作2.3 事件2.3.1 onload2.3.2 onlick2.3.3 onmouseover2.3.4 onkeydown2.3.5 onchange
三.操作BOM3.1 概述3.2 window对象3.2.1 window对象常用属性3.2.2 常用方法
3.3 history对象3.4 location对象3.5 Document对象3.6 JavaScript内置对象3.7 Date对象的方法3.8 Math对象3.8 定时函数
四.操作DOM4.1 概述4.2 getElement系列4.3 根据层次关系访问节点4.2.1 节点属性4.2.2 element属性
4.4 节点信息4.3 操作节点的属性4.4 创建和插入节点4.5 删除和替换节点4.6 style属性4.7 className属性
一.初始js
1.1 输入、输出
输入：alert()、document.wirte()
输出：prompt()
1.2 变量
声明(定义)变量有两部分构成：声明关键字、变量名（标识）
声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。
以下是使用 let 时的注意事项：
允许声明和赋值同时进行不允许重复声明允许同时声明多个变量并赋值JavaScript 中内置的一些关键字不能被当做变量名
变量名命名规则
关于变量的名称（标识符）有一系列的规则需要遵守：
只能是字母、数字、下划线、$，且不能能数字开头字母区分大小写，如 Age 和 age 是不同的变量JavaScript 内部已占用于单词（关键字或保留字）不允许使用尽量保证变量具有一定的语义，见字知义
1.3 常量
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。
const PI = 3.14
注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
1.4 数据类型
undefinednullnumberbooleanstring
typeof运算符返回值如下
undefined：变量被声明后，但未被赋值string：用单引号或双引号来声明的字符串boolean：true或falsenumber：整数或浮点数object：javascript中的对象、数组和null
除了0 所有的数字都为真
除了 ’ ’ 所有的字符串都为真 true
typeof 关键字检测数据类型
1.5 运算符
算术运算符
运算符作用+求和-求差*求积/求商%取模（取余数），开发中经常用于作为某个数字是否被整除
赋值运算符
运算符作用+=加法赋值-+减法赋值*=乘法赋值/=除法赋值%=取余赋值
自增/自减运算符
符号作用说明++自增变量自身的值加1，例如: x++–自减变量自身的值减1，例如: x–
比较运算符
运算符作用>左边是否大于右边<左边是否小于右边>=左边是否大于或等于右边<=左边是否小于或等于右边===左右两边是否类型和值都相等（重点）==左右两边值是否相等!=左右值不相等!==左右两边是否不全等
逻辑运算符
符号名称日常读法特点口诀&&逻辑与并且符号两边有一个假的结果为假一假则假||逻辑或或者符号两边有一个真的结果为真一真则真!逻辑非取反true变false false变true真变假，假变真
1.6 分支语句
if 分支语句
if(条件表达式) {
// 满足条件要执行的语句
}
if双分支语句
if (条件表达式){
// 满足条件要执行的语句
} else {
// 不满足条件要执行的语句
}
if 多分支语句
if (条件表达式){
// 满足条件要执行的语句
} else if(条件表达式){
// 满足条件要执行的语句
}else if(条件表达式){
// 满足条件要执行的语句
}
...
else{
// 不满足条件要执行的语句
}
三元运算符（三元表达式）
条件 ? 表达式1 ： 表达式2
switch语句
// switch分支语句
// 1. 语法
// switch (表达式) {
// case 值1:
// 代码1
// break
// case 值2:
// 代码2
// break
// ...
// default:
// 代码n
// }
1.7 循环语句
while循环
while (条件表达式) {
// 循环体
}
// while循环: 重复执行代码
let i = 1
while (i <= 3) {
document.write('hello js
')
i++
}
for 循环
for (初始语句;条件判断语句;条件控制语句){
循环体语句;
}
循环嵌套
1.8 对象
1.8.1 对象创建和调用
1.8.2 方法及调用
1.8.3 null
null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object。
1.9 函数(方法)
函数定义及调用
形参/实参
返回值
总结：
在函数体中使用return 关键字能将内部的执行结果交给函数外部使用函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写return会立即结束当前函数函数可以没有return，这种情况默认返回值为 undefined
匿名函数
匿名函数：没有名字的函数,无法直接使用。
// 声明
let fn = function() {
console.log('函数表达式')
}
// 调用
fn()
立即执行函数
(function(){ xxx })();
(function(){xxxx}());
定时函数
//多少秒后执行一次
setTimeout("调用的函数",等待的毫秒数)
//每隔多少秒执行一次
setInterval("调用的函数",间隔的毫秒数)
清楚计数器
clearTimeout(setTimeOut()返回的ID值)
clearInterval(setInterval()返回的ID值)
计时器
二.数组
2.1 数组定义、赋值 、访问
2.2 数组操作
push ,向数组末尾添加一个或更多 元素，并返回新的长度unshit 动态向数组头部添加一个单元pop 删除最后一个单元shift 删除第一个单元splice 动态删除任意单元sort():对数组排序join( )把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
2.3 事件
名称说明onload一个页面或一幅图像完成加载onlick鼠标单击某个对象onmouseover鼠标指导移到某元素上onkeydown某个键盘按键被按下onchange域的内容被改变
2.3.1 onload
onload在网页或者某个元素加载完成后触发。可以用来执行特定的函数或者操作，例如在页面加载完毕后执行一些初始化操作、加载数据、显示某些元素等。
在网页中，可以将onload事件添加到window对象上，当整个页面加载完成后触发。在某个元素上，可以将onload事件添加到该元素上，当该元素加载完成后触发。
onload事件只在对象完全加载所有内容（包括图像、CSS文件、JavaScript文件等）之后才会触发。
2.3.2 onlick
onclick事件在用户点击（或触摸）一个HTML元素时触发。它适用于几乎所有的HTML元素，包括按钮、链接、图像等。
2.3.3 onmouseover
onmouseover事件在鼠标光标进入（悬停在）一个元素上时触发。它适用于几乎所有的HTML元素，包括按钮、链接、图像等。
2.3.4 onkeydown
onkeydown事件在用户按下键盘上的任意键时触发。它适用于所有类型的HTML元素
2.3.5 onchange
在表单元素的值发生变化并失去焦点时触发。可以用来执行特定的函数或操作，例如在输入框内容变化时验证输入、触发表单提交等。
onchange事件适用于大多数表单元素，如input、select和textarea等。
账号：
三.操作BOM
3.1 概述
BOM：浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM可实现功能：
弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口的大小页面的前进、后退
3.2 window对象
3.2.1 window对象常用属性
属性名称说明history有关客户访问过的URL的信息location有关当前 URL 的信息
语法：
window.属性名= “属性值”
案例：
3.2.2 常用方法
方法名称说 明prompt( )显示可提示用户输入的对话框alert( )显示带有一个提示信息和一个确定按钮的警示框confirm( )显示一个带有提示信息、确定和取消按钮的对话框close( )关闭浏览器窗口open( )打开一个新的浏览器窗口，加载给定URL所指定的文档setTimeout( )在指定的毫秒数后调用函数或计算表达式setInterval( )按照指定的周期（以毫秒计）来调用函数或表达式
confirm( )：将弹出一个确认对话框
confirm("对话框中显示的纯文本")
confirm( )与alert ( )、 prompt( )区别
alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变。
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
open()方法
window.open(“弹出窗口的url”,“窗口名称”,"窗口特征”)
属性名称说 明height、width窗口文档显示区的高度、宽度。以像素计left、top窗口的x坐标、y坐标。以像素计toolbar=yes | no |1 | 0是否显示浏览器的工具栏。黙认是yesscrollbars=yes | no |1 | 0是否显示滚动条。黙认是yeslocation=yes | no |1 | 0是否显示地址地段。黙认是yesstatus=yes | no |1 | 0是否添加状态栏。黙认是yesmenubar=yes | no |1 | 0是否显示菜单栏。黙认是yesresizable=yes | no |1 | 0窗口是否可调节尺寸。黙认是yestitlebar=yes | no |1 | 0是否显示标题栏。黙认是yesfullscreen=yes | no |1 | 0是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式
close( )：网页的关闭
3.3 history对象
名称说明back( )加载 history 对象列表中的前一个URLforward( )加载 history 对象列表中的下一个URLgo( )加载 history 对象列表中的某个具体URL
等价
history.back()------->history.go(-1) 浏览器中的“后退”
等价
history.forward()------->history.go(1) 浏览器中的“前进”
3.4 location对象
常用属性
名称说明host设置或返回主机名和当前URL的端口号hostname设置或返回当前URL的主机名href设置或返回完整的URL
常用方法：
名称说明reload()重新加载当前文档replace()用新的文档替换当前文档
3.5 Document对象
常用属性：
名称说 明referrer返回载入当前文档的URLURL返回当前文档的URL
Document对象的常用方法（参考4.2）
名称说 明getElementById()返回对拥有指定id的第一个对象的引用getElementsByName()返回带有指定名称的对象的集合getElementsByTagName()返回带有指定标签名的对象的集合write()向文档写文本、HTML表达式或JavaScript代码
3.6 JavaScript内置对象
**1. Array：**用于在单独的变量名中存储一系列的值
**2. String：**用于支持对字符串的处理
**3. Math：**用于执行常用的数学任务，它包含了若干个数字常量和函数
3.7 Date对象的方法
var 日期对象=new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss
方法说 明getDate()返回Date对象的一个月中的每一天，其值介于1～31之间getDay()返回Date对象的星期中的每一天，其值介于0～6之间getHours()返回 Date 对象的小时数，其值介于0～23之间getMinutes()返回Date对象的分钟数，其值介于0～59之间getSeconds()返回Date对象的秒数，其值介于059之间getMonth()返回Date对象的月份，其值介于0～11之间getFullYear()返回Date对象的年份，其值为4位数getTime()返回自某一时刻（1970年1月1日）以来的毫秒数
3.8 Math对象
常用方法
方法说 明示例ceil()对数进行上舍入Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25floor()对数进行下舍入Math.floor(25.5);返回25Math.floor(-25.5);*返回-26round()把数四舍五入为最接近的数Math.round(25.5);返回26Math.round(-25.5;返回-26random()返回0~1之间的随机数Math.random();例如：0.6273608814137365
// 圆周率
console.log(Math.PI);
// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()
// 舍弃小数部分，整数部分加1
Math.ceil(3.4)
// 找出最大值
Math.max(10, 21, 7, 24, 13)
// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方
// 求某数的平方根
Math.sqrt(16)
3.8 定时函数
setTimeout(“调用的函数”,等待的毫秒数)
四.操作DOM
4.1 概述
DOM：Document Object Model（文档对象模型）
4.2 getElement系列
使用getElement系列方法访问指定节点
getElementById() 通过id访问节点getElementsByName() 通过类名访问节点getElementsByTagName() 通过标签访问节点
- 1
- 2
- 3
4.3 根据层次关系访问节点
4.2.1 节点属性
parentNode :返回节点的父节点childNodes :返回子节点集合，childNodes[i]firstChild :返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点lastChild :返回节点的最后一个子节点nextSibling :下一个节点previousSibling :上一个节点
4.2.2 element属性
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点lastElementChild 返回节点的最后一个子节点nextElementSibling 下一个节点previousElementSibling 上一个节点
- aaa
- bbb
- ccc
4.4 节点信息
nodeName：节点名称nodeValue：节点值nodeType：节点类型
节点类型NodeType值元素element1属性attr2文本text3注释comments8文档document9
4.3 操作节点的属性
getAttribute(“属性名”)setAttribute(“属性名”,“属性值”)
点击下面的按钮来设置按钮的类型属性。
4.4 创建和插入节点
createElement( tagName) 创建一个标签名为tagName的新元素节点A.appendChild( B) 把B节点追加至A节点的末尾insertBefore( A,B ) 把A节点插入到B节点之前cloneNode(deep) 复制某个指定的节点
单击按钮创建有文本的按钮
4.5 删除和替换节点
removeChild( node) 删除指定的节点replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点
- Coffee
- Tea
- Milk
单击按钮替换列表中的第一项。
4.6 style属性
HTML元素.style.样式属性＝"值"
4.7 className属性
语法：HTML元素.className=“样式名称”
-
猪八戒
单击div切换颜色
这是div
获取表单值和初始化表单