前言

这篇文章主要是关于前端开发的，包括html，css，javascript,bootstrap,jQuery,Dom

HTML

一.先开发一个小网页

1
2
3
4
5
6
7
from flask import Flask
app=Flask(__name__)
@app.route("/show/bin")
def hello():
	return "helloworld!!!"
if __name__=='__main__':
	app.run()

1768319725726

1
2
<h1>a</h1>	-->加大加粗
<span style="color:red;">a</span>	-->变为红色

但是，当我们遇到大型html也这样打吗，只是后就用到了render_template

1
2
3
4
5
6
7
8
9
from flask import Flask,render_template
app=Flask(__name__)
@app.route('/show/sh')
def show():
    return render_template("index.html")
    #所以我们要在当下目录生成一个templates文件夹，然后再该目录下创建一个.html文件，然后在里面操作

if __name__ == '__main__':
    app.run()
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>helloworld</h1>
    <span style="color:red;">helloworld</span>
</body>
</html>

二.浏览器识别标签

也叫做HTML标签，超文本识别标签

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

标题

先看head部分，UTF-8指的是浏览器格式为UTF-8编码，Title就是浏览器的头

1768445687342

1768445676923

body

然后是body部分，

1
2
3
<h1>a</h1>,h1指的是一级标题，所以，h几就是指几级标题//块级标签
<div>a</div>就是a占一整行//块级标签
<span>a</span>不会占一整行，就是和下面的内容接在一起，也可以指定颜色//内联标签

超链接

1
2
<a href="">点击</a>//在当前页面跳转
<a href="" target="_blank"></a>//生成一个新标签页跳转
1
2
3
4
5
6
<body>
    <h1>helloworld</h1>
    <span style="color:red;">helloworld</span>
    <a href="https://hfddh666.github.io/">我的博客</a> //其他网站
    <a href="/show/yyy">查看更多</a> //本地网站
</body>
1
2
3
4
5
6
7
8
9
10
11
from flask import Flask,render_template
app=Flask(__name__)
@app.route('/show/sh')
def show():
    return render_template("index.html")
@app.route('/show/yyy') //记得创建
def show2():
    return render_template("yyy.html")
if __name__ == '__main__':
    app.run()

效果展示：

1768447130172

我们可以发现超链接带有下划线，这时候可以在style上写text—decoration:none；

图片

1
2
<img src="图片地址"/>

1
2
显示自己的图片，要先建立一个static文件夹，然后将照片存放在该目录下，然后地址为/static/xxx

1
2
3
4
照片设置宽高
<img src="" style="height:100px;width:100px;"/>
<img src="" style="height:10%;width:10%;"/>

成果展示

1768449722303

1768449791913

超链接和图片结合

1768450658672

列表

1
2
3
4
5
6
7
8
9
10
11
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

效果展示

1768451208274

表格

1
2
3
4
5
6
7
8
9
10
11
12
<table border="1"> //border="1"是加上默认边框
	    <thead> //标题
		    <tr> <th>ID</th><th>名字</th><th>年龄</th> </tr>
	    </thead>
	    <tbody> //内容
		    <tr> <td>111</td><td>猫猫</td><td>13</td> </tr>
	    </tbody>
    </table>
    
<tr></tr>是一行，然后换行
<tr></tr>

效果展示

1768452493470

input系列

1
2
3
4
5
6
7
8
9
10
11
12
<input type="text">生成一个输入框
<input type="password">生成一个密码输入框
<input type="file">选择文件
<input type="radio" name="n1">男生
<input type="radio" name="n1">女生
生成一个男女生选择框，name不一样就可以多选
<input type="checkbox">烤鸡
<input type="checkbox">牛肉
生成一个打勾的多选框
<input type="button" value=”点击“>没什么用的按钮
<input type="submit" value="点击">生成提交按钮，与<form></form>搭配

效果展示

1768574151057

下拉框

1
2
3
4
5
6
<select>
	<option>北京</option>
	<option>上海</option>
</select>
若想要多选，在select后加上个multiple

效果展示

1768574483103

多行文本

1
2
<textarea rows="3"></textarea>就是默认3行，也可以去掉rows

三.网络请求

  • 在浏览器的 URL 中写入地址，点击回车，访问。

浏览器会发送数据过去，本质上发送的是字符串：

1
2
"GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n.\r\n\r\n"

浏览器会发送数据过去，本质上发送的是字符串：

1
2
"POST /explore http1.1\r\nhost:...\r\nuser-agent\r\n.\r\n\r\n数据库"

  • 浏览器向后端发送请求时

    • GET 请求【URL 方法 / 表单提交】可以看出来

      • 现象：GET 请求、跳转、向后台传入数据时数据会拼接在 URL 上。

        1
        2
        https://www.sogou.com/web?query=安卓&age=19&name=xx 就是说在sohu界面搜安卓，就会出现像这样的网址

      • 注意：GET 请求数据会在 URL 中体现。

    • POST 请求【表单提交】直接看看不见

      • 现象：提交数据不在 URL 中而是在请求体中。
      • 但是可以打开network监听

实例：

GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
html：
<body>
    <div>用户注册</div>
    <div>
        <form method="GET" action="/show/get"> //请求方式为get，action是返回地址
            账号<input type="text" name="name">
            密码<input type="password"name="pwd">
            <input type="submit" value="点击提交">
        </form>
    </div>
</body>

py:
from flask import Flask,render_template,request//！！！！！
app = Flask(__name__)
@app.route('/show/sh')
def hello_world():
    return render_template("index.html")
@app.route('/show/get')
def index():
    print(request.args)  //输出get请求的数据
    return "注册成功"
if __name__ == '__main__':
    app.run(debug=True)


效果：

1768579096077

1768579105639

POST

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <div>用户注册</div>
    <div>
        <form method="POST" action="/show/post"> //默认都是get请求，所以要指定post请求
            账号<input type="text" name="name">
            密码<input type="password"name="pwd">
            <input type="submit" value="点击提交">
        </form>
    </div>
</body>

from flask import Flask,render_template,request
app = Flask(__name__)
@app.route('/show/sh')
def hello_world():
    return render_template("index.html")
@app.route('/show/post',methods=["POST"])  //flask默认的都是get请求，所以要指定为post，注意与html的指定不一样~
def index():
    print(request.form) //这是post请求的输出
    return "注册成功"
if __name__ == '__main__':
    app.run(debug=True)

效果

17685793542631768579362847

也可以将而这放在一起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
from flask import Flask,render_template,request
app = Flask(__name__)
@app.route('/show/sh',methods=['GET','POST'])
def hello_world():
    if request.method=="GET":
        return render_template("index.html")
    else:
        print(request.form)
        name=request.form.get("name")
        pwd=request.form.get("pwd")
		hobby=request.form.getlist("hobby")   遇到多选时用getlst
        return "提交成功"

if __name__ == '__main__':
    app.run(debug=True)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div>用户注册</div>
    <div>
        <form method="POST" action="/show/sh">
            账号<input type="text" name="name">
            密码<input type="password"name="pwd">
            <input type="submit" value="点击提交">
            <input type="checkbox" name="hobby" value="1">football
            <input type="checkbox" name="hobby" value="3">basketball
            <input type="checkbox" name="hobby" value="2">baseball
            <input type="submit" value="点击提交">
        </form>
    </div>
</body>

效果1768620159511

CSS

用来美化html标签

一.应用方式

1.直接写类似这种的

1769690881741

2.写在html的title里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>     //来看这里！！！！！！！！！！！！！！！
        .c1{
            color:red;
        }
    </style>
</head>
<body>
    <div class="c1">用户注册</div>  //还有这里！！！！！！！！！！！！！！
    <div>
        <form method="POST" action="/show/get">
            账号<input type="text" name="name">
            密码<input type="password"name="pwd">
            <input type="submit" value="点击提交">
            <input type="checkbox" name="hobby">football
            <input type="checkbox" name="hobby">basketball
            <input type="checkbox" name="hobby">baseball
            <input type="submit" value="点击提交">
        </form>
    </div>
</body>
</html>


3.写在css文件

1769692489870

1
2
3
4
5
6
css文件中只要写这个就好了
.c1{
    color:red;
}


1
2
3
4
在head中补上这个
<link rel="stylesheet" href="/static/common.css"/>


二.选择器

在head处

类选择器

1
2
3
4
5
6
.c1{
	color:red;
	height:50px;
}应用的是class="c1"


id选择器

1
2
3
4
5
#c2{
	color:red;
}应用的是id="c2"


标签选择器

1
2
3
4
5
li{
	color:red;
}就是将有运用到的<li></li>中的内容都变为红色


属性选择器

1
2
3
4
5
6
7
8
9
10
11
<head>
	input[type="text"]{
		border:1px solid red;1像素红色边框
	}
</head>
<body>
	<input type="text">
	<input type="passward">
</body>


后代选择器

1
2
3
4
5
6
7
8
9
.yy li {
    color: pink;
}先找到yy标签，然后将其li标签赋予其性质

.yy > a {
    color: dodgerblue;
}如果没有大于号，就会将所有a标签拥有这一属性，有的话就只有yy的子代有这个性质


1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="yy">
    <a>百度</a> //这个算子代
    <div>
        <a>谷歌</a> //这个算孙子
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>


多个覆盖

当class有两个类时，如果有重复的元素，后面的会将前面的覆盖，如果不想让其被覆盖，金额在该元素后加! important

三.样式

1.高度和宽度

1
2
3
4
5
6
7
8
9
<style>
	.c1{
		height:100px
		width:100px
	}宽度可支持百分比，高度不行 
</style>
但是会发现如果是行内标签<span>发现是没有用的


2.块级和行内标签

块级标签：非常霸道，占一整行不管内容少

行内：贴在一起

中和一下：出现了有多大占多大的标签

1
2
3
4
5
6
7
8
9
10
11
<style>
	.c1{
		display:inline-block;
		height:100px;
		width:100px;
		border: 1px solid red
	}
</style>
<span class="c1">欢饮光临</span>


将div改为行内标签：

1
2
3
<div style="display:inline;">a</div>


span改为块级标签：

1
2
3
<span style="display:block;">a</span>


3.字体和颜色

1
2
3
4
5
6
7
8
9
10
11
.cl{
	color:red; //也可用rgb颜色表
	font-size：100px;
	font-weight:100;//加粗
	font-family:; //字体
}
.cl:hover{
	color:red;就是将鼠标放上去会实现style的功能
}


4.文字的对齐方式

1
2
3
4
5
6
7
.c1{
	width:59px;
	text-align:center//水平方向居中
	line-height：59px //文本只能有一行，使其垂直居中
}


5.浮动

1
2
3
<span style="float:right;">aaa</span> //会将其放在页面最左边


会将div标签的块级变为有多少占多少

1
2
3
4
5
6
7
8
9
10
11
<style>
	.c1{
		border:1px solid red;
		float:left;
		width:20px;
		height:50px;
	}
</style>
<div class="c1"></div>


可以发现上面的这种属于脱离文档流（就是发现后面写的东西会接在边框后面），这时候我们就要给它拽回来<div style="clear:both;"></div>相当于孩子可以把父亲撑起来

比较一下

1769863627574

1769863652643

所以浮动就是如果没有输入那一行的话，就会导致后续元素没有识别直接放在第一行

6.内/外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.c1{
    border:1px solid red;
    width:200px;
    height:200px;
    padding-top:20px; //距离顶部边框20px，相当于高度增加20
    padding-right
    padding-left
    pedding-bottom
    padding:10px 20px 30px 40px;(上右下左)
    margin-top:20px;（自己高度不变，但是会向下移动20px）
    margin:0 auto;（左右居中，上下边距为0）
}
<div class="c1">
	<div style="background-color:green">你好</div>
</div>


7.透明度

1
2
3
opacity:1 //默认是1


8.hover

1
2
3
4
5
6
7
8
.c1{
	size:12px;
}
.c1:hover{    //就是将鼠标放在所选东西会发生改变 
	size:15px;
}


1
2
3
4
5
6
7
8
9
.c1:hover .app{
	display:block;
	//鼠标触碰c1的内容会显示app样式的内容
}
.app{
	display:none;隐身了
}


效果展示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:black;
            font-size:20px;
        }
        .c1 .c2{
            display:none;
        }
        .c1:hover .c2{
            display:block;
        }
    </style>
</head>
<body>
<div class="c1">
    欢迎，请点菜
    <div class="c2">
        <img src="/photo/img_4.png">
    </div>
</div>

</body>
</html>


1769866861405

9.after

1
2
3
4
5
6
7
8
9
10
11
12
<style>
	.c1:after{
		content:"大聪明"
	}
</style>

<body>
	<div class='c1'>哈吉米</div>
</body>
这样就会显示哈吉米大聪明


10.position

fixed:会将这一部分内容固定在所写位置处

1
2
3
4
5
6
7
8
9
.c1{
	position:fixed;
	left:10px;
	right:
	top:
	bottom:
}


案例：对话框

1769865061207

1
2
3
4
<div style="background-color:black;position:fixed;left: 0;right: 0;top:0;bottom:0;opacity:0.7;"></div>
<div style="position:fixed;width:200px;height:200px;margin:0 auto;left:0;right:0;top:200px;background-color:white;"></div>


但是会发现两个反过来白色区域消失了，因为他被黑色部分给覆盖住了，那有什么办法呢，可在其style处加上z-index:,大的会在上面

relative和absolute

1
2
3
4
下图中红色边框的position是relative
涂色区域position是absolute


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            border:1px solid red;
            width:400px;
            height:300px;
            left:0;
            right:0;
            top:100px;
            margin:0 auto;
            position:relative;
        }
        .c1 .c2{
            width:50px;
            height:50px;
            background-color:blanchedalmond;
            position:absolute;
            left:50px;
            top:100px;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
</body>
</html>


效果展示：

1769865750340

11.边框

1
2
3
4
5
border:1px solid red(solid是实线，dotted是虚线，1px指的是粗细)也可将red替换为transparent，与hover结合
border-left:
border-right:


BOOTSTRAP

一.初体验

bootstrap相当于是插件，可以直接方便的使用自定义样式，首先先从网上下载一个bootstrap文件，然后在当下pycharm目录建立如下内容

1769936596720

打开这个css目录发现有好多个.css文件，我们通常都是直接使用第一个（生成文件）

1
2
3
4
在<head>处
<link rel="stylesheet" href="/static/plugins/bootstrap-5.3.0/css/bootstrap.css">


效果展示

1
2
3
4
5
6
<body>
    <input type="button" value="提交">
    <input type="button" value="提交" class="btn btn-success">
</body>


1769937097272

格式太多，只能由提示符慢慢查找

1769936991473

二.导航

上面说了，一个个找太麻烦了，所以可以直接去bootstrap官方文档中寻找想要的模板，我下载的是v5的

1769937958372

开始使用 Bootstrap · Bootstrap v5.3 - Bootstrap 框架

三.网格系统

先分析一下这个，运行一下看看效果：

1
2
3
4
5
6
7
8
9
10
11
<body>
    <div class="container text-center"> //这个就是所占据的外边框，并且置中
      <div class="row"> //row是控制列长度
          <div class="col" style="background-color:red;height:100px;"></div>
          <div class="col" style="background-color:greenyellow;height:100px;"></div>
          <div class="col" style="background-color:blue;height:100px"></div>
      </div>
    </div>
</body>


1769939331736

将container去掉

1769939446792

将row去掉

1769939466331

若col改为col-2

1769939662565

注意区分响应类和非响应类（拉缩页面，长度发生变化的就是响应类）

四.登陆界面

首先是导航到表格，获取表格html，然后在其基础上修改

1769952888721

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <style>
      .c1{
        width:400px;
        height:300px;
        margin:250px auto;
        border:3px solid blanchedalmond;
        border-radius: 5px;
        box-shadow:5px 5px 5px #aaa;
      }
    </style>
    <link rel="stylesheet" href="/static/plugins/bootstrap-5.3.0/css/bootstrap.css">
  </head>
    <body>
      <form method="post" action="/show/sh" class="c1">
        <h3 style="text-align:center;padding-top:10px;">登陆界面</h3>
        <div class="mb-3" style="padding:0 10px 0 10px;">
          <label for="exampleInputEmail1" class="form-label">账号</label>
          <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="账号">
        </div>
        <div class="mb-3" style="padding:0 10px 0 10px;">
          <label for="exampleInputPassword1" class="form-label">密码</label>
          <input type="password" class="form-control" id="exampleInputPassword1" name="密码">
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
      </form>
  </body>

</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
from flask import Flask,render_template,request
app = Flask(__name__)
@app.route("/show/sh",methods=["GET","POST"])
def show():
    if request.method == "GET":
        return render_template("css.html")
    else:
        text=request.form.get("账号")
        password=request.form.get("密码")
        print(request.form)
        print(text)
        print(password)
        return "注册成功"

if __name__ == "__main__":
    app.run(debug=True)


五.后台管理案例

这只是界面长这样，还不能实现将数据添加到表单中，v5没找到什么好看的模板，有点简陋~~

1769955503937

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息注册</title>
    <style>
        .c1{
            width:600px;
            height:280px;
        }
        .c2{
            box-shadow:5px 5px 5px #aaa;
        }
    </style>
    <link rel="stylesheet" href="/static/plugins/bootstrap-5.3.0/css/bootstrap.css">
</head>
<body>
    <form method="post" action="/show/sh" class="c1 c2" style="margin:10px auto;">
        <h5 style="text-align:center;padding-top:10px;">登陆界面</h5>
        <div class="mb-3" style="padding:0 10px 0 10px;">
          <label for="exampleInputEmail1" class="form-label">账号</label>
          <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="账号">
        </div>
        <div class="mb-3" style="padding:0 10px 0 10px;">
          <label for="exampleInputPassword1" class="form-label">密码</label>
          <input type="password" class="form-control" id="exampleInputPassword1" name="密码">
        </div>
        <button type="submit" class="btn btn-primary">添加</button>
    </form>
    <div class="bd-example">
        <table class="table table-bordered c2" style="width:600px;height:200px;margin:20px auto;">
            <thead>
                <tr>
                    <th scope="col">序号</th>
                    <th scope="col">账号</th>
                    <th scope="col">密码</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Jacob</td>
                    <td>@twitter</td>
                </tr>
            </tbody>

        </table>
    </div>
</body>
</html>


六.bootstrap的依赖

bootstrap.js依赖于JavaScript的类库（jQuery）

所放位置（不唯一）

1769956844458

所写位置

1
2
3
4
5
6
7
8
<body>	
	XXXXX
    ......
	<!--	<script src="/static/js/jquery-4.0.0.js"></script>//这个其实可以注销掉，因为我用的bootstrap是v5版本，不再依赖jquery	-->
	<script src="/static/js/bootstrap.js"></script>
</body>


动态效果

1769957242920

1769957254813

JavaScript

就是给html+css设置为动态效果，比如像前面的后台管理可以真正实现添加删除之类的，所达到的效果就像上面所展示的这样

浏览器就相当于他的编译器

一.初识js

1
2
3
onclick是单击，ondbclick是双击


1
2
3
4
5
6
7
8
9
10
<body>
    <div onclick="Func()">你好</div>        //启用方式
    <script type="text/javascript">   //定义函数
    	function Func(){//Func是函数名
            confirm("你好呀")...
        }
    </script>
</body>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="c2" onclick="Func()">
        你好
    </div>
    <script type="text/javascript">
        function Func(){
            confirm("是否要继续")
            <!-- alert("你好呀") -->
        }
    </script>
</body>
</html>


效果：

1770108796639

二.js位置

第一种就是放在style下面，没有style就放在title下面

1
2
3
4
5
6
7
8
9
10
<head>
    <style>
    	...	
    </style>
    <script type="text/javascripe">
    	//编写函数
    </script>
</head>


第二种就是放在body倒数第一行

1
2
3
4
5
6
7
8
9
<body>
	...
    <script type="text/javascript">  
        //编写函数
    </script>
</body>



如果是利用js库,所以我们可以直接再本地建立一个js文件然后引入就好 

1
2
3
<script src="/static/..."></script>


三注释

html的注释

1
2
3
<!-- 注释 -->


CSS的注释

1
2
3
/*zhushi*/


JavaScript的注释

1
2
3
4
/*注释*/
//zhushi


四.变量

JavaScript编程（有封号；）

1
2
3
4
5
6
<script type="text/javascript">
	var name="hahaha";  //name是变量名，var是关键字
    console.log(name);//会显现在生成的网页的控制台处
</script>


补充：

1770110905380

python

1
2
3
4
name="hahaha"
print(name )


五.字符串类型

1
2
3
4
5
//申明
var name="string";
var name=String("string");


1
2
3
4
5
6
7
8
//常见功能
var name="zhonggo";
var v1=name.length;
var v2=name[0];
var v3=name.trim();//去掉空格
var v4=name.substring(0,2);//前取后不取


六.DOM

就是可以从当前文件获取想要的东西

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="txt" onclick="Func()">欢迎光临</div>
    <script type="text/javascript">
      function Func(){
          var n1=document.getElementById("txt");
          var content=n1.innerText;
          console.log(content);
      }
    </script>
</body>
</html>


七的案例也有用到dom

案例：跑马灯：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="txt" onclick="Func()">欢迎光临</div>
    <script type="text/javascript">
      function Func(){
          var n1=document.getElementById("txt");
          var content=n1.innerText;
          var v1=content[0];
          var v2=content.substring(1,content.length);
          content=v2+v1;
          n1.innerText=content;
          console.log(content);
      }
      setInterval(Func,1000);  //将该函数执行1000次，会显现在网页上
    </script>
</body>
</html>


1770111988667

七.数组类型

定义：

1
2
3
4
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);


用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var v1 = [11,22,33,44];

v1[1]
v1[0] = "高倩";

v1.push("联通");    // 尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");   // 尾部追加 ["联通", 11,22,33,44]
v1.splice(索引位置, 0, 元素);
v1.splice(1, 0, "中国"); // 尾部追加 [11, "中国", 22,33,44]

v1.pop()    // 尾部删除
v1.shift()    // 头部删除
v1.splice(索引位置, 1)
v1.splice(2, 1);    // 索引为2的元素删除 [11,22,44];


循环

1
2
3
4
5
6
7
8
9
10
11
12
var v1=[11,22,33,44];
for(var idx in v1){
    //idx为其索引，所以要获取他的数据要用v1[idx]
}


//第二种
for(var i=0;i<v1.length;i++){
    //同理
}


案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="txt"></ul>
    <script type="text/javascript">
        var city = ["北京", "上海", "福建"];
        for(var it in city){
            var tag=document.createElement("li"); //创造一个<li>型的标签
            var text=city[it];
            tag.innerText=text;
            var parenttag=document.getElementById("txt");
            parenttag.appendChild(tag);
        }
    </script>
</body>
</html>


八.对象（字典 ）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
info={
	name:"高斯"，
	age:13
}
info.name="aa";
info.age=12;
info["name"]=""
info["age"]=
delete info["name"]//删除这个元素

//循环
for(var it in info){
    //it:name/age   
}


案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table style="border:1px solid black;">
        <thead>
            <tr>
                <th>name</th><th>age</th>
            </tr>
        </thead>
        <tbody id="body">

        </tbody>
    </table>
    <script type="text/javascript">
        var people=document.createElement("tr");
        var info={
            name:"张三", age:18
        };
        for(var idx in info){
            var text=document.createElement("td");
            text.innerText=info[idx];
            people.appendChild(text);
        }
        var it=document.getElementById("body");
        it.appendChild(people);
        console.log(people);
    </script>
</body>
</html>


效果：

1770211687657

九.if条件

1
2
3
4
5
6
7
8
9
if(){
	//
}else if{
	//
}else{
	//
}


DOM

就是一个模块，可以对HTML页面中的标签进行操作

1
2
3
4
5
6
7
8
//根据ID获取标签
var tag=document.getElementById("XX");
//获取标签中的文本
var v1=tag.innerText;
//改变标签的文本
tag.innerText="hahahahah"


1
2
3
4
5
6
//创建标签
var tag=document.createElement("div");
//标签写内容
tag.innerText="hahahahha";


案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="txt" placeholder="请输入" id="content">
    <input type="button" value="提交" onclick="func()">
    <ul id="biaoge">

    </ul>
    <script type="text/javascript">
        function  func(){
            var v1 = document.getElementById("content");
            var v2 = v1.value;  //这个可以获取表格内的数据
            var v3 = document.getElementById("biaoge");
            var v4 = document.createElement("li");
            v4.innerText = v2;
            if(v2.length>0){
                v3.appendChild(v4);
            }else{
                alert("空");
            }
        }
    </script>
</body>
</html>


1770215941205

知识回顾

编码相关：

1
2
3
4
5
6
7
8
9
文件以哪种编码形式存储，打开时就使用相同的编码打开，否则会乱码。
字符底层存储时本质上是对应0101010101010。
字符和二进制对应关系：
-ASCII编码，256种对应关系
-gb2312，gbk，中文和亚洲的一些国家（中文是2个字节）
-unicode，ucs2/ucs4，包括现在所发现的所有文明
-utf-8编码，就是我们html所用的编码（中文是2个字节）


展示

1770383036066

一个\x是一个字节（16进制）

字符串格式

1
2
3
4
5
6
7
8
9
v1="我是{}，今年{}岁"。format("hfddh666",20)

v2="我是%s,今年%d岁" %("hfddh666",20)

name="hfddh666"
old=20
v3=f"我是{name}，纪念{old}岁"


jQuery

不做详细介绍了，因为v5版本后的bootstrap不再依赖jQuery编译了，但还是简单了解了解

1.jQuery上手

引用：

1
2
3
4
5
6
7
8
9
10
<h1 id="txt">广西联通</h1>
<script src="/static/js/jquery-4.0.0.js"></script>
<script type="text/javascript">
    $("#txt").text("广东666")
    //或者可以写为
    document.getElementbyId("txt").innerText="广东666"
</script>
//将id为txt的内容修改


2.直接寻找标签

ID选择器：

1
2
3
4
5
<h1 id="txt">广西联通</h1>
<h1>广西联通</h1>
<h1>广西联通</h1>


1
2
3
$("#id")


样式选择器

1
2
3
4
5
<h1 class="c1">广西联通</h1>
<h1 class="c2">广西联通</h1>
<h1 class="c2">广西联通</h1>


1
2
3
$(".c1")


标签选择器

1
2
3
4
5
<h1 id="txt">广西联通</h1>
<h1 id="txt">广西联通</h1>
<h1 id="txt">广西联通</h1>


1
2
3
$("h1")


层级选择器

1
2
3
4
5
6
7
<h1 class="c1">
	<div class="c2">
        <a>...</a>
    </div>
</h1>


1
2
3
$(".c1 .c2 a")


多选择器

1
2
3
4
5
6
7
8
<h1 class="c1">
	<div class="c2">
        <a>...</a>
    </div>
    <li>....</li>
</h1>


1
2
3
$("#c1,#c2,li")


属性选择器

1
2
3
<input type="text" name="v1">


1
2
3
$("input[name="v1"]")


3.间接寻找

找到兄弟

1
2
3
4
5
<h1 id="c1">广西联通</h1>
<h1 id="c2">广西联通</h1>
<h1 id="c3">广西联通</h1>


1
2
3
4
5
$("#c2").prev()  //c1
$("#c2").next()	//c3
$("#c2").siblings()  //所有的系统


找父子

1
2
3
4
5
6
7
8
9
10
11
12
<div>
    <h1 id="c1">广西联通</h1>
	<h1 id="c2">广西联通</h1>
	<h1 id="c3">广西联通</h1>
</div>
<div>
    <h1 id="c4">广西联通</h1>
	<h1 id="c5">广西联通</h1>
	<h1 id="c6">广西联通</h1>
</div>


1
2
3
4
5
6
$("#c1").parent()  //父亲
$("#c1").children()	//所有的孩子
$("#c1").children(".p10")	//所有的孩子里寻找class=p10
$("#c1").find(".p10")	//所有的子孙里寻找class=p10


案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            width:200px;
            height:500px;
            border:1px solid red;
        }
        .menu .c1{
            background-color:yellow;
            width:200px;
            height:30px;
         }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="c1" onclick="Func(this)">福建</div> //this指代这个标签，this=#id
    <div class="hide">
        <div>福州</div>
        <div>三明</div>
        <div>厦门</div>
    </div>
</div>
<script src="/static/js/jquery-4.0.0.js"></script>
<script type="text/javascript">
    function Func(self){
        var v1=$(self).next().hasClass("hide");
        if(v1){
            $(self).next().removeClass("hide");
        }else{
            $(self).next().addClass("hide");
        }
    }
</script>
</body>
</html>


4.操作标签

removeClass("")删除标签

hasClass("")判断标签是否存在

addClass("")添加标签

5.值的操作

1
2
3
<div id="c1">内容</div>


1
2
3
4
$("#id").text()		//获取文本内容
$("#id").text("哈哈哈")		//设置文本内容


1
2
3
<input type="text" id="c1"/>


1
2
3
4
$("#c1").val()		//获取文本内容
$("#c1").val("哈哈哈")		//设置文本内容


案例：动态数据提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="c1" placeholder="账号">
    <input type="password" id="c2" placeholder="密码">
    <input type="button" value="提交" onclick="func(this)">
    <ul id="c3">
        <li></li>
    </ul>
    <script src="/static/js/jquery-4.0.0.js"></script>
    <script type="text/javascript">
        function func(){
            var name=$("#c1").val();
            var pwd=$("#c2").val();
            var con=name+"-"+pwd;
            var m=$("<li>").text(con);
            $("#c3").append(m);
        }
    </script>
</body>
</html>


1770967007339

6.事件

这是之前写的

1
2
3
4
5
6
7
8
<input type="button" onclick="func()">
<script>
	function func(){
        //
    }
</script>


jQuery自带的，当页面框架加载完成后才能执行

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <li>时间</li>
</ul>
<script>
	$("li").click(function(){
       //点击li标签后会显示
       //$(this)当前电机的这个标签 
       //$(this).remove();点击即删除
    });
</script>


7.表格操作

1
2
3
4
5
如果要执行表格删除操作，可以进行以下操作
$("#delete").parent().parent().remove();
//这个是将<tr></tr>标签删除