前端 | kjg's blog

*

HTML和CSS之间的区别

性质不同

HTML是描述网页内容和结构的基本标记语言。而，CSS是HTML的扩展，它修改了网页的设计和显示。

HTML是网页的结构，CSS是网页的样式。例如如果把整个网页比喻成一个人，那么HTML就是骨头，CSS就是衣服。

语法不同

CSS声明位于大括号内，并且每个声明均由两部分组成：属性及其值，用冒号分隔。可以在一个声明中定义多个属性，每个属性之间用分号分隔。选择器：指示要设置样式的HTML元素。

注释的格式不同

HTML注释风格：<!-- 注释内容 -->      CSS注释风格：/*注释内容*/

HTML文件可以包含CSS代码，而CSS样式表绝对不能包含HTML代码。

即CSS可以在HTML文件中使用，但HTML不能在CSS样式表中使用。

JS

Javascript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象，与Web客户交互作用。例如可以设置鼠标悬停效果，在客户端验证表单，创建定制的HTML页面，显示警告框，设置cookie等等。

function jsHello{ alert(‘Hello World!’); }

把代码嵌入HTML语言中，它会在加载时弹出一个“Hello World”对话框。

HTML，裸体
CSS，好看
JavaScript，动态。
- 编程语言
- 类库（模块）【jQuery是javaScript的类库】

JQuery

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

BootStrap

Bootstrap是一个免费的前端框架，并且是基于html和JavaScript、css三者开发的框架，主要用于响应式网站上的结构和布局，Bootstrap的出现主要是简化Web工作者的工作，其中还包括对JavaScript中的动态调整。

HTML

编码

<meta charset="UTF-8">

浏览器标题

<head>

   <meta charset="UTF-8">

  <title>我的联通</title>

</head>

页面内容标题

   <!-- 默认块级标签 -->
<h1>1级标题</h1>
   <h2>2级标题</h2>
   <h3>3级标题</h3>
   <h4>4级标题</h4>
   <h5>5级标题</h5>
   <h6>6级标题</h6>

div和span

div，一个人占一整行。【块级标签】    
   <div>山东蓝翔</div>
   <div>挖掘机哪家强</div>
<!-- 在两行 -->

span，自己多大占多少。【内联标签】    
	<span>山东蓝翔</span>
  <span>挖掘机哪家强</span>
<!-- 在同一行 -->

超链接

<!-- 当前页面打开 -->
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>


<!-- 跳转到自己网站其他的地址 -->

<a href="http://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>


<!-- 当前页面打开 -->
<a href="/get/news">点击跳转</a>

<!-- 新页面打开 -->
<a href="/get/news" target="_blank">点击跳转</a>

图片

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

<!-- 直接显示别人的图片地址（防盗链）-->
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />

<!-- 显示自己的图片：- 自己项目中创建：static目录，图片要放在static -->
<img src="/static/wbq.png" />

<!-- 关于设置图片的高度和宽度 -->
<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />

小结

<!-- 划分 - 块级标签 -->
<h1></h1>
<div></div>
<!-- 行内标签 -->
<span></span>
<a></a>
<img />

列表

<ul>
   <li>中国移动</li>
   <li>中国联通</li>
   <li>中国电信</li>
</ul>


<ol>
   <li>中国移动</li>
   <li>中国联通</li>
   <li>中国电信</li>
</ol>

表格

<table>
   <thead>
  <tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
   </thead>
   <tbody>
  <tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
       <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
       <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
       <tr>  <td>13</td>  <td>郭智</td>  <td>19</td>    </tr>
       <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </tr>
   </tbody>
</table>

input系列

<input type="text" />
<input type="password">    
<input type="file"> 

<input type="radio" name="n1">男 <!-- 单选框 -->
<input type="radio" name="n1">女

<input type="checkbox">篮球 <!-- 多选框 -->
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球

<input type="button" value="提交"> -->普通的按钮
<input type="submit" value="提交"> -->提交表单

下拉框

<select>
       <option>北京</option>
       <option>上海</option>
       <option>深圳</option>
   </select>

   <select multiple>
       <option>北京</option>
       <option>上海</option>
       <option>深圳</option>
       <option>北京1</option>
       <option>上海1</option>
       <option>深圳1</option>
   </select>

多行文本

<textarea></textarea>

form标签

页面上的数据，想要提交到后台的条件:

form标签包裹要提交的数据的标签。

提交方式：method="get"
提交的地址：action="/xxx/xxx/xx"

在form标签里面必须有一个submit标签。
在form里面的一些标签：input/select/textarea 一定要写name属性

<input type="text" name="uu"/>

CSS

CSS应用方式(3种)

在标签上

<img src="..." style="height:100px" />

<div style="color:red;">中国联通</div>

在head标签中写style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>

<h1 class='c1'>用户登录</h1>

</body>
</html>

写到文件中

/*在flask项目中的static中创建common.css */
.c1{
    height:100px;
}

.c2{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c2'>用户登录</h1>
<h1 class='c1'>用户登录</h1>
    
</body>
</html>

选择器

ID选择器
#c1{

}

<div id='c1'></div>
类选择器（最多）
.c1{

}

<div clss='c1'></div>
标签选择器
div{

}

<div>xxx</div>

属性选择器

input[type='text']{
	border: 1px solid red;
}
.v1[xx="456"]{
	color: gold;
}

<input type="text">
<input type="password">

<div class="v1" xx="123">s</div>
<div class="v1" xx="456">f</div>
<div class="v1" xx="999">a</div>

后代选择器

.yy li{
    color: pink;
}
.yy > a{  /* 不加>s是子子孙孙 加>只对儿子起作用 */
    color: dodgerblue;
}

<div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>

关于选择器：

多：类选择器、标签选择器、后代选择器
少：属性选择器、ID选择器

样式

高度和宽度

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

注意事项：

宽度，支持百分比。
设置高度和宽度对行内标签,如<span>默认无效
对块级标签默认有效（但div霸道，即使右侧区域空白，也不给其他标签占用）

块级和行内标签

块级
行内
css样式：标签 -> display:inline-block

示例：行内&块级特性【能应用长度高度，又没有那么霸道】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;

            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">中国</span>

    <span class="c1">联通</span>

    <span class="c1">联通</span>

    <span class="c1">联通</span>
</body>
</html>

字体设置

颜色
大小
加粗 font-weight
字体格式 font-family
对齐方式 text-align: center ,line-height: 58px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: #00FF7F;
            font-size: 58px;
            font-weight: 600;
            font-family: Microsoft Yahei;
          	text-align: center; /* 水平方向居中 */
            line-height: 58px; /* 垂直方向居中 */
        }
    </style>
</head>
<body>
    <div class="c1">中国联通</div>
    <div>中国移动</div>
</body>
</html>

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>左边</span>
        <span style="float: right">右边</span>
    </div>
</body>
</html>

div默认块级标签（霸道），如果浮动起来，就不霸道了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
      	<!-- 这三个div可以水平相连 -->
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

如果你让标签浮动起来之后，就会脱离文档流。

这时候我们可以用style="clear: both;"将它拽回来。不加clear的话你好就与几个div同一行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item {
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: dodgerblue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>
    </div>
    <div>你好</div>
</body>
</html>

边距

内边距 padding

内边距会把容器撑大比如加内边距前div大小为 202 * 202 ，加后242 * 242

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

          	/* 等价于 padding: 20px */
          	/* padding: 20px 10px 5px 20px; 上 右 下 左 */
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold;">听妈妈的话</div>
        <div>
            小朋友你是否下水道发
        </div>
    </div>
</body>
</html>

外边距 margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
</body>
</html>

小结

body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？
body{
margin: 0;
}

内容居中

文本居中，文本会在这个区域中居中。

<div style="width: 200px; text-align: center;">武沛齐</div>

区域居中，自己要有宽度 + margin-left:auto;margin-right:auto

.container{
    width: 980px;
    margin: 0 auto;
}

<div class="container">
	adfasdf
</div>

a标签是行内标签，行内标签的高度、内外边距，默认无效。
文本和图片的垂直方向居中
- 本文 + line-height
- 图片 + 边距
a标签默认有下划线。 a.{text-decoration: none;}
鼠标放上去之后hover 【在header中<style>】
.c1:hover{
...
}
a:hover{

}

设置透明度 opacity:0.5; /* 0 ~ 1 */

CSS补充

hover

注意download以及display选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            color: red;
            font-size: 18px;
        }

        .c1:hover {
            color: green;
            font-size: 50px;
        }

        .c2 {
            height: 300px;
            width: 500px;
            border: 3px solid red;
        }

        .c2:hover {
            border: 3px solid green;
        }

        .download {
            display: none;
        }

        .app:hover .download {
            display: block;
        }
        .app:hover .title{
            color: red;
        }
    </style>
</head>
<body>
<div class="c1">联通</div>
<div class="c2">广西</div>

<div class="app">
    <div class="title">下载APP</div>
    <div class="download">
        <img src="images/qcode.png" alt="">
    </div>
</div>

</body>
</html>

after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after{
            content: "大帅哥";
        }
    </style>
</head>
<body>
    <div class="c1">A</div>
    <div class="c1">AA</div>
</body>
</html>

输出： A大帅哥 AA大帅哥

position

fixed 固定在窗口的某个位置

案例：返回顶部（back永远在窗口的一个位置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .back{
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid red;

            right: 10px;
            bottom: 50px;
        }
    </style>
</head>
<body>

<div style="height: 1000px;background-color: #5f5750"></div>

<div class="back"></div>


</body>
</html>

案例：对话框

z-index 谁的z-index大谁就在上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .dialog {
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;

            left: 0;
            right: 0;
            margin: 0 auto;

            top: 200px;

            z-index: 1000;
        }

        .mask {
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.7;
            z-index: 999;
        }
    </style>
</head>
<body>


<div style="height: 1000px">asdfasdfasd</div>


<div class="mask"></div>
<div class="dialog"></div>


</body>
</html>

relative与absolute（一般成对出现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .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: 20px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="c1">

        <div class="c2"></div>

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

border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            border-left: 3px solid #00FF7F;
            margin: 100px;
        }

    </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

background-color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .c1{
            height: 50px;
            width: 500px;
            margin: 100px;
            background-color: #5f5750;
        }

    </style>
</head>
<body>
    <div class="c1">菜单</div>
</body>
</html>

BootStrap

是别人帮我们已写好的CSS样式，我们如果想要使用这个BootStrap：

下载BootStrap 并解压bootstrap-3.4.1-dist
使用时
- 在页面上引入BootStrap
- 编写HTML时，按照BootStrap的规定来编写 + 自定制。

使用步骤

将bootstrap拷贝到static/plugins/下

在<head>标签中引入bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  	<!--  bootstrap.min.css一样的 -->
    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>

</body>
</html>

在class标签中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
    <input type="button" value="提交">
    <input type="button" value="提交" class="btn-primary">
    <input type="button" value="提交" class="btn-danger">
    <input type="button" value="提交" class="btn-group-xs">
    <input type="button" value="提交" class="btn-success">
</body>
</html>

栅格系统

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

把整体划分为了12格

分类

响应式，根据屏幕宽度不同

.col-lg-   <!-- 1-12 页面宽度大于1170px则左右堆放变为上下堆放 -->
.col-md-   <!-- 页面宽度大于970px才生效 -->
.col-sm-   <!-- 页面宽度大于750px才生效 -->

非响应式（总是水平排列）

<div class="col-xs-6" style="background-color: red">1</div>
<div class="col-xs-6" style="background-color: green">2</div>

列偏移（不用在左边填充div了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
    <div>
        <div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div>
    </div>
</body>
</html>

container

<div class="container-fluid"> <!-- 平铺 左右居中 -->
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

<div class="container clearfix"> <!-- 清除浮动 -->
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

<div class="container"> <!-- 默认宽度=1170px 左右居中 -->
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

面板

https://v3.bootcss.com/components/

案例：登录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        body{
            margin: 0;
        }
        .a{
            width:300px;
            border: 1px solid snow;
            top: 300px;
            padding: 10px;
            margin-top: 400px;
            margin-left: auto;
            margin-right: auto;
            border-radius: 10px;
            box-shadow: 5px 5px  10px #aaa;	/* x轴 y轴 模糊度 颜色 */
        }
        .b{
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="a">
        <div class="b"><h2>用户登录</h2></div>
            <form>
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="b">
                    <button type="submit" class="btn btn-default ">提交</button>
                </div>
            </form>
    </div>

</body>
</html>

图标

bootstrap提供，不多。
fontawesome组件: https://fontawesome.dashgame.com/
- 下载
- 引入（将文件夹拖入static/）
  <link rel="stylesheet" href="../static/plugins/font-awesome-4.7.0/css/font-awesome.css">
- 使用

BootStrap依赖

（引入js才能发挥出BootStrap的动态效果）

1.将js文件拷贝至项目/static/js/目录下

2.在<body>标签中写下：

<script src="../static/js/jquery-3.6.0.js"></script>
<script src="../static/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

JavaScript

JavaScript是一门编程语言。

JavaScript的意义是什么？- 让程序实现一些动态效果

新建项目javascript01

javascript应用方式（两种）

当前HTML中。<head>标签中或者<body>标签中【推荐】都行

<script type="text/javascript">
	// 编写JavaScript代码
</script>

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

注释

HTML的注释
CSS的注释，放在style代码块里
/* 注释内容 */
JavaScript的注释，放在script代码块里
// 注释内容

/* 注释内容 */

变量

Python，编程语言。
name = "高倩"
print(name)

JavaScript，编程语言。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        var name = "高倩";
        
        console.log(name); //输出至控制台，浏览器右键->检查->console	
    </script>
</body>
</html>

字符串类型

// 声明
var name = "高倩";
// or
var name = String("高倩");

// 常见功能
var name = "中国联通";

var v1 = name.length; 
var v2 = name[0];   // name.charAt(3)
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;

        // 2.动态起来，把文本中的第一个字符放在字符串的最后面。
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar;

        // 3.在HTML标签中更新内容
        tag.innerText = newText;
    }

    // JavaScript中的定时器，如：每1s执行一次show函数。
    setInterval(show, 1000);
</script>
</body>
</html>

数组

// 定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

// 操作

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)  1为固定写法
v1.splice(2,1);  // 索引为2的元素删除 [11,22,44];

// 这里循环的其实是索引
var v1 = [11,22,33,44];
for(var idx in v1){
    // idx=0/1/2/3/    data=v1[idx]
}

// or
var v1 = [11,22,33,44];
for(var i=0; i<v1.length; i++){
    // i=0/1/2/3   data=v1[idx]
}

案例：动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="city">
        <!-- <li>北京</li> -->
    </ul>

    <script type="text/javascript">

        // 发送网络请求，获取数据
        var cityList = ["北京","上海","深圳"];
        for(var idx in cityList){
            var text = cityList[idx];

            // 创建 <li></li>
            var tag = document.createElement("li");
            // 在li标签中写入内容
            tag.innerText = text;

            // 添加到id=city那个标签的里面。DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>
</html>

对象【即python中的字典】

info = { // python中的写法 js中可以这么写
    "name":"高倩",
    "age":18
}

info = { //js也可以这么写
    name:"高倩",
    age:18
}

info.age
info.name = "郭智"

// info["age"]
info["name"] = "郭智"

delete info["age"]

info = {
    name:"高倩",
    age:18
}

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="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">

    </tbody>
</table>

<script type="text/javascript">
    var info = {id: 1, name: "郭智", age: 19};

    var tr = document.createElement("tr");
    for (var key in info) {
        var text = info[key];
        var td = document.createElement('td');
        td.innerText = text;
        tr.appendChild(td);
    }
    var bodyTag = document.getElementById("body");
    bodyTag.appendChild(tr);

</script>
</body>
</html>

条件语句

if ( 条件 )  {
    
}else{
    
}

函数

function func(){
    ...
}
    
func()

*DOM【不用记，后期用jQuery】

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

获取HTML内容

// 根据ID获取标签
var tag = document.getElementById("xx");

// 获取标签中的文本
tag.innerText

// 修改标签中的文本
tag.innerText = "哈哈哈哈哈";

// 创建标签 <div>哈哈哈哈哈</div>
var tag = document.createElement("div");

// 标签写内容
tag.innerText = "哈哈哈哈哈";

<ul id="city">
	<li>北京</li>
</ul>

<script type="text/javascript">
	var tag = document.getElementById("city");
    
    // <li>北京</li>
	var newTag = document.createElement("li");
    newTag.innerText = "北京";
    
    tag.appendChild(newTag);
</script>

事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">

</ul>

<script type="text/javascript">
    function addCityInfo() {

        var newTag = document.createElement("li");
        newTag.innerText = "联通";

        var parentTag = document.getElementById("city");
        parentTag.appendChild(newTag);
    }

</script>
</body>
</html>

<!-- 将用户输入的值动态填充入城市列表 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser"/>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">

</ul>

<script type="text/javascript">
    function addCityInfo() {
        // 1.找到输入标签
        var txtTag = document.getElementById("txtUser");

        // 2.获取input框中用户输入的内容
        var newString = txtTag.value;

        // 判断用户输入是否为空，只有不为空才能继续。
        if (newString.length > 0) {
            // 3.创建标签 <li></li> 中间的文本信息就是用户输入的内容
            var newTag = document.createElement("li");
            newTag.innerText = newString;

            // 4.标签添加到ul中
            var parentTag = document.getElementById("city");
            parentTag.appendChild(newTag);

            // 3.将input框内容清空
            txtTag.value = "";
        }else{
            alert("输入不能为空");
        }

    }

</script>
</body>
</html>

实际开发中很少手写DOM操作，而是用一个封装了DOM的类库——jquery来实现【企业中更高级的框架还有vue.js和react.js】

j Q u e r y

应用 j Q u e r y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1 id="txt">中国联通</h1>


<script src="static/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // 利用jQuery中的功能实现某些效果
    
    $("#txt").text("广西移动");

</script>

</body>
</html>

j Q u e r y 选择器

直接寻找

ID选择器

<h1 id="txt">中国联通</h1>
<h1>中国联通</h1>
<h1>中国联通</h1>

$("#txt")

样式选择器

<h1 class="c1">中国联通1</h1>
<h1 class="c1">中国联通2</h1>
<h1 class="c2">中国联通3</h1>

$(".c1")

标签选择器

<h1 class="c1">中国联通1</h1>
<div class="c1">中国联通2</h1>
<h1 class="c2">中国联通3</h1>

$("h1")

层级选择器

<h1 class="c1">中国联通1</h1>
<h1 class="c1">
	<div class="c2">
        <span></span>
        <a></a>
    </div>
</h1>
<h1 class="c2">中国联通3</h1>

$(".c1 .c2 a")

多选择器

<h1 class="c1">中国联通1</h1>
<h1 class="c1">
	<div class="c3">
        <span></span>
        <a></a>
    </div>
</h1>
<h1 class="c2">中国联通3</h1>
<ul>
    <li>xx</li>
    <li>xx</li>
</ul>

$("#c3,#c2,li")

属性选择器

<input type='text' name="n1" />
<input type='text' name="n1" />
<input type='text' name="n2" />

$("input[name='n1']")

间接寻找

找到兄弟

<div>
    <div>北京</div>
    <div id='c1'>上海</div>
    <div>深圳</div>
    <div>广州</div>
</div>

$("#c1").prev()        // 上一个
$("#c1")
$("#c1").next()        // 下一个
$("#c1").next().next() // 下一个、下一个

$("#c1").siblings()    // 所有的系统

找父子

<div>
    <div>
        <div>北京</div>
        <div id='c1'>
        	<div>青浦区</div>
        	<div class="p10">宝山区</div>
        	<div>浦东新区</div>
        </div>
        <div>深圳</div>
        <div>广州</div>
    </div>
    <div>
        <div>陕西</div>
        <div>山西</div>
        <div>河北</div>
        <div>河南</div>
    </div>
</div>

$("#c1").parent()            // 父亲
$("#c1").parent().parent()   // 父亲、父亲

$("#c1").children()                // 所有的儿子
$("#c1").children(".p10")          // 所有的儿子中寻找class=p10

$("#c1").find(".p10")              // 去所有子孙中寻找class=p10
$("#c1").find("div")              // 去所有子孙中寻找div标签

案例：菜单的切换【重要】

版本1：一开始隐藏，点击一下显示菜单栏，但收不回去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
        }
        .menus .content a{
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海</div>
            <div class="content hide">
                <a>宝山区</a>
                <a>青浦区</a>
                <a>浦东新区</a>
                <a>普陀区</a>
            </div>
        </div>

        <div class="item">
            <div class="header" onclick="clickMe(this);">北京</div>
            <div class="content hide">
                <a>海淀区</a>
                <a>朝阳区</a>
                <a>大兴区</a>
                <a>昌平区</a>
            </div>
        </div>
    </div>

    <script src="static/jquery-3.6.0.min.js"></script>
    <script>
        function clickMe(self) {
            // $(self)  -> 表示当前点击的那个标签。
            // $(self).next() 下一个标签
            // $(self).next().removeClass("hide");   删除样式
            $(self).next().removeClass("hide");
        }
    </script>
</body>
</html>

版本2 ，其余不变，但再次点击能够收回

<script src="static/jquery-3.6.0.min.js"></script>
<script>
    function clickMe(self) {
        var hasHide = $(self).next().hasClass("hide");
        if(hasHide){
            $(self).next().removeClass("hide");
        }else{
            $(self).next().addClass("hide");
        }
    }
</script>

版本3 ，点击其中一栏，其他栏如果已经展开的话，要收回。

<script>
   	function clickMe(self) {
       	// 让自己下面的功能展示出来
       	$(self).next().removeClass("hide");

       	// 找父亲，父亲的所有兄弟，再去每个兄弟的子孙中寻找 class=content，添加hide样式
       	$(self).parent().siblings().find(".content").addClass("hide");
   	}
</script>

操作样式

addClass
removeClass
hasClass

值的操作

获取已经存在的内容用.text

<div id='c1'>内容</div>

$("#c1").text()        // 获取文本内容
$("#c1").text("休息")   // 设置文本内容

获取用户输入的内容用.val

<input type='text' id='c2' />

$("#c2").val()            // 获取用户输入的值
$("#c2").val("哈哈哈")     // 设置值

案例：动态创建数据

<!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.0.js"></script>
<script>
    function getInfo() {
        // 1.获取用户输入的用户名和密码
        var username = $("#txtUser").val();
        var email = $("#txtEmail").val();
        var dataString = username + " - " + email;

        // 2.创建li标签，在li的内部写入内容。 $("<li>")
        var newLi = $("<li>").text(dataString);

        // 3.把新创建的li标签添加到ul里面。
        $("#view").append(newLi);
    }

</script>
</body>
</html>

绑定事件

原生javascript

<input type="button" value="提交" onclick="getInfo()"/>

<script>
    function getInfo() {
        
    }
</script>

jQuery

<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>

<script>
    $("li").click(function(){
        // 点击li标签时，自动执行这个函数；
        // $(this)  当前你点击的是那个标签。
    });
</script>

例子

<!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/jquery-3.6.0.min.js"></script>
<script>
    $("li").click(function () {
        var text = $(this).text();
        console.log(text);
    });

</script>
</body>
</html>

删除标签

<div id='c1'>内容</div>

<script>
	$("#c1").remove();
</script>

例子

<!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/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        
        // 当页面的框架加载完成之后，自动就执行。
        $("li").click(function () {
            $(this).remove();
        });

    });
</script>
</body>
</html>

前端整合

HTML
CSS
JavaScript、jQuery【JavaScript方便版】
BootStrap（动态效果依赖jQuery）

*

HTML和CSS之间的区别

JS

JQuery

BootStrap

HTML

编码

浏览器标题

页面内容标题

div和span

超链接

图片

小结

列表

表格

input系列

下拉框

多行文本

form标签

CSS

CSS应用方式(3种)

选择器

样式

高度和宽度

块级和行内标签

字体设置

浮动

边距

内边距 padding

外边距 margin

小结

CSS补充

hover

after

position

案例：返回顶部（back永远在窗口的一个位置）

案例：对话框

relative与absolute（一般成对出现）

border

background-color

BootStrap

使用步骤

导航

栅格系统

container

面板

案例：登录

图标

BootStrap依赖

JavaScript

javascript应用方式（两种）

注释

变量

字符串类型

案例：跑马灯

数组

案例：动态数据

对象【即python中的字典】

案例： 动态表格

条件语句

函数

*DOM【不用记，后期用jQuery】

j Q u e r y

应用 j Q u e r y

j Q u e r y 选择器

直接寻找

间接寻找

案例：菜单的切换【重要】

操作样式

值的操作

案例：动态创建数据

绑定事件

删除标签

前端整合

案例：动态表格