1.什么是JavaScript？
- 直译型网页脚本编程语言
- JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
- JavaScript特点向HTML页面中添加交互行为脚本语言，语法和Java类似解释性语言，边执行边解释
2.JavaScript组成
1.ECMAScript:JavaScript核心语法
2.DOM：document object model（文档对象模型）所有的标签都是对象
3.BOM：browser object model（浏览器对象模型） 把浏览器模拟成对象
3.JavaScript的引入方法（三种）
1.通过
<!DOCTYPE html>
<html lang="en">
<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>JSDemo</title>
</head>
<body>
</body>
<!-- 嵌入网页中使用 script 标签-->
<script>
//javaScript代码
console.log("hello world");
</script>
</html>
2.通过
<!DOCTYPE html>
<html lang="en">
<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>JSDemo</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<p id="p1">123</p>
</body>
<!-- 引入js文件 -->
<script type="text/javascript" src="demo.js"></script>
</html>
3.直接写在HTML标签中
<input name="btn" type="button" value="弹出消息框"
onclick="javascript:alert('欢迎你');"/>
关于js加载顺序问题
- 如果js文件中有操作DOM元素的内容，要保证元素加载后再进行js操作，否则会取到null值
4.JS\HTML\CSS运行模式
1.JS、HTML、CSS文件是发布存储在服务器端的文件
2.想要访问，是通过浏览器发送请求，获取包含js、html、css文件内容的数据
3.数据以响应的方式返回到客户端浏览器，浏览器加载html、js、css实现网页渲染
5.变量的定义
变量的声明方法
js中没有数据类型的描述
只有作用域描述词：var let const
var :全局作用域以及可变数据类型
（平时推荐）let: 块作用域变量可变数据类型
const: 常量
注意：定义变量时不要使用name作为变量名,严格遵循驼峰规则定义,定义规则和java一致
let userName = “123”;
var age = 18;
const code = 1;
js中的数据类型
var age1 = 10;//number
var age2 = 11.1;//number
var isOk = true;//boolean
var html = '<p id="p1">123</p>';// 单引号和双引号在js中都是string字符串
var obj1 = {
userName:"蔡徐坤",
age:18,
say:function(){
console.dir("你干嘛！");
}
};
//对象类型：数组、集合、内置类、json对象
typeof 返回数据类型名称字符串
//对象类型：数组、集合、内置类、json对象
/* typeof 变量名称 返回一个数据类型名称字符串 */
if(typeof age1 == "number"){
console.dir("!!!!");
}
JS数组的声明
- js中数组不是固定长度的有序空间，是可以根据元素内容扩展的
- js中数组是可以存储不同类型的数据的
let arr = new Array(数组的长度);
let arr2 = new Array(初始元素值1,初始元素值2..);
let arr3 = [];// 声明一个空数组
let arr4 = [1,2,3];// 边声明边赋值
取值和赋值
let arr4 = [1,2,3];
var temp = arr4[下标];//取值
arr4[下标] = 值;//赋值
数组的常用方法
let arr = [1,2,3];
arr.length;// 返回数组长度
let arr = ["B","b","a"];
var str = arr.join();// 变成 “100,200,300” 字符串 类似java中的toString方法
arr.sort();// 数值升序，文字按照unicode字典升序排序
arr.push("c");// 往末尾追加元素
6.JS中while、do…while、for循环以及break、continue使用和java一致
数组的遍历-特殊方法：for-in循环
let arr = [1,2,3];
//for-in循环
/*
i:数组下标
arr:数组对象
*/
for(var i in arr){
console.dir(arr[i]);
}
7.运算符
算术运算符 + - ***** / % ++ — 赋值运算符 = += -= 比较运算符（结果都是boolean值） > < >= <= == != === !== 逻辑运算符 && || !
let a = 1;
let b = "1";
console.dir(a == b);// 把左右两侧的数值变成字符串比较（只比较文字是否相同）
console.dir(a === b);// 严格等于判断：先判断两侧数据类型是否相同，再判断数值是否相同
8.js通过对象获取用户的输入和输出
alert("你干嘛！！！");//浏览器弹窗（提示信息框）
/**
* 点击确定时：填写的数据返回保存至userName
* 点击取消：userName值为null
*/
var userName = prompt("请输入用户名:","默认值");
console.dir(userName);
9.断点调试方法
借助浏览器-开发者工具调试
代码中使用debugger设置断点
var count = 0;
for(var i=0;i<10;i++){
debugger;//在此处设置一个断点
var temp = i;
console.dir(temp);
var temp2 = (i+10);
console.dir(temp2);
}
10.JS函数（方法）
定义上-有无返回值
say();//函数名(参数) 就可以调用这个方法
let age = say2();
console.dir(age);
/* 函数定义的位置可以在js文件的任意位置 */
/*无参-无返回值*/
function say(){
console.dir("！！！");
}
/*无参-有返回值 */
function say2(){
console.dir("！！！");
return 10;//当前方法会返回给调用处一个数值10
}
/** 注意：有返回值和无返回值的函数重点就看函数体有没有写return 数据;语句 */
定义上-参数列表的写法
say("admin","123456");
say2(1,"123",new Date());
/** 定义函数的形参直接写参数名称不需要写修饰符，多个用逗号分隔 */
function say(userName,pwd){
console.dir(userName);
console.dir(pwd);
}
/** JS中可变参数的定义方法 ...arr 理解成一个数组
* 可变参数只能定义在参数列表的最后一个
*/
function say2(userName,...arr){
console.dir(arr);
}
var arr = [1,2,3];
/** 参数可以接收任何数据类型 */
say("123");
say(1);
say(arr);
function say(userName){
console.dir(typeof userName);
}
系统常用方法
parseInt ("字符串")
将字符串转换为整型数字
如: parseInt ("86")将字符串“86“转换为整型值86
parseFloat("字符串")
将字符串转换为浮点型数字
如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字
eval()
用于计算一个字符串的计算表达式
HTML事件属性-调用JS函数
常见事件：
一、键盘
onkeydown script 当按下按键时运行脚本 onkeypress script 当按下并松开按键时运行脚本 onkeyup script 当松开按键时运行脚本 二、鼠标
onclick script 当单击鼠标时运行脚本 ondblclick script 当双击鼠标时运行脚本 ondrag script 当拖动元素时运行脚本 ondragend script 当拖动操作结束时运行脚本 ondragenter script 当元素被拖动至有效的拖放目标时运行脚本 ondragleave script 当元素离开有效拖放目标时运行脚本 ondragover script 当元素被拖动至有效拖放目标上方时运行脚本 ondragstart script 当拖动操作开始时运行脚本 ondrop script 当被拖动元素正在被拖放时运行脚本 onmousedown script 当按下鼠标按钮时运行脚本 onmousemove script 当鼠标指针移动时运行脚本 onmouseout script 当鼠标指针移出元素时运行脚本 onmouseover script 当鼠标指针移至元素之上时运行脚本 onmouseup script 当松开鼠标按钮时运行脚本 onmousewheel script 当转动鼠标滚轮时运行脚本 onscroll script 当滚动元素的滚动条时运行脚本 三、元素或窗口
onafterprint script 在打印文档之后运行脚本 onbeforeprint script 在文档打印之前运行脚本 onbeforeonload script 在文档加载之前运行脚本 onblur script 当窗口失去焦点时运行脚本 onerror script 当错误发生时运行脚本 onfocus script 当窗口获得焦点时运行脚本 onhashchange script 当文档改变时运行脚本 onload script 当文档加载时运行脚本 onmessage script 当触发消息时运行脚本 onoffline script 当文档离线时运行脚本 ononline script 当文档上线时运行脚本 onpagehide script 当窗口隐藏时运行脚本 onpageshow script 当窗口可见时运行脚本 onpopstate script 当窗口历史记录改变时运行脚本 onredo script 当文档执行再执行操作（redo）时运行脚本 onresize script 当调整窗口大小时运行脚本 onstorage script 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本 onundo script 当文档执行撤销时运行脚本 onunload script 当用户离开文档时运行脚本 四、表单（用户输入）
属性 值 描述 onblur script 当元素失去焦点时运行脚本 onchange script 当元素改变时运行脚本 oncontextmenu script 当触发上下文菜单时运行脚本 onfocus script 当元素获得焦点时运行脚本 onformchange script 当表单改变时运行脚本 onforminput script 当表单获得用户输入时运行脚本 oninput script 当元素获得用户输入时运行脚本 oninvalid script 当元素无效时运行脚本 onreset script 当表单重置时运行脚本。HTML 5 不支持。 onselect script 当选取元素时运行脚本 onsubmit script 当提交表单时运行脚本 五、多媒体事件（video img audio 标签）
onabort script 当发生中止事件时运行脚本 oncanplay script 当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 oncanplaythrough script 当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本 ondurationchange script 当媒介长度改变时运行脚本 onemptied script 当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本 onended script 当媒介已抵达结尾时运行脚本 onerror script 当在元素加载期间发生错误时运行脚本 onloadeddata script 当加载媒介数据时运行脚本 onloadedmetadata script 当媒介元素的持续时间以及其他媒介数据已加载时运行脚本 onloadstart script 当浏览器开始加载媒介数据时运行脚本 onpause script 当媒介数据暂停时运行脚本 onplay script 当媒介数据将要开始播放时运行脚本 onplaying script 当媒介数据已开始播放时运行脚本 onprogress script 当浏览器正在取媒介数据时运行脚本 onratechange script 当媒介数据的播放速率改变时运行脚本 onreadystatechange script 当就绪状态（ready-state）改变时运行脚本 onseeked script 当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本 onseeking script 当媒介元素的定位属性为真且定位已开始时运行脚本 onstalled script 当取回媒介数据过程中（延迟）存在错误时运行脚本 onsuspend script 当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本 ontimeupdate script 当媒介改变其播放位置时运行脚本 onvolumechange script 当媒介改变音量亦或当音量被设置为静音时运行脚本 onwaiting script 当媒介已停止播放但打算继续播放时运行脚本
写法案例
<!DOCTYPE html>
<html lang="en">
<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>JSDemo</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<!-- this代表当前元素DOM对象，this.value代表当前元素Dom对象的value属性 -->
<input type="text" onchange="say2(this.value)" />
</body>
<!-- 引入js文件 -->
<script type="text/javascript" src="demo.js"></script>
</html>
function say2(e){
console.dir(e);
}
11.BOM对象
BOM对象核心是window对象
三个属性：
1.history：浏览器历史对象（前进、后退）
2.location：浏览器地址栏对象（刷新网页、跳转到别的网页）
3.document：浏览器文档对象（DOM）-HTML标签被描述为对象
谷歌浏览器js打开窗口关闭不了问题解决
W3CSchool对该方法的解释如下：
1.执行close()方法将关闭有window指定的顶层浏览器窗口。
2.某个窗口可以通过调用self.close()方法或只调用close()方法来关闭其自身。
3.只有通过JavaScript代码打开的窗口才能够由JavaScript代码关闭，这是为了阻止了恶意的脚本终止用户的浏览器。
在IE浏览器中，window.close()能生效，但是在生效的时候，会弹出包含警告信息的提示框，询问你是否关闭该窗口。
但是在Chrome浏览器或Firefox浏览器下则这个方法完全不会生效，如果你打了断点进行调试，就会发现这个方法是能运行通过的，也会照常执行，不会报错，只是没有执行的效果。
/* demo1页面，打开新窗口 */
<!DOCTYPE html>
<html lang="en">
<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>JSDemo</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<button onclick="toNewPage()">测试</button>
</body>
<!-- 引入js文件 -->
<script >
function toNewPage(){
open("demo2.html","baidu","width=500px,height=500px");
}
</script>
</html>
/** demo2 被打开的窗体页面，想要关闭，注意js设置 */
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<button onclick="cc()">关闭</button>
</body>
<script>
function cc(){
window.opener = null;//设置之后才能关闭自己，谷歌浏览器设置了打开者权限，只能由开启者关闭窗口，设置为null则表述没有开启者，则可以自行关闭
window.close();
}
</script>
</html>
更多版本浏览器设置方法：http://t.zoukankan.com/yanggb-p-11120847.html
延迟执行函数-setTimeout()
- 延迟调用某个函数
function toNewPage(){
setTimeout("say()",2000);
}
function say(){
console.dir("我大意了，没有闪");
}
- 使用匿名函数调用（推荐使用，更加灵活）
function toNewPage(){
setTimeout(function(){
say();
},2000);
}
function say(){
console.dir("我大意了，没有闪");
}
周期定时执行函数-setInterval
function toNewPage(){
setInterval(function(){
say();
},1000);
}
function say(){
console.dir("我大意了，没有闪");
}
清除定时执行
function toNewPage(){
let count = 0;
let timt1 = setInterval(function(){
say();
count++;
if(count==10){
clearInterval(timt1);//清楚定时执行
}
},1000);
}
function say(){
console.dir("我大意了，没有闪");
}
清除延迟执行
var myTime＝setTimeout("disptime() ", 10000 );
clearTimeout(myTime);
history对象
back() 加载 history 对象列表中的前一个****URL forward() 加载 history 对象列表中的下一个****URL go() 加载 history 对象列表中的某个具体****URL
history.back()//后退----->history.go(-1)
history.forward()//前进----->history.go(1) 如果是go(0) 刷新当前页面
location对象
常用属性
host IP+端口：设置或返回主机名和当前URL的端口号 hostname IP：设置或返回当前URL的主机名 href 完整的地址：设置或返回完整的****URL
一般情况下： host、hostname 只取不改
只能改写的是href
- 同一个项目中其他文件页面的跳转
location.href = "demo2.html";
//http://127.0.0.1:8848/qianduanClass/htmls/demo1.html
--->跳转到
//http://127.0.0.1:8848/qianduanClass/htmls/demo2.html
- 跨站访问（比如跳转到百度）
location.href = "http://主机地址:端口号/资源位置/资源位置";
常用方法
reload() 重新加载当前文档(刷新)
replace("url地址"); 用新的文档替换当前文档 location.href = "demo2.html"; 相类似
12.常用类
Math数学类
常用方法
方法 说 明 示例 ceil() 对数进行上舍入 Math.ceil**(25.5);返回26****Math.ceil(-25.5);返回-25** floor() 对数进行下舍入 Math.floor(25.5);返回25****Math.floor(-25.5);返回-26 round() 把数四舍五入为最接近的数 Math.round(25.5);返回26****Math.round(-25.5);返回-26 random() 返回0~1之间的随机数 Math.random**();****例如：**0.6273608814137365 随机数取值区间：2~99
var iNum=Math.floor(Math.random()*98+2);
Date日期类
创建对象方法;
var date = new Date();//以当前客户端的系统时间创建一个日期对象
var date1 = new Date(毫秒数时间戳);
getDate**()** 返回 Date 对象的一个月中的每一天，其值介于1～31之间 getDay**()** 返回 Date 对象的星期中的每一天，其值介于0～6之间 getHours**()** 返回 Date 对象的小时数，其值介于0～23之间 getMinutes**()** 返回 Date 对象的分钟数，其值介于0～59之间 getSeconds**()** 返回 Date 对象的秒数，其值介于0～59之间 getMonth() 返回 Date 对象的月份，其值介于0～11之间 getFullYear() 返回 Date 对象的年份，其值为4位数 getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数
13.DOM- 文档对象模型
DOM组成
- DomCore:doucment对象的常用属性和方法
- HTML-DOM：把标签节点描述成对象操作的方法
- CSS-DOM：把CSS内容描述成对象操作的方法
document对象访问元素(节点)的方法
- 通过元素标签的id属性访问：let nodeObj = document.getElementById(“id属性值”)- 只能获取第一个被指定id标识的元素
- 通过元素的class属性名称访问：let obj = document.getElementsByClassName(“myPtext”);
- 通过元素的标签名称访问：let obj = document.getElementsByTagName(“p”);
- 通过元素的name属性访问：let obj = document.getElementsByName(“userName”);
- 通过CSS元素选择器访问节点：document.querySelector(“#son1”);
注意：当方法返回的是集合或者nodeList时，访问元素的方法和数组一致
访问父节点
parentNode： 返回的是当前节点的父元素节点
父节点访问子节点方法
1.children: 获取所有子元素节点方法( 元素节点指的就是标签节点 )
2.childNodes：获取所有的子节点（包含非元素节点）
3.firstChild：获取第一个子节点（不一定是标签元素）
4.firstElementChild：获取第一个子元素节点（获取的一定是html标签元素）
5.lastChild：获取最后一个子节点（不一定是标签元素）
6.lastElementChild： 获取最后一个子元素节点（获取的一定是html标签元素）
7.previousElementSibling： 获取前一个相邻的元素节点（获取的一定是html标签元素）
8.previousSibling：获取前一个相邻兄弟节点（不一定是标签元素）
9.nextSibling：获取后一个相邻兄弟节点（不一定是标签元素）
10.nextElementSibling：获取后一个相邻兄弟元素节点（获取的一定是html标签元素）
11.childElementCount：子元素节点数量
节点的区分
- 节点类型
节点类型 NodeType****值 元素element（html中的所有标签） 1 属性attr 2 文本text（换行符号、文字、符号） 3 注释comments（ html中的注释） 8 文档document（document对象） 9
访问属性
通过方法去访问、设值
1.getAttribute(“属性名”) : 属性名-标签中的属性名，而且获取的值是静态的 ，（获取的是当前网页浏览器加载出现的元素中显示的属性值）
2.setAttribute(“属性名”,“属性值”) ： 注意：属性值—是html中规定的属性值（checked的属性值是checked）
通过dom对象访问、设值
dom.属性名； // 访问
dom.属性名 = 属性值； //设值 要去观察是否和html标签中描述的值相同
特殊案例-1. 获取当前用户对输入框输入的值
let obj = document.getElementById("userName");
obj.getAttribute("value");// 获取不到最新输入的值，只能获取标签中定义的值
obj.value;// 能获取到用户实时输入的新数据
特殊案例-2.设置checkbox、radio表单元素被选中
let obj = document.getElementById("sex");
obj.setAttribute("checked","checked");
//或
obj.checked = true;
借助js改变元素class属性值，使用animate.css动画库完成动画
<!DOCTYPE html>
<html lang="en" id="myBD">
<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>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<body >
<!-- class属性默认为 animate__animated -->
<img class="animate__animated" id="pp" src="../imgs/top.avif" width="100px"/>
<button onclick="toSee2()">出现动画</button><!-- 点击出现动画 -->
</body>
<script type="text/javaScript" src="../js/demo3.js"></script>
</html>
function toSee2(){
let obj = document.getElementById("pp");
console.dir(obj);
obj.className = "animate__animated animate__shakeX";//animate__animated animate__动画名字
setTimeout(function(){
obj.className = "animate__animated";// 动画结束将元素恢复至原有class属性值
},1500)
}
元素创建、元素插入网页
<div id="father">
<p id="son1">AAAAA</p>
</div>
<button onclick="addElmenet()">添加元素</button>
//1. 模拟创建一个元素
let A = document.createElement("p");
objP.innerHTML = "<span>nihao!</span>";// 改变内部的html以及文本结构
//2. 放入到某个位置
//2.1 添加到指定元素的子节点末尾
let father = document.getElementById("father");
father.appendChild(objP);//father 元素的子节点末尾
//2.2 插入到某个元素之前
let father2 = document.getElementById("father");
let B = document.getElementById("son1");
// 告诉父元素，子节点，要把A插入到B之前
father2.insertBefore(objP,son1);// 把A 插入到 B 之前
元素的删除和替换
元素删除和替换都必须使用父元素调用去操作子元素删除或替换
替换：
- 如果元素替换中，替换的元素是网页中已有的元素则会出现元素移动位置覆盖被替换的元素
- 如果元素替换中，替换的元素是js创建的新元素，则只会出现元素的覆盖
<body >
<div id="d1">
<p id="p1">123</p>
<p id="p2">456</p>
<p id="p3">789</p>
</div>
<button onclick="toDelete()">删除\替换</button>
</body>
let father = document.getElementById("d1");
//删除子节点方法
//let p1 = document.getElementById("p1");
//father.removeChild(p1);// 删除 d1 元素的 子节点 p1
//替换节点
let newSpan = document.createElement("span");
newSpan.innerHTML = "新节点";
//let p3 = document.getElementById("p3");
// 选中要替换的旧节点
let p1 = document.getElementById("p1");
//进行替换
//father.replaceChild(p3,p1);
father.replaceChild(newSpan,p1);
获取节点的样式、改变节点样式
<body >
<h1 id="myH1" style="color:red;">厉害！！！！</h1>
<button onclick="getCss()">获取样式</button>
</body>
function getCss(){
let obj = document.getElementById("myH1");
// 获取样式的方法 dom对象.style.样式名 只能访问到行内样式
// (样式名按照驼峰规则描述了：如 margin-top 变为 marginTop)
let marginTop = obj.style.marginTop;
let color = obj.style.color;
// 改变样式，dom对象.style.样式名 = "样式的属性值" 只能设置行内样式
obj.style.marginTop = "500px";
obj.style.color = "blue";
}
课程案例-发帖功能
<!DOCTYPE html>
<html lang="en" id="myBD">
<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>Document</title>
<style>
.btn{
width: 80px;
height: 30px;
border-radius: 8px;
background-color: green;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.main{
width: 500px;
height: 150px;
box-sizing: border-box;
border-top: 1px solid gray;
margin-top: 5px;
}
.context{
width: 100%;
height: 80px;
box-sizing: border-box;
padding: 5px;
border-bottom: 1px dotted gray;
}
.userPhoto{
width: 70px;
height: 70px;
background-color: red;
float: left;
border-radius: 50%;
background-size: 100%;
}
.context_main{
width: calc(100% - 70px);
height: 100%;
float: left;
padding-left: 10px;
box-sizing: border-box;
}
.context_main>h3{
margin: 5px 0px;
}
p{
color:gray;
}
.layerDiv{
width: 50%;
height: 60%;
border-radius: 8px;
background-color: white;
border: 1px solid gray;
position:fixed;
top: 80px;
left: 25%;
padding: 5px;
}
.layerDiv input{
width: 98%;
}
.layerDiv textarea{
width: 98%;
}
</style>
</head>
<body >
<div class="btn" onclick="toAddTz()">
<span>我要发帖</span>
</div>
<div id="main" class="main">
<div class="context">
<div class="userPhoto" style="background-image: url(../imgs/1.jfif);"></div>
<div class="context_main">
<h3>标题标题标题标题标题</h3>
<p>板块:新手来了 发表时间:2022-11-25 16:22</p>
</div>
</div>
</div>
<!-- 弹窗 -->
<div class="layerDiv" id="addLayer" style="display: none;">
<form>
<input id="title" type="text" name="title" placeholder="请输入帖子标题" /><br/>
<label>请选择板块</label>
<select id="bk">
<option value="1">新闻</option>
<option value="2">娱乐</option>
</select>
<br/>
<textarea id="tzContext" placeholder="输入贴子内容" name="tieziContext" ></textarea>
<div class="btn" onclick="toFb()">
<span>发布</span>
</div>
</form>
</div>
</body>
<script type="text/javaScript" src="../js/demo3.js"></script>
</html>
// 帖子数据（数组）
let tz_list = [];
/** 我要发帖 */
function toAddTz(){
//1. 显示添加信息的弹窗
let addLayer = document.getElementById("addLayer");
addLayer.style.display = "block";// 显示弹窗
}
/**
* 发布
*/
function toFb(){
//将表单的数据获取出来
let title = document.getElementById("title");
let tz_title = title.value;//标题数据
let bk = document.getElementById("bk");
let tz_bk = bk.value;// 板块数据
let tzContext = document.getElementById("tzContext");
let tz_tzContext = tzContext.value;// 帖子内容
let nowDate = new Date();
let dateStr = nowDate.getFullYear()+"-"+(parseInt(nowDate.getMonth())+1)+"-"+nowDate.getDate()+" "+nowDate.getHours()+":"+nowDate.getMinutes();
// 填写的数据保存到js集合中
//1. 将数据保存在map中
// let map = new Map();
// map.set("title",tz_title);
// map.set("bk",tz_bk);
// map.set("context",tz_tzContext);
// map.set("time",dateStr);
// tz_list.push(map);
//2. 对象保存方法 (json格式对象)
let tzObj = {
};
tzObj.title = tz_title;// 对象如果没有改属性，就会给你自动创建一个属性保存值
tzObj.bk = tz_bk;
tzObj.context = tz_tzContext;
tzObj.time = dateStr;
tz_list.push(tzObj);
// 点击发布后关闭弹窗
let addLayer = document.getElementById("addLayer");
addLayer.style.display = "none";// 隐藏弹窗
//重置表单
title.value = "";
bk.value = 1;
tzContext.value = "";
console.dir(tz_list);
initTzList();
}
/**
* 刷新生成新的帖子
*/
function initTzList(){
var htmls = "";
for(var i in tz_list){
htmls += '<div class="context">'+
'<div class="userPhoto" style="background-image: url(../imgs/'+(i%2==0?'1':'2')+'.jfif);"></div>'+
'<div class="context_main">'+
'<h3>'+tz_list[i].title+'</h3>'+
'<p>板块:'+(tz_list[i].bk==1?'新闻':'娱乐')+' 发表时间:'+tz_list[i].time+'</p>'+
'</div>'+
'</div>';
}
let main = document.getElementById("main");
main.innerHTML = htmls;
}
currentStyle-获取当前元素实时的样式信息（只读操作-IE8以前提供的属性）
/* 如果你的浏览器输入没有这个属性，则换用getComputedStyle() */
var obj = document.getElementById("myDiv");
obj.currentStyle.backgroundColor;
getComputedStyle()-获取当前元素的样式信息(只读操作-window对象调用)
可以获取到在内部样式或者外部样式文件中使用元素选择器赋予的样式内容
只读，不能被修改
var obj = document.getElementById("myDiv");
/**
* getComputedStyle(要查询的dom对象,伪类元素选择器名称)
*
* */
let theObjCss = window.getComputedStyle(obj);
console.dir(theObjCss.backgroundColor);
let theObjCss2 = window.getComputedStyle(obj,":after");//访问对应元素的伪类元素样式
console.dir(theObjCss2.display);
浏览器内核判别
var obj = document.getElementById("myDiv");
if(obj.currentStyle){
//IE8以下内核
}else{
//高版本内核的浏览器
}
14.JS集合
// List ===> 数组 在js中如：var arr = [];定义就是list，操作方法和数组相同
// Set
let mySet = new Set();
//添加元素
mySet.add("A");
mySet.add("B");
mySet.add("C");
//删除元素
mySet.delete(1);
//清空元素
mySet.clear();//集合元素全部删除
//访问-遍历
// for-of (没有索引的集合)
for(let item of mySet){
console.dir(item);
}
/*foreach循环-遍历的set集合value和index元素
-遍历的如果是数组（list） value是元素 index是下标
array- 是当前正在遍历的集合对象
*/
mySet.forEach(function(value,index,array){
});
let map = new Map();
//添加元素
map.set("101","中国");
map.set("102","美国");
//访问元素
var value = map.get("101");
//删除元素
map.clear();//清空集合
map.delete("101");
//遍历
//1. values() 获得所有value值的一个迭代器
let values = map.values();
// values.next() 获取下一个指针指向的对象
// values.next().value 才能获取值
console.dir(values.next().value);
let keys = map.keys();
console.dir(keys.next().value);
//2. value---> map的值数据 index---》map的键数据
map.forEach(function(value,index,arry){
console.dir(value+"---"+index);
})
//3. for-of
/**
* 会把每一组key-》value封装成数组
* 数组的0索引值是key，1索引值是value
*/
for(var i of map){
console.dir(i);
}
15. JS事件
事件是什么？
鼠标点击、双击；键盘按键按下弹起；浏览器加载开始、结束
Js能够对浏览器中会出现的事件实现监听（js脚本能实现当鼠标点击时做什么事情）
html\js中事件的写法（三种）
1. 在HTML标签中使用事件属性完成事件的注册
<body>
<h1 onclick="toClick(this)">你好！我叫王大锤！</h1>
</body>
<script>
function toClick(e){
console.dir(e);// toClick(this) this:代表的是当前标签元素dom对象
console.dir("我被点击！");
}
</script>
</html>
2.JS使用元素去注册事件进行绑定
优点：实现与html内容的解耦
<body>
<h1 id="myH1">你好！我叫王大锤！</h1>
</body>
<script>
let myH1 = document.getElementById("myH1");
//绑定事件 dom元素.on事件名称 = 匿名函数
myH1.onclick = function(){
// 当元素出现点击时，执行的代码
toClick();
}
function toClick(){
console.dir("我被点击！");
}
</script>
3. JS中使用元素去注册监听器，完成对事件的监听然后出发函数调用
<body>
<h1 id="myH1">你好！我叫王大锤！</h1>
</body>
<script>
let myH1 = document.getElementById("myH1");
/* 监听 元素 myH1 是否出现单击事件，如果出现匿名函数就会调用 */
myH1.addEventListener("click",function(){
toClick();
});
function toClick(){
console.dir("我被点击！");
}
</script>
JS事件冒泡
什么是事件冒泡？
当三个元素叠放在一起，而且恰巧，三个元素都有相同的事件被绑定监听，那当点击最上层的元素时，所有的下层元素都会触发绑定的事件
<body id="body1">
<div id="father1" class="father">
<div id="son1" class="son"></div>
</div>
</body>
<script>
document.getElementById("body1").onclick = function(){
console.dir("body被点击");
}
document.getElementById("father1").onclick = function(){
console.dir("father被点击");
}
document.getElementById("son1").onclick = function(){
console.dir("son被点击");
}
</script>
阻止JS事件冒泡
1. 设置事件对象不要执行冒泡（出现的情况是元素绑定事件时使用）
<body id="body1">
<div id="father1" class="father">
<div id="son1" class="son"></div>
</div>
</body>
<script>
document.getElementById("body1").onclick = function(){
console.dir("body被点击");
}
document.getElementById("father1").onclick = function(){
console.dir("father被点击");
}
//event : 事件对象
document.getElementById("son1").onclick = function(event){
// 通过事件对象阻止冒泡 一定要写在最顶层的元素事件监听中
event.cancelBubble = true;
console.dir("son被点击");
}
</script>
2. 在设置监听元素触发事件回调参数（元素监听事件时使用）
/** 待定 */
当所有dom元素加载完成的回调
window.onload = function(){
// 当网页的所有dom元素加载完成后回调
let obj = document.getElementById("myH1");
console.dir(obj);
}
16.JQuery
引入JQuery类库
JQuery的操作方法
基础语法结构：
$(selector).action()
selector： css元素选择器
action：操作
如：
let domObj1 = $(“#myH1”);
等同于：
let domObj2 = document.getElementById(“myH1”);
$ 代表的是JQuery核心对象
1. 元素的访问
$("#myH1")
$("p”) 选取 <p> 元素。
$("p.into") 选取所有 class="into" 的 <p> 元素。
$("p#into") 选取所有 id="into" 的 <p> 元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
let objs = $("#myH1>.son1"); 可以使用CSS3中描述的所有选择器
2.元素的显示、隐藏
<body>
<h1 id="myH1">123</h1>
<button onclick="toHide()">隐藏</button>
<button onclick="toShow()">显示</button>
</body>
<script>
function toHide(){
// $("#myH1").hide(动画执行时间,当动画执行完成的回调);
$("#father").hide(1000,function(){
console.dir("完成隐藏");
})
$("#myH1").hide(1000);//将元素隐藏 参数毫秒数代表的是动画过渡的时间
}
function toShow(){
// $("#myH1").show(动画执行时间,当动画执行完成的回调);
$("#myH1").show(1000);//将元素显示
}
</script>
/* jquery选择器位置可以放置一个dom对象，完成js对象使用jquery操作的过渡 */
let obj = document.getElementById("myH1");
$(obj).hide(1000);//将元素隐藏
<button onclick="javascript:$(this).hide();">隐藏</button>
3. 当dom文档加载完成后回调的方法
在html页面中js代码的加载顺序可以不受影响
// 当网页的所有dom元素加载完成后回调
$(document).ready(function(){
let obj = document.getElementById("myH1");
console.dir(obj);
});
//函数、变量、常量
// 当网页的所有dom元素加载完成后回调( 推荐 )
$(function(){
// 一般编写操作网页dom元素的内容;定义和dom绑定的事件
//因为你要操作网页dom就必须等待dom加载完成后才能操作，否则会操作失败报错
});
4. JQuery绑定事件
// $(选择器).事件名称(function(){
})
$(".hideBtn").click(function(event){
event.cancleBuble = true;//取消事件冒泡
console.dir("12312321");
});
$(".hideBtn").bind("click",function(){
console.dir("12312321");
})
4.1 JQuery绑定未来元素
什么是未来元素？
就是网页后续可能通过事件触发或ajax添加到网页中的元素
案例：
<style>
#father{
width: 200px;
height: 100px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<div id="father">
</div>
<button onclick="addYs()">添加元素</button>
<button onclick="test()">未来元素点击事件测试</button>
</body>
$(function(){
// 未来元素事件绑定过程
// #father 给子元素 div的后代.sons 绑定了事件 click
$("#father").on("click",".sons",function(){
console.dir("被点击！");
});
});
function addYs(){
var htmls = "<span class='sons'>子标签</span>";
//append 方法支持添加dom对象或html标签字符串
$("#father").append(htmls);
}
5. 操作dom元素
5.1 表单取值赋值
let tt = $("#userName").val();//取出表单value的实时值
$("#userName").val(88888);// 设置表单的value值
5.2 dom元素包含的文本操作
let tt = $("#father").text();//取出dom元素包裹的文本
// obj.innerText 类似
$("#father").text("<h1>萨日朗！！！</h1>");// 设置dom元素包裹的文本
5.3 dom元素获取子元素的html字符串和使用html字符串替换子元素
let tt = $("#father").html();//取出dom元素包裹的html标签字符串
// obj.innerHTML 类似
$("#father").html("<h1>萨日朗！！！</h1>");// 设置dom元素包裹的元素
5.4 dom元素往子元素追加元素
$("#father").append(可以是dom对象也可以是html字符串); // 在father元素的子元素末尾追加
$("#father").preppend(可以是dom对象也可以是html字符串); // 在father元素的子元素首位追加
5.5 dom元素操作节点属性
let classNames = $("#father").attr("class");// 单参数，代表取出属性的值
// 等同于 js中的 getAttribute setAttribute
$("#father").attr("class","textWhite"); // 双参数第一个参数是属性名，第二参数是属性值
5.6 dom元素删除
$("span").remove(); //谁调用将谁删除
$("#father").empty(); //将father元素的子元素清空
$("span").remove(".son");// 删除所有span标签中有class属性为.son的span标签
5.7 dom元素的插入
let newObj = document.createElement("h3");
newObj.innerText = "蔡徐坤！";
$("#srl1").after(newObj);//在元素srl1 之后 插入新元素
$("#srl1").before(newObj);//在元素srl1 之前 插入新元素
5.8 dom CSS样式操作
let oo = $("#father").css("background-color");// css方法，单参数代表的是查询样式
$("#father").css("background-color","black");// 双参数是修改