[学习笔记]python的web开发全家桶1-前端

03-13 阅读 0评论

源学习视频

$[学习笔记]python的web开发全家桶1-前端,[学习笔记]python的web开发全家桶1-前端,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,下载,第1张$

（图片来源网络，侵删）

目的：开发一个平台(网站)

前端开发：HTML、CSS、JavaScript
Web框架：接收请求并处理

MySQL数据库：存储数据地方

快速上手：

基于Flask Web框架让你快速搭建一个网站出来。

深入学习：

基于Django框架(主要)

1.快速开发网站

from flask import Flask
app = Flask(__name__)
# 创建了网站/show/info和函数index的对应关系
# 以后用户在浏览器上访问/show/info，网站自动执行index
@app.route("/show/info")
def index():
    return "中国联通"
if __name__ == '__main__':
    app.run()

老师在P2的26分22秒使用的画图软件是Excalidraw

（图片来源网络，侵删）

2.HTML

2.1编码

2.2 title

    
    Title

2.4 HTML标签

2.4.1 div和span

div
一人占一整行。[块级标签]

span

自己多大占多大。[行内标签、内联标签]

2.4.2 超链接

点击跳转

点击跳转

2.4.3 图片

标签，称为自闭合标签。

显示别人的图片

显示自己的图片
	- 自己项目中创建：static目录，图片要放在static目录
	- 在页面上引入图片

引用别人网站的图片，可能会因为有防盗链而引用不上。

2.4.4 列表

无序列表

中国移动
中国联通
中国电信

有序列表

中国移动
中国联通
中国电信

2.4.5 表格

ID	姓名	年龄
10	张三	19
11	张三	19
12	张三	19

2.4.6 input系列

    
    
    
    男
    女
    篮球
    足球
    乒乓球
    棒球
     --普通的按钮
     --提交表单

2.4.7 下拉框

2.4.8 多行文本

网络请求

案例：用户注册

新建项目

创建Flask代码

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        return render_template("register.html")
    else:
        user = request.form.get('user')
        pwd = request.form.get('pwd')
        gender = request.form.get('gender')
        hobby = request.form.getlist('hobby')
        city = request.form.get('city')
        skill_list = request.form.getlist('skill')
        more = request.form.get('more')
        print(user, pwd, gender, hobby, city, skill_list, more)
        # 将用户信息写入到数据库中实现注册
        return "注册成功"
if __name__ == '__main__':
    app.run()

HTML代码

页面上的数据，想要提交到后台：

form标签包裹要提交的含数据的标签
提交方式：method=”get“
提交的地址：action=“/xxx/xx/xx”
在form标签里面必须有一个submit标签

在form里面的一些标签：input/select/textarea

一定要写name属性：

3.CSS样式

css，专门用来”美化“标签。

基础CSS，写简单页面&看懂&改。

模板，调整和修改。

3.1CSS应用方式

1.在标签上用

2.在head标签中写style标签

    
    Title
    
        .c1{
            color:red;
        }

可以在多个标签中复用

（图片来源网络，侵删）

3.写到文件中

把样式都写到common.css文件中，然后在html中引入该文件。

# html

    
    Title

.c1{
   color:red;
}

可以在多个HTML文件中复用

3.3 CSS选择器

id选择器

# id选择器
#c1{
}

类选择器(用的最多)

# 类选择器
.c1{
}
'c1'>

标签选择器

# 标签选择器
div{
	color:red;
}
xxx

属性选择器

input[type='text']{
	border: 1px solid red;
}

后代选择器

.yy li{
	color: red;
}
.yy > li{
	color: pink;
}

.yy li会去yy类的子子孙孙找li标签

而.yy > li只会去yy类的儿子里找li标签

多个样式的应用和覆盖问题

如果不想下面的覆盖上面的样式，则可以使用! important来标注上面的样式。

3.4 样式

1.高度和宽度

.c1{
	height: 300px;
	width: 500px;
}

宽度，支持百分比。高度不支持

对行内标签，高度和宽度默认无效，(后面会知道，边距也无效)

对块级标签，默认有效，但霸道，即使右侧区域空白，也不给你占用

2.块级和行内标签

块级标签(太霸道)
行内标签(太软弱)

css样式：标签->display:inline-block (兼容两者)

	.c1{
		display: inline-block;
		
		height: 100px;
		width: 300px;
		border: 1px solid red;
	}


	中国
	联通

div并不是一定是块级标签，span也不是一定是行内标签，可以通过在样式中修改display来修改

3.字体设置

.c1{
	color: #00FF7F;   /* 字的颜色 */
	font-size: 59px;  /* 字的大小 */
	font-weight: 600; /* 字的粗细 */
	font-family: Microsoft Yahei;  /* 字体 */
}

4.文字对齐方式

.c1{
	height: 59px;
	width: 300px;
	border: 1px solid red;
	text-align: center; /* 水平方向居中 */
	line-height: 59px; /* 方向水平居中 */
}

5.浮动

  
    左边
    右边

div默认块级标签(霸道-占整行）,但如果浮动起来了，就不一样了。会只占设定的宽度。

如果你让标签浮动起来之后，就会脱离文档流（如下)，这时候需要在用完float的最后一个div后面加上带style=“clear：both;”的快标签。



    
    Title
    
      .item{
        float: left;
        width: 280px;
        height: 170px;
        border: 1px solid red;
      }

6.内边距

内边距：我自己的内部设置的一点距离。



    
    Title
    
        .outer {
            border: 1px solid red;
            height: 200px;
            width: 200px;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
    



    听妈妈的话
    
        小朋友你是否有很多问号

内边距会把标签撑大

内边距还有两种等价写法：

padding: 20px; 表示四个方向的内边距都是20px

padding: 20px 20px 20px 20px; 表示上右下左四个方向的内边距

7.外边距

外边距，我与别人的距离。



    
    Title

案例：小米商城

小米顶部



    
    Title
    
        body {
            margin: 0;
        }
        .header {
            background: #333;
        }
        .container {
            width: 1226px;
            margin: 0 auto; /* 上下为0，左右为auto */
        }
        .header .menu {
            float: left;
            color: white;
        }
        .header .account {
            float: right;
            color: white;
        }
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
        }
    



    
        
            小米官网
            小米商城
            MIUI
            IoT
            云服务
            天星数科
            有品
            小爱开放平台
            企业团购
            资质证照
            协议规则
            下载app
            Select Location
        
        
            登录
            注册
            消息通知

小结

一定记得加入

二级菜单

log部分



    
    Title
  
    body {
      margin: 0;
    }
    .sub-header{
      height: 100px;
      background-color: #b0b0b0;
    }
    .container{
      width: 1128px;
      margin: auto;
      border: 1px solid red;
    }
    .sub-header .ht{
      height: 100px;
    }
    .sub-header .logo{
      width: 234px;
      float: left;
      border: 1px solid red;
    }
    .sub-header .logo a{
      display: inline-block;
      margin-top: 22px;
    }
    .sub-header .logo img{
      height: 56px;
      width:56px
    }
    .sub-header .menu-list{
      float: left;
    }
    .sub-header .search{
      float: right;
    }
  


  
    
      
        
          
      
      f
      f

菜单部分



    
    Title
  
    body {
      margin: 0;
    }
    .sub-header{
      height: 100px;
    }
    .container{
      width: 1226px;
      margin: auto;
    }
    .sub-header .ht{
      height: 100px;
    }
    .sub-header .logo{
      width: 234px;
      float: left;
    }
    .sub-header .logo a{
      display: inline-block;
      margin-top: 22px;
    }
    .sub-header .logo img{
      height: 56px;
      width:56px
    }
    .sub-header .menu-list{
      float: left;
      line-height:100px;
    }
    .sub-header .menu-list a{
      display: inline-block;
      padding: 0 10px;
      color: #333;
      font-size: 16px;
      text-decoration: none; /* 去掉下划线 */
    }
    .sub-header .menu-list a:hover{
      color: #ff6700;
    }
    .sub-header .search{
      float: right;
    }
  


  
    
      
        
          
      
      
        Xiaomi手机
        Redmi手机
        电视
        笔记本
        平板
        家电
        路由器
        服务中心
        社区
      
      f

整合：顶部菜单+二级菜单



    
    Title
    
        body {
            margin: 0;
        }
        .header {
            background: #333;
        }
        .container {
            width: 1226px;
            margin: 0 auto; /* 上下为0，左右为auto */
        }
        .header .menu {
            float: left;
            color: white;
        }
        .header .account {
            float: right;
            color: white;
        }
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
            text-decoration: none;
        }
        .header a:hover {
            color: white;
        }
        .sub-header {
            height: 100px;
        }
        .sub-header .ht {
            height: 100px;
        }
        .sub-header .logo {
            width: 234px;
            float: left;
        }
        .sub-header .logo a {
            display: inline-block;
            margin-top: 22px;
        }
        .sub-header .logo img {
            height: 56px;
            width: 56px
        }
        .sub-header .menu-list {
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none; /* 去掉下划线 */
        }
        .sub-header .menu-list a:hover {
            color: #ff6700;
        }
    



    
        
            小米官网
            小米商城
            MIUI
            IoT
            云服务
            天星数科
            有品
            小爱开放平台
            企业团购
            资质证照
            协议规则
            下载app
            Select Location
        
        
            登录
            注册
            消息通知
        
        
    


    
        
            
                
        
        
            Xiaomi手机
            Redmi手机
            电视
            笔记本
            平板
            家电
            路由器
            服务中心
            社区

小结

案例：推荐区域



    
    Title
    
        body {
            margin: 0;
        }
        .left{
            float: left;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .header {
            background: #333;
        }
        .container {
            width: 1226px;
            margin: 0 auto; /* 上下为0，左右为auto */
        }
        .header .menu {
            float: left;
            color: white;
        }
        .header .account {
            float: right;
            color: white;
        }
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
            text-decoration: none;
        }
        .header a:hover {
            color: white;
        }
        .sub-header {
            height: 100px;
        }
        .sub-header .ht {
            height: 100px;
        }
        .sub-header .logo {
            width: 234px;
            float: left;
        }
        .sub-header .logo a {
            display: inline-block;
            margin-top: 22px;
        }
        .sub-header .logo img {
            height: 56px;
            width: 56px
        }
        .sub-header .menu-list {
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none; /* 去掉下划线 */
        }
        .sub-header .menu-list a:hover {
            color: #ff6700;
        }
        .slider .sd-img {
            width: 1226px;
            height: 460px;
        }
        .news{
            margin-top: 14px;
        }
        .news .channel{
            width: 228px;
            height: 164px;
                background: #5f5750;
            padding: 3px;
        }
        .news .channel .item{
            height: 82px;
            width: 76px;
            float: left;
            text-align: center;
            background: #5f5750;
        }
        .news .channel .item a{
            display: block;
            padding-top: 18px;
            font-size: 12px;
            color: #fff;
                opacity: .7; /* 透明度 */
            text-decoration: none;
        }
        .news .channel .item a:hover{
            opacity: 1;
        }
        .news .channel .item img{
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto 4px;
        }
        .news .list-item{
            width: 316px;
            height: 170px;
        }
    



    
        
            小米官网
            小米商城
            MIUI
            IoT
            云服务
            天星数科
            有品
            小爱开放平台
            企业团购
            资质证照
            协议规则
            下载app
            Select Location
        
        
            登录
            注册
            消息通知
        
        
    


    
        
            
                
        
        
            Xiaomi手机
            Redmi手机
            电视
            笔记本
            平板
            家电
            路由器
            服务中心
            社区
        
        
        
    


    
        
            
    


    
        
            
                
                    保障服务
                
            
            
                
                    保障服务
                
            
            
                
                    保障服务
                
            
            
                
                    保障服务
                
            
            
                
                    保障服务
                
            
            
                
                    保障服务

小结

设置不透明度

opacity: 0.5; /* 0-1 */

CSS知识点

2.1 hover(伪类)

可以hover到某一个标签，然后修改内部其他标签的样式，如.app:hover .download{ https://blog.csdn.net/zhangyifeng_1995/article/details/... }



    
    Title
    
        .c1:hover{
            color: red;
        }
        .download{
            display: none;
        }
        .app:hover .download{
            display: block;
        }
        .app:hover .title{
            color: red;
        }
    


联通
广西

    下载APP

2.2 after

after可以往尾部加东西(很少直接用)



    
    Title
    
      .c1:after{
        content: "大帅哥";
      }
    


    张三
    李四

after的应用-clearfix清除浮动

参考资料：clearfix（清除浮动）



    
    Title
    
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
        }
    



    1
    2
    3

将display设置为block的原因是:after是伪元素，要想获得clear属性必须转换为block

2.3 position

fixed



    
    Title
    
        .back{
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid red;
            right: 10px;
            bottom: 50px;
        }

无论浏览器窗口如何放大缩小，都在固定的位置

案例：对话框



    
    Title
    
        body{
            margin: 0;
        }
        .mask{
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.7;
            z-index: 999;
        }
        .dialog{
            position: fixed;
            width: 500px;
            height: 300px;
            background-color: white;
            border: 1px solid red;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: 200px;
            z-index: 1000;
        }
    


asdfasdfasdfsdf

relative和absolute的配合使用

absolute的元素位置会相对于relative的元素位置确定。出现二维码，出现对话框，其实都是基于relative和absolute实现的。



    
    Title
    
      .c1{
        height: 300px;
        width: 500px;
        border: 1px solid red;
        margin: 100px;
        position: relative;
      }
      .c1 .c2{
        height: 59px;
        width: 59px;
        background-color: #00FF7F;
        position: absolute;
        right: 0;
        top: 0;
      }

案例：小米商城下载APP



    
    Title
    
        body {
            margin: 0;
        }
        .left{
            float: left;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .header {
            background: #333;
        }
        .container {
            width: 1226px;
            margin: 0 auto; /* 上下为0，左右为auto */
        }
        .header .menu {
            float: left;
            color: white;
        }
        .header .account {
            float: right;
            color: white;
        }
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
            text-decoration: none;
        }
        .header a:hover {
            color: white;
        }
        .sub-header {
            height: 100px;
        }
        .sub-header .ht {
            height: 100px;
        }
        .sub-header .logo {
            width: 234px;
            float: left;
        }
        .sub-header .logo a {
            display: inline-block;
            margin-top: 22px;
        }
        .sub-header .logo img {
            height: 56px;
            width: 56px
        }
        .sub-header .menu-list {
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none; /* 去掉下划线 */
        }
        .sub-header .menu-list a:hover {
            color: #ff6700;
        }
        .slider .sd-img {
            width: 1226px;
            height: 460px;
        }
        .news{
            margin-top: 14px;
        }
        .news .channel{
            width: 228px;
            height: 164px;
                background: #5f5750;
            padding: 3px;
        }
        .news .channel .item{
            height: 82px;
            width: 76px;
            float: left;
            text-align: center;
            background: #5f5750;
        }
        .news .channel .item a{
            display: block;
            padding-top: 18px;
            font-size: 12px;
            color: #fff;
                opacity: .7; /* 透明度 */
            text-decoration: none;
        }
        .news .channel .item a:hover{
            opacity: 1;
        }
        .news .channel .item img{
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto 4px;
        }
        .news .list-item{
            width: 316px;
            height: 170px;
        }
        .app{
            position: relative;
        }
        .app:hover .download{
            display: block;
        }
        .app .download{
            display: none;
            position: absolute;
            height: 100px;
            width: 100px;
        }
    



    
        
            小米官网
            小米商城
            MIUI
            IoT
            云服务
            天星数科
            有品
            小爱开放平台
            企业团购
            资质证照
            协议规则
            下载app
                
                    
            
            Select Location
        
        
            登录
            注册
            消息通知
        
        
    


    
        
            
                
        
        
            Xiaomi手机
            Redmi手机
            电视
            笔记本
            平板
            家电
            路由器
            服务中心
            社区
        
        
        
    


    
        
            
    


    
        
            
                
                    保障服务
                
            
            
                
                    保障服务
                
            
            
                
                    保障服务
                
            
            
                
                    保障服务
                
            
            
                
                    保障服务
                
            
            
                
                    保障服务

2.4 border

透明色



    
    Title
  
    .c1{
      height: 50px;
      width: 500px;
      background-color: #5f5750;
      border-left: 3px solid transparent;
    }
    .c1:hover{
      border-left: 3px solid red;
    }
  


  菜单

2.5 背景色

容易，略

3.BootStrap

别人已经帮我们写好的css。想使用，需要下载和引用。

下载

使用

在页面上引用BootStrap

编写时，按BootStrap的规则编写+自定制

3.1初识

v3版bootstrap

目录结构：



    
    Title

3.2 导航

3.3栅格

https://v3.bootcss.com/css/#grid

把整体划分为12个格子

分类

响应式

根据屏幕的宽度不同，做不同的响应。

.col-sm-	页面宽度大于750px生效
.col-md-	970px
.col-lg-		1170px

非响应式
无论如何滑动页面大小，格子划分永远固定。
```
    1
    2
```

列偏移

3.4 container

container-fluid

 
  左边
  右边

container

 
  左边
  右边

3.5 面板

案例

效果图

布局图

代码



    
    Title
    
    
        .navbar {
            border-radius: 0;
        }
    



    
        
        
            
                Toggle navigation
                
                
                
            
            Brand
        
        
        
            Link (current)
                Link
                
                    Dropdown 
                    Action
                        Another action
                        Something else here
                        
                        
Separated link
                        
                        
One more separated link
                    
            

                    
                
                Submit
            
            Link
                
                    Dropdown 
                    Action
                        Another action
                        Something else here
                        
                        
Separated link
                    
            
    


 
    
        
            
                
                    
            
            
                Media heading
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            
        
        
            
                
                    
            
            
                Media heading
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            
        
        
            
                
                    
            
            
                Media heading
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            
        
        
                
                    «
                
            
            1
            2
            3
            4
            5
            
                
                    »
                
            
        
    
        
            最新推荐
            
                Panel content
                Panel content
                Panel content
            
        
        
            最新推荐
            
                Panel content
                Panel content
                Panel content
            
        
        
            最新推荐
            
                Panel content
                Panel content
                Panel content

案例：登录

效果图

定义宽度+区域居中
内边距
bootstrap表单

阴影



    
    Title
    
    
    
    



    
        
        
            
                Toggle navigation
                
                
                
            
            中国联通xx系统
        
        
        
            广西
                上海
            
登录
                注册
            
    


    
        
            
            表单区域
        
        
            
                
                    Email address
                    
                
                
                    Password
                    
                
                
                    
                    保 存
                
            
        
    
    
        
            
            数据列表
        
        
        #
                First Name
                Last Name
                操作
            
1
                Mark
                Otto
                
                    编辑
                    删除
                
            
2
                Jacob
                Thornton
                
                    编辑
                    删除
                
            
3
                Larry
                the Bird
                
                    编辑
                    删除
                
            
    «
        1 (current)
        2
        3
        4
        5
        »

#	First Name	Last Name	操作
1	Mark	Otto	编辑删除
2	Jacob	Thornton	编辑删除
3	Larry	the Bird	编辑删除

3.6 图标

bootstrap提供了一些图标，不多

font awesome组件

fontawesome网站

下载
引入

使用

示例：



    
    Title
    
    
    
        .navbar {
            border-radius: 0;
        }
        .more .more-item{
            display: inline-block;
            margin-right: 20px;
        }
    



    
        
        
            
                Toggle navigation
                
                
                
            
            Brand
        
        
        
            Link (current)
                Link
                
                    Dropdown 
                    Action
                        Another action
                        Something else here
                        
                        
Separated link
                        
                        
One more separated link
                    
            

                    
                
                
                    
                
            
            Link
                
                    Dropdown 
                    Action
                        Another action
                        Something else here
                        
                        
Separated link
                    
            
    


 
    
        
            
                
                    
            
            
                Media heading
                
                    
                    
                    
                    
                    
                
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
                
                    
                         2021-11-11
                    
                    
                         xxx
                    
                    
                         1000
                    
                    
                         1000
                    
                
            
        
        
            
                
                    
            
            
                Media heading
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            
        
        
            
                
                    
            
            
                Media heading
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            
        
        
                
                    «
                
            
            1
            2
            3
            4
            5
            
                
                    »
                
            
        
    
        
            
                
                最新推荐
            
            
                Panel content
                Panel content
                Panel content
            
        
        
            最新推荐
            
                Panel content
                Panel content
                Panel content
            
        
        
            最新推荐
            
                Panel content
                Panel content
                Panel content

BootStrap依赖

BootStrap依赖JavaScript的类库，JQuery。

下载JQuery，在页面上应用上JQuery。https://jquery.com/download/

在页面上应用BootStrap的JavaScript类库。

4.JavaScript

javascript,是一门编程语言。浏览器就是javascript语言的解释器。

dom和bom

相当于编程语言内置的模块。
例如：python中的re、random、time、json模块等。

jquery

相当于是编程语言的第三方模块。
例如：requests、openpyxl

4.1 代码位置

位置1：head的css样式下面

位置2：body的最尾部(推荐)

js代码的存在形式

可以写在当前html中

写在其他js文件中，导入使用

4.2 注释

在HTML中的注释

在css中的注释，代码块

/* 注释内容 */

在js中的注释，代码块

// 注释内容
/* 注释内容 */

4.3 编程语言中的变量



    
    Title


    
      var name ="高倩";
      console.log(name);

4.4 字符串类型

// 声明
var name = "高倩";
var name = String("高倩");
// 常见功能
var name="中国联通"
var v1 = name.length;
var v2 = name[0]; // = name.charAt(0)
var v3 = name.trim();
var v4 = name.substring(0, 2); // 前取后不取

案例：跑马灯



    
    Title


欢迎中国联通领导高倩莅临指导

    function show() {
        // 1.去HTML中找到某个标签并获取他的内容(DOM）
        var tag = document.getElementById("txt");
        var dataString = tag.innerText
        // 2.动态起来，把问二八年第一个字符放在字符串的最后面
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar;
        // 3.在HTML标签中更新内瓤
        tag.innerHTML = newText;
    }
    // javascript中的定时器，如：每1000ms执行一次show函数。
    setInterval(show, 1000);

4.5 数组

// 定义
var v1 = [11, 22, 33, 44];
var v2 = Array([11, 22, 33, 44]);
// 操作
v1[1]
v1[0] = "高倩";
v1.push("联通"); // 尾部追加 [11, 22, 33, 44, "联通"]
v1.unshift("联通"); // 尾部追加 ["联通", 11, 22, 33, 44]
v1.pop();
v1.shift();
v1.splice(索引位置, 1);
v1.splice(2, 1);
// 循环
for (var idx in v1){
	// idx=0/1/2/3 data=v1[idx]
}
for (var i=0; i
	// i=0/1/2/3 data=v1[i]
}

    
            var text = cityList[idx];
            // 创建id: 1, name: "郭智", age: 19},
        {id: 1, name: "郭智", age: 19},
        {id: 1, name: "郭智", age: 19},
        {id: 1, name: "郭智", age: 19},
        {id: 1, name: "郭智", age: 19},
    ];
    for (var idx in datalist) {
        var info = datalist[idx]
        var tr = document.createElement('tr');
        for (var key in info) {
            var td = document.createElement('td');
            var text = info[key];
            td.innerText = text;
            tr.appendChild(td);
        }
        // console.log(tr)
        var bodyTag = document.getElementById('body');
        bodyTag.appendChild(tr);
    }

        // 1.找到输入的标签
        var txtTag = document.getElementById('txtUser');
        // 2.获取input框中用户输入的内容
        var newString = txtTag.value;
        // 判断用户输入是否为空，只有不为空才能继续。
        if (newString.length  0) {
            var newTag = document.createElement('li');
            newTag.innerText = newString;
            var parentTag = document.getElementById('city');
            parentTag.appendChild(newTag);
            // 3.将input框内容清空
            txtTag.value = "";
        } else {
            alert("输入不能为空");
        }
    }

dom可以实现很多功能，但比较繁琐，页面上效果，一般用jQuery来实现/vue.js/react.js。

总结1

编码相关
计算机中的单位
字符串格式化(三种)
数据类型
运算符
推导式(简化生成数据)
函数编程
模块
面向对象

前端

6.jQuery

jQuery是一个javaScript第三方模块(第三方类库)。

基于jquery，自己开发一个功能。

现成的工具依赖jquery，例如：bootstrap动态效果。

6.1 初识jquery



    
    Title


中国联通


  // 利用jquery中的功能实现某些效果
  // 1.找到id=txt的标签  // 2.内容修改
  $("#txt").text("广西联通");

6.2 寻找标签(直接寻找)

id选择器：$("#txt")
样式选择器：$(".c1")
标签选择器：$("h1")
层级选择器：$(".c1 .c2 a")
多选择器：$(".c3,.c2,li")

属性选择器：$("input[name='n1']")

6.3 寻找标签(间接寻找)

找到上一个兄弟

找父子

案例：菜单的切换



    
    Title
    
        .menus {
            height: 200px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header {
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
            cursor: pointer;
        }
        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
        .hide {
            display: none;
        }
    



    
        上海
        
            宝山区
            青浦区
            浦东新区
            普陀区
        
    
    
        北京
        
            海淀区
            朝阳区
            大兴区
            昌平区
        
    



    function clickMe(self) {
        var hasHide = $(self).next().hasClass('hide');
        if (hasHide) {
            $(self).next().removeClass('hide');
        } else {
            $(self).next().addClass('hide');
        }
        // $(slef) -> 当前点击的那个标签
    }



    
    Title
    
        .menus {
            height: 200px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header {
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
            cursor: pointer;
        }
        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
        .hide {
            display: none;
        }
    



    
        上海
        
            宝山区
            青浦区
            浦东新区
            普陀区
        
    
    
        北京
        
            海淀区
            朝阳区
            大兴区
            昌平区
        
    
    
        上海2
        
            海淀区
            朝阳区
            大兴区
            昌平区
        
    
    
        北京2
        
            海淀区
            朝阳区
            大兴区
            昌平区
        
    



    function clickMe(self) {
        $(self).next().removeClass('hide');
        $(self).parent().siblings().find('.content').addClass('hide');
    }

6.4 操作样式

addClass
removeClass

hasClass

6.5 值的操作

6.6 事件



    
    Title

百度
谷歌
搜狗

$("li").click(function () { var text = $(this).text(); console.log(text); });

在jQuery中可以删除某个标签

内容
$("#c1").remove();
# 案例


  $("li").click(function () {
      $(this).remove();
  });

当页面框架加载完成之后执行代码(不必等img标签的图片传回完成)：



    
    Title

百度
谷歌
搜狗

$(function () { // 当页面的框架加载完成之后，自动就执行。 $("li").click(function () { $(this).remove(); }); })

4.7 案例：表格操作



    
    Title

ID	姓名	操作
1	张三
1	张三

$(function (){ $(".delete").click(function (){ $(this).parent().parent().remove() }) })

7.前端整合

HTML
CSS
JavaScrip、JQuery

BootStrap（动态效果依赖jQuery）



    
    Title
    
    
    
        .navbar {
            border-radius: 0;
        }
    



    
        
        
            
                Toggle navigation
                
                
                
            
            Brand
        
        
        
            Home
                Link
                Link
                
                    Dropdown 
                    Action
                        Another action
                        Something else here
                        
                        
Separated link
                        
                        
One more separated link
                    
            
登录
                注册
                
                    张三 
                    个人资料
                        我的账号
                        修改密码
                        
                        
注销
                    
            
    


    
    
        Launch demo modal
    
    
    
        
            
                
                    ×
                    Modal title
                
                
                    https://blog.csdn.net/zhangyifeng_1995/article/details/...
                
                
                    Close
                    Save changes
                
            
        
    


    
        Tooltip on left
    
    
        Tooltip on top
    
    Tooltip on bottom
    
    
        Tooltip on right
    




    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

案例：添加数据页面

人员信息录入功能，需要提供用户信息：

用户名、年龄、薪资、部门、入职时间（*）

对于事件的选择：不能输入；选择；插件：datetimepicker

下载插件

应用插件



    
    Title
    
    
    



    
        
            
                
                    姓名
                    
                        
                    
                
            
            
                
                    年龄
                    
                        
                    
                
            
        
        
            
                
                    薪资
                    
                        
                    
                
            
            
                
                    部门
                    
                        
                            IT部门
                            销售部门
                            运营部门
                        
                    
                
            
        
        
            
                
                    入职日期
                    
                        
                    
                
            
        
        
            
                
                    
                        提交
                    
                
            
        
    







    $(function () {
        $("#dt").datetimepicker({
            format: "dd MM yyyy - hh:ii",
            startDate: "0",
            language: "zh-CN",
            autoclose: true
        });
    })