html->没穿衣服的人
CSS->穿衣服的人
JavaScript->让人动起来，动态
编程语言，浏览器就是JavaScript语言的解释器
DOM和BOM：相当于编程语言的内置模块。类似于Python中的re，random，json模块等
jQuery：相当于编程语言的第三方模块。类似于Python中的requests、openpyxl等。
1.JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
width: 200px;
border: 1px solid red;
}
.menu .header{
background-color: gold;
padding: 20px 10px;
}
</style>
</head>
<body>
<div class="menu">
<div class="header" onclick="myfunc()">大标题</div>
<div class="item">内容</div>
</div>
<script type="text/javascript">
function myfunc(){
// alert("你好啊！")
confirm("是否要继续？")
}
</script>
</body>
</html>点击大标题会出现弹窗。效果如下：
1.1JavaScript代码位置
放在位置1时，如果该处的加载比较耗时，就会导致整个页面都加载不出来，呈现一个白屏的状态，使得用户使用感受不好。所以我们一般放在位置2。
1.2 JavaScript代码存在形式
当前HTML中
文件中。在目录.static/js/下创建一个文件叫做myjs.js，HTML文件中引入。
function f1(){
alert(123)
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
width: 200px;
border: 1px solid red;
}
.menu .header{
background-color: gold;
padding: 20px 10px;
}
</style>
</head>
<body>
<div class="menu">
<div class="header" onclick="f1()">大标题</div>
<div class="item">内容</div>
</div>
<script src="static/js/myjs.js"></script>
</body>
</html>1.3变量
python
name = 'qy'
print(name)JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var name='qy';
console.log(name);
</script>
</body>
</html>用浏览器预览样式，右键->检查元素->控制台（console）就可以看到打印出来的变量啦
1.4字符串类型
// 声明
var name = "中国最棒";
var name = String("中国最棒");
// 常见功能
var v1 = name.length; // 获得字符串name的长度，即4
var v2 = name[0]; // 获取字符串name的第一个字符，即"中"；name.charAt(0)效果一样
var v3 = name.trim(); // 去除空白，获得一个新的字符串
var v4 = name.substring(0, 2) // 前取后不取，取到的字符串是"中国"案例：走马灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="txt">欢迎大家来武汉玩</span>
<script type="text/javascript">
function show() {
// 1.去html中找到某个标签并获取他的内容。（DOM）
var tag = document.getElementById("txt");
var dataString = tag.innerText;
// console.log(dataString)
// 2.让文本动态起来，把文本中的第一个字符放在字符串的最后面
var firstChar = dataString[0];
var otherChar = dataString.substring(1, dataString.length);
var newText = otherChar + firstChar;
// console.log(newText)
// 3.在HTML标签中更新内容
tag.innerText = newText;
}
// JavaScript中的定时器，如：每一秒执行一次show函数
setInterval(show, 1000);
</script>
</body>
</html>
1.5数组
// 定义
var v1 = [11, 22, 33, 44];
var v2 = Array([11, 22, 33, 44]);
// 操作
// 插入
v1[1]
v1[0] = "qy";
v1.push("yq"); // 尾部追加
v1.unshift("yq"); // 头部插入
v1.splice(索引位置，0， 元素);
v1.splice(1, 0, "中国"); // 定位插入
// 删除
v1.pop(); //尾部删除
v1.shift(); //头部删除
v1.splice(索引位置， 1);
v1.splice(2, 1); // 删除索引值为2的元素
// 循环，遍历
for(var index in v1){
// index = 0,1,2...
// data = v1[index]
}
for(var i=0; i<v1.length; i++){
}案例：动态数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="city">
</ul>
<script type="text/javascript">
var citylist = ['北京', '上海', '深圳'];
for (index in citylist) {
var text = citylist[index];
// 将文本添加到页面中
var tag = document.createElement('li');
// 往li标签中添加文本
tag.innerText = text;
// 添加到id=city的标签里面去
var parentTag = document.getElementById('city');
parentTag.appendChild(tag);
}
</script>
</body>
</html>1.6对象
info = {
name = "qy",
age = 18
}
info = {
"name" = "qy",
"age" = 18
}
info.age
info.name = "yq";
info["age"]
info["name"] = "yq"
// 通过key访问value
for(var key in info){
// key = name/age data = info[key]
}案例：动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
<script type="text/javascript">
var datalist = [
{id: 1, name: 'qy', age: 19},
{id: 2, name: 'qy', age: 19},
{id: 3, name: 'qy', age: 19},
{id: 4, name: 'qy', age: 19}
]
for(var index in datalist){
var userinfo = datalist[index];
var tr = document.createElement('tr');
for(var key in userinfo){
var text = userinfo[key];
var td = document.createElement('td');
td.innerText = text;
tr.appendChild(td);
}
var body = document.getElementById("body");
body.appendChild(tr);
}
</script>
</body>
</html>1.7条件语句
if(条件){
}else if(条件){
}else{
}1.8函数
function func(){
...
}
func()2.DOM
DOM是一个模块，可以对HTML页面中的标签进行操作
// 根据id获取标签
var Tag = document.getElementById("xx");
// 获取标签中的文本
Tag.innerText
// 创建标签
var tag = document.createElement("div");
// 给一个标签tr添加孩子td
tr.append(td);
2.1事件的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txt">
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
</ul>
<script type="text/javascript">
function addCityInfo(){
// 1.找到输入框的标签
var textTag = document.getElementById('txt');
// 2.获取用户输入的内容
var text = textTag.value;
// 判断用户输入是否为空
if(text.length > 0){
// 3.创建li标签
var li = document.createElement('li');
li.innerText = text;
// 4.获取id=city的标签
var parentTag = document.getElementById('city');
// 5.给parentTag添加孩子
parentTag.appendChild(li);
// 6.将input的内容清空
textTag.value = ""
}
else{
alert("输入不能为空！")
}
}
</script>
</body>
</html>在输入框输入文字，点击添加，文字就会显示在下面的无序列表中。输入为空值时，则会弹窗提示输入不为空。
3.相关知识回顾
3.1编码相关
文件存储的时候，使用某种编码，打开的时候必须使用相同的编码，否则会出现乱码的现象。
字符和二进制的对应关系（编码）：
ascii编码，256中的对应关系
gb2312，gbk，中文和亚种的一些国家（中文是两个字节）
unicode，ucs2/ucs4，包括现在发现的所有文明
utf-8编码（中文是3个字节）
python默认解释器编码：utf-8
data = "中"
res = data.encode('utf-8')
print(res) # b'\xe4\xb8\xad'
data = "国"
res = data.encode('gbk')
print(res) # b'\xb9\xfa'3.2字符串格式化方法
v1 = "我是{}，今年{}岁".format("qy", 19)
v2 = "我是%s，今年%d岁" %("qy", 19)
name = "qy"
age = 19
v3 = f"我是{name}, 今年{age}岁"4.jQuery
jQuery是一个JavaScript的第三方模块
基于jQuery，自己开发一个功能
线程的工具依赖于jQuery，例如：BootStrap动态效果
4.1寻找标签（直接寻找）
ID
<h1 id="txt">中国联通</h1>
<h1>中国联通</h1>
<h1>中国联通</h1>$("#txt")样式（类）选择器
<h1 class="c1">中国联通</h1>
<h1 class="c1">中国联通</h1>
<h1 class="c2">中国联通</h1>$(".c1")标签选择器
<h1 class="c1">中国联通</h1>
<div class="c1">中国联通</div>
<h1 class="c2">中国联通</h1>$("h1")层级选择器
<div class="c1">
<div class="c2">
<span></span>
<a></a>
</div>
</div>${".c1 .c2 a")多选择器
<div class="c1">
<div class="c2">
<span></span>
<a></a>
</div>
</div>
<div class="c1">中国联通</div>
<h1 class="c3">中国联通</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>$("#c1, #c2, li")属性选择器
<input type="text" name="n1">
<input type="text" name="n2">
<input type="text" name="n3">$("input[name="n1"]")4.2间接寻找
兄弟
<div>
<div>北京</div>
<div id="c1">上海</div>
<div>深圳</div>
</div>$("#c1").prev() // 上一个
$("#c1").next() // 下一个
$("#c1").siblings() // 找到所有的兄弟标签父亲，子孙
<div>
<div id="c1">
<div>北京</div>
<div id="c2">上海
<div>青浦区</div>
<div>宝山区</div>
<div>浦东新区</div>
</div>
</div>
</div>$("#c1").parent() //父亲
$("#c1").childern() //孩子
$("#c1").find("div") //在所有的子孙中查到div标签案例：菜单切换
效果一：点击一个被隐藏的菜单，该菜单显现；点击一个显示的菜单，该菜单隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
width: 200px;
height: 1000px;
border: 1px solid red;
}
.menu .header{
background-color: gold;
padding: 10px 5px;
border-bottom: 1px solid;
/*鼠标放在标题上，鼠标就变成一个小手了*/
cursor: pointer;
}
.menu .content a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="header" onclick="clinkMe(this)">北京</div>
<div class="content hide">
<a>朝阳区</a>
<a>海淀区</a>
<a>大兴区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clinkMe(this)">上海</div>
<div class="content hide">
<a>宝山区</a>
<a>浦东区</a>
<a>青浦区</a>
</div>
</div>
</div>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
function clinkMe(self){
var hasClass = $(self).next().hasClass("hide");
if(hasClass){
$(self).next().removeClass("hide");
}
else{
$(self).next().addClass("hide");
}
}
</script>
</body>
</html>效果二：点击一个菜单，其他的菜单全部隐藏起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
width: 200px;
height: 1000px;
border: 1px solid red;
}
.menu .header{
background-color: gold;
padding: 10px 5px;
border-bottom: 1px solid;
/*鼠标放在标题上，鼠标就变成一个小手了*/
cursor: pointer;
}
.menu .content a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="header" onclick="clinkMe(this)">北京</div>
<div class="content hide">
<a>朝阳区</a>
<a>海淀区</a>
<a>大兴区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clinkMe(this)">上海</div>
<div class="content hide">
<a>宝山区</a>
<a>浦东区</a>
<a>青浦区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clinkMe(this)">北京1</div>
<div class="content hide">
<a>朝阳区</a>
<a>海淀区</a>
<a>大兴区</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clinkMe(this)">上海1</div>
<div class="content hide">
<a>宝山区</a>
<a>浦东区</a>
<a>青浦区</a>
</div>
</div>
</div>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
function clinkMe(self){
$(self).next().removeClass('hide')
$(self).parent().siblings().find('.content').addClass('hide')
}
</script>
</body>
</html>4.3操作样式
addClass()
removeClass()
hasClass()4.4值的操作
<div id='c1'>内容</div>$("#c1").text() //获取文本内容
$("#c1").text("xxx") //设置文本内容<input type='text' id='c2'>$("#c2").val() // 获取输入的内容
$("#c2").val("xxx") // 设置输入的内容案例：输入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txtUser" placeholder="用户名">
<input type="text" id="txtEmail" placeholder="邮箱">
<input type="button" value="提交" onclick="getInfo()">
<ul id="view">
</ul>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script>
function getInfo(){
var username = $("#txtUser").val();
var email = $("#txtEmail").val();
// 创建li标签
var newLi = $("<li>").text(username);
// 将新创建的li标签添加到ul标签下
$("#view").append(newLi);
}
</script>
</body>
</html>4.5事件
点击li标签，并在控制台输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$("li").click(function(){
// 点击li标签时，会自动执行
var text = $(this).text();
console.log(text);
})
</script>
</body>
</html>点击li标签，会删除相应的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
<li>搜狗3</li>
<li>搜狗2</li>
<li>搜狗1</li>
</ul>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$("li").click(function(){
$(this).remove();
})
</script>
</body>
</html>这样写时，会在页面框架加载完成后再执行代码
<script type="text/javascript">
// 当页面框架加载完成后执行代码
$(function ()){
}
</script>4.6表格操作
点击删除按钮，删除对应行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>hhh</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>hhh</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>hhh</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>hhh</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
$(function (){
$(".delete").click(function (){
$(this).parent().parent().remove();
})
})
</script>
</body>
</html>