第一章
1、什么是JavaScript
答：是一种基于对象和事件驱动的、并具有安全性能的脚本语言
2、JavaScript特点
答：向HTML页面中添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释
3、JavaScript组成
答：ECMAscript DOM BOM
单行注释：//
多行注释：/* */
//弹框
alert("你好，javascript")
4、javascript引入的三种方式
内部文件，直接写在标签里的
外部文件，后缀名为.js文件
直接写在HTML文件中
5、变量的声明与赋值
声明变量
语法 var 变量名 = 值
var name = "张三丰",age = 23,sex = "男"
document.write("姓名：",name,"<br>")
document.write("年龄：",age,"<br>")
document.write("性别：",sex,"<br>")
6、数据类型
基本数据类型：number(数字类型)、string(字符串)、Boolean(true或false)
特殊数据类型：null(空)、undefined(未定义)、object(对象)、NaN(非数字)
7、如何查看JS数据类型
var a = 34,
b = "张三"
c = 34,56
d = false
//typeof查看数据类型
document.write(typeof(a),"<br>")
//number
document.write(typeof(b),"<br>")
//string
document.write(typeof(a),"<br>")
//boolean 布尔类型 true或者false
document.write(typeof(d))
8、字符串类型
var str = "你好，JavaScript"
document.write(str,"<br>")
//查看长度，属性 length 查看字符串的长度
document.write("字符串的长度为：",str.length,"<br>")
//方法
//charAt()，根据下表(索引)获取字符
document.write("字符串为零的字母是：",str.charAt(0),"<br>")
//转为大写
document.write("转为大写：",str.toLocaleUpperCase(),"<br>")
//转为小写
document.write("转为小写：",str.toLocaleLowerCase(),"<br>")
//字母首次出现的位置
document.write("v首次出现的位置：",str.indexOf("a"),"<br>")
//截取字符串,包含开头不包含结尾
document.write("截取Java：",str.substring(3,7),"<br>")
//替换
document.write("替换为你不好：",str.replace("你好","你不好"),"<br>")
9、运算符与表达式
算数运算符： +(加)、-(减)、*(乘)、/(除)、%(取模)、++(加加)、–(减减)
var a = 6,
b = 3
document.write("a=",a,"<br>")
document.write("b=",b,"<br>")
//加法
document.write("a+b=", a + b, "<br>")
//减法
document.write("a-b=", a - b, "<br>")
//乘法
document.write("a*b=", a * b, "<br>")
//除法
document.write("a/b=", a / b, "<br>")
//取模
document.write("a%b=", a % b, "<br>")
//++、++在前先自增，后其他，++在后，先其他，后自增
var c = a++
document.write("c=",c)
比较运算符：>(大于)、<(小于)、>=(大于等于)、<=(小于等于)、！=(不等于)、 (等于)、=(等等于)
var a = 6,
b = 3
//大于
document.write("a > b:", a > b, "<br>")
//小与
document.write("a < b:", a < b, "<br>")
//大于等于
document.write("a >= b:", a >= b, "<br>")
//小于等于
document.write("a <= b:", a <= b, "<br>")
// == 比较是否相等
document.write("a == b:", a == b, "<br>")
//不等于
document.write("a!=b", a != b, "<br>")
// === 三等号
var c = "12", //string
d = 12 //number
//比较字面常量
document.write("c==d:", c == d,"<br>")
//即比较值，也比较数据类型
document.write("c===d:", c === d)
逻辑运算符：&&(与)、||(或)、！(非)
//逻辑运算符：&& || ！
var a = 12,
b = 5,
c = 6
//&& 与 一假即假
document.write(a > b && c < b,"<br>")
//|| 或 一真即真
document.write(b>c || a<c,"<br>")
//！非 取相反
document.write(!true)
赋值运算符：+=、-=、*=、/=、%=
//赋值运算符 += -= *= /= %=
var a = 12
document.write("a=", a, "<br>")
a += 6 //a+=6等价于a = a+6
document.write("a=", a, "<br>")
a -= 5 //a-=5等价于a = a-6
document.write("a=", a, "<br>")
三目运算符：
//三目运算符
//语法 表达式 ? 值1 : 值2
//含义：如果表达式为真，则执行冒号前面的，如果表达式为假，则执行冒号后面的
var a = 12
var mess = a >=18 ? "你成年" : "未成年"
document.write(mess)
10、系统对话框
1、只有确定按钮的弹框
alert("你好")
2、带有确定和取消按钮的弹框
//带有确定和取消按钮的弹框
var a = confirm("删除吗？")
document.write(a)
3、带有输入框的弹框
//带有输入框的弹框
var b = prompt("你几岁了")
document.write(b)
11、if语句
三种语法：
1、单分支语句结构 2、双分支语句结构 3、多分支语句结构
单分支语句
//单分支语句
//语法 if(条件表达式){代码块}
var a = 12
if(a>=18){
document.write("成年")
}
双分支语句
//双分支语句
//语法
/*
if(条件表达式){
代码块1
}else{
代码块2
}
如果表达式为真则执行代码块1，否则执行代码块2
*/
var b = prompt("你今年多大")
if(b>=18){
document.write("成年")
}else{
document.write("未成年")
}
多分支语句结构
//多分枝语句结构
/*
语法
if(条件表达式1){
代码块1
}else if(条件表达式2){
代码块2
}else if(条件表达式3){
代码块3
}
...
else{
代码块n
}
如果表达式1成立，则执行代码块1如果表条件表达式2成立，则执行代码块2...
如果条件都不成立，则执行else中的代码
*/
var d = prompt("你考多少分")
if(d>=90){
document.write("优")
}else if(d>=60){
document.write("良")
}else if(d<=60){
document.write("差")
}else{
document.write("啥也不是")
}
12、switch语句
//swith语句
/*
语法
swith(表达式){
case 值1：
代码块1
break
case 值2：
代码块2
break
...
default：
代码块n
break
}
*/
var sex = "aa"
switch (sex){
case "男":
document.write("帅哥")
break;
case "女":
document.write("美眉")
break;
default :
document.write("输入有误")
}
13、循环结构
循环四要素：开始值、结束值、循环体、变化值
for循环
for(初始化；条件表达式；增量){
循环体
}
for(var i = 1;i<=5;i++){
document.write("跑了",i,"圈","<br>")
}
while循环
while(条件表达式){
循环体
}
如果表达式为真，则执行循环体
var i = 1
while(i<=50){
document.write(i,"<br>")
i++
}
do-while循环
do{
循环体
}while(条件表达式)
var i = 1
do{
document.write(i,"<br>")
i++
}
while(i <= 100)
注：
while和do-while的区别
while是先判断条件是否成立；如果成立在执行循环体
do-while是先执行循环体；在判断条件是否成立
也就是说，do-while循环无论条件是否成立，至少会执行一次
14、循环中断
break：结束循环
continue：跳过本次循环，进入下次循环
break：
for (var i = 1; i <= 10; i++) {
//判断
if (i == 5) {
document.write("肚子疼，不跑了")
break
}
document.write("跑了", i, "圈", "<br>")
}
continue:
for (var i = 1; i <= 10; i++) {
//判断
if (i == 5) {
document.write("鞋带开了，下圈跟上","<br>")
continue
}
document.write("跑了", i, "圈", "<br>")
}
15、循环嵌套
五行五列
//五行五列
for(var j =0;j<=5;j++){
for(var i = 0; i<=5; i++){
document.write("*")
}
document.write("<br>")
}
金字塔形状
//金字塔形状
for(var c = 1;c<=8; c++){
for(var d = 1; d<=c; d ++){
document.write("*")
}
document.write("<br>")
}
九九乘法表
<style type="text/css">
tr td{
border: 1px solid red;
height: 30px;
width: 200px;
background-color: yellow;
color: green;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
//九九乘法表
document.write("<table>")
for (var i = 1; i <= 9; i++) {
document.write("<tr>")
for (var j = 1; j <= i; j++) {
document.write("<td>",j,"*",i, "=", j*i,"</td>" )
}
document.write("</tr>")
}
document.write("</table>")
</script>
**注：**内层循环控制行数，外层循环控制列数
16、关键字、保留字
关键字
| 关键字 | ||||
|---|---|---|---|---|
| break | delete | if | this | while |
| case | do | in | throw | with |
| catch | else | instanceof | try | |
| continue | finally | new | typeof | |
| debugger | for | return | var | |
| default | function | switch | void |
保留字
| abstract | debugger | float | long | short |
|---|---|---|---|---|
| boolean | double | goto | native | static |
| byte | enum | implements | package | super |
| char | export | import | private | synchronized |
| class | extends | int | protected | throws |
| const | final | interface | public | transient |
| volatile |
17、程序调试
1、alert()
2、console.log()
第二章
1、什么是函数
答：完成特定功能的代码块
2、函数的分类
答：系统函数、自定义函数
系统函数
//函数完成特定的代码块
//分类：系统函数；自定义函数
//将字符串转为整数数字
var a = parseInt("12,56")
document.write(a, "<br>")
//将字符串转为小数
var b = parseFloat("45.89")
document.write(b+1,"<br>")
//检查参数是否非数字，如果不是数字返回true，是数字返回flace
var c = "45"
document.write(isNaN(c),"<br>")
//计算
var k = eval(12+45-6*9)
document.write(k)
自定义函数
语法：自定义函数
参数，在函数定义的时候，下载小括号中的叫参数
返回值，return
function 函数名(参数1，参数2…){
功能代码块
return 返回值
}
定义无参数的函数
//无参数无返回值的函数
function f1(){
document.write("打扫卫生！！")
}
f1()
定义有参数的函数
//定义有参数的函数
function f2(name){
document.write(name,"吃西瓜")
}
f2("张三")
3、事件
| 名称 | 说明 |
|---|---|
| onload | 页面加载 |
| onlick | 鼠标点击 |
| onmouseover | 鼠标移入 |
| onmouseout | 鼠标移出 |
| onkeydown | 键盘按键按下 |
| onchange | 内容被改变 |
点击事件；onclick()
<body>
<button onclick="f2('张三')">点击</button>
</body>
<script type="text/javascript">
function f2(a) {
alert("点我干啥" + a)
}
</script>
页面加载；onload()
<body onload="f1()">
<div id="box"></div>
</body>
<script type="text/javascript">
function f1(){
console.log("页面加载了");
}
</script>
鼠标移入；onmouseover()
<body>
<div id="box" onmouseover="f2()"></div>
</body>
<script type="text/javascript">
function f2(){
console.log("鼠标来了");
}
</script>
鼠标移出；onmouseout()
<body>
<div id="box" onmouseout="f1()"></div>
</body>
<script type="text/javascript">
function f1(){
console.log("鼠标走了");
}
</script>
4、获取标签对象的方式
1、通过id获取
<body>
<input type="text" id="inp">
<button onclick="f2()">获取值</button>
</body>
<script type="text/javascript">
function f2(){
//根据id获取标签对象
//get 获取 element 节点 by 通过
var oinp = document.getElementById("inp")
//获取input标签中的值 .value属性
alert(oinp.value)
}
</script>
5、计算器
<body>
第一个数：<input type="text" id="o1" /><br />
第二个数：<input type="text" id="o2" /><br />
<button onclick="f2('+')">+</button>
<button onclick="f2('-')">-</button>
<button onclick="f2('*')">*</button>
<button onclick="f2('/')">/</button><br />
计算结果：<input type="text" id="o3" /><br />
</body>
<script type="text/javascript">
function f2(v) {
//获取input标签
var op1 = parseFloat(document.getElementById("o1").value)
var op2 = parseFloat(document.getElementById("o2").value)
if (v == "+") {
document.getElementById("o3").value = op1 + op2
} else if (v == "-") {
document.getElementById("o3").value = op1 - op2
} else if (v == "*") {
document.getElementById("o3").value = op1 * op2
} else if (v == "/") {
document.getElementById("o3").value = op1 / op2
}
}
</script>
高级计算器
<body>
<div id="box">
<input type="text" value="0" id="inp" />
<div id="a">
<div id="l1" onclick="f1('清除')">清除</div>
<div id="l1" onclick="f1('删除')">删除</div>
<div onclick="f1('9')">9</div>
<div onclick="f1('8')">8</div>
<div onclick="f1('7')">7</div>
<div onclick="f1('/')">/</div>
<div onclick="f1('6')">6</div>
<div onclick="f1('5')">5</div>
<div onclick="f1('4')">4</div>
<div onclick="f1('*')">*</div>
<div onclick="f1('3')">3</div>
<div onclick="f1('2')">2</div>
<div onclick="f1('1')">1</div>
<div onclick="f1('-')">-</div>
<div onclick="f1('0')">0</div>
<div onclick="f1('.')">.</div>
<div onclick="f1('=')">=</div>
<div onclick="f1('+')">+</div>
</div>
</div>
</body>
<script type="text/javascript">
//定义变量接收点击的数
var str = ""
function f1(v) {
if (v == "1") {
str += "1"
} else if (v == "2") {
str += "2"
} else if (v == "3") {
str += "3"
} else if (v == "4") {
str += "4"
} else if (v == "5") {
str += "5"
} else if (v == "6") {
str += "6"
} else if (v == "7") {
str += "7"
} else if (v == "8") {
str += "8"
} else if (v == "9") {
str += "9"
} else if (v == "0") {
str += "0"
} else if (v == "+") {
str += "+"
} else if (v == "-") {
str += "-"
} else if (v == "*") {
str += "*"
} else if (v == "/") {
str += "/"
} else if (v == "删除") {
//截取字符串
str = str.substring(0, str.length - 1)
}
//获取输入框标签并设置值
document.getElementById("inp").value = str
//清除
if (v == "清除") {
str = ""
document.getElementById("inp").value = 0
}
//等号
if (v == "=") {
//计算
document.getElementById("inp").value = eval(str)
str = ""
}
}
</script>
6、函数表达式
//函数表达式
//语法
//var 函数名 = function([参数]){
//代码块
//}
//总结:普通函数如果有重名的话会把原来的覆盖掉
//函数表达式有重名的话不会覆盖掉
//普通函数
function f1() {
console.log("你好")
}
f1()
function f1() {
console.log("你好,你不好")
}
f1()
//函数表达式
var f2 = function() {
console.log("你好，javascript")
}
f2()
var f2 = function() {
console.log("你好，java")
}
f2()
7、预解析
<script type="text/javascript">
//顾名思义就是提前解析代码
console.log(b);
var b = 122
//函数也可以
f2()
function f2(){
console.log("都多余了");
}
8、函数自调用
自定义函数分类：1、匿名函数；2、命名函数
匿名函数的特点：函数没有名字，在声明的同时便直接调用
匿名函数的好处：同名函数之间不会有冲突
语法：(function(){
//函数体
}) ([实参])
<script type="text/javascript">
(function (a){
console.log("这是匿名函数",a);
})("这是实参")
</script>
9、回调函数
<script type="text/javascript">
function f1(){
console.log("f1函数");
}
//在函数中调用函数
function f2(){
console.log("f2函数")
f1()
}
f2()
</script>
10、变量的作用域
变量的作用域分为：1、全局变量；2、局部变量
局部变量：在函数内部声明的变量(必须使用var)
可以在不同的函数中使用名称相同的局部变量
全局变量：在函数外声明的变量
网页的所有脚本和函数都能访问它
<script type="text/javascript">
//全局变量
var a = 12
console.log(a);
function f1(){
//局部变量
var b = 34
console.log(a);
console.log(b);
}
f1()
</script>
11、隐式全局变量
<script type="text/javascript">
var a1 = 12
a2 = 23//隐式全局变量
console.log(a1);
console.log(a2);
function f1(){
a3 = 77//隐式全局变量
var a4 = 90//局部变量
}
f1()
console.log(a3);
console.log(a4);
</script>
12、函数的返回值
语法：
function 函数名([参数]){
代码块
[return 返回值]
}
//无参数无返回值
function f1(){
console.log("f1函数");
}
f1()
//有参数无返回值
function f2(a){
console.log("f2函数",a);
}
f2("zhangsna")
//有参数有返回值
function f3(){
console.log("f3函数");
return "李四"
}
var a = f3()
console.log(a);
//有参数有返回值
function f4(k,v){
return k+v
}
var d = f4(23,23)
console.log("d=",d);
13、闭包
function f1(){
//定义变量
var b = 45
function f2(){
return b
}
//将f2函数返回出去
return f2
}
//接受的是个函数
var f = f1()
//调用
var a = f()
console.log(a+1);
第三章
1、this指向
this代表当前对象
<body>
<div id="box">白日依山尽，黄河入海流。<br />欲穷千里目，更上一层楼。 </div>
<input type="text" id="inp" onblur="f1(this)">
<br />
<select onchange="f2(this)" id="slt">
<option>楷体</option>
<option>宋体</option>
<option>黑体</option>
<option>华文彩云</option>
<option>华文琥珀</option>
</select>
</body>
<script type="text/javascript">
var obox = document.getElementById("box")
function f1(oinp){
obox.style.fontSize = oinp.value+"px"
}
function f2(oslt){
obox.style.fontFamily = oslt.value
}
</script>
2、数组
数组是可以保存多个数据的容器
数组的索引（下表）是从零开始的
创建数组的语法：
var 数组名 = [值1，值2，值3…]
var arr = [12,34,56,"lisi"]
//查看数组的长度
console.log(arr.length);
//取值：数组名[下标]
console.log(arr[2])
//遍历数组
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
3、定时器
定时器：setinterval()
<body>
<div id="box">
<img src="img/3.jpg" id="im"/>
</div>
</body>
<script type="text/javascript">
//创建数组保存图片路径
var arr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg",]
//定义变量作为数组下标
var i = 0
function f1(){
//获取图片标签，更改src属性
document.getElementById("im").src = arr[i]
i++
//判断是否到最后一张
if(i == arr.length){
//切换为第一张
i = 0
}
}
//定时器，一秒钟执行一次
setInterval(f1,1000)
</script>
4、Math对象
<script type="text/javascript">
//数学工具类
//向上取整
document.write(Math.ceil(12.001),'<br>')
//向下取整
document.write(Math.floor(12.99),'<br>')
//四舍五入
document.write(Math.round(12,4),'<br>')
//随机数
document.write(Math.random(0,1),'<br>')
//0-5之间的随机数
document.write(Math.floor(Math.random()*5))
</script>
5、四种遍历数组的方式
<script type="text/javascript">
var arr = [12,23,45,67,78,89]
//第一种 for
for (var i = 0; i < arr.length; i++) {
document.write(arr[i],'<br>')
}
document.write("----------------<br>")
//第二种 for in
for(var a in arr){
document.write(arr[a],'<br>')
}
document.write("----------------<br>")
//第三种 for of
for(var b of arr){
document.write(b,"<br>")
}
document.write("----------------<br>")
//第四种 forEach
arr.forEach((k,v)=>{
document.write(k,"下标",v,'<br>')
})
</script>
6、Date对象(日期)
<body>
<div id="a"></div>
</body>
<script type="text/javascript">
function f1() {
//创建当前日期
var s = new Date()
//获取年份
var a = s.getFullYear(),
//获取月份
b = s.getMonth() + 1,
//获取日
c = s.getDate(),
//获取时间
d = s.getHours(),
//获取分钟
e = s.getMinutes(),
//获取秒;三目运算符进行补零操作
f = s.getSeconds() < 10 ? "0" + s.getSeconds() : s.getSeconds()
//拼接到一起
var str = a + "年" + b + "月" + c + "号" + d + "时" + e + "分" + f + "秒"
//获取div框给div框设置内容
document.getElementById("a").innerText = str
}
//调用
f1()
//动态显示
setInterval(f1, 1000)
</script>
7、innerHTML与innerText
获取时：
<script type="text/javascript">
/*获取时：innerHTML获取标签中的全部内容
innerText 只会获取文本信息
*/
var od1 = document.getElementById("box").innerHTML
console.log(od1);
var od2 = document.getElementById("box").innerText
console.log(od2);
</script>
设置时：
<script type="text/javascript">
/*获取时：innerHTML获取标签中的全部内容
innerText 只会获取文本信息
设置时：innerHTML会解析标签
innerText会把标签作为文本输出
*/
document.getElementById("box").innerHTML = "<h2>新的一天新的开端是</h2>"
document.getElementById("box").innerText = "<h2>新的一天新的开端是</h2>"
8、Window对象
| 方法名称 | 说 明 |
|---|---|
| prompt( ) | 显示可提示用户输入的对话框 |
| alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
| confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
| close( ) | 关闭浏览器窗口 |
| open( ) | 打开一个新的浏览器窗口，加载给定 URL 所指定的文档 |
| setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval( ) | 按照指定的周期（以毫秒计）来调用函数或表达式 |
| clearTimeout( ) | 用于停止执行setTimeout( )方法的函数代码 |
| clearInterval( ) | 用于停止 setInterval( ) 方法执行的函数代码 |
**History对象 **
| 类别 | 名称 | 说 明 |
|---|---|---|
| 属性 | length | 返回历史记录列表中的网址数 |
| 方法 | back() | 加载 History 对象列表中的前一个URL |
| forward() | 加载 History 对象列表中的下一个URL | |
| go() | 加载 History 对象列表中的某个具体URL |
Location对象
| 名称 | 说 明 |
|---|---|
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或返回当前URL的主机名 |
| href | 设置或返回完整的URL |
9、Document对象的常用方法
Document对象代表整个HTML文档
Document对象的常用方法
| 名 称 | 说 明 |
|---|---|
| getElementById() | 返回对拥有指定id的第一个对象的引用 |
| getElementsByName() | 返回带有指定名称的对象的集合 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |
1、通过id属性获取
2、通过标签名获取
<body>
<div id="a">div1</div>
<ul>
<li>电泳</li>
<li>电商</li>
</ul>
<button onclick="f1()">点击</button>
</body>
<script type="text/javascript">
function f1(){
//通过标签名获取
var oli = document.getElementsByTagName("li")
var str = ""
for (var i = 0; i < oli.length; i++) {
str+=oli[i].innerHTML+" "
}
//通过id属性获取标签对象
document.getElementById("a").innerHTML = str
}
</script>
10、获取标签对象的方式
<body>
<div id="a">div1</div>
<div class="a">div2</div>
<div>div3</div>
</body>
<script type="text/javascript">
//1、通过id的获取，唯一值
var a1 = document.getElementById("a")
console.log(a1);
//2、通过标签名获取多个值
var a2 = document.getElementsByTagName("div")
console.log(a2);
//3、通过类名获取
var a3 = document.getElementsByClassName("a")
console.log(a3);
</script>
11、事件的注册方式
<body>
<button onclick="f1()">点击1</button>
<button id="btn">点击2</button>
</body>
<script type="text/javascript">
//第一种方法：直接写在标签上
function f1(){
console.log("点击1");
}
//第二种：用id获取
var obtn = document.getElementById("btn")
obtn.onclick = ()=>{
console.log("点击2");
}
</script>
第四章
1、操作DOM
dom: Document Object Model (文档对象模型)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H6qSfLhJ-1676860331543)(C:\Users\吴振\AppData\Roaming\Typora\typora-user-images\1675171041522.png)]
2、节点信息
节点类型:
Element(元素)
Attr(属性)
Text(文本)
Comment(注释)
Document(文档)
3、访问节点
使用getElement系列方法访问指定节点
1、ugetElementById() 通过id访问节点
2、getElementsByName() 通过name属性访问节点
3、getElementsByTagName() 通过标签名访问节点
**a、**节点属性：
| 属性名称 | 描述 |
|---|---|
| parentNode | 返回节点的父节点 |
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 返回下一个节点 |
| previousSibling | 返回上一个节点 |
**b、**element属性
| 属性名称 | 描述 |
|---|---|
| firstElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibling | 下一个节点 |
| previousElementSibling | 上一个节点 |
4、style属性
HTML元素.style.样式属性 = "值"
示例：
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px";
边框：backgroundColor、backgroundImage…
文本：font、fontSize、color…
边距：padding、paddingTop、paddingLeft…
边框：border、borderTop、borderLeft…
5、className属性
语法：
HTML元素.className = "class样式名"
示例
function over() {
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out() {
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}
6、获取元素的样式
语法
HTML元素.style.样式属性
示例
alert(document.getElementById("cartList").style.display);
！只能获取内联样式的属性值
7、总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3t4aYi6S-1676860331544)(C:\Users\吴振\AppData\Roaming\Typora\typora-user-images\1675173254469.png)]
第五章
1、获取和设置节点
获取节点，getAttribute(“属性名”) ；设置节点，setAttribute(“属性名”，“属性值”)
var oim = document.getElementById("im")
function f1(){
var a = oim.getAttribute("src")
console.log(a);
}
function f2(){
oim.setAttribute("src","img/3.jpg")
}
2、创建和追加节点
创建节点，createElement ；追加节点，appendChild
<script type="text/javascript">
function f1(){
//创建
var oim = document.createElement("img")
//设置属性
oim.setAttribute("src","img/1.jpg")
//获取div
var od = document.getElementsByTagName("div")[0]
//追加
od.appendChild(oim)
}
</script>
3、删除和替换节点
| 名称 | 描述 |
|---|---|
| node.removeChild(child) | 删除指定的子节点 |
| node.replaceChild(newChild,oidChild) | 用其他节点替换指定的子节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box">
<p id="p">段落标签</p>
<img src="img/1.jpg" id="im"/>
</div>
<button onclick="f2()">点击</button>
</body>
<script type="text/javascript">
function f2(){
var obox = document.getElementById("box")
var oim = document.getElementById("im")
var op = document.getElementById("p")
//删除图片标签
obox.removeChild(oim)
//创建节点
var oh = document.createElement('h1')
oh.innerHTML = "标题标签"
//替换
obox.replaceChild(oh,op)
}
</script>
</html>
4、获取元素的宽高属性
- offset指偏移，及这个元素在文档中占用的所有显示宽度
| 属性 | 描述 |
|---|---|
| offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
| offsetTop | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
| offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
| offsetHeight | 返回元素的高度 |
| offsetWidth | 返回元素的宽度 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
border: 10px solid red;
background-color: red;
padding: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
var od = document.getElementsByTagName('div')[0]
console.log('高',od.offsetHeight,'宽',od.offsetWidth);
console.log('可见高',od.clientHeight,'可见宽',od.clientWidth);
console.log('页面高',window.innerHeight,'页面宽',window.innerWidth);
</script>
</html>
5、浮动广告
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div {
height: 100px;
width: 200px;
background-color: firebrick;
position: relative;
/* 相对定位 */
}
</style>
</head>
<body>
<div id="box">
<a href="http://www.jd.com"></a>
</div>
</body>
<script type="text/javascript">
//获取div标签
let obox = document.getElementById("box")
//tp:上下移动 lt:左右移动
let tp = 0,lt = 0
//a：上 b：下
let a = true,b = true
function f1() {
//获取页面及div的宽高
let h = window.innerHeight - obox.offsetHeight - 5
let w = window.innerWidth - obox.offsetWidth - 5
//如果a为真，则y增加1，否则y减1
tp = a ? tp + 1 : tp - 1
//如果y大于等于高度，则把a设为false
if (tp >= h) a = false
//如果y小于等于0，则把a设为true
if (tp <= 0) a = true
lt = b ? lt + 1 : lt - 1
if (lt >= w) b = false
if (lt <= 0) b = true
obox.style.top = tp + "px"
obox.style.left = lt + "px"
}
let t = setInterval(f1, 10)
//设置鼠标移入事件
obox.onmouseover = ()=> {
clearInterval(t)
}
//设置鼠标移出事件
obox.onmouseout = ()=> {
t = setInterval(f1, 10)
}
</script>
</html>
6、随机点名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
margin: auto;
}
tr,td{
height: 30px;
width: 60px;
border: 1px solid red;
text-align: center;
font-family: kaiti;
font-size: 20px;
}
.e{
background-color: orange;
}
#box{
height: 50px;
width: 90px;
background-color: bisque;
position: absolute;
top: 50px;
left: 210px;
display: none;
font-size: 23px;
font-family: kaiti;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="box">小宇宙</div>
<table>
<tr>
<td>张三</td>
<td>李四</td>
<td>王五</td>
</tr>
<tr>
<td>宇将军</td>
<td>大懿</td>
<td>小宇宙</td>
</tr>
<tr>
<td>田七</td>
<td>马八</td>
<td>王九</td>
</tr>
<tr >
<td colspan="3">
<button id="btn">开始</button>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
//获取按钮标签
var obtn = document.getElementById("btn")
var obox = document.getElementById("box")
var t
//给按钮设置点击事件
obtn.onclick = function(){
if(this.innerHTML == '开始'){
obox.style.display = 'none'
this.innerHTML = '停止'
t =setInterval(f1,1)
setTimeout(function(){
obtn.innerHTML = '开始'
clearInterval(t)
obox.style.display = 'block'
},2000)
}
}
//获取所有的td标签
var otds = document.getElementsByTagName("td")
//随机获取名称
function f1(){
for(var otd of otds){
otd.className = ""
}
//随机下标
var i = Math.floor(Math.random()*(otds.length-1))
otds[i].className = 'e'
obox.innerHTML = otds[i].innerHTML
}
</script>
</html>
第六章
1、什么是对象
对象是相关属性和方法的集合体：属性、方法
对象包括：string(字符串)对象、array(数组)对象、date(日期)对象、math(数学工具类)对象、regExp(正则验证)对象
2、创建一个自定义对象
基于Object对象创建自定义对象
var 对象名称 = new Object()
通过点操作符(.)为其添加属性或方法
第一种方法
<script type="text/javascript">
//创建自定义对象的语法
//var 对象名 = new Object()
var stu = new Object()
//通过点操作符（.）为其添加属性或方法
stu.name = '张三丰'
stu.age = 23
stu.play = function(){
console.log("张丹峰在玩");
}
//调用
console.log(stu.name,stu.age);
stu.play()
</script>
第二种方法
使用字面常量创建对象
<script type="text/javascript">
var stu ={
name:'张三',
age:56,
play:function(){
console.log("张三在玩香肠派对");
}
}
console.log(stu.name,stu.age);
stu.play()
</script>
3、案例，创建猫对象
<script type="text/javascript">
var cat = {
name:'小布丁',
age:23,
address:'河南',
play:function(){
console.log('都多余了');
}
}
console.log(cat.name,cat.age,cat.address);
cat.play()
</script>
4、工厂模式
将对象的创建逻辑封装在一个函数中
<script type="text/javascript">
//工厂模式
function f1(name,age,address){
var cat = new Object()
//添加属性
cat.name = name
cat.age = age
cat.address = address
//添加方法
cat.play = function(){
document.write("猫咪名字：",this.name+'<br>')
document.write("猫咪颜色：",this.age+'<br>')
document.write("猫咪住址：",this.address+'<br>')
}
return cat
}
var cat1 = f1("小布丁",23,'河南')
cat1.play()
var cat2 = f1("小花猫",60,'商丘')
cat2.play()
</script>
5、构造函数
-
定义构造函数用以创建特定类型的对象
与工厂模式相比
a、没有显示创建object对象，没有return语句
b、将属性的方法赋给this对象
<script type="text/javascript">
//构造函数
function cat(name,age,sex){
this.name = name
this.age = age
this.sex = sex
this.play = function(){
document.write("猫咪名字：",this.name,'<br>')
document.write("猫咪年龄：",this.age,'<br>')
document.write("猫咪性别：",this.sex,'<br>')
}
}
//创建对象
var cat1 = new cat('小黄',23,'男')
cat1.play()
var cat2 = new cat('小黑',67,'<br>')
cat2.play()
</script>
6、原型对象
-
每一个函数都有一个prototype属性，指向其原型对象
-
使用原型对象方式添加属性和方法。所有实例会共享它所包含的属性和方法
语法
构造函数名.rototype.属性或方法案例
<script type="text/javascript"> function f1(name){ this.name = name this.play = function(){ console.log(this.clazz,'的',this.name,'在卖鱼'); } } //通过prototype属性，添加属性或方法，所有的对象共享 f1.prototype.clazz = "11班" var s1 = new f1('张三') s1.play() var s2 = new f1('李四') s2.play() </script>
7、 constructor属性和instanceof操作符
<script type="text/javascript">
function f1(name){
this.name = name
this.play = function(){
console.log(this.clazz,'的',this.name,'在卖鱼');
}
}
//通过prototype属性，添加属性或方法，所有的对象共享
f1.prototype.clazz = "11班"
var s1 = new f1('张三')
s1.play()
//constructor 构造函数
console.log(s1.constructor == f1);
//instanceof 判断对象的类型
console.log(s1 instanceof f1);
var s2 = new f1('李四')
s2.play()
var s3 = new f1('王五')
s3.play()
</script>
第七章(es6)
1、新增命令
-
let命令
声明变量
用法类似与var
但是，所声明的变量，只在let命令所在的代码块有效
-
const命令
声明一个只读的常量
一旦声明，常量的值就不能被改变
2、let命令
1、没有作用域提升
2、是一个块级作用域
3、不能重复声明
<script type="text/javascript">
{
var a = 23
let b = 24
}
console.log(a); //23
console.log(b); //b is not defined
</script>
3、const命令
1、没有作用于提升
2、是一个块级作用域
3、不能重复声明
4、定义变量值不能改变
<script type="text/javascript">
const a = 23
a = 45
//Assignment to constant variable.
console.log(a);
</script>
4、解构赋值
完全结构、不完全结构
a、数组的解构赋值
在ES6中，可以从数组中提取值，按照对应位置，对变量赋值
let [a,b,c]=[1,2,3];
-
完全解构
将数组中的值全部拿出来
<script type="text/javascript">
//数组的解构赋值
//声明数组
var arr = [12,23,454,676,78,99]
//es5 代码冗絮
//let a = arr[0]
//let b = arr[1]
//let c = arr[2]
//let d = arr[3]
//let e = arr[4]
//let f = arr[5]
//console.log(a,b,c,d,e,f);
//es6 代码简单好记
let[a,b,c,d,e,f] = arr
console.log(a,b,c,d,e,f);
</script>
-
不完全解构(,)
用逗号隔开
//不完全解构 用逗号隔开 let arr = [12,23,45,56] let[a,,,b] = arr console.log(a,b); -
剩余运算符(…)
第一个值给第一个参数，剩下的参数变成数组传给第二个值
let arr = [12, 23, 45, 56]
let [k, ...l] = arr
console.log(k);
console.log(l);
b、对象的解构与赋值
- 数组的元素是按次序排列的，变量的取值由它的位置决定
- 对象的属性没有次序，变量必须与属性同名，才能取到正确的值
<script type="text/javascript">
//对象的解构赋值
let stu = {
name:'张三',
age:23,
sex:'男'
}
//es5
console.log(stu.name,stu.age,stu.sex);
//es6
//let{name,age,sex} = stu
//console.log(name,age,sex);
//变更名要跟属性名相同，才可以取到正确的值
let{name} = stu
console.log(name);
let{a} = stu
console.log(a); //undefined
</script>
c、字符串的解构赋值
跟数组类似
<script type="text/javascript">
//字符串的解构赋值
let str = 'hello'
//完全解构
let[a,b,c,d,e] = str
console.log(a,b,c,d,e);
//不完全解构
let[y,,,,u] = str
console.log(y,u);
//剩余运算符
let[j,...k] = str
console.log(j);
console.log(k);
</script>
5、函数默认值
参数变量是默认声明的所有不能用leth或const再次声明
使用参数默认值时函数不能有同名参数
<script type="text/javascript">
//函数默认值
function add(a,b=4){
return a+b
}
let sum = add(4)
console.log(sum);
</script>
6、剩余运算符(剩余参数)
<script type="text/javascript">
//数组
let arr = [12, 23, 45]
let [a, ...b] = arr
console.log(a, b);
//函数
function add(...args) {
let sum = 0
for (let i = 0; i < args.length; i++) {
sum += args[i]
}
return sum
}
let sum = add(5, 5, 5, 5,5)
console.log(sum);
</script>
7、箭头函数
使用"箭头"函数(>=)定义函数
let f = v => v;
// 等同于
let f = function (v) {
return v;
};
特点：简洁、参数、函数体的大括号
普通写法
//箭头函数
let f3 = ()=>{
console.log('箭头函数');
}
f3()
简便写法：
省略大括号,函数体只有一条语句
let f4 = ()=>console.log('省略大括号');
f4()
省略小括号，有一个参数的时候
let f5 = a => console.log('省略小括号了', a);
f5(666)
有多个参数时，小括号不可以省略
let f6 = (k,v)=>console.log('多个参数，不可省略小括号',k,v);
f6(66,88)
return
//箭头函数
let f7 = (t, y) => {
return t + y
}
let s1 = f7(6, 6)
console.log(s1);
//简写
let f8 = (d, h) => d + h
let s2 = f8(8,8)
console.log(s2);
如果返回对象，需要用小括号括起来
let f9 = id=>
({
id:100,
name:'zhangsan',
age:23
})
let s3 = f9(100)
console.log(s3);
8、箭头函数的this指向问题
a、箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
b、扩展理解
b.1、箭头函数的this判断外层是否有函数
b.2、如果有，外层函数的this就是内部箭头函数的this
b.3、如果没有，则this是window
<body>
<button id="btn">点我呀你个**</button>
</body>
<script type="text/javascript">
let obtn = document.getElementById("btn")
obtn.onclick = function(){
console.log(this); //普通函数this指向当前对象：button
}
obtn.onclick = ()=>console.log(this); //箭头函数this向:window
</script>
箭头函数使用注意事项
a、函数体内的this对象是定义时所在的对象
b、不可以当作构造函数
c、不可以使用arguments对象
箭头函数不适用场合
a、定义对象的方法，且该方法内部包括this
b、需要动态this的时候，也不应使用箭头函数
第八章(es6进阶)
1、模板字符串
ole.log(j);
console.log(k);
##### 5、函数默认值
参数变量是默认声明的所有不能用leth或const再次声明
使用参数默认值时函数不能有同名参数
```javascript
<script type="text/javascript">
//函数默认值
function add(a,b=4){
return a+b
}
let sum = add(4)
console.log(sum);
</script>
6、剩余运算符(剩余参数)
<script type="text/javascript">
//数组
let arr = [12, 23, 45]
let [a, ...b] = arr
console.log(a, b);
//函数
function add(...args) {
let sum = 0
for (let i = 0; i < args.length; i++) {
sum += args[i]
}
return sum
}
let sum = add(5, 5, 5, 5,5)
console.log(sum);
</script>
7、箭头函数
使用"箭头"函数(>=)定义函数
let f = v => v;
// 等同于
let f = function (v) {
return v;
};
特点：简洁、参数、函数体的大括号
普通写法
//箭头函数
let f3 = ()=>{
console.log('箭头函数');
}
f3()
简便写法：
省略大括号,函数体只有一条语句
let f4 = ()=>console.log('省略大括号');
f4()
省略小括号，有一个参数的时候
let f5 = a => console.log('省略小括号了', a);
f5(666)
有多个参数时，小括号不可以省略
let f6 = (k,v)=>console.log('多个参数，不可省略小括号',k,v);
f6(66,88)
return
//箭头函数
let f7 = (t, y) => {
return t + y
}
let s1 = f7(6, 6)
console.log(s1);
//简写
let f8 = (d, h) => d + h
let s2 = f8(8,8)
console.log(s2);
如果返回对象，需要用小括号括起来
let f9 = id=>
({
id:100,
name:'zhangsan',
age:23
})
let s3 = f9(100)
console.log(s3);
8、箭头函数的this指向问题
a、箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
b、扩展理解
b.1、箭头函数的this判断外层是否有函数
b.2、如果有，外层函数的this就是内部箭头函数的this
b.3、如果没有，则this是window
<body>
<button id="btn">点我呀你个**</button>
</body>
<script type="text/javascript">
let obtn = document.getElementById("btn")
obtn.onclick = function(){
console.log(this); //普通函数this指向当前对象：button
}
obtn.onclick = ()=>console.log(this); //箭头函数this向:window
</script>
箭头函数使用注意事项
a、函数体内的this对象是定义时所在的对象
b、不可以当作构造函数
c、不可以使用arguments对象
箭头函数不适用场合
a、定义对象的方法，且该方法内部包括this
b、需要动态this的时候，也不应使用箭头函数
1833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
