day05
一、增加节点和删除节点
1.createElement() 创建节点对象
2.createTextNode() 创建文本对象(标签里面的内容)
3.appendChild() 添加子节点
4.removeChild() 删除子节点
<!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>
<input type="button" value="添加节点" onclick="addNode()">
<input type="button" value="删除节点" onclick="deleteNode()">
<div id="tv_div">
<p id="tv_p">聪哥玩完了</p>
<p>罗志祥没了</p>
</div>
<script>
//添加节点
function addNode() {
//获取父节点
var tv_div = document.getElementById("tv_div");
//创建需要添加的节点
var tv_p = document.createElement("p")
//创建节点里面的数据
var p = document.createTextNode("还是你牛逼！")
//添加父子关系
tv_p.appendChild(p);
//添加父子关系
tv_div.appendChild(tv_p);
}
//删除节点
function deleteNode() {
//获取父节点
var tv_div = document.getElementById("tv_div");
//获取需要删除的子节点
var tv_p = document.getElementById("tv_p");
//移除父子关系
tv_div.removeChild(tv_p);
}
</script>
</body>
</html>
二、案例
step01 需求 在多选框里面，设置全选-全不选-反选
step02 代码
<!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>
<style>
table {
border: solid 1 red;
align-items: center;
cellpadding: 0px;
cellspacing: 0px;
align: center;
width: 80%;
}
td {
text-align: center;
}
</style>
</head>
<body>
<div><input type="button" value="全选" onclick="allSelect()">
<input type="button" value="全不选" onclick="allNotSelect()">
<input type="button" value="反选" onclick="selectOr()"></div>
<table>
<tr>
<th>选项</th>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" class="tv_cla"></td>
<td>1001</td>
<td>张三</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox" class="tv_cla"></td>
<td>1002</td>
<td>李四</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox" class="tv_cla"></td>
<td>1001</td>
<td>王五</td>
<td>10</td>
</tr>
</table>
<script>
var arrays = document.getElementsByClassName("tv_cla");
function allSelect() {
for (var i = 0; i < arrays.length; i++) {
//使用选择结构判断状态
arrays[i].checked = true;
}
}
function allNotSelect() {
for (var i = 0; i < arrays.length; i++) {
//使用选择结构判断状态
arrays[i].checked = false;
}
}
function selectOr() {
for (var i = 0; i < arrays.length; i++) {
//使用选择结构判断状态
arrays[i].checked = !arrays[i].checked;
}
}
</script>
</body>
</html>
三、登录验证
<!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>
<form action="添加节点.html" method="get" onsubmit="return show()">
<div id="tv_id"></div>
<p>用户名；<input type="text" id="id_uname"></p>
<p>密码：<input type="password" id="id_upwd"></p>
<p><input type="submit" value="登录" onclick="show()"></p>
</form>
<script>
function show() {
//获取密码和用户名
var uname = document.getElementById("id_uname").value;
if (uname == null || uname == "") {
document.getElementById("tv_id").innerHTML = "用户名错误";
return false;
}
// alert(uname);
var upwd = document.getElementById("id_upwd").value;
if (upwd == null || upwd == "") {
document.getElementById("tv_id").innerHTML = "密码错误";
return false;
} else {
return true;
}
}
</script>
</body>
</html>
四、定时函数
1.setInterval("第一个参数","第二个参数")
间隔多长时间一直执行操作(第一个参数执行的操作,第二个参数间隔的时间(毫秒为单位))
2.clearInterval(参数)
清楚定时函数(定时函数的名称)
3.setTimeout("第一个参数","第二个参数")
间隔多长时间执行一次(第一个参数执行的操作,第二个参数间隔的时间(毫秒为单位))
4.clearTimeout(参数)
清除定时函数(定时函数的名称)
<!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>
<input type="button" value="开启Interval" onclick="show01()">
<input type="button" value="关闭Interval" onclick="show02()">
<input type="button" value="开启setTimeout" onclick="show03()">
<input type="button" value="关闭setTimeout" onclick="show04()">
<script>
var t;
function show01() {
t = setInterval("alert('摆烂')", 4000)
}
function show02() {
clearInterval(t);
}
var w;
function show03() {
w = setTimeout("alert('摆大烂')", 2000)
}
function show04() {
clearTimeout(w);
}
</script>
</body>
</html>
五、轮播图
step01 需求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v4mlTKN0-1647868308424)(C:/Users/%E6%82%B2%E9%99%8C/AppData/Roaming/Typora/typora-user-images/image-20220321202922531.png)]
step02 分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J2HpnUeN-1647868308425)(C:/Users/%E6%82%B2%E9%99%8C/AppData/Roaming/Typora/typora-user-images/image-20220321202946447.png)]
step03 代码
<!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>
<img src="" id="tv_img">
<script>
var num = 0;
function showImg() {
//获取节点对象
var tv_img = document.getElementById("tv_img");
if (num < 5) {
num++;
} else {
num = 1;
}
//修改属性
tv_img.src = "../img/scroll_0" + num + ".jpg";
}
showImg();
//使用定时函数
setInterval("showImg()", 3000);
</script>
</body>
</html>
六、动态显示时间
step01 分析：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-36g2TxkO-1647868308426)(C:/Users/%E6%82%B2%E9%99%8C/AppData/Roaming/Typora/typora-user-images/image-20220321203126661.png)]
steo02 代码
<!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>
<style>
#tv_id {
height: 200px;
width: 200px;
font-size: 30px;
align-items: center;
color: orange;
}
</style>
</head>
<body>
<div id="tv_id"></div>
<script>
function showTime() {
//获取js时间对象
var d = new Date();
console.log(d);
//获取小时
var h = d.getHours();
//获取分钟
var m = d.getMinutes();
//获取秒
var s = d.getSeconds();
document.getElementById("tv_id").innerHTML = h + ":" + m + ":" + s;
}
setInterval("showTime()", 1000)
</script>
</body>
</html>
七、BOM
1.简介：
A.BOM是浏览器对像模型
B.BOM主要用于与浏览器进行交互
C.Window对象是BOM的顶层对象
2.组成如下图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DYlyJZmw-1647868308426)(C:/Users/%E6%82%B2%E9%99%8C/AppData/Roaming/Typora/typora-user-images/image-20220321203542407.png)]
3.BOM-Window
A.所有的浏览器支持Window对象，它表示浏览器窗口
B.所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
C.全局变量是 window 对象的属性。
D.全局函数是 window 对象的方法。
E.甚至 HTML DOM 的 document 也是 window 对象的属性之一：
4. window.document
A.offsetWidth 获取标签的宽度
B.offsetHeight 获取标签的高度
C.window.innerHeight 浏览器窗口的内部高度(包括滚动条)
D.Window.innerWidth 浏览器窗口的内部宽度(包括滚动条)
5.Window Screen
A.screen.availWidth 获取屏幕可用的宽度
B.screen.availHeight 获取屏幕可用的高度
6.Window Location
A.location.hostname 返回 web 主机的域名
B.location.pathname 返回当前页面的路径和文件名
C.location.port 返回 web 主机的端口 （80 或 443）
D.location.protocol 返回所使用的 web 协议（http:// 或 https://）
E.location.href 属性返回当前页面的 URL
F.location.assign() 方法加载新的文档
7. Window History
A.history.back() 返回
B.history.forward() 前进
C.go() 前进与后退
8.Window Navigator
A.navigator.appCodeName 浏览器代号
B.navigator.appName 浏览器名称
C.navigator.appVersion 浏览器版本
D.navigator.cookieEnabled 启用Cookies
E.navigator.platform 硬件平台
F.navigator.userAgent 用户代理
七、省级联动
step01 分析：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gx4WHVN4-1647868308427)(C:/Users/%E6%82%B2%E9%99%8C/AppData/Roaming/Typora/typora-user-images/image-20220321204754485.png)]
step02代码：
<!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>
<!-- 通过this.value来获取当前对象的value值 -->
<select onclick="show(this.value)">
<option >---请选择---</option>
<option value="0">广州市</option>
<option value="1">上海市</option>
<option value="2">北京市</option>
</select>
<select id="tv_s">
<option>----</option>
</select>
<script>
function show(temp) {
//定义一个二维数组
var arrars = [
["白云区", "珠海区", "天河区"],
["黄埔", "名媛区", "富婆区"],
["朝阳区", "海淀区", "牛逼区"]
]
var city = arrars[temp];
//定义一个来进行拼接
var s = "";
//遍历
for (var i = 0; i < city.length; i++) {
s += "<option>" + city[i] + "</option>"
}
//通过标签来改变
document.getElementById("tv_s").innerHTML = s;
}
</script>
</body>
</html>
八、jquery
1.就是对js的一个简单的封装，优化html的文档操作、事件处理、动画设计、ajax交互
2.适配了各种主流的浏览器
3.一个轻量级的前端框架
8.1 jquery的引入
直接引入
<!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>
<script src="../js/jquery-3.5.1.min.js" type="javascript"></script>
</head>
<body>
</body>
</html>
还可以网站引用
查网
8.2 jquery的准备函数
1.jquery的符号：$
2.准备函数就的特点
A.准备函数有多种写法
B.juery的准备函数优先于js的准备函数执行，
C.jquery的准备函数定义几个执行几个，而js的定义多个，只执行一个
8.3 jquery与js之间的转换
1.jquery转换为js==>jquery[0]或者jquery.get（0）；
2.js转换为jquery==>$(js对象)
8.4 jquery的三种基本选择器
1.id选择器 $("#id名")单个
2.类选择器 $(".类名")数组
3.标签选择器 $("标签名")数组
注意点：1.类选择器与标签选择器返回的是多个的时候，是js对象
返回的是单个的时候是jquery对象
2.在jquery的对象里面是通过$(jquery节点对象).val（）方法来获取其value值
8.5 jquery事件
1.click 点击事件
2.dbclick 双击事件
3.blur 失去焦点
4.focus 获取焦点
5.mouseout 移出
6.mouseover 移入
7.hover 移入移成
，
C.jquery的准备函数定义几个执行几个，而js的定义多个，只执行一个
#### 8.3 jquery与js之间的转换
1.jquery转换为js==>jquery[0]或者jquery.get（0）；
2.js转换为jquery==>$(js对象)
#### 8.4 jquery的三种基本选择器
1.id选择器 $("#id名")单个
2.类选择器 $(".类名")数组
3.标签选择器 $(“标签名”)数组
> 注意点：1.类选择器与标签选择器返回的是多个的时候，是js对象
>
> 返回的是单个的时候是jquery对象
>
> 2.在jquery的对象里面是通过$(jquery节点对象).val（）方法来获取其value值
#### 8.5 jquery事件
1.click 点击事件
2.dbclick 双击事件
3.blur 失去焦点
4.focus 获取焦点
5.mouseout 移出
6.mouseover 移入
7.hover 移入移成
扫一扫
1571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
