No.018-Python-学习之路-前端的基础知识

一. 实际使用中的规范

前端三大组建-HTML <逻辑上的人>+ CSS<漂亮的衣服> + JAVA-Script<让人动起来>

1.1 正确的HTML代码姿势

Q：在一段代码中如何实现动作、样式、结构相分离的页面？

1.1.1 DOM0的页面写法

以下的写法，在实际功能使用中没有问题，但是整体特别不清晰，未实现各种不同模块的分离；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-0</title>
</head>
<body>
    <div style="display: inline-block; height: 48px; width: 100px;background: antiquewhite;" onclick="f()">
        结构
    </div>
    <script>
        function f() {
            console.log("hello World.")
        }
    </script>
</body>

</html>

1.1.2 正确姿势DOM1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM-0</title>
    <style>
        .pg-head{
            display: inline-block;
            height: 48px;
            width: 100px;
            background: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="p1" class="pg-head">
        结构
    </div>
    <script>
        var f = document.getElementById("p1");
        console.log(f) //写一行看有一行，避免问题无法定位
        f.onclick = function (){
            console.log("动作.")
        }
    </script>
</body>

</html>

1.1.3 正确姿势的好处

使整个页面条理分明，宜写，宜读，宜改，专业；

下面例子的需求时，在鼠标移动到表格某行时变色，移走恢复；

用到两个事件及一个关键字：
- onmouseover：当鼠标移到上面时触发；
- onmouseout：当鼠标移走时触发；
- this关键字：谁<标签对象>调用这个函数，那么这个this指向谁；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tr变色</title>
</head>
<body>
    <table border="1" width="300px">
        <tr><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td></tr>
    </table>

    <script>
        var myT = document.getElementsByTagName("tr");
        var len = myT.length;
        for (var i=0;i<len;i++){
            myT[i].onmouseover = function (){
                this.style.backgroundColor = "red";
            }
            myT[i].onmouseout = function (){
                this.style.backgroundColor = "";
            }
        }
    </script>
</body>
</html>

二. HTML

2.1 前言

2.1.1 http简介

http是一个无状态的socket通信，即完成一次通信，即断开连接。

# 模拟一个http server类型的socket：

import socket

def hand_request(client):
    buf = client.recv(1024)
    print(buf)
    client.send(bytes("HTTP/1.1 200 OK\r\n\r\n", encoding="utf-8"))
    client.send(bytes("Hello World", encoding="utf-8"))

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost', 8000))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        hand_request(connection)
        connection.close()

if __name__ == '__main__':
    main()

如果将返回的字符串变化下：

client.send(bytes("<h1 style='background-color:red;'>Hello World", encoding="utf-8"))

如上，客户端与服务端交互时，返回的永远是字符串；而之所以浏览器能显示成红色，原因是浏览器做了解析。

So HTML就是一整套浏览器解析服务端返回的字符串的规则。

2.2 HTML规则学习

本地测试时，可以使用chrome类型访问，或借助于pycharm自动创建的socket服务端测试；

2.2.1 html名词及标签分类

标签：即这种，两种尖括号对应的即为一个标签，这个为html标签，相应的则是head标签；
标签的分类1：
- 自闭合标签，较少，没几个，自闭合标签可以加/ ，建议加上，同时标签大小写不敏感，建议加/
- 主动闭合标签 hill
标签的分类2：
- 块级标签：即使内容再少也占一行，如h标签，p标签
  - 特点：可以设置高度，宽度，padding，margin；
- 行内标签：自己多宽占多宽，如span标签，a标签
  - 特点：无法设置高度，宽度，padding， margin；
标签与标签之间是可以存在嵌套的关系；
标签存在的意义：
- 定位文本时容易
- 更容易支持css及js操作
标签的属性：在中，lang=“en”就是标签的属性；
注释：<-- 注释的内容 -->
html在整个html文档中只能有一个
head标签，即整个文档的大脑，在head中定义的都是内在的东西，除了title标签；

注：使用chrome->审查元素->可以定位某个元素及查看样式；

<!DOCTYPE html> <!--表明解析这个文档所需使用的规则即协议-->
<html lang="en"> <!--html标签类似与一个人，整个文档只能有一个，标签内可以写属性-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com/">百度</a>
</body>
</html>

2.2.2 head标签及其内部标签

head标签，即整个文档的大脑，在head中定义的都是内在的东西，除了title标签；

2.2.2.1 meta标签

metadata information提供有关页面的元信息，如：页面编码，刷新，跳转，针对搜索引擎和更新频度的描述和关键词；

页面编码（告诉浏览器是什么编码）

<meta http-equiv="content-type" content="text/html;charset=utf-8">

刷新和跳转（不常用，js也可完成这个任务）

<!--30s刷新-->
<meta http-equiv="Refresh" Content="30">
<!--5s跳转-->
<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com"/>

关键词（用于搜索）

<meta name="keywords" content="书本，小说，装房，涩涩，JOY">

描述（描述网站）

<meta name="description" content="I love little apple so much.">

X-UA-Compatible

IE6使用微软自己的规则，IE8即支持旧规则也支持新模式的兼容模式，现在不需要支持就规则了，这个就是X-UA-Compatible设置选项。

<!--向上兼容IE9-->
<meta http-equiv="X-UA-Compatible" content="IE=EnulateIE9"/>
<!--向上兼容IE10->8,可间歇-->
<meta http-equiv="X-UA-Compatible" content="IE=IE10;IE=IE9:IE=IE8"/>

2.2.2.2 title标签

指定网页标签中的内容
```
<title>百度一下</title>
```

2.2.2.3 link标签

指定网页标签图标

<link rel="shortcut_ico" href "image/favicon.ico">

欠

2.2.2.4 style标签

欠

2.2.2.5 script标签

欠

2.2.3 body标签

body标签中的标签尤为重要

2.2.3.1 图标

如在body中表示空格，直接打的空格一个与多个同义，所以可以使用符号代替空格： 即空格符号。如在body中表使<>这个语言图标，如果想表使可使用符号 < 及 >

图标非常多，不需要特别记忆，就是用特定的组合来表使一些特殊的字符，比如空格，<>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com/">百&nbsp;&lt;a&gt;&nbsp;度</a>
</body>
</html>

2.2.3.2 P标签与br标签与hr标签

P标签表示一个段落, 段落间空格比较大，段落内换行间距相对较小；换行使用
标签，分割线使用
标签；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com/">百&nbsp;&lt;a&gt;&nbsp;度</a>
    <p>adfadsfqwerasdfasdfadsfas<br>df</p>
    <hr/>
    <p>adfadsfqwerasdfas</BR>dfadsfasdf</p>
</body>
</html>

2.2.3.3 H1-H6标签

定义标题使用H1->H6标签，从H1->H6标题大小逐渐减少。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Bruce</h1>
    <h2>Bruce</h2>
    <h3>Bruce</h3>
    <h4>Bruce</h4>
    <h5>Bruce</h5>
    <h6>Bruce</h6>

</body>
</html>

2.2.3.4 span标签

行内标签span就是一个白板（什么特性都不带的），主要便于css对其进行操作；

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

2.2.3.5 div标签

块级标签div也是一个白板标签，使用非常的多，可以用于构造任何标签。

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

2.2.3.6 向后台提交数据

form标签定义一个表单，input标签定义一个交互框，可以设置不同类型获取各种数据；

form定义一个表单，有两个属性：
- action定义当submit动作发生时触发的操作，比如请求一个url；
- method定义了针对url的请求方式，默认为get，可以设置为post;
- get与post的区别在于一个会将数据附在url后传过去，一个会放在http请求体了传过去；
input系列定义了用户的输入，常用属性：
- type属性定义input的类型，常用的有：
  - text 明文获取一些文本
  - password 隐藏着获取一些文本
  - button 制造一个按钮，只是定义了一个动作，本身没有作用；
  - submit 提交一个form
  - radio 单选框，需要name一致实现互斥，value定义返回值，默认勾选使用checked="checked"
  - checkbox 复选框，同一name后台获取list，使用get_argument获取，value定义返回值，默认勾选使用checked="checked"
  - file 提交一个文件，需要通过name来获取，提交依赖与form表单的一个属性：
    - enctype="multipart/form-data" 意味将数据一点一点的提交
  - reset 即重置，将值还原回原来的状态
- name 方法在获取数据类输入时定义赋值的dict的key；
- value指定input的默认值，针对button即submit这种按钮则是描述；
- input有属性enable<默认>，与disable；设置input可输入或者不可输入；
textarea标签，多行输入，有name属性，非自闭合，默认值在中间；
select + option，下拉框，select中有name，而option有value；
- 默认option属性selected=“selected”；
- select中size属性设置显示多个；
- select中多选multiple="multiple";

前端页面交互

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://localhost:8888/index" method="get">
        <input type="text" name="user"/>value
        <input type="password" name="pwd" value="Bruce"/>
        <input type="password" name="email"/>
        <input type="button" value="登陆1"/>
        <input type="submit" value="登陆2"/>
    </form>
</body>

后端程序获取并回应

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):

    def get(self):
        print("From Get")
        u = self.get_argument('user')
        e = self.get_argument('email')
        p = self.get_argument('pwd')
        if u == 'bruce' and p == '123' and e == 'bruce@163.com':
            self.write("GET OK")
        else:
            self.write("GET WRONG")

    def post(self, *args, **kwargs):
        print("From Post")
        u = self.get_argument('user')
        e = self.get_argument('email')
        p = self.get_argument('pwd')
        if u == 'bruce' and p == '123' and e == 'bruce@163.com':
            self.write("POST OK")
        else:
            self.write("POST WRONG")

application = tornado.web.Application([(r"/index", MainHandler)])

if __name__ == '__main__':
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()

get请求成功：

post请求成功：

后端数据获取并处理

另外一个提交表单的例子->向别人的url提交请求

比如sogou搜索中一个请求：https://www.sogou.com/web?query=bruce，我们只要向url请求并附上参数query即可完成

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="https://www.sogou.com/web" method="get">
        <input type="text", name="query"/>
        <input type="submit", value="搜索">
    </form>
</body>
</html>

搜索后跳转

form表单中只有input的标签是可submit的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <p>请选择性别：</p>
            男：<input type="radio" name="gender" value="1" checked="checked">
            女：<input type="radio" name="gender" value="2">
            <p>爱好</p>
            篮球：<input type="checkbox" name="behavor" value="1" checked="checked"/>
            足球：<input type="checkbox" name="behavor" value="2"/>
            <p>技能</p>
            代码：<input type="checkbox" name="skill" value="1"/>
            网络：<input type="checkbox" name="skill" value="2"/>
            <p>上传文件</p>
            <input type="file" name="file" value="1"/>
            <p>简要概述自己</p>
            <textarea name="info">我是一个好人.</textarea>
            <span>
                <select name="city1">
                    <option value="1">北京</option>
                    <option value="2">南京</option>
                </select>
            </span>
            <span>
                <select name="city2" size="2">
                    <option value="1">北京</option>
                    <option value="2">南京</option>
                    <option value="3">上海</option>
                </select>
            </span>
            <span>
                <select name="city3" size="3" multiple="multiple">
                    <option value="1">北京</option>
                    <option value="2">南京</option>
                    <option value="3">上海</option>
                </select>
            </span>
        </div>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>

</body>
</html>

2.2.3.7 A标签

用于做超链接的，用于做跳转及锚<跳转到url的特定位置，如某个div， div的id不可重复；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="#id1">第一章</a>
    <a href="#id2">第二章</a>
    <a href="#id3">第三章</a>
    <a href="#id4">第四章</a>
    <div id="id1" style="height: 600px;">第一章的内容</div>
    <div id="id2" style="height: 600px;">第二章的内容</div>
    <div id="id3" style="height: 600px;">第三章的内容</div>
    <div id="id4" style="height: 600px;">第一四章的内容</div>
</body>
</html>

2.2.3.8 img标签

img标签显示图片，属性如下：

src 定义图片url
title 定义鼠标放到图片上显示的问题
style是css样式设计，图片大小，像素之类的；
alt 当图片无法找到时显示的文字；
如果要点图片跳转可以包在a标签内；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com">
        <img src="111.jpg" title="大美女" style="height: 76px; width: 136px;" alt="图片不见了">
    </a>

</body>
</html>

2.2.3.9 列表标签

ol + li 是有序列表
ul + li 是无需列表
dl + dt + dd 是带title的列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ol>
        <li>line1</li>
        <li>line2</li>
        <li>line3</li>
    </ol>

    <ul>
        <li>line1</li>
        <li>line2</li>
        <li>line3</li>
    </ul>

    <dl>
        <dt>title</dt>
        <dd>context1</dd>
        <dd>context2</dd>
        <dt>title</dt>
        <dd>context1</dd>
    </dl>
</body>
</html>

2.2.3.10 表格标签

table定义一个表格
tr标签表示一行
td标签表示一行内的列
- colspan=“n”，横向占用表格宽度，默认为1，用于横向合并单元格
- rowspan="n"，纵向占用表格宽度，默认为1，用户纵向合并单元格
thead标签标识表头行
tbody标签标识内容行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <td>主机名</td>
        <td>端口</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>192.168.0.1</td>
        <td>80</td>
        <td>
            <a href="https://www.baidu.com">跳转百度</a>
            <a href="table.html">跳转自己</a>
        </td>
    </tr>
    <tr>
        <td>192.168.0.2</td>
        <td>19002</td>
        <td>
            <a href="https://www.baidu.com">跳转百度</a>
            <a href="table.html">跳转自己</a>
        </td>
    </tr>
    <tr>
        <td>192.168.0.2</td>
        <td colspan="2" rowspan="2">19002</td>
    </tr>
    <tr>
        <td>192.168.0.3</td>
    </tr>
    </tbody>

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

2.2.3.11 label标签

label标签是一个行内标签，一般与input标签一起使用，属性：

for 指定与谁的关联，点击label文字后，光标会移动到相关的input；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for="username">用户名</label>
    <input id="username" type="text" name="user"/>
</body>
</html>

2.2.3.12 fieldset标签

fieldset标识一个框，左上角有一个缺口，可使用legend标签在缺口处输入问题；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>用户登录相关</legend>
        <label for="username">用户名</label>
        <input id="username" type="text" name="user"/>
        <br/>
        <br/>
        <label for="pwd">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
        <input id="pwd" type="password" name="pwd"/>
    </fieldset>
</body>
</html>

2.2.4 事件

HTML4的新特性，提供了一种依据一些在浏览器中的行为触发相关时间的属性，详细戳这里

2.2.4.1 常用事件

onclick // 当标签被点击时触发
onfocus // 当用户光标移动到时触发
onblur // 当用户光标移走后触发
onmouseover //当鼠标移动到当前标签区域
onmouseout //当鼠标从当前标签区域移走

三. CSS

css的作用就是给html这个人，穿上相应的衣服，即装饰所有的html标签；

3.1 css装饰html标签的方式

3.1.1 标签内定义style属性

可以直接在各个标签内直接定影style属性；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 48px; background-color: #ff000040;">1</div>
    <div>2</div>
    <div>3</div>
</body>
</html>

3.1.2 在head中定义相关的选择器

html的head中的style标签内，可以定义各种css相关的选择器用于进行html及css的关联；

常见的选择器类型有：

id选择器
class选择器
标签选择器
层级选择器
组合选择器
属性选择器

3.1.2.1 id选择器

id选择器格式：

style标签中填写#+id名称<开头为字母>
在html变迁中定义相关的id即可关联；
这种关联方式并不常用；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css01</title>
    <style>
        #i1{
            background-color: #ffef00ab;
            height: 48px;
        }
        #i2{
            background-color: #ff000040;
            height: 48px;
        }
        #i3{
            background-color: #ff600040;
            height: 48px;
        }
    </style>
</head>
<body>
<div id="i1">1</div>
<div id="i2">2</div>
<div id="i3">3</div>
</body>
</html>

3.1.2.2 class选择器

class选择器格式：

在style标签中定义.+class标识；
在html标签中定义class属性指向class标识完成关联；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css01</title>
    <style>
        .i1{
            background-color: #ffef00ab;
            height: 48px;
        }
    </style>
</head>
<body>
<div class="i1">1</div>
<div>2</div>
<div>3</div>
</body>
</html>

3.1.2.3 标签选择器

所以对于body标签，只要定义.body即可修改整体的页面布局；

标签选择器格式：

在style中指定某种标签的样式，则会关联html中所有的该类标签；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css01</title>
    <style>
        div{
            background-color: #ffef00ab;
            height: 48px;
        }
    </style>
</head>
<body>
<div class="i1">1</div>
<span>2</span>
<div>3</div>
</body>
</html>

3.1.2.4 层级选择器

层级选择器格式：

根据相应的标签层级，来建立样式关联；
根据相应的class层级，来建立样式关联；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> css01</title>
    <style>
        span div{
            background-color: #ffef00ab;
            height: 48px;
        }
        .cen div{
            background-color: #80ff00ab;
            height: 48px;
        }
    </style>
</head>
<body>
    <div>外部div</div>
    <span>
        <div>span内的div</div>
    </span>
    <div>外部div</div>
    <div class="cen">
        <div>class内div</div>
    </div>
</body>
</html>

3.1.2.5 组合选择器

组合选择器格式：

将以上几种方式，使用逗号隔开，则几种方式关联同一css;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> css01</title>
    <style>
        span div, .cen div{
            background-color: #ffef00ab;
            height: 48px;
        }
    </style>
</head>
<body>
    <div>外部div</div>
    <span>
        <div>span内的div</div>
    </span>
    <div>外部div</div>
    <div class="cen">
        <div>class内div</div>
    </div>
</body>
</html>

3.1.2.6 属性选择器

属性选择器格式：

class/标签[属性=属性值]，先经过class或标签的第一层筛选，再通过属性及属性值进行删选；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> css01</title>
    <style>
        div[n="10"]{
            background-color: #97ff00ab;
            height: 48px;
        }
        .cl[id="i1"]{
            background-color: #97ff00ab;
            height: 48px;
        }
    </style>
</head>
<body>
    <div n="10">外部div</div>
    <div>外部div</div>
    <div class=".c1" n="10">外部div</div>
</body>
</html>

3.1.3 css文件的引用

用于css样式在多个html中的复用；

使用head中的link标签来完成引用；

css样式文件-common.css

在css中（包括head的style中）注释使用/* /

.c1 {
     background-color: red;
     height: 48px;
}
.c2 {
     background-color: green;
     height: 24px;
}
/*.c3 {
     background-color: yellow;
     height: 96px;
}*/

css样式文件的引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- style中引用的是路径可以使用../访问当前路径的上级路径-->
    <link rel="stylesheet" href="common.css"/>
    <title>css样式</title>
</head>
<body>
    <div class="c1">c1样式</div>
    <div class="c2">c2样式</div>
    <div class="c3">c3样式</div>
</body>
</html>

3.1.4 各种方式的优先级

标签内的style优先级最高；
head中的style次优，且内部规则越往下越优；
引用css文件优先级因为放置在最高位置，所以优先级最低；

注：复合选择器优于普通选择器；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="common.css"/>
    <title>css样式</title>
    <style>
        .c4{
             background-color: pink;
             height: 21px;
        }
        .c5 {
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="c1">引用css中的c1</div>
    <div class="c1 c4">c4覆盖c1的background-color</div>
    <div class="c2" style="background-color: blue;">style覆盖选择器</div>
    <div class="c4 c5">c5覆盖c3样式</div>
</body>
</html>

3.2 css中常用的样式设置项

3.2.1 border

边框，主要属性：

线粗，线样式<虚线实线类>，线颜色（border：4px dotted red;)
只要是四面存在的框框均可以定义border-left, right, top, down;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="common.css"/>
    <title>css样式</title>
    <style>
        .c4{
             background-color: pink;
             height: 21px;
             border: 4px dotted red;
        }
        .c5 {
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="c4" >设置一个边框</div>
</body>
</html>

3.2.2 属性设置

height 高度，高度可以使用像素，百分比只有在嵌套内部才有效；
width 宽度，宽度可以使用像素，也可使用百分比；
text-align 文本水平位置：center，left，right；
line-height 定义文本垂直位置：在n像素的中间显示；
color 定义字体颜色
font-size 定义字体大小
font-weight 定义字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="common.css"/>
    <title>css样式</title>
    <style>
        .c4{
             background-color: pink;
             border: 4px dotted red;
             width:80%;
             height: 48px;
             text-align:center;
             line-height:48px;
             color: blue;
             font-weight: 800;
             font-size: x-large;
        }
    </style>
</head>
<body>
    <div class="c4" >设置一个边框</div>
</body>
</html>

3.2.3 float

作用是让块级标签可以进行堆叠：

可以设置left及right，即向左飘还是向右飘；
子标签float，父级标签无法管理，则可以使用：
```
<div style="clear: both;">一个border块</div>
```
float非常常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .h1{
            background-color: blue;
            color: white;
            width: 30%;
        }
    </style>
</head>
<body>
    <div class="h1" style="float:left;">hi</div>
    <div class="h1" style="float:left;background-color:pink;">hi</div>
    <div class="h1" style="float:right;background-color:yellow">hi</div>
</body>
</html>

float标签仍然会占用空间；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            display: inline-block;
            width: 300px;
            border: black solid 1px;
        }
        .f{
            float: left;
            margin-top: 5px;
            height: 105px;
            width: 205px;
        }
    </style>
</head>
<body style="margin:0">
    <div class="a">
        <div class="f">
            <img src="jd_back.png" height="100" width="200">
        </div>
        <p style="margin-top: 0">Float可以向右或者向左飘，但是这是一段测试用的问题，大部分问题都可以通过这个来测试，主要目的测试环绕的效果是否生效，小苹果过过过大，以家人知名大结局。</p>
    </div>
</body>
</html>

3.2.4 display

改变标签自带的块标签，行内标签等属性：

display: inline; 将块级标签改变为行内标签；
display: block; 将行内标签改变为块级标签；
display: inline-block; 让标签既有行内标签特征（自己多长占多少）也有块级标签属性（可设置高度，宽度，padding， margin等）
display: none; 让标签消失，使用js操作实现开灯关灯类似功能及弹出框等；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .h1{
            background-color: blue;
            color: white;
            width: 30%;
        }
    </style>
</head>
<body>
    <div style="background-color: red; height:48px;">块标签1</div>
    <div style="background-color: pink; display:inline; height:48px;">块标签2</div>
    <span style="background-color: red; height:48px;">行内标签1</span>
    <span style="background-color: blue; height:48px; display:block;">行内标签2</span>
    <span style="background-color: red; height:48px; display:inline-block;">行内标签3</span>
    </div>
</body>
</html>

3.2.5 padding及margin

设置边距：

外边距：margin 增加的是外边距
1. margin：0 设置外边距为0；
2. 方向有：top，left，right，
3. margin 0 auto 0表示上下外边距为0，并左右边距auto，会使当前div居中显示；
内边距：padding 增加的是内边距

margin外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .h1{
            background-color: blue;
            color: white;
            height: 48px;
        }
        .h2{
            background-color: pink;
            color: white;
            height: 24px;
            margin-left:10px;
            margin-right:10px;
            margin-bottom:10px;
            margin-top:10px;
        }
    </style>
</head>
<body>
    <div class="h1", style="border:1px solid red;">
        <div class="h2">1</div>
    </div>

</body>
</html>

padding内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        .h1{
            background-color: blue;
            color: white;
            height: 48px;
        }
        .h2{
            background-color: pink;
            color: white;
            height: 24px;
            padding-top:10px;
        }
    </style>
</head>
<body>
    <div class="h1", style="border:1px solid red;">
        <div class="h2">1</div>
    </div>

</body>
</html>

3.2.6 position

css全称层叠样式，而position就是建立层叠，具体参数：

position:fixed 建立一个图层固定在某个位置，并float起来；

固定的位置需设置top，bottom，left，right ：10px设置像素;

position:relative + absolute 两者之间做一个相对的定位；

父级标签设置relative，仍然在标准文档内，具有top及left属性；调整top及left属性的主要效果是改变relative所在的标签的视觉位置，实际位置仍然在static位置上；
- absolute绝对位置，是相对于最近以及的非static<系统默认positon状态>来说的位置；
- 子标签设置top，bottom，left及right是相对的定位；

属性补充：
- opcity: 0.5-1 表使透明度
- z-index: n 表使层级的顺序，谁大谁在上面；
单独的absolute只会根据top之类的值定位一次，随后不会随之改变，而fixed会；

3.2.6.1 应用举例-返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            position:fixed;
            right:10px;
            bottom:10px;
            background-color:#dddddd;
            color: blue;
            height: 24px;
            width: 48px;
        }
        .body{
            height:7000px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!--在A标签中指定#则代表返回顶部锚点，也可指定相关锚点跳转-->
    <div class="back"><a href="#">返回</a></div>
    <div class="body">你好明天</div>
</body>
</html>

3.2.6.2 应用举例-标头不动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .head{
            position:fixed;
            top:0px;
            right:0px;
            left:0px;
            background-color:#dddddd;
            color: blue;
            height: 24px;
        }
        .body{
            height:7000px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="head">
        <div style="width:80%;margin:auto;">
            <div style="float:left;">首页</div>
             <div style="clear: both;"></div>
        </div>
    </div>
    <div class="body" style="margin-top:25px;">你好明天</div>
</body>
</html>

3.2.6.3 应用举例-相对于一个标签生成的图层位置

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

        .body{
            margin: auto;
            height:400px;
            width:400px;
            background-color: yellow;
            position:relative;
            border: 1px dotted red;
        }
        .sun{
            position:absolute;
            top:0px;
            right:-60px;
            background-color:#dddddd;
            color: blue;
            height: 48px;
            width:48px;
        }
    </style>
</head>
<body>
    <div class="body">
        <div class="sun">你好</div>
    </div>
</body>
</html>

3.2.6.4 应用举例-三层图层相互遮掩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三层position</title>
    <style>
        .cen01{
            /*display: none;*/
            position: fixed;
            background-color: #dddddd;
            height: 100px;
            width: 340px;
            top: 30%;
            left: 50%;
            margin-top: -50px;
            margin-left: -170px;

        }
        .cen02{
            /*display: none;*/
            position: fixed;
            background-color: cadetblue;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            opacity: 0.3;
        }
        .cen03{
            background-color: burlywood;
            font-size: larger;
            height: 4000px;
        }
    </style>
</head>
<body>
    <div class="cen01">
        <form>
            <div style="position: absolute; top: 10px; left: 10px;">
                <label for="i1">username:</label>
                <input type="text" name="user" id="i1"/>
            </div>
            <div style="position: absolute; top: 40px; left: 10px;">
                <label for="i2">username:</label>
                <input type="password" name="pwd" id="i2"/>
            </div>
            <input type="submit" style="height: 40px; width: 40px; position: absolute; top: 50%; right: 5%" name="submit"/>
        </form>
    </div>
    <div class="cen02"></div>
    <div class="cen03">
        实际内容层.....
    </div>
</body>
</html>

3.2.7 overflow

在实际img超过设置的区块的高度与宽度时，默认会被撑开，设置overflow就改变：

overflow: auto 图片过大会出现滚动条；
overflow: hidden 图片过大只会显示部分；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>overflow</title>
</head>
<body>
    <div style="width: 200px; height: 100px; overflow:hidden;float: left">
        <img src="111.jpg">
    </div>
    <div style="width: 200px; height: 100px; overflow:auto;float: left;">
        <img src="111.jpg">
    </div>
    <div style="width: 200px; height: 100px;float: left;">
        <img src="111.jpg" style="width: 200px; height: 100px">
    </div>
</body>
</html>

3.2.8 hovor

hovor定义鼠标移动到当前标签时，才会应用的css样式；

格式选择器：hovor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hover</title>
    <style>
        .page-header{
            background-color: dimgray;
            height: 36px;
        }
        .page-header .w{
            width: 80%;
            margin: auto;
            line-height: 30px;
        }
        .page-header .menu{
            display: inline-block;
            height: 30px;
            margin-top: 3px;
            padding: 0 10px;
            background-color: aliceblue;
        }
        .page-header .menu:hover{
            background-color: brown;
        }
        .page-header .logo{

        }
    </style>
</head>
<body>
    <div class="page-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>
</body>
</html>

3.2.9 background

设置背景相关的样式：

首先background可以简写，将多属性写到一行内：

background: #00FF00 url(bgimage.gif) -105px -11px no-repeat ;

background-image跟url，默认图片会重复很多次；
background-repeat改变是否重复可以，单独设置X, Y 不重复；
background-position可以调整图片在标签内位置；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>backgrond-icon</title>
    <style>
        .pg-header {
            background: dimgray;
            height: 42px;

        }

        .pg-header .w {
            width: 80%;
            height: 42px;
            margin: 0 auto;
        }

        .pg-header .icon-bar {
            background: url("images/jdicons.png") no-repeat;
            height: 24px;
            width: 79px;
            display: inline-block;
            margin-top: 1px;
        }

        .pg-header .i02 {
            background-position: -43px -39px;
            height: 22px;
            width: 16px;
            margin-bottom: -2px;
        }

        .pg-header .i03 {
            background-position: -58px -39px;
            height: 22px;
            width: 16px;
            margin-bottom: -2px;
        }
        .pg-header .i04 {
            background-position: -0px -54px;
            height: 40px;
            width: 40px;
            margin-top: 6px;
            margin-bottom: -10px;
        }

    </style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">
    <div class="w">
        <span class="icon-bar"></span>
        <span class="icon-bar i02"></span>
        <span class="icon-bar i03"></span>
        <span class="icon-bar i04"></span>
    </div>
</div>
</body>
</html>

3.2.10 综合举例-正常的标题栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合</title>
    <style>
        .h1{
            background-color: pink;
            height: 48px;
            line-height: 48px;
        }
        .h2{
            color: red;
            font-size: large;
            font-weight: 800;
            float: left;
            width: 50px;
            text-align: center;
        }
    </style>
</head>
<body style="margin: 0px auto;">
    <div class="h1" style="margin:0px auto;">
        <div style="width:80%; margin:0 auto;">
            <div class="h2"> 收藏 </div>
            <div class="h2"> 点赞 </div>
            <div class="h2" style="float:right;"> 登录 </div>
            <div class="h2" style="float:right;"> 注册 </div>
            <div class="h2" style="width:100px;float:right;"> 重置密码 </div>
            <div style="clear: both;"></div>
        </div>
    </div>

</body>
</html>

3.2.11 综合举例-登陆窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户名密码</title>
    <style>
        .pg-head {
            background: #e93854;
            margin: 40px auto;
            height: 475px;
        }
        .pg-head .w {
            background: url("jd_back.png");
            height: 475px;
            width: 990px;
            margin: auto;
        }
        .pg-head .login {
            height: 300px;
            width: 300px;
            background: azure;
            display: inline-block;
            position: absolute;
            top: 25%;
            left: 60%;
        }
        .user {
            height: 40px;
            margin-top: 51px;
            margin-left: 28px;
            position: relative;
        }
        .l_user {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            height: 40px;
            width: 40px;
            background: url("pwd-icons-new.png") 0px 0px no-repeat;
            border: black solid 1px;
        }
        .ipt {
            display: inline-block;
            height: 36px;
            width: 200px;
            padding-left: 50px;
        }
    </style>
</head>
<body style="margin: 0 0;background: #e93854">
<div class="pg-head">
    <div class="w">
        <div class="login">
            <div class="user">
                <label for=user class="l_user"></label><input class="ipt" type="text" id="user" name="user"/>
            </div>
            <div class="user" style="margin-top: 20px">
                <label for=user class="l_user" style="background-position: -46px 0px"></label>
                <input class="ipt" type="text" id="pwd" name="pwd"/>
            </div>
        </div>
    </div>
</div>
</body>
</html>

3.3 页面布局

3.3.1 主站布局

主要先划分为三个部分：head、body、footer;

<div class="pg-header">
	<div style='width:980px; margin:0 auto;'>
        内容自动居中
    </div>
</div>
<div class="pg-content"></div>
<div class="pg-footer"></div>

3.3.2 后台管理布局

3.3.2.1 合理布局01-使用fixed

这种布局，在内容超出时，menu跟着滚动；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统布局01</title>
    <style>
        .body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background: darkcyan;
            position: fixed;
            left: 0;
            right: 0;
        }
        .pg-content{

        }
        .pg-footer{

        }
        .pg-content .menu{
            /*充满整个屏幕，且不会因为过度缩小而产生变形*/
            position: fixed;
            background: burlywood;
            top: 48px;
            left: 0;
            width: 200px;
            bottom: 0;
        }
        .pg-content .content{
            /*充满整个屏幕，且不会因为过度缩小而产生变形*/
            position: fixed;
            background: dimgray;
            top: 48px;
            right: 0;
            left: 200px;
            bottom: 0;
            /*添加overflow属性，在内容超过屏幕时，可以下拉*/
            overflow: auto;
        }
    </style>
</head>
<body class="body">
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu">menu</div>
        <div class="content">content</div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

3.3.2.2 合理布局02-使用absolute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统布局02</title>
    <style>
        .body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background: darkcyan;
            position: fixed;
            left: 0;
            right: 0;
        }
        .pg-content .menu{
            /*充满整个屏幕，且不会因为过度缩小而产生变形*/
            position: absolute;
            background: burlywood;
            top: 48px;
            left: 0;
            width: 200px;
            bottom: 0;
        }
        .pg-content .content{
            /*充满整个屏幕，且不会因为过度缩小而产生变形*/
            position: absolute;
            /*background: dimgray;*/
            top: 48px;
            right: 0;
            left: 200px;
            bottom: 0;
            /*关闭overflow则时menu不跟滚动，
            不关闭则时跟着滚动*/
            overflow: auto;
            /*页面不可以缩小小于最小值*/
            min-width:980px;
        }
    </style>
</head>
<body class="body">
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu">menu</div>
        <div class="content">
            <div style="background: dimgray">
                <p style="margin: 0">123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p>123</p>
                <p>123</p><p>123</p><p>123</p><p style="margin: 0">123</p>
            </div>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

/*注销content的overflow：auto*/
/*overflow: auto;*/

3.3.2.3 合理布局03-head布局

鼠标移动到hover上会自动将属性应用与该标签与其子标签上；

可以单独针对某些子标签来处理；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统布局02</title>
    <style>
        .body{
            margin: 0;
        }
        .pg-header{
            height: 48px;
            background: darkcyan;
            position: fixed;
            left: 0;
            right: 0;
            line-height: 48px;
            z-index: 1000;
        }
        .pg-header .logo{
            float: left;
            width: 200px;
            background: cornflowerblue;
            height: 48px;
            text-align: center;
            font-size: larger;

        }
        .pg-header .user{
            float: right;
            width: 100px;
            height: 48px;
            background: cornflowerblue;
            padding-left: 10px;
            position: relative;
        }
        .pg-header .user .w{
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: cadetblue;
            text-align: center;
            line-height: 46px;
        }
        .pg-header .user:hover{
            background: blanchedalmond;
        }
        .pg-header .user .info{
            position: absolute;
            top: 48px;
            left: 0;
            background: antiquewhite;
            z-index: 20;
            width: 100px;
            display: none;
            text-align: center;
        }
        .pg-header .user:hover .info{
            display: inline-block;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            left:0;
            right: 0;
            bottom: 0;
            background: darkgoldenrod;
            z-index: 10;
        }


    </style>
</head>
<body class="body">
    <div class="pg-header">
        <div class="logo">
            小苹果
        </div>
        <div class="user">
            <div class="w">
                <a>Alvin</a>
            </div>
            <div class="info">
                <a>个人资料</a><br/>
                <a>修改密码</a><br/>
                <a>退出登录</a>
            </div>

        </div>
    </div>
    <div class="pg-content">
        <div class="content" style="z-index: 9;"></div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

3.3.2.4 合理布局04-图标的添加

都从这儿fontawesomedownload，然后按照特定方法使用；

从网站下载，并放置到特定位置，比如放置到obj的根目录；

在head中导其中的css文件<min是压缩版>；

    <link href="fontawesome-free-5.14.0-web/css/fontawesome.css" rel="stylesheet">
    <link href="fontawesome-free-5.14.0-web/css/brands.css" rel="stylesheet">
    <link href="fontawesome-free-5.14.0-web/css/solid.css" rel="stylesheet">

想使用某个图标，打开官网找到相关图标然后点击在envelope下可以看到使用的方式；

<i class="fas fa-fish"></i>
<i class="fas fa-frog"></i>
<i class="fas fa-user-ninja vanished"></i>
<i class="fab fa-facebook"></i>
<i class="fas fa-envelope"></i>

图标的大小，颜色都是根据字体来调整；

引入后台管理系统并在头部添加一些图标的方式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统布局02</title>
    <link href="fontawesome-free-5.14.0-web/css/fontawesome.css" rel="stylesheet">
    <link href="fontawesome-free-5.14.0-web/css/brands.css" rel="stylesheet">
    <link href="fontawesome-free-5.14.0-web/css/solid.css" rel="stylesheet">
    <style>
        .body{
            margin: 0;
        }
        .right{
            float:right;
        }
        .left{
            float: left;
        }
        .pg-header{
            height: 48px;
            background: darkcyan;
            position: fixed;
            left: 0;
            right: 0;
            line-height: 48px;
            z-index: 1000;
        }
        .pg-header .logo{
            float: left;
            width: 200px;
            background: cornflowerblue;
            height: 48px;
            text-align: center;
            font-size: larger;

        }
        .pg-header .user{
            float: right;
            width: 100px;
            height: 48px;
            background: cornflowerblue;
            padding-left: 10px;
            position: relative;
        }
        .pg-header .user .w{
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: cadetblue;
            text-align: center;
            line-height: 46px;
        }
        .pg-header .user:hover{
            background: blanchedalmond;
        }
        .pg-header .user .info{
            position: absolute;
            top: 48px;
            left: 0;
            background: antiquewhite;
            z-index: 20;
            width: 100px;
            display: none;
            text-align: center;
        }
        .pg-header .user:hover .info{
            display: inline-block;
        }
        .pg-header .icons{
            padding:0 10px;
            margin: 0 10px;
        }
        .pg-header .icons:hover{
            background: blanchedalmond;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            left:0;
            right: 0;
            bottom: 0;
            background: darkgoldenrod;
            z-index: 10;
        }


    </style>
</head>
<body class="body">
    <div class="pg-header">
        <div class="logo">
            小苹果
        </div>

        <div class="user">
            <div class="w">
                <a>Alvin</a>
            </div>
            <div class="info">
                <a>个人资料</a><br/>
                <a>修改密码</a><br/>
                <a>退出登录</a>
                <i class="far fa-envelope"></i>
            </div>

        </div>

        <div class="mail right icons">
            <i class="fas fa-envelope"></i>
            <label>10</label>
        </div>

        <div class="ring right icons">
            <i class="fas fa-bell"></i>
            <label>10</label>
        </div>

    </div>
    <div class="pg-content">
        <div class="content" style="z-index: 9;"></div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

四. JavaScript

JavaScript是一门独立的语言，浏览器自带JavaScript的解释器；

4.1 JavaScript简介

4.1.1 HTML中的javaScript

head标签中的script标签；

<head>
    <meta charset="UTF-8">
    <title>js01</title>
    <script type="text/javascript">
        //js code
        alert("hello world.")
    </script>
</head>

单独的js文件，通过script标签的src引入HTML中；

<head>
    <meta charset="UTF-8">
    <title>js01</title>
    <script src="hello.js">

    </script>
</head>

大部分情况下，我们更希望用户先加载内容，再取得动作<js文件>，而放在头部先加载的是动作；

推荐位置：body标签的最下面

<body>
  <a>1</a>
  <a>1</a>
  <a>1</a>
  ...
  
  <script src="hello.js"></script>
</body>

js单行注释：//

js多行只是：/* */

4.1.2 js代码编辑器

在HTML中写；
在浏览器的console中写；

4.1.3 常规操作

4.1.3.1 三种框

//将消息输出到控制台
console.log("123")

//将消息输出到一个弹出窗口
alert("hello world.")

//将消息输出到一个弹出窗口
var v = comfirm("真的要删除么？")
// 如果用户选择是，则返回值true，如果选择否则返回值false；

4.1.3.2 url与刷新

//获取当前页面的url
location.href

//重定向到新的url
location.href = "url"

//刷新当前页面
locat ion.reload()

4.1.3.3 定时器

setInterval(function, time)每间隔一定的time执行一次function；

// setInterval

function f1() {
 	console.log("hello world.")
}

// 间隔周期时间ms执行，会获取一个定时器obj
var obj = setInterval("f1();", 1000);

// 清除setInterval定时器；
clearInterval(obj);

// 等待一段时间后执行一次操作；
//可以应用：比如我鼠标放置在数据上，显示详细5s后关闭；
var objs = setTimeout("f1();", 15000);

// 清除setTimeout定时器
clearTimeout(objs);

document.getElementById("id").innerText根据id获取标签后，获取其中内容，innerText变化也会反馈到标签内；

4.1.3.4 综合举例-滚动播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js01</title>
</head>
<body>
    <div id="d1" style="background: crimson; display: inline-block;">热烈庆祝中国建国70周年！&nbsp;&nbsp;&nbsp;</div>
    <script>
        function roll() {
            var tag = document.getElementById("d1")
            var content = tag.innerText
            var first_char = content.charAt(0)
            var release_str = content.substring(1, content.length)
            var new_content = release_str + first_char
            tag.innerText = new_content
        }
        //时间的单位为毫秒
        setInterval("roll();", 200);
    </script>
</body>
</html>

4.2 JS语法

4.2.1 变量声明

变量声明方式分为全局及局部，建议先所有变量都加var，只有确定全局使用时再去掉；

声明全局变量：
```
<script>
	name="Bruce"
</script>
```
声明局部变量：
```
<script>
	var name="Bruce"
</script>
```

4.2.2 数据类型

4.2.2.1 数字

在js中int及float统称为数字类型；

定义：name=11

转换：

parseInt()将某类型转换成数字，失败则变为NaN；
parseFloat()将某类型转换成数字，失败则变为NaN；

特殊值：

NaN非数字，可使用isNaN(num)来判断；
Infinity无穷大，可使用isFinite(num)来判断；

4.2.2.2 字符串

不同于python，js认为一个字符串是由一个个字符组成的，所有有char相关方法；

字符串常用方法

//charAt() 取字符串某个位置的字符
var string = "Bruce"
var first_char = string.charAt(0)

//length 取字符串的长度
var str_len = string.length

//substring系列，获取子序列
var new01 = string.substr(1, 2) //substr后一位数字为相对长度，值为：ru
var new02 = string.substring(1, 2) //substring后一位数字为原str中的序号，值为：r

//对字符串进行切片,顾头不顾尾,substring也是顾头不顾尾
var new03 = string.slice(1, 2)

//trim移除空白
obj.trim()
obj.trimLeft()
obj.trimRight()

//concat字符串拼接
string.concat("&nbsp;Lee") //值为Bruce Lee

//获取子序列位置
string.indexOf("ce", 1) // 从string的char(1)位置开始向后找到的第一个"ce"，值为3；
string.lastIndexOf("ru", 1) //从string的char(1)位置开始向后找到的最后一个“ce”,值为3；

//大小写变化
string.toLowerCase()
string.toUpperCase()

//split同python中的split
string.split("u") //结果为["Br", "ce"]
string.split("u", 1) //结果为["Br"]

//正则相关，jianda
obj.search(regexp) //从头开始匹配，取第一个；
obj.match(regexp) //全局搜索，如果正则中有g则取所有匹配项，否则取第一个；
obj.replace(regexp, replacement) //替换，正则中有g则替换所有匹配项，否则替换第一个；

4.2.2.3 Boolean值

在python中True及Flase，在js中是true即false；

4.2.2.4 数组

在python中的列表，在js中的数组；

数据常用方法

// 获取数字的长度
obj.length

//在尾部追加一个元素
obj.push(ele)

//从尾部取一个元素
obj.pop()

//从头部插入一个元素
obj.unshift(ele)

//从头部取出一个元素
obj.shift()

//插入，删除，替换数组中的元素，同时也兼具了查询功能
obj.splice(start, deleteCount, value, valueN)
obj.splice(n, 0, ele) //指定位置插入一个元素,返回插入值构成的数组
obj.splice(n, 1, ele) //指定位置替换一个元素，返回被替换值构成的数组
obj.splice(n, 1) //指定位置删除一个元素，返回删除值构成的数组

//切片
obj.slice()

//反转
obj.reverse()

//使用sep将数组变为字符串
obj.join(sep)

//将多个数组链接起来
obj.concat(val,va2,vaN)
           
//对数组进行排序
obj.sort()

4.2.2.5 对象

正常的键值对，本质就是对象；

d = {"k1":"value1", "k2":"value2"}
d["k1"]

4.2.3 常用语句

4.2.3.1 for循环语句

共2种，一种是遍历数组及字典的方式，一种是使用整数空时的方式；

a = [11, 22, 33, 44]
// 方式一：遍历数组或字典的方式
for (var index in a){
  console.log(a[index])
}

//方式二：整数累加方式
for (var i=0;i<10;i++){
  console.log(i)
}
//方式二，也可以用来遍历数组，但是因为字典是无序的，无法遍历字典；
for (var i=0; i<a.length;i++){
  console.log(a[i])
}



//方式三，while循环
while(条件){
    console.log(1)
}
    
// 可以在循环中使用continue及break，含义一样；

4.2.3.2 条件语句

条件：

==: 值相同，!=

===: 值与类型都相同，!==

&&: and

||: or

//条件语句类型01
if (条件){
  ...
}else if(条件){
  ...
}else{
  ...
}

//条件语句类型02
switch(name){
    case "1":
        console.log(1);
    case "2":
        console.log(2);
    default:
        console.log(999);
}

4.2.3.3 函数定义

函数类型分为普通函数，匿名函数，自执行函数；

//普通函数
function func(){
	...    
}
    
//匿名函数
setInterval(function(){
    console.log(123);
},5000)

//自执行函数,创建函数并自动执行
(function(arg){
    console.log(arg)
})(1)

4.2.3.4 序列化

//将对象转换为字符串
JSON.stringify("对象")

//将字符串转换为对象类型
JSON.parse("字符串")

4.2.3.5 转义

在将一些信息通过浏览器保存到本地的时候，往往需要转义；

//第一类encode及decode只转义中文
encodeURI("https://10.5.1.1.1/query?苹果")
"https://10.5.1.1.1/query?%E8%8B%B9%E6%9E%9C"
decodeURI("https://10.5.1.1.1/query?%E8%8B%B9%E6%9E%9C")
"https://10.5.1.1.1/query?苹果"

//第二类encode及decode转义所有特殊字符
encodeURIComponent("https://10.5.1.1.1/query?苹果")
"https%3A%2F%2F10.5.1.1.1%2Fquery%3F%E8%8B%B9%E6%9E%9C"
decodeURIComponent("https%3A%2F%2F10.5.1.1.1%2Fquery%3F%E8%8B%B9%E6%9E%9C")
"https://10.5.1.1.1/query?苹果"

//第三类是针对字符串中的中文
escape("你好//")
"%u4F60%u597D//"
unescape("%u4F60%u597D//")
"你好//

//异常，由以上编码和解码抛出该异常
URIError

4.2.3.6 eval

在python中有两个执行语句的方法：eval("简单表达式")；exec（"较复杂的语句"）；

//在javaScript中的eval是python中两者的集合；
eval("1+1") //可以执行简单的表达式并返回结果
eval("(function(a){return a})(1)") //可以执行复杂的语句，并接收返回值；

4.2.3.7 时间

在javaScript中使用Date类来构建时间对象，从而修改并获取时间；

// 使用date类生成一个当前时间得到Date对象;
let date = new Date()
// 获取时间
date.getXXX() //获取时间内容
// 设置时间
date.setXXX() //设置Date对象时间内容

4.2.3.8 this及三种函数调用

首先标签调用函数的方式有三种，直接标签内写时间调用，使用doc.onxxx = f()方式调用，和使用doc.addEventListener()方式，而针对两种不同的调用方式，this关键字有两种不同的含义：

标签内调用时，this是一个全局变量代表win；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="f()" value="点击"/>
    <script>
        function f() {
            console.log(this)
        }
    </script>
</body>
</html>

如果需要只想调用者的话，可以在参数中写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="f(this)" value="点击"/>
    <script>
        function f(self) {
            console.log(self)
        }
    </script>
</body>
</html>

doc方式调用时，this指的是调用这个函数的标签对象；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" id="i1" value="点击"/>
    <script>
        var i = document.getElementById("i1");
        i.onclick = function (){
            console.log(this)
        }
    </script>
</body>
</html>

doc中event方式添加，this也指得是调用这个函数的标签对象；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>func3</title>
</head>
<body>
<div id="back" style="height: 100px;width: 100px;display: inline-block; background: aquamarine">
    <div id="tp" style="height: 50px;width: 50px;display: inline-block; background: #dddddd"></div>
</div>
<script>
    var back = document.getElementById("back");
    var tp = document.getElementById("tp");
    back.addEventListener("click", function (){console.log(this)}, false)
    back.addEventListener("click", function (){console.log("content01")}, false)
    tp.addEventListener("click", function (){console.log(this)}, false)
    tp.addEventListener("click", function (){console.log("tp")}, false)
</script>
</body>
</html>

addEventListener中第二个参数默认false是冒泡的方式执行动作<即从内向外挨个执行>

addEventListener中第二个参数改为true是捕捉的方式执行动作<即从外向内挨个执行>

4.2.4 作用域

在Python中是以函数作为作用域的，在其他语言中是以代码块作为作用域；

在javascript中是以函数作为作用域，(新关键字let，指定的时块级作用域)；
函数的作用域在未被调用之前就已经被创建了；
函数的作用域存在作用域链，并且也是在被调用之前创建，调用过程中不会改变；
函数内局部变量声明提前，在生成作用域链时，同时会声明变量<不会赋值>；<js特有>

4.2.4.1 函数词法分析Import

函数的整体调用过程分为两个阶段，首先进行词法分析->然后再执行；

词法分析所经历的4块：

首先在内存中形成active object ，简称AO，即活动对象；
分析形势参数
分析局部变量
分析函数式声明表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数声明</title>
</head>
<body>
    <script>
        function t1(age){
            console.log(age);
            var age = 27;
            console.log(age);
            function age(){}
            console.log(age);
        }
        t1(3)
    </script>
</body>
</html>

执行结果如上，那么是怎么样的过程呢？

形成AO；
分析形参：首先函数体内有参数则会有AO.age = undefined，然后在执行中取到值AO.age = 3;
分析局部变量：首先查找形参AO.age = undefined不做任何改变，AO.age仍然等于3；
函数式分析：函数式的等级比较高，当分析出有age函数时，将改变AO.age值AO.age = function(){}；
词法分析完成后，开始执行，首先第一个age会从AO上找age，找到就是function(){}，执行到var age后会覆盖此时age=27，fun处直接过，所以第三个仍然输出27；

4.2.4.2 例子01

name = "Bruce"
function func(){
    var name="Alvin";
    function inner(){
        console.log(name);
    }
    return inner
}

var ret = func()
ret()

执行结果为："Alvin"，首先在函数执行之前函数的作用域链已经被创建；在第10行执行func时会解释并执行func，返回inner，然后执行的ret是在之前创建好的作用链中的inner函数，inner会根据作用域链查找上层的作用域是否有name变量，依次向上；

4.2.4.3 例子02

name = "Bruce"
function func(){
    var name="Alvin";
    function inner(){
        console.log(name);
    }
    var name="tony"
    return inner
}

var ret = func()
ret()

执行结果为："tony"，在执行11行前，作用域，全局–func-inner已经被创建，在执行11行时，执行函数func内的代码<但是inner函数因为在另外一个做用于，所以未执行>，func作用域内的name变量的值会由"alvin"便为"tony"，所以返回"tony"；

4.2.4.4 例子03

//例子01
function func(){
    console.log(name1)
    }
func()

//例子02
function func(){
    console.log(name1)
    var name1="Alvin";
    }
func()

执行结果：例子01毫无疑问报错，而例子02返回undefined；undefined意味在声明一个变量后未给其赋值则默认会返回undefined，所以可以证明第4条：在生成作用域链的同时声明了变量；

4.2.4.5 一个题目

在以下的代码中，为什么使用myT[i]无法实现1.1.3中的需求；

<script>
    var myT = document.getElementsByTagName("tr");
    var len = myT.length;
    for (var i = 0; i < len; i++) {
        myT[i].onmouseover = function () {
            console.log(myT[i])
            console.log(i)
            myT[i].style.backgroundColor = "red";
        }
        myT[i].onmouseout = function () {
            console.log(this)
            this.style.backgroundColor = "";
        }
    }
</script>

答：首先代码自上向下解释，创建全局变量myT，创建全局变量len，创建全局变量i，然后进入循环i开始累加，循环内创建一个函数但未执行，为myT中每个元素添加两个事件并定义其动作为上面一个函数，i累加到len+1(8)时，退出循环，整体script内的代码解释完毕；当实际事件触发时，执行解释过程中创建的函数，此时myT存在，i也存在，但是i的值为8，而myT不存在第9个元素，所以myT[i]获取值为undefined，自然无法实现功能；

4.2.5 面向对象

js的面向对象其实时函数的一个变种；

在定义时使用this关键字则可以认为这个函数就是一个类；
在调用这种函数时，需要使用new关键字去新建一个实例；
定义类的原型<关键字class.prototype = {}内部相当于一个对象>，用来存储类中的方法，以此避免内存空间被类方法重复占用；

function Foo(n){
    this.name = n;
    this.sayName = function(){
        console.log(this.name);
    }
}

var obj1 = new Foo("we");
obj1.name;
obj1.sayName();
var obj2 = new Foo("wee");
obj2.name;
obj2.sayName();

如上js的类的定义，使用了this关键字，Foo本身就相当于构造方法，new创建了两个Foo的对象；但是在这里面存在一个问题，就是在两个obj内存空间内，存在重复的区域即sayName方法，这个是需要避免的；

function Foo(n){
    this.name = n;
}

Foo.prototype = {
    'sayName': function(){
        console.log(this.name)
    }
}
var obj1 = new Foo("we");
obj1.sayName();
var obj2 = new Foo('wee');
obj2.sayName();

如上的js类的定义，同样使用了this及new关键字，同时使用prototype定义原型用来存放类方法；而这样类的原型只会创建一次，这样就避免了内存空间的浪费，同时调用方式不变；

4.2.6 JS正则表达式

在JS中的正则表达式只有两个相关的方法：rep.test(str)判断字符串是否符合规定的正则；rep.exec(str)获取匹配的数据；

额外的还有两个字符串相关的方法中可以调用正则即replace方法及search方法；

//创建正则表达式
var rep = /^\d+$/
//测试某个字符串，正则是否能匹配，匹配返回true，否则返回false;
rep.test("ag")
false
rep.test("123")
true
rep.test("adf123adf")
true
//从一串字符中取出某些匹配值，支持分组；
var str = "JavaScript is more fun than Java or JavaBeans!"
var rep = /java\w*/

//默认情况下exec只取第一个匹配，但是返回的是一个数组；
rep.exec(str)
Array [ "JavaScript" ] 

//如果添加分组，则返回结果第一个为整体正则匹配结果，后边依次跟着各分组结果；
rep = /(Java)(\w*)/
rep.exec(str)
Array(3) [ "JavaScript", "Java", "Script" ]

//g 参数即代表全局匹配，可用于取多个值；
//会依次向下取值，直指没有值返回null，然后再次循环；
var s = "JavaScript is more fun than Java or JavaBeans!";
var re = /Java\w*/g;
re.exec(s)
["JavaScript"]
re.exec(s)
["Java"]
re.exec(s)
["JavaBeans"]
re.exec(s)
null

//i 参数表使不区分大小写；
var s = "java Java";
var re = /Java\w*/gi;
re.exec(s)
["java"]
re.exec(s)
["Java"]

//m 参数表示多行匹配；
//在js中默认即是python中那种针对有换行符的多行匹配模式，无需m参数；
//m 参数有额外的含义，意为对每一行都是一个新的开始；
//在下面的例子中，可以看到我们匹配到了两个以java开头的单词，这里的开头为每行的开头，而非整个字符串的开头，即每一行是一个新的开始；
var s = "Java is a good language; \njavaScript is a good language too.";
var re = /^java\w*/igm;
re.exec(s)
["Java"]
re.exec(s)
["javaScript"]

4.3 JavaScript的版本

ECMAScript是一个标准，JavaScript是建立在ES标准上的语言，使用最多；

4.3.1 ES的版本

ES即ECMAScript这个标准的缩写，目前这个标准有多个版本：

ES5是2009年12月推出的，目前普遍使用的版本；
其实ES6是真正用来编写脚本语言，但因为ES6兼容性问题，往往会将ES6写好的脚本通过一定的方法变更为ES5的脚本；

4.3.2 ES 5& ES6新特性

4.3.2.1 let与const

var存在一个问题，就是定义的局部变量，在代码块外仍然可以调用及修改；

let i=0 //声明一个局部变量，只有在let所在的代码块内才有效；
const I=0 //声明一个常量，不可二次声明或者修改；

4.3.2.2 字符串扩展

str.includes("str") //返回布尔值，表示是否找到参数字符串；
str.startsWith("str") //返回布尔值，表示参数字符串是否在原字符串开头；
str.endsWith("str") //返回布尔值，表示参数字符串是否在原字符串的尾部；

4.3.2.3 解构表达式

//数组解构
let arr = [1, 2, 3]
const [x, y, z] = arr;
console.log(x, y, z)

//对象解构
const person = {
  name: "jack",
  age: 21, 
  language: ['java', 'js', 'css']
}
console.log(person.name)
console.log(person.age)
const {name, age, language} = person;
console.log(name);
console.log(age);
console.log(language);

4.3.2.4 函数优化

//可以只传一个参数
function add(a=2, b=1){
  return a + b;
}
console.log(add(10));

//箭头函数->简写原来的匿名函数
let print2 = obj => console.log(obj);
var sum2 = (a, b) => a+b;
var sum3 = (a, b) => {
  let c = a +b;
  return c;
}

还有一些看着有些模糊，后期理解了继续补充：戳这里

五. DOM操作

即document object module，将整个document的内容转换为了对象；

5.1 DOM之查找元素

5.1.1 直接查找

// 根据id获取标签，返回的是标签对象
document.getElementById("id")

// 根据tag类型获取标签，返回的是由标签组成的数组
document.getElementsByTagName("div")

// 根据class获取标签，返回的是由标签组成的数组
document.getElementsByClassName("class_name")

// 返回具有指定name的标签的数组，指定名称指的是标签中的name属性
document.getElementsByName("name1")

5.1.1.1 举例-直接定位修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom01</title>
</head>
<body>
    <div id="div01">我是div01</div>
    <a>hehe</a>
    <a>haha</a>
    <a>bubu</a>
    <a>check</a>
    <span name="Bruce">中国伟大复兴...</span>
    <script>
        // 根据id找到标签，并修改其中的内容
        var div01 = document.getElementById("div01");
        div01.innerText = "我被修改了...";

        // 根据tag找到标签，并修改其中的内容
        var as = document.getElementsByTagName("a");
        var i = 0;
        for (var n in as){
            i ++
            as[n].innerText = "修改后." + i;
        }

        // 根据自定义name找到标签，并修改其中的内容
        var names = document.getElementsByName("Bruce")
        for (var n in names){
            names[n].innerText = "我是通过name找到并修改的."

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

5.1.2 间接查找

//当前标签的父标签
parentElement

//当前标签的所有子标签
children

//当前标签的第一个子标签
firstElementChild

//当前标签的最后一个子标签
lastElementChild

//当前标签的下一个同级兄弟标签
nextElementSibling

//当前标签的上一个同级兄弟标签
previousElementSilbing

5.1.2.1 举例-间接定位修改

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

    <div>
        <div id="start">02</div>
    </div>

    <script>
        var startTag = document.getElementById("start")
        startTag.parentElement.previousElementSibling.firstElementChild.innerText="我是通过id=start找到的"
    </script>
</body>
</html>

5.2 DOM其他操作

5.2.1 内容修改

//获取文本且只能修改问分
innerText 
outerText //这个貌似没有

//同时获取HTML的标签且能修改HTML的标签
innerHTML
outerHTML //包括自身的HTML

//获取及修改input系列,select及textarea等有用户输入值的标签的现在值
value
//select有个额外的值
select.selectedIndex

5.2.1.1 例子-用户输入值的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>值的获取</title>
</head>
<body>
    <div id="i1">
        你好<a>Bruce</a>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>值的获取</title>
</head>
<body>
   <input type="text" id="i1"/>
    <select id="s1">
        <option value="11">北京</option>
        <option value="22">南京</option>
        <option value="33">上海</option>
    </select>
    <textarea id="t1"></textarea>

</body>
</html>

5.2.1.2 例子-搜索框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="pg-head">
        <input onfocus="f();" onblur="b();" type="text" id="i1" value="请输入关键字"/>
        <!--除了使用js脚本及事件意外，新版本的HTML还支持直接使用placeholder关键来处理-->
        <input placeholder="请输入关键字" type="text" id="i1"/>
    </div>
    <script>
        function f() {
            var i = document.getElementById("i1");
            var c = i.value;
            if(c == "请输入关键字"){
                i.value = "";
            }
        }
        function b(){
            var i = document.getElementById("i1");
            var c = i.value;
            if(c == ""){
                i.value = "请输入关键字";
            }
        }
    </script>
</body>
</html>

5.2.2 样式操作

// 修改class属性，即可以直接对样式直接操作
obj.className = "样式名"
obj.classList.add("样式名")
obj.classList.remove("样式名")

// 修改style属性 obj.style.具体属性：
obj.style.fontSize = '16px'; //意思为style="font-Size:16px;"

5.2.3 属性操作

obj.setAttribute('属性名', "Bruce")；
obj.removeAttribute('属性名')
obj.attributes // 获取所有的属性

5.2.4 在HTML添加标签

5.2.4.1 使用字符串方式创建

使用字符串及 doc.insertAdjacentHTML的方法来创建；

在insertAdjacentHTML可以选择插入的位置：
- beforeBegin：在当前标签的前面；
- afterBegin：在当前标签头部下面；
- beforeEnd：在当前标签底部上面；
- afterEnd：在当前标签底部下面；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加标签</title>
</head>
<body>
    <div id="i0">
        <p><input type="button" onclick="addNew()" value="addNew"></p>
        <p><input type="text"></p>
    </div>
    <script>
        function addNew() {
            var tag = "<p><input type=\"text\"></p>";
            document.getElementById("i0").insertAdjacentHTML("beforeend", tag);
        }
    </script>
</body>
</html>

5.2.4.1 方式二：使用doc对象的方式创建

doc.createElement('标签类型') + doc.appendChild(标签对象)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加标签</title>
</head>
<body>
    <div id="i0">
        <p><input type="button" onclick="addNew()" value="addNew"></p>
        <p><input type="text"></p>
    </div>
    <script>
        function addNew() {
            var tag = document.createElement('input');
            tag.type = 'text';
            tag.style.color = 'red';
            var p = document.createElement('p');
            p.appendChild(tag)
            document.getElementById('i0').appendChild(p);
        }
    </script>
</body>
</html>

5.2.5 提交表单

除了可以使用input的submit类型来提交，也可以使用dom来提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form提交的两种方式</title>
</head>
<body>
<div>
    <form id="f1" action="https://www.sogou.com/web" method="get" style="display: inline-block;">
        <input type="text" name="query"/>
        <input type="submit" value="搜索">
    </form>
    <div onclick="submitForm()" style="background: aqua; width: 100px; display: inline-block">
        DOM提交
    </div>
</div>
<script>
    function submitForm() {
        document.getElementById('f1').submit()
    }
</script>
</body>
</html>

DOM提交后

5.3 综合举例

5.3.1 模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>motai</title>
    <style>
        .c1{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: black;
            opacity: 0.5;
            z-index: 9;
        }
        .c2{
            position: fixed;
            height: 200px;
            width: 200px;
            top: 50%;
            left: 50%;
            background: azure;
            margin-top: -100px;
            margin-left: -100px;
            z-index: 10;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div  onclick="show()" style="border: #e93854 solid 1px;display: inline-block">数据添加</div>

    <!--    遮罩层开始-->
    <div id = 'i01' class="c1 hide"></div>
    <!--    遮罩层结束-->

    <!--    模态层开始-->
    <div id = 'i02' class="c2 hide">
        <p><input type="text" name="name"></p>
        <p><input  type="button" value="确定" onclick="hide();"></p>
    </div>
    <!--    模态层结束-->

    <!-- Script开始-->
    <script>
        function show() {
            document.getElementById("i01").classList.remove("hide")
            document.getElementById("i02").classList.remove("hide")
        }function hide() {
            document.getElementById("i01").classList.add("hide")
            document.getElementById("i02").classList.add("hide")
        }
    </script>
</body>
</html>

5.3.2 全选反选取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选取消反选</title>
</head>
<body>
    <div>
        <input type="button" value="添加" onclick="addNew()">
        <input type="button" value="全选" onclick="choiceAll()">
        <input type="button" value="取消" onclick="unchoiceAll()">
        <input type="button" value="反选" onclick="reverseALl()">

        <table id="mytable">
            <thead>
                <tr>
                    <td>选择</td>
                    <td>主机地址</td>
                    <td>端口</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="choice"/></td>
                    <td>1.1.1.1</td>
                    <td>80</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice"/></td>
                    <td>1.1.1.2</td>
                    <td>81</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="choice"/></td>
                    <td>1.1.1.3</td>
                    <td>82</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        function choiceAll() {
            var table = document.getElementById("mytable");
            var lines = table.children[1].children;
            for (var i=0;i<lines.length;i++){
                lines[i].children[0].children[0].checked = true
            }
        }
        function unchoiceAll() {
            var table = document.getElementById("mytable");
            var lines = table.children[1].children;
            for (var i=0;i<lines.length;i++){
                lines[i].children[0].children[0].checked = false
            }
        }
        function reverseALl() {
            var table = document.getElementById("mytable");
            var lines = table.children[1].children;
            for (var i=0;i<lines.length;i++){
                lines[i].children[0].children[0].checked = !lines[i].children[0].children[0].checked;
            }
        }
    </script>
</body>
</html>

5.3.3 左侧菜单栏

在写这个例子时，一致遇到一个错误；意味有一个未定义的元素调用了classList出错，导致后面的自己的标签去hide没有生效，后来发现是获取的list中包含了script标签的内容；原因为正文的内容没有包裹在一个div里面，在取得时候取到了body层，而body里面是包含script标签的，所以出错；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单栏</title>
    <style>
        .header{
            height: 35px;
            width: 100px;
            background: aqua;
            line-height: 35px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

    <div>
        <div class="item">
            <div class="header" id="m1" onclick="show('m1')">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>标签1</div>
                <div>备注1</div>
            </div>
        </div>
        <div class="item">
            <div class="header" id="m2" onclick="show('m2')">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>标签2</div>
                <div>备注2</div>
            </div>
        </div>
        <div class="item">
            <div class="header" id="m3" onclick="show('m3')">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>标签3</div>
                <div>备注3</div>
            </div>
        </div>
    </div>

    <script>
        function show(id) {
            var current_head = document.getElementById(id);
            var item_list = current_head.parentElement.parentElement.children;
            for (var i=0;i<item_list.length;i++){
                var current_item = item_list[i]
                current_item.children[1].classList.add('hide');
            }
            current_head.nextElementSibling.classList.remove('hide');

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

5.3.4 怎么写出好看的网页

往往我们自己写出的网站都会很丑，原因并不是我们技术不到位，更多的时候是我们不会设计；

找到并保存好看的模板，可以直接网上搜索HTML模板，可以在BootStrap中找网站模板；
往往我们写一些网址时，常用的方法有float、clear:both、margin、padding、position这些；

六. JQuery

本质是一个类库，一个DOM/BOM/JavaScript的类库，学习依据这里

6.1 查找元素

在DOM总数不超过10个查找元素的方法，往往有一些查找是无法满足需求的，而在JQuery则有很多，主要两个部分：选择器&筛选；

6.1.1 JQuery简单使用

6.1.1.1 JQuery的导入

首先JQuery是一个类库，所以需要下载，可以直接搜索下载，并放置在指定的目录；

<!--在html中的导入方式,-->
<script src="jquery-3.5.1.js"></script>
<script>
	自己写的标签
</script>

6.1.1.2 JQuery对象与DOM对象转换

如果JQuery中无法满足我的需求，那么我们可以将找到的JQuery对象转换为DOM对象，然后进行相关的操作；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery与Dom对象互相转换</title>
</head>
<body>

    <div id="i1">测试JQuery专用</div>

    <script src="jquery-3.5.1.js"></script>
    <script>

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

## JQuery最简单的查询
## 在python中调用模块一般是名字.模块
## 在JQuery中用$代表JQuery类库
## 根据id查找：
$('#i1')
Object { 0: div#i1, length: 1 }

## 这是一个dom对象
document.getElementById('i1')
<div id="i1">

## DOM对象转换为JQuery对象
$(document.getElementById('i1'))
Object { 0: div#i1, length: 1 }

## JQuery对象装欢为DOM对象
$('#i1')[0]
<div id="i1">

6.1.2 JQuery选择筛选器

选择器作用：直接找到某个或者某类标签；

6.1.2.1 基本选择器

选择器类型	格式	说明
基本选择器	`$('#id')`	根据id属性查找
基本选择器	`$(".c1")`	根据class属性查找
基本选择器	`$("标签类型名")`	根据标签类型查找
基本选择器	`$("*")`	匹配所有标签
组合选择器	`$("#id, .c1, a")`	找出满足至少1种条件的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery基本选择器</title>
</head>
<body>

    <div id="i1">测试JQuery专用</div>
    <div id="i2" class="d1">测试1</div>
    <div id="i3" class="d1">测试1</div>
    <div id="i4" class="d2">测试2</div>

    <script src="jquery-3.5.1.js"></script>
    <script>

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

6.1.2.2 层级选择器

选择器类型	格式	说明
层级选择器	`$("#id a")`	找到id属性为id标签下的所有子孙a标签
层级选择器	`$("#id > a")`	找到id属性为id标签下的所有子a标签<不找孙a标签>
层级选择器	`$("#id + a")`	找到id属性为id标签紧接着的第一个兄弟标签，且为a标签
层级选择器	`$("#id ~ a")`	找到id属性为id标签的所有兄弟a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery基本选择器</title>
</head>
<body>
    <div class="page-header">Hello</div>
    <div id="id" class="content">
        <a id="a1">链接01</a>
        <a id="a2">链接02</a>
        <a id="a3">链接03</a>
        <div>
            <a id="grand-a4">链接041</a>
        </div>
    </div>
    <a id="sli-a0">链接1</a>
    <a id="sli-a1">链接1</a>
    <span id="sli-s0">Alvin</span>

    <script src="jquery-3.5.1.js"></script>
</body>
</html>

6.1.2.3 筛选器

基本筛选器是包裹在选择器字符串内，而筛选器则通过选择器调用的；

选择器类型	格式	说明	备注
基本筛选器	`:first` `$("*").first()`	获取第一个元素
基本筛选器	`:last` `$("*").last()`	获取最后一个元素
基本筛选器	`:eq(索引)` `$("*").eq(+-index)`	陪陪一个给定索引值的元素<index从0开始；
筛选器	`$("*").next()`	紧邻的下一个同辈元素的元素集合
筛选器	`$("*").prev()`	紧邻的上一个同辈元素的元素集合
筛选器	`$("*").parent`	返回当前标签的父级标签
筛选器	`$("*").children()`	返回当前标签的所有字标签集合
筛选器	`$("*").siblings()`	返回当前标签的所有兄弟标签集合
筛选器	`$("*").find()`	在子子孙孙中查找所有的标签
筛选器	`$("*").nextAll()`	该标签下所有的同辈元素的元素集合
筛选器	`$("*").nextUntil(e	Dom	filter)`
筛选器	`$("*").prevAll()`	该标签上所有的同辈元素的元素集合
筛选器	`$("*").prevUntil(e	Dom	filter)`
筛选器	`$("*").parents`	用于筛选祖元素的表达式
筛选器	`$("*").parentUntil(e	Dom	filter)`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery基本筛选器</title>
</head>
<body>
    <div>
        <table class="c1" border="1px">
            <thead>
            <tr><td>index</td><td>host</td><td>port</td></tr>
            </thead>
            <tbody>
            <tr id="l1"><td>1</td><td>1.1.1.1</td><td>22</td></tr>
            <tr id="l2"><td>2</td><td>1.1.1.2</td><td>23</td></tr>
            <tr id="l3"><td>3</td><td>1.1.1.3</td><td>24</td></tr>
            </tbody>
        </table>
    </div>
    <script src="jquery-3.5.1.js"></script>
</body>
</html>

6.1.2.4 属性

选择器类型	格式	说明	备注
属性筛选器	`[属性名]`	根据属性筛选
属性筛选器	`[属性名=‘值’]`	根据属性及值筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery基本筛选器</title>
</head>
<body>
<div>
    <div class=".c1" id="id1" bruce="Alvin">hello World</div>
    <div class=".c1" id="id2" bruce="Apple">hello World</div>
</div>

<script src="jquery-3.5.1.js"></script>
</body>
</html>

6.2 操作元素

6.2.1 属性操作

操作对象	方法	作用
循环对象	`each(function(){})`	遍历每个元素，调用函数
当前对象	`this`	在each时，指定当前被操作元素，是一个DOM对象
对象序号	`k`	在each是，fun(k)则k返回当前元素的index
三元语句	`三元`	类似于python的三元运算，格式 var v = 条件?成立值:不成立值；
文本操作	`text()`	获取标签内的text，类似于innerText，无参数取值，有参数赋值；
文本操作	`html()`	获取标签内的html，类似于innerHTML，无参数取值，有参数赋值；
文本提交	`val()`	相当于封装了DOM中的value属性，无参数取值，有参数赋值；
class操作	`addClass("class1")`	添加class属性；
class操作	`removeClass("class1")`	删除class属性；
class操作	`toggleClass("class1")`	有class1则删除，无class1则添加；
属性操作	`prop("checked", true)`	对属性赋值，多用于操作checkbox的disabled与checked值；
属性操作	`attr("name")`	一个参数时获取值，两个赋予，可用于添加自定义属性；
属性操作	`removeAttr("name")`	删除某个属性；
核心操作	`index(dom	jq对象

6.2.1.1 重写-全选多选反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery全选多选反选</title>
</head>
<body>
<div>
    <input id="i1" type="button" value="全选">
    <input id="i2" type="button" value="取消">
    <input id="i3" type="button" value="反选">
</div>
<table class="t11" border="1px">
    <thead>
    <tr>
        <td>选择</td>
        <td>ip</td>
        <td>port</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" value="11"></td>
        <td>1.1.1.1</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="11"></td>
        <td>1.1.1.1</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="11"></td>
        <td>1.1.1.1</td>
        <td>22</td>
    </tr>
    </tbody>
</table>

<script src="jquery-3.5.1.js"></script>
<script>
    $("#i1").click(function () {
        $(".t11 tbody tr input").prop('checked', true);
    })
    $("#i2").click(function () {
        $(".t11 input:checkbox").prop("checked", false);
    })
    $("#i3").click(function (k) {
        //方法1 
        // $("* :checkbox").each(function (){
        //     this.checked = ! this.checked
        // });
        $(":checkbox").each(function () {
            // $(this).prop('checked', !$(this).prop("checked"))
            var v  = $(this).prop('checked')?false:true;
            $(this).prop('checked',v)
        })
    })
</script>
</body>
</html>

6.2.1.2 重写-侧边菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery左侧菜单栏</title>
    <style>
        .item {
            width: 100px;
            /*background: antiquewhite;*/
        }

        .menu {
            display: inline-block;
            width: 100px;
            background: cadetblue;
            font-size: large;
        }
        .c{
            display: inline-block;
            width: 80px;
            background: aquamarine;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div>
    <div class="item">
        <div class="menu">菜单01</div>
        <div class="c">子菜单01</div>
        <div class="c">子菜单02</div>
    </div>
    <div class="item">
        <div class="menu">菜单02</div>
        <div class="c">子菜单01</div>
        <div class="c">子菜单02</div>
    </div>
    <div class="item">
        <div class="menu">菜单03</div>
        <div class="c">子菜单01</div>
        <div class="c">子菜单02</div>
    </div>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
    $(".c").addClass("hide")
    $(".menu").click(function (){
        // $(this).parent().siblings().children(".c").addClass('hide')
        // $(this).siblings().removeClass('hide')
        $(this).siblings().removeClass('hide').parent().siblings().children(".c").addClass('hide')
    })
</script>
</body>
</html>

如上，JQuery可以写成一行，JQuery是支持链式编程的，所以可以以上功能可以直接写成一行；

绑定事件：$(".menu").click(function(){})直接通过绑定即可；

6.2.1.3 重写-模态对话框

通过给表格中每个元素打上自定义标签<后端循环添加很方便>，可以很便捷的完成模态对话框与相关表格中属性的绑定；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery模态对话框</title>
    <style>
        table, table thead tr td {
            border: brown solid 1px;
            min-width: 80px;
            text-align: center;
            font-weight: bolder;

        }

        table tbody tr td {
            border: brown solid 1px;
            min-width: 80px;
            text-align: center;
            font-weight: lighter;
        }

        .shadow {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: black;
            opacity: 50%;
            z-index: 9;
        }

        .shell {
            height: 200px;
            width: 240px;
            position: fixed;
            top: 50%;
            left: 50%;
            bottom: 50%;
            right: 50%;
            /*margin-top: -100px;*/
            /*margin-left: -120px;*/
            background: antiquewhite;
            z-index: 10;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div style="min-height: 300px;">
    <table cellspacing="0">
        <thead>
        <tr>
            <td>IP</td>
            <td>Port</td>
            <td>Owner</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td target="ip">1.1.1.1</td>
            <td target="port">22</td>
            <td target="owner">Bruce</td>
            <td>
                <a>编辑</a>&nbsp;|&nbsp;<a>删除</a>
            </td>
        </tr>
        <tr>
            <td target="ip">1.1.1.2</td>
            <td target="port">23</td>
            <td target="owner">Alvin</td>
            <td>
                <a>编辑</a>&nbsp;|&nbsp;<a>删除</a>
            </td>
        </tr>
        <tr>
            <td target="ip">1.1.1.3</td>
            <td target="port">24</td>
            <td target="owner">Hebburn</td>
            <td>
                <a>编辑</a>&nbsp;|&nbsp;<a>删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!--遮罩层开始-->
<div class="shadow hide"></div>
<!--遮罩层结束-->

<!--对话框开始-->
<div class="shell hide">
    <label for="ip">IP&nbsp;&nbsp;&nbsp;:</label><input id="ip" type="text" name="ip">
    <br/>
    <label for="port">Port&nbsp;:</label><input id="port" type="text" name="port">
    <br/>
    <label for="owner">Owner:</label><input id="owner" type="text" name="port">
    <br/>
    <input type="button" class="cancel" value="取消">
</div>
<!--对话框结束-->


<script src="jquery-3.5.1.js"></script>
<script>
    $("table a:first-child").click(function () {
        $(".shell, .shadow").removeClass("hide");
        $(this).parent().prevAll().each(function () {
            $("#" + $(this).attr("target")).val($(this).text())
        });
    })

    $(".cancel").on("click", function () {
        $(".shell, .shadow").addClass("hide");
    })
</script>
</body>
</html>

6.2.1.4 新写-内容跟随菜单

通过index获取当前标签在兄弟标签中的index,然后去content中用eq找对应的index的标签；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城详情页菜单切换</title>
    <style>
        .hide{
            display: none;
        }
        .pg-header{
            height: 39px;
            line-height: 39px;
            width: 700px;
            background: darkgoldenrod;
        }
        .menu{
            float: left;
            padding: 0 10px;
            border-left: #ff253a solid 1px;
            border-right: #ff253a solid 1px;
            /*将鼠标变为一个小手*/
            cursor: pointer;
        }
        .active{
            background: brown;
            /*将鼠标变为一个小手*/
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div style="margin: 0 auto; width: 700px; background: antiquewhite;">
        <div class="pg-header">
            <div class="menu active" m="1">菜单1</div>
            <div class="menu" m="2">菜单2</div>
            <div class="menu" m="3">菜单3</div>
        </div>
        <div class="pg-body">
            <div class="content" c="1">内容1</div>
            <div class="content hide" c="2">内容2</div>
            <div class="content hide" c="3">内容3</div>
        </div>
    </div>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(".pg-header").children(".menu").on("click", function (){
            $(this).addClass("active").siblings().removeClass("active");
            // 方法一:通过定义自定义属性来定位，像上面一样
            // var index = $(this).attr("m");
            // $(".pg-body").children("[c=" + index +"]").removeClass("hide").siblings().addClass("hide");

            // 方法二：通过index获取当前标签在兄弟标签中的index,然后去content中用eq找对应的index的标签
            $(".pg-body div").eq($(this).index()).removeClass("hide").siblings().addClass("hide");
        })
    </script>
</body>
</html>

6.2.2 内容操作

操作对象	方法	作用
文档处理	`append()`	将某些标签添加到this子标签最后边；
文档处理	`prepend()`	将某些标签添加到this子标签的的前面；
文档处理	`after()`	将某些标签添加到this后面；
文档处理	`before()`	将某些标签添加到this前面；
文档处理	`remove()`	删除this标签；
文档处理	`empty()`	清空this标签里面的内容；
文档处理	`clone()`

6.2.2.1 示例-增删改标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档操作</title>
</head>
<body>
<div class="button">
    <input type="text">
    <input type="button" value="添加">
    <input type="button" value="删除">
    <input type="button" value="复制">
</div>
<div>
    <dl>
        <dt>Head</dt>
        <dd>1</dd>
        <dd>2</dd>
    </dl>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
    $("div[class='button']").children().eq(1).on("click", function (){
        var value = $("input[type='text']").val();
        var newContent = "<dd>"+value+"</dd>";
        $("div dl").append(newContent);
    })
    $("div[class='button']").children().eq(2).on("click", function (){
        var deleteIndex = $(this).siblings("[type='text']").val();
        $("div dl dd").eq(deleteIndex).remove();
    })
    $("div[class='button']").children().eq(3).on("click", function () {
        var copyIndex = $(this).siblings("[type='text']").val();
        var clone = $("div dl dd").eq(copyIndex).clone();
        $("div dl").append(clone);
    })
</script>
</body>
</html>

6.2.3 CSS操作

操作对象	方法	作用
样式处理	`css(样式名,value])`	单获取，双赋予，字典多值同时添加；
位置操作	`scrollTop([val])`	获取设置匹配元素相对滚动条顶部的偏移;
位置操作	`scrollLeft([val])`	获取设置匹配元素相对滚动条左侧的偏移;
位置操作	`offset([{top:v, left:val}])`	获取匹配元素在当前视口的相对偏移,可加top及left获取值
位置操作	`position()`	获取匹配元素相对父元素的偏移，可加top及left获取值
尺寸操作	`height()`	不包括任何额外的值，值等于style中设置的height；
尺寸操作	`width()`	不包括任何额外的值，值等于style中设置的width；
尺寸操作	`innerHeight()`	在height的基础上包括内边距padding;
尺寸操作	`innerWidth()`	在width的基础上包括内边距padding;
尺寸操作	`outerHeight([true])`	额外包括padding及border，如果true则再包含margin
尺寸操作	`outerWidth([true])`	额外包括padding及border，如果true则再包含margin

6.2.3.1 新写-点赞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点赞示例</title>
    <style>
        .pg-body {
            margin-top: 10px;
            margin-left: 10px;
            height: 100px;
            width: 200px;
            border: brown solid 1px;
            line-height: 100px;
            display: inline-block;
        }

        .box {
            display: inline-block;
            position: fixed;
            margin-left: 10px;
            cursor: pointer;
            user-select:none;
        }
    </style>
</head>
<body>
<div class="pg-body">
    <div class="box">
        <span class="nice">赞</span>
    </div>
</div>
<div class="pg-body">
    <div class="box">
        <span>赞</span>
    </div>
</div>

<script src="jquery-3.5.1.js"></script>
<script>
    $(".box").on("click", function () {
        var newSpan = $(document.createElement("span"));
        var top = 0;
        var left = 15;
        var opacity = 1;
        var fontSize = 10;
        newSpan.text("+1");
        newSpan.css({
            "position": "absolute", "top": top + "px", "left": left + "px",
            "opacity": opacity, "font-size": fontSize + "px"
        });
        var zan =  $(this)
        zan.append(newSpan);
        var obj = setInterval(function () {
            top -= 5;
            left += 5;
            opacity -= 0.1;
            fontSize += 10;
            newSpan.css({
                "position": "absolute", "top": top + "px", "left": left + "px",
                "opacity": opacity, "font-size": fontSize + "px", "color":"red"
            });
            if(opacity < 0){
                clearInterval(obj);
                console.log(newSpan);
                newSpan.remove();
            }
        }, 50);

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

6.2.3.2 新写-尺寸操作验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺寸操作测试</title>
    <style>
        .testdiv{
            background: brown;
            border: black 4px solid;
            height: 100px;
            width: 200px;
            margin: 40px 30px 20px 10px;
            padding: 40px 30px 20px 10px;

        }
    </style>
</head>
<body>
    <div style="background: darkgoldenrod;">
        <div class="testdiv"></div>
    </div>
</body>
</html>

6.2.4 事件绑定

在Dom中绑定事件的方式有三种，在JQuery中常用的绑定方式有4种：

通过名称方式添加删除事件；

//如click这种事件名称有很多，可以同样使用这种方式绑定，但是无法解绑；
$('div').click(function(){})

使用bind及unbind来添加删除事件；

//bind无特殊的设定，唯一优势在于可以解绑；
$('div').bind("click", function(){})
$('div').unbind("click", function(){})

使用delegate及undelegate来添加删除事件；

//delegate即委托，委托的好处在于，新增标签时自动帮其绑定相关事件；
$('div').delegate("click", function(){})
$('div').undelegate("click", function(){})

使用on及off来添加删除事件；

//on提供绑定事件处理程序所需的所有功能，可以较灵活的构造，具体参考文档；
$('div').o'n("click", function(){})
$('div').off("click", function(){})

6.2.4.1 事件执行顺序及后续阻止

如在a标签中再绑定一个事件，那么会先执行后绑定事件，再执行a标签跳转; 同时可以通过相关的操作来完成对后续跳转事件的阻止，这种操作常常用于表单提交<正确的提交，错误的阻止提交发生>；

一般情况下都是我们绑定的事件优于默认事件，但是checkbox除外，打勾优于定义事件；

如下，两种不同的添加方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止进入百度-允许进入京东</title>
</head>
<body>
    <!--    如果需要实现这种阻止，在dom中需要添加return关键字-->
    <a href="https://www.baidu.com/" onclick=" return tellFalse()">百度</a>
    <!--    如果在JQuery中来绑定的话，直接就可以实现-->
    <a id="jd" href="https://www.jd.com/">京东</a>
    <script src="jquery-3.5.1.js"></script>
    <script>
        function tellFalse(){alert("不准进入百度...");return false;}

        function tellTrue(){alert("准进入京东...");return true;}
        
        $("#jd").click(tellTrue);
        
    </script>
</body>
</html>

6.2.4.2 页面框架加载完毕后js执行

默认情况下，script中的东西都需要在html之前的内容加载完毕后才会加载，这会带来一个问题，如果在上面内容里面有个非常大的图片，加载很慢，那么我所有的动作都要等待图片加载完毕才能加载，这是不合理的，所以我们一般设定页面框架在在完毕后就执行js，然后再慢慢加载图片；

//定义页面框架加载完毕后执行JS,JQuery总共有两种方式，较方便的方式：
$(function(){
    ...需要在框架加载完毕后就执行的js内容；
    ...将绑定事件等放在这里面；
})

6.2.4.3 新写-空表单提交阻止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>空表单提交阻止</title>
</head>
<body>
    <div>
        <form action="s1.html" method="post">
            <input type="text" name="ip"/>
            <input type="submit" value="提交"/>
        </form>
    </div>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(":submit").on("click", function (){
           var v = $(this).prev().val();
           if (v.length > 0 ){
               return true
           }else {
               alert("输入不能为空.")
               return false
           }
        })
    </script>
</body>
</html>

6.2.5 JQuery扩展

JQuery增加额外插件的方式有两种，$.extend及$.fn.extend两种方式

$.extend将一个或多个其他对象来扩展一个对象，返回被扩展的对象；

如果使用extend来扩张$，调用方式为$.obj;

jQuery.extend([deep], target, object1, [objectN])
//如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
// 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构.
// 未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

$.fn.extend扩展 jQuery 元素集来提供新的方法（通常用来制作插件）；

//增加两个插件
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
//然后就可以像调用其他插件一样调用了；
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

JQuery自执行函数；

//自执行函数的好处在于，可以将全局变量封装到不同的命名空间内；
//下面这段代码时为JQuery对象新增了一个方法叫做xsk；
//在src导入JQuery后，JQuery（$）即全局可用，可以对其进行相关添加删除操作；
//使用这种方式构建JQuery插件，则全局变量status旨在本函数内可用，不会出现误改；
(function (arg) {
    var status = 1;
    arg.extend({
        'xsk': function () {
            return 'xsk';
        }
    });
})(jQuery);

6.3 组件

目前常用的组件有EasyUI，JQueryUI，BootStrap三种较常用的组件，其中EasyUI与JQueryUI比较适合做后台管理，而BootStrap全能，在主站这块比较擅长，在后台管理也还可以；

目前还有一个比较厉害的vue框架，后期了解下；

6.3.1 BootStrap

BootStrap依赖于JQuery

6.3.1.1 响应式布局

Style中css属性@media 来实现，比如菜单栏，当变大时一个样式，当变小时一个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式</title>
    <style>
        .c1 {
            height: 50px;
            background: #000000;

        }
        @media (min-width: 700px) {
            .c2 {
                background: brown;
            }
        }
    </style>
</head>
<body>
    <div class="c1 c2"></div>
</body>
</html>

当width大于700px时，c2存在，则c1中的颜色被c2覆盖，为棕红色；

当width小于700px时，c2不存在，则显示为c1中的黑色；

6.3.1.2 图标->字体

图标变为字体，@font-face

6.3.1.3 基本的使用

看到效果，将相关的html下载下来放在自己的文件里即可；

先导入相关的css，theme，Query，js;
去官网上翻翻自己感兴趣的组件；
copy相关的代码到自己的网页中；
使用!important进行样式的修改等；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootStrap基础使用</title>
    <!--    导入css的样式，其中theme指的是主题，即一些颜色的搭配-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css"/>
    <style>
        .myclass{
            /*强调某个属性优先级最高，永远不被覆盖加!important关键字*/
            border-radius: 0 !important;
            /*属性与!之间没有分号，否则不会生效哦；*/
        }
    </style>
</head>
<body style="background: #2aabd2;">
<!--    直接从官网中复制来的图标,赋值整体HTml-->
<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>

<!-- 从官网上复制过来的导航栏，并稍作修改，使用自定义样式将圆角变为方角-->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="http://www.baidu.com/">百度</a></li>
    <li><a href="http://www.jd.com/">京东</a></li>
    <li><a href="http://google.com">谷歌</a></li>
    <li><a href="http://www.qq.com">腾讯</a></li>
    <li><a href="http://163.com">网易</a></li>
    <li>
      <a href="#" class="myclass" aria-label="Next" >
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>


<!--    bootstrap依赖于jquery，所以在导入bootstrap前，需要先导入jquery-->
<script src="jquery-3.5.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

6.3.2 图片框组件bxslider

<html>
<head>

    <link rel="stylesheet" href="bxslider-4-master/dist/jquery.bxslider.css">

</head>
<body>

<div class="bxslider">
  <div><img src="1.jpg"></div>
  <div><img src="2.jpg"></div>
  <div><img src="3.jpg"></div>
</div>
</div>
<script src="jquery-3.5.1.js"></script>
<script src="bxslider-4-master/dist/jquery.bxslider.min.js"></script>
<script>
    $('.bxslider').bxSlider({
        auto: true,
        autoControls: true,
        stopAutoOnClick: true,
        pager: true,
        slideWidth: 600
    });
</script>
</body>
</html>

posted @ 2021-03-28 13:15 FcBlogs 阅读(101) 评论(0) 编辑收藏举报

刷新页面返回顶部