1、常见弹窗函数
1.1警告框
就是展示一下，没有其他操作
alert("小伙子没有权限！");
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hrynKZ7-1661428560493)(D:\千峰上课\Every Day Stage2\day33\code\day33-js.assets\image-20220825094854746.png)]
1.2确认框
框内有两个选项，可自定义接下来的操作
点确定返回true，取消返回false
confirm("是否真的删除！")
1.2.1确认框的使用
可以用if嵌套使用
// 确认框,点击确定返回true,点击取消返回false
var result = confirm("是否真的删除?!");
console.log("是否真的删除?!"+result)
if(confirm("是否真的删除?!")) {
// 发请求,调用java代码,执行操作,删除数据
console.log("删除成功")
} else{
console.log("取消删除")
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2mNNK0f0-1661428560494)(D:\千峰上课\Every Day Stage2\day33\code\day33-js.assets\image-20220825094940561.png)]
1.3对话框
可以输入语句的框
返回值是输入的值
prompt("请输入密码,确定删除!");
1.3.1对话框的使用
可以使用if进行嵌套判断输入的值
// 对话框,会返回输入的值
var val = prompt("请输入密码,确定删除!");
if(val == "123456") {
console.log("删除成功")
}else{
console.log("密码错误!")
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0zMlRe4A-1661428560495)(D:\千峰上课\Every Day Stage2\day33\code\day33-js.assets\image-20220825095057646.png)]
2、事件
是一种形容，形容浏览器上因为我们的某些操作发生的变化
2.1事件的写法
| 事件名称 | 描述 |
|---|---|
| onchange | HTML 元素内容改变 |
| onblur | 输入框失去焦点 |
| onfocus | 输入框获得焦点 |
| onclick | 用户点击 HTML 元素 |
| ondblclick | 用户双击HTML元素 |
| onmouseover | 用户将鼠标移入一个HTML元素中 |
| onmousemove | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeyup | 键盘弹起 |
| onkeydown | 用户按下键盘按键 |
| onkeypress | 按压键盘 |
| onload | 浏览器已完成页面的加载 |
| onsubmit | 表单提交 |
2.2绑定事件的过程
1、事件源
就是变化发生在哪里，也就是具体的某个标签
2、什么事件
比如(onblur失去焦点)（onclick鼠标点击）都是事件
3、响应
就是事件发生后，程序所给出的反应，比如
绑定操作1：
事件源，事件，响应全写到标签里，不用写函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qsoyZV2l-1661428560495)(D:\千峰上课\Every Day Stage2\day33\code\day33-js.assets\xxxxxxx.png)]
绑定方式2：
事件源和事件在标签内，响应拿到JS中形成独立的函数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O3CNLpr4-1661428560495)(D:\千峰上课\Every Day Stage2\day33\code\day33-js.assets\image-20220825103311305.png)]
绑定方式3：
事件源、事件、响应全部脱离
给事件源(标签)定义id，在JS中获取它的id(document.getElementById)，最后给这个id定义函数(方法)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJtOWctc-1661428560496)(D:\千峰上课\Every Day Stage2\day33\code\day33-js.assets\image-20220825103744276.png)]
2.3事件演示
2.3.1鼠标事件ondblclick(鼠标双击)
<button ondblclick="alert('双击')">双击有效!</button>
//双击鼠标的演示
<hr>
//鼠标进入元素
<div id="d1" style="width: 300px;height: 300px;border: 5px solid red;"></div>
<script type="text/javascript">
var div1 = document.getElementById("d1");
var a = 0;
// 鼠标进入某个元素
div1.onmouseover = function(){
console.log(++a);
}
div1.onmouseleave = function(){
console.log(--a);
}
// 鼠标移动
div1.onmousemove = function(){
// console.log(++a);
}
</script>
2.3.2键盘事件
<script type="text/javascript">
var i1 = document.getElementById("i1");
var a = 0;
var b = 0;
var c = 0;
i1.onkeydown = function(){
console.log("按下: " + (++a))
}
i1.onkeyup = function(){
console.log("弹起: " + (++b))
}
i1.onkeypress = function(){
console.log("按压: " + (++c))
}
</script>
2.3.3表单事件【重点】**
主要是失去焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input,select {
width:500px;
height:35px;
font-size: 29px;
}
</style>
</head>
<body>
<form action="/java2212" onsubmit="return mySubmit()">
用户名<input id="i1" type="text"/><br />
密码<input id="i2" type="password"/><br />
地址<select id="s1">
<option>德玛西亚</option>
<option>诺克萨斯</option>
</select><br>
<input id="i3" type="submit" value="提交"/>
</form>
<script type="text/javascript">
var i1 = document.getElementById("i1");
// 获得焦点,一般用在注册时用于提示格式
i1.onfocus = function() {
console.log("获得焦点: 用户名6-8位");
}
// 失去焦点.一般用在表单中,校验数据
i1.onblur = function() {
console.log("失去焦点: 两次密码不一致");
}
// 内容改变事件
var s1 = document.getElementById("s1");
s1.onchange = function(){
console.log("select内容改变")
}
// 提交事件.
// 1 需要将事件绑定在form标签上
// 2 调用函数前需要加return
// 3 函数内需要定义返回值,返回true就提交表单,返回false就阻止表单提交
function mySubmit() {
/**
* 场景: 做表单提交前的校验
*/
console.log("提交啦");
// 返回true才能提交
return true;
// 返回false不提交
//return false;
}
</script>
</body>
</html>
2.3.4加载事件【重点】
就是一个声明符window.onload
作用是window.οnlοad=function的方法，是在页面加载完毕后，才运行的
BUG：必须把script(JS)引用放在html中的最后边，这样才能防止JS找不到定义的标签的位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZkkdjqO-1661428560496)(D:\千峰上课\Every Day Stage2\day33\code\day33-js.assets\image-20220825113511837.png)]
正常的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 页面加载事件,等页面加载完再调用
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function() {
alert("点我了?")
}
}
</script>
</head>
<body>
<button id="btn">点我!!</button>
</body>
</html>
3、DOM操作
是一种思想，是操作的统称
这种操作就是查找、创建、删除
Document Object Model 文档对象模型,将HTML网页称作文档,将文档中的标签形成树形结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8rjw6b0Y-1661428560496)(D:\千峰上课\Every Day Stage2\day33\code\day33-js.assets\image-20220825143630136.png)]
操作DOM,就是对DOM树操作,可以找到某个或者某些元素
修改元素的属性内容以及样式,创建新的节点,删除节点
3.1通过id查找元素
关键词document.getElementById(“获取的ID名”)
<button id="btn1">点击</button>
var e = document.getElementById("id");
3.2查找
3.2.1通过标签名查找元素
关键词document.getElementsByTagName(“获取的标签类型”)
但获取的是 数组！！！
<p>唧唧复唧唧,木兰当户织</p>
<p>不闻机杼声,惟闻女叹息</p>
<p>问女何所思,问女何所忆</p>
// 通过标签名,获得同名所有元素对象,返回是数组
var ps = document.getElementsByTagName("p");
console.log(ps)
// 遍历数组,获得每个对象
for(var i = 0;i < ps.length;i++) {
console.log(ps[i])
}
3.2.2通过类名查找元素（通过定义class）
关键词document.getElementsByClassName(“class的值”)
获取的也是 数组！！！
<p class="p1">唧唧复唧唧,木兰当户织</p>
<p class="p1">不闻机杼声,惟闻女叹息</p>
<p>问女何所思,问女何所忆</p>
// 通过标签的class值,获得元素,返回数组
var ps2 = document.getElementsByClassName("p1")
console.log(ps2)
for(var i = 0;i < ps2.length;i++) {
console.log(ps2[i])
}
3.2.3获取后设置元素的内容【重点】
关键词：没有关键词，直接"="赋值即可
注意如果是数组需要用for循环进行赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><span>噫吁嚱，危乎高哉！</span></p>
<p><span>蜀道之难，难于上青天！</span></p>
<p><span>蚕丛及鱼凫，开国何茫然！</span></p>
<button onclick="changeHTML()"> 修改文本内容HTML</button>
<button onclick="changeText()"> 修改文本内容Text</button>
<script type="text/javascript">
var parr = document.getElementsByTagName("p");
for(var i = 0;i < parr.length;i++) {
// 获得标签内部内容,获得内部的内容,包括标签
console.log(parr[i].innerHTML);
}
console.log("------------------")
for(var i = 0;i < parr.length;i++) {
// 获得标签内部内容,只能获得文本内容
console.log(parr[i].innerText);
}
function changeHTML(){
for(var i = 0;i < parr.length;i++) {
// 设置内部内容,如果有标签,会解析标签
parr[i].innerHTML = "<span>好好学习</span>";
}
}
function changeText(){
for(var i = 0;i < parr.length;i++) {
// 设置内部内容,如果有标签,不解析,就当做文本内容直接展示
parr[i].innerText = "<span>天天向上</span>";
}
}
</script>
</body>
</html>
3.3查找和设置元素属性【重点】
获取标签的元素属性和值，直接用id名称或class名称直接.元素，或者.value。可以获取标签的所有内容
直接.元素或属性，加等号和值直接修改属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="i1" type="text" value="admin"/>
<button onclick="getAttributeValue()">点击获得属性值</button>
<button onclick="setAttributeValue()">点击设置属性值-李白</button>
<script type="text/javascript">
function getAttributeValue() {
var i1 = document.getElementById("i1");
// 元素对象.属性名; 获得属性值
console.log(i1.id);
console.log(i1.type);
console.log(i1.value);// 重要!!!
}
function setAttributeValue() {
var i1 = document.getElementById("i1");
i1.value = "李白"; // 重要!!!将来更新数据时,给输入框回显数据
i1.type = "password";
}
</script>
</body>
</html>
3.4查找和设置元素CSS样式
直接.style.width，获取宽，加等号直接修改！！！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1" style="background-color: red;width: 300px;height: 300px;">xxxx</div>
<button onclick="getCSSAttribute()">点击获得css属性</button>
<button onclick="setCSSAttribute()">设置css属性</button>
<script type="text/javascript">
function getCSSAttribute() {
var d1 = document.getElementById("d1");
// 获得css属性,需要
// 对象.style.属性
// 如果属性名有-,将-去掉,后字母大写即可
var s = d1.style.backgroundColor;
var width = d1.style.width;
var height = d1.style.height;
console.log(s)
console.log(width)
console.log(height)
}
function setCSSAttribute() {
var d1 = document.getElementById("d1");
d1.style.backgroundColor = "green";
d1.style.width = "100px"
d1.style.height = "100px"
}
</script>
</body>
</html>
// 获得css属性,需要
// 对象.style.属性
// 如果属性名有-,将-去掉,后字母大写即可
var s = d1.style.backgroundColor;
var width = d1.style.width;
var height = d1.style.height;
console.log(s)
console.log(width)
console.log(height)
}
function setCSSAttribute() {
var d1 = document.getElementById("d1");
d1.style.backgroundColor = "green";
d1.style.width = "100px"
d1.style.height = "100px"
}
</script>
</body>