老男孩前端学习笔记

最新推荐文章于 2021-11-13 17:15:53 发布

花小智

最新推荐文章于 2021-11-13 17:15:53 发布

阅读量7.3k

点赞数 1

分类专栏：前端学习文章标签：前端 javascript 前端框架

本文链接：https://blog.csdn.net/m0_51974644/article/details/121210087

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端（day50）

什么是前端

"""
任何与用户直接打交道的操作界面都可以称作前端
比如：电脑界面 手机界面 平板界面


后端类似与幕后操作者
不直接与用户打交道
"""

前端学习路径

HTML：网页的骨架 没有任何的样式
CSS：给骨架添加各种样式 变得好看
JavaScript：控制网页的动态效果

前端框架：BOOTSTRAP、 JQuery、 Vue
    提前给你封装好了很多操作、按照固定语法调用即可

软件开发架构

cs 客服端 服务端
bs 浏览器 服务端
ps: bs也是cs

##浏览器窗口输入网址回车发生了几件事

1 浏览器朝服务端发送请求
2 服务端接受请求（eg: 请求百度首页）
3 服务端返回相应的响应（eg返回一个百度首页）
4 浏览器接收响应 根据特定的规则渲染给用户看

浏览器可以充当很多服务端的客服端
    百度 腾讯视频 优酷视频
   
如何做到浏览器跟多个不同的客服端进行交互
    1、浏览器很牛逼 能够自动识别不同服务端做不同的处理
    2、指定一个统一的标准 如果想要让你写的服务端能够艮客服端做正常的数据交互
    那么你必须遵循一些规则

HTTP协议

超文本传输协议 用来规定服务端和浏览器之间的数据交互格式

该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩你就自己写客服端 用户想要使用 就下载你专门的App即可。

# 四大特性
    1.基于请求响应
    2.基于TCP/IP作用于应用层上的协议
    3.无状态
        不保存用户的信息
        eg: 一个人来了一千次 你都记不住 每次都当他如初见
        由于HTTP协议是无状态的，所以后续出现了一些专门用来记录用户状态的技术
            cookie session token
    4.无/短链接
        请求来一次我响应一次 之后我们就没有任何链接和关系了
            长链接：双方建立连接之后默认不断开 websocket
# 请求数据格式
    请求首行（标识HTTP协议版本，请求当前方式）
    请求头（一大堆k,v键值对）
    
    
    请求体（并不是所有的请求方式都有，get没有post有 存放的是post请求提交的敏感数据）
# 响应数据格式
    响应首行（标识HTTP协议版本，响应状态码）
    响应头（一大堆k,v键值对）
    
    响应体（返回给浏览器展示给用户看的数据）

# 响应状态码
    用一串简单的数字来表示一些复杂的状态或者描述信息 404：请求资源不存在
    1xx：服务端已经成功接收了你的数据正在处理，你可以继续提交额外的数据
    2xx：服务端成功响应了你想要的数据（200 OK请求成功）
    3xx：重定向（当你在访问一个需要登录之后才能看的页面 你会发现会自动跳转到登录页面）
    4xx：请求错误
        404：请求资源不存在
        403：当前请求不合法或者不符合访问资源的条件
         
    5xx：服务器内部错误（500）
    

# 请求方式
    1.get请求
        朝服务端要数据
        eg:输入网址获取对应的内容
    2.post请求
        朝服务端提供数据
        eg：用户登录 输入用户名和密码之后 提交到服务端后端做身份校验
# url:统一资源定位符（大白话：网址）

HTML简介

超文本标记语言
如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码（所有网站内部都是HTML代码）

<h1>hello big baby<h1>
<a href="https://www.mzitu.com/">click me! give you some color to see see! </a>
<img src="https://img0.baidu.com/it/u=3016130507,2300635274&fm=224&fmt=auto&gp=0.jpg">

HTML就是书写网页的一套标准

# 注释：注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
由于HTML代码非常的杂乱并且很多，所以习惯性的用注释来划定区域方便后续的查找

<!--导航条开始-->
导航所有HTML代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的HTML代码
<!--左侧菜单栏结束-->

HTML文档结构

<html>
   <head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
   <body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么
<html>

PS:文件后缀名是给用户看的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能
注意：HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开
在pycharm内部集成自动调用浏览器的功能，直接点击即可

标签的分类1

<h1></h1>
<a href = "www.baidu.com/"></a>
<img/>
1 双标签
2 单标签（自闭和标签）

head常用标签

<title>Title</title> 网页标题
<style>
        h1 {
            color: gold;
        }
</style> 内部用来写css代码
<script src = "myjs.js"></script> 引入外部js文件
<link rel="stylesheet" href="mycss.css"> 引入外部css文件
<meta name = "keywords" content="老男孩教育，python培训">当你在用浏览器只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keyword" content="淘宝网,网上购物">
<meta name="description" content="淘宝网- 亚洲较大的网上交易平台">

body内常用标签

你肉眼在浏览器能看到的内部都是HTML代码
##基本标签

<h1>我是h1</h1> 标题1-6级
    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除线</s>
    
      <p>大梦初醒</p>
    <br> 换行
    <p>大梦初醒</p>
    <hr>水平分割线
    <p>大梦初醒</p>

标签的分类2

# 1.块级标签：独占一行
    h1~h6
    1 块级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2 块级标签可以嵌套任意的块级标签和行内标签
        但是p标签虽然是块级标签 但是他只能嵌套行内标签 不能嵌套块级标签
        如果套了 浏览器也会自动帮你解开（浏览器是面向用户的 不会轻易的报错 哪怕有错 用户也基本感觉不出来）
        总结：
            只要是块级标签都可以嵌套任意块级标签和行内标签
                        
# 2.行内标签：自身多大就占多大
 i u s b

特殊符号

&nbsb; 空格
&gt 大于号
&lt; 小于
&amp; &
&yen; ￥
&copy; 商标

#常用标签

div 块标签
span 行内标签
上述的两个标签是在构造页面初期常用的，页面布局一般先用div和span占位之后再去调整样式尤其是div使用的非常频繁
div你可以把他看成是一块区域 也就意味着用div来提前规定所有的区域之后望该区域填写内容即可

而普通的文本先用span即可

img标签

<img src="" alt="">

src 
1.图片的路径 可以是本地的也可以是网上的
2.url 自动朝该url发送get请求
alt="" 当图片加载不出来时的描述

title=""
当图片悬浮在图片上自动展示的提示信息

height="" 高度
width=""宽度
高度和宽度当你只修改了另一个参数也会等比例缩放
如果修改了两个参数但并没考虑比例的问题图片就会失真

a 标签

<a href=""></a>
"""
当a标签指定的网址从来没有点击过 那么a标签的字体颜色是蓝色，如果点击过了就会是紫色（浏览器给你记忆了）
"""
href
    1.放url,用户点击就会跳转到该url页面
target
    默认a标签是在当前页面完成跳转 _self
    你也可以修改为新建页面跳转 _blank
    
# a标签的锚点功能
"""
eg:点击一个文本标题 页面自动跳转到标题对应的内容区域

"""

标签具有的两个重要书写

1.id值
    类似于标签的身份证号 在同一个html页面上id值不能存重复
2.class值
 该值有点类似面向对象对象里的继承 一个标签可以继承多个class值

标签既可以有默认的书写也可以有自定义的书写

<p id="d1" class="c1" username="jason" password="123"></p>

列表标签

无序列表（较多）

<u1>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
</u1>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签

有序列表（了解）

<ol> type=" " start="">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

标题列表（了解）

<dl>
    <dt>标题1</dt>
    <dd>标题2</dd>
    <dt>标题1</dt>
    <dd>标题2</dd>
</dl>

总结

学习前端就是死记硬背 
学习HTML他是一门标记语言
在学习时就要记每一个标签到底表示什么意思

服务端.py
import socket

server = socket.socket()
server.bind(('127.0.0.1', 8080))
server.listen(5)

while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    print(data)
    # 构造出符合HTTP协议格式的数据 无需掌握
    conn.send(b'HTTP/1/1 200 OK\r\n\r\n')
    # conn.send(b'hello baby')
    # conn.send(b'<h1>hello baby<h1>')
    # 读取文件内容再返回
    with open('a.txt', 'rb') as f:
        conn.send(f.read())
    conn.close()
 
 a.txt
 <h1>hello big baby<h1>
<a href="https://www.meizitu.com/">click me! give you some color to see see! </a>
<img src="https://img0.baidu.com/it/u=3016130507,2300635274&fm=224&fmt=auto&gp=0.jpg">
<img src="https://img-home.csdnimg.cn/images/20211106034829.jpg">

每日测验(day51)

"""
今日考题
1.ascii,gbk,utf-8,gbk的区别
2.请用至少两种方式实现m与n值交换m=10,n=5
3.什么是深浅拷贝
4.什么是HTTP协议
5.列举你所知道的HTML标签
"""

昨日内容回顾

Web的本质

"""
浏览器
服务端
文件(html文件)
"""
课程web方向
	前端 django bbs 路飞

HTTP协议

"""
HTTP协议的由来(sql语句由来)
	浏览器只有一个如何兼容N多个服务端
"""
# 四大特性
	1 基于请求响应
  2 基于TCP/IP作用于应用层之上的协议
  3 无状态
  	无论来多少次 都待你如初见
   	如何做到保存用户状态？？？
    	cookie、session、token
  4 无/短链接
  	请求来我响应你 之后就没有联系了
    长链接:websocket(群聊功能、服务端主动给客户端发送消息)

# 请求数据格式
	请求首行(HTTP协议的版本，当前请求方式)
  请求头(一大堆k，v键值对)
  
  请求体(并不是所有的请求方式都有请求体,get没有post有)
  
# 响应数据格式
	响应首行(HTTP协议的版本，响应状态码)
  响应头(一大堆k，v键值对)
  
  响应体(浏览器展示给用户看的内容)
 
# URL
	统一资源定位符 类似于坐标
# 请求方式
	1.get请求
  	朝别人要数据(也是可以携带参数的，只不过参数不是放在请求体里面的,而是直接放在url的后面)
  	url?username=jason&password=123
  2.post请求
  	朝别人提交数据

# 响应状态码
"""用简短的数字来表示一大串提示性信息"""
1XX:服务端已经成功接收到了你的数据 正在处理你可以继续提交
2XX:请求成功(200 OK)
3XX:重定向(你想访问A页面但是给你调到了B页面)
4XX:请求错误(404请求资源不存在、403请求不符合条件)
5XX:服务端内部错误(500)
ps:上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息
  	公司A
    	1000:
      1001:
      1002:
    公司B
    	2001:
      2002:
      2003:
      ...

HTML

"""
超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可)
书写网页的一套标准
	除了HTML可以书写前端页面之外
	还有XML也可以书写前端页面 
		odoo框架内部的前端页面全部是用XML书写
			公司内部管理软件 ERP
"""

# 注释  <!--注释-->

# 文档结构
<html>
	<head></head>：都不是给用户看的 主要是给浏览器看的一些配置信息
  <body></body>：body书写的所有的内容 都是给用户看的
</html>

head内常用标签

title  定义网页标题信息
style  内部支持直接书写css代码
link   引入外部css文件
script	内部可以书写js代码并且也可以引入外部js文件
meta	 定义网页源信息
	keywords
  description

body内基本标签

"""
h1～h6 标题标签
p段落标签
u i b s
hr
br
"""

# 特殊符号
空格  &nbsp;
大于	&gt;
小于  &lt;
&amp;
&reg;
&copy;
&yen;

常用标签

"""
div：网页初期划定区域范围
span：划定文本的
"""

# a标签
	链接标签
  	<a href='' target=''></a>
    	href
      	1.可以放一个url点击自动跳转
        2.还可以放其他标签的id值 锚点功能
      
      target
      	控制是否在当前页跳转
        	_self
          _blank
# img标签
	图片标签
  	<img src='' alt='' title='' height='' width=''/>
    	src
      	1.可以放图片的路径 本地或者线上
        2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示(暂时不考虑)
      
      alt
      	图片加载不出来的时候	展示的提示信息
       
     	title
      	鼠标悬浮在图片上之后展示的提醒信息
      
      height、width
      	单独调整某一个 另外一个会自动等比例缩放
        如果两个都调整了 可能会出现图片的失真
 
# 标签一般情况下都需要有两个重要的属性
	id值
  	唯一标示  同一个页面不能有重复	
  class值	
    类似于类的继承 可以有多个

标签的分类

"""
分类1:
	双标签
		<h1></h1>
	单标签
		<img/>
	
分类2:
	块儿级标签:独占一行  可以设置长宽
		div p
		注意：块儿级标签内部可以嵌套任意的行内标签和块儿级标签
			但是p标签只能嵌套行内标签
	行内标签:自身文本多大就占多大  不能设置长宽
		span a img
	
	PS：上述的规定只是HTML书写规范 如果你不遵循 不会报错
	浏览器会自动帮你解除嵌套关系
"""

列表标签

ul
	li
页面上只要是带有规则的排序文字 一般用的都是无序列表	

ol
	li
有序列表

dl
	dt
  dd
标题列表

今日内容概要

表格标签(只要是展示数据一般都可以使用表格标签)
表单标签(重要:获取前端用户数据发送给后端)
偷窥一下后端框架的基本使用(flask)
css层贴样式表(选择器)

表格标签

jason 123 read
egon	123 dbj
tank  123 hecha
...
<table>
        <thead>
  					<tr>  一个tr就表示一行
                <th>username</th>  加粗文本
                <td>username</td>  正常文本
            </tr>
  			</thead>  表头(字段信息)
        <tbody>
        		<tr>
                <td>jason</td>
                <td>123</td>
                <td>read</td>
            </tr>
        </tbody>	 表单(数据信息)
</table>


<table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行

# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看

表单标签

"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端

action:控制数据提交的后端路径(给哪个服务端提交数据)
  	1.什么都不写  默认就是朝当前页面所在的url提交数据
    2.写全路径:https://www.baidu.com  朝百度服务端提交
    3.只写路径后缀action='/index/'  
    	自动识别出当前服务端的ip和port拼接到前面
      host:port/index/

<label for="d1">  第一种 直接讲input框写在label内
            username:<input type="text" id="d1">
</label>					第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题
  
"""
label 和 input都是行内标签
"""



input标签 就类似于前端的变形金刚  通过type属性变形
	text:普通文本
  password:密文
	date:日期	
  submit:用来触发form表单提交数据的动作
  button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
  reset:重置内容
  radio:单选
    	默认选中要加checked='checked'
      <input type="radio" name="gender" checked='checked'>男
      当标签的属性名和属性值一样的时候可以简写
      <input type="radio" name="gender" checked>女
	checkbox:多选
  		<input type="checkbox" checked>DBJ
  
  file:获取文件  也可以一次性获取多个
    	<input type="file" multiple>
  hidden:隐藏当前input框
    	钓鱼网站
      	
  


select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
						<select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>

textarea标签  获取大段文本
	  <textarea name="" id="" cols="30" rows="10"></textarea>

# 能够触发form表单提交数据的按钮有哪些(一定要记住)
		1、<input type="submit" value="注册">
		2、<button>点我</button>
    
# 所有获取用户输入的标签 都应该有name属性
	name就类似于字典的key
  用户的数据就类似于字典的value
  <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
  </p>

验证form表单提交数据

# 接下来的框架代码无需掌握  看一下效果即可
pip3 install FLASK

form表单默认提交数据的方式 是get请求  数据是直接放在url后面的
	http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式
	<form action="http://127.0.0.1:5000/index/" method="post">
  
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" checked value="female">女
            <input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" checked name="hobby" value="football">足球
            <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
            <select name="province" id="">
                <option value="sh">上海</option>
                <option value="bj" selected>北京</option>
                <option value="sz">深圳</option>
            </select>
</p>



"""
form表单提交文件需要注意
	1.method必须是post
	2.enctype="multipart/form-data"
		enctype类似于数据提交的编码格式
			默认是urlencoded 只能够提交普通的文本数据
			formdata 就可以支持提交文件数据
"""
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">


"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request


app = Flask(__name__)


# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    # ImmutableMultiDict([('username', 'jason'), ('password', '123132131231233'), ('gender', 'on')])
    print(request.files)  # 获取文件数据
    file_obj = request.files.get('myfile.png')
    file_obj.save(file_obj.name)
    return 'OK'

app.run()


# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
disable 禁用
readonly只读

CSS

层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看

# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...


# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

# css的三种引入方式
	1.style标签内部直接书写(为了教学演示方便我们用第一种)
  	<style>
        h1  {
            color: burlywood;
        }
    </style>
  2.link标签引入外部css文件(最正规的方式 解耦合)
      <link rel="stylesheet" href="mycss.css">
	3.行内式(一般不用)
  		<h1 style="color: green">老板好 要上课吗?</h1>

"""
css的学习流程
	1.先学如何查找标签
		css查找标签的方式你一定要学会
		因为后面所有的框架封装的查找语句都是基于css来的
		css选择器很简单很好学不要有压力!!!
	
	2.之后再学如何添加样式
"""

CSS选择器

基本选择器

# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器
<style>
        /*id选择器*/
        /*#d1 {  !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
        /*    color: greenyellow;*/
        /*}*/
        /*类选择器*/
        /*.c1 {  !*找到class值里面包含c1的标签*!*/
        /*    color: red;*/
        /*}*/
        /*元素(标签)选择器*/
        /*span {  !*找到所有的span标签*!*/
        /*    color: red;*/
        /*}*/
        /*通用选择器*/
        /** {  !*将html页面上所有的标签全部找到*!*/
        /*    color: green;*/
        /*}*/
</style>

组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
	<div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
  </div>
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
"""

# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器

				/*后代选择器*/
        /*div span {*/
        /*    color: red;*/
        /*}*/

        /*儿子选择器*/
        /*div>span {*/
        /*    color: red;*/
        /*}*/

        /*毗邻选择器*/
        /*div+span {  !*同级别紧挨着的下面的第一个*!*/
        /*    color: aqua;*/
        /*}*/

        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }

属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

/*[username] {  !*将所有含有属性名是username的标签背景色改为红色*!*/
        /*    background-color: red;*/
        /*}*/

        /*[username='jason'] {  !*找到所有属性名是username并且属性值是jason的标签*!*/
        /*    background-color: orange;*/
        /*}*/

        /*input[username='jason'] {  !*找到所有属性名是username并且属性值是jason的input标签*!*/
        /*    background-color: wheat;*/
        /*}*/

总结

"""
1.form表单所有相关的标签都需要掌握
2.后端框架稍微了解一下 激发兴趣
3.选择器练习一下
"""

作业

今日作业
必做题
1.form表单所有知识点自己敲一遍并截图添加注释保存到手机
2.用html搭建一个注册页面
3.自己演示操作css各种选择器
选做题
1.用web框架体验一下form表单提交数据，完成前后端数据交互

每日测验（day52）

"""
今日考题
1.列举字符串,列表，元组，字典每个常用的五个方法
2.描述下列常见内置函数的作用可用代码说明map,zip,filter,sorted,reduce
3.列举你所知道的面相对象中的__开头__结尾的方法及作用，越多越好
4.写出form标签几个关键性的属性及作用
5.列举你所知道的css选择器
"""

昨日内容回顾

表格标签

<table>
  <thead>
  	<tr>  一个tr就是一行
    	<th></th>  表头里面建议使用th加粗文本
    </tr>
  </thead>  表头
  <tbody>
  	<tr>
    	<td></td>  表单里面的建议直接用td即可
    </tr>
  </tbody>  表单
</table>

补充:
	table有一个border属性可以加一个比较丑的边框
	针对tr可以设置rowspan、colspan

form表单

# 能够获取用户数据并且发送到后端
<form action='' method='' enctype=''></form>

"""
action  控制数据的提交路径
	1.不写默认朝当前页面所在的地址提交
	2.写全路径
	3.只写后缀 /index/   能够自动补全当前页面所载的后端服务器ip:port(暂时不考虑)

method  控制请求方式
	默认是get请求
		也可以携带数据 但是数据是直接破解在url后面的 不安全并且大小有限制
		url?username=jason&password=123
	可以修改为post请求
		携带的数据放在请求体里面的

enctype  控制数据的编码方式
	默认是urlencoded 只能发送普通的文本 不能发送文件
	如果你要发送文件 必须改为 formdata
		发送文件必须要修改的两个参数
			method = 'post'
			enctype='...formdata'
"""
input标签 获取用户数据的(输入 选择 上传...)
<input type=''></input>
	type可以书写的类型
  	text  普通文本
    password  展示密文
    date  日期
    radio  单选
    	默认选择可以用checked(属性名和属性值一样的时候就可以简写)
    checkbox  多选
    	默认选择可以用checked
   	file  获取文件
    	了解:可以加multiple 支持传多个文件
    submit  触发form表单提交动作
    button  什么功能都没有 就是一个普通的按钮
    reset   重置按钮

select标签  下拉框 默认是单选 可以加multiple成多选
	一个个下拉框选项是一个个的option标签
  option标签默认选中可以加selected
  <select>
  	<option value=''>111</option>
    <option value=''>222</option>
    <option value='' selected>333</option> 
  </select>
	
textarea标签	获取大段文本内容

label标签  给input加上对于的注释信息  不写其实也没有关系
	input写在lable里面
  label的for关联input的id值 可以不嵌套
	
"""
获取用户数据的标签都应该都name属性
	因为你需要给后端发送数据并且需要标明数据到底表示什么
	name   字典的key
	value  字典的value(用户数据)

需要用户选择的标签 你需要自己加上value值
	radio
	checkbox
	option
	ps:如果你给获取用户输入的标签加了value值 那么就类似于默认值
"""

ps:hidden、disable、readonly、placeholder
  
# 触发form表单提交数据的两种方式
	type=submit
  button按钮

flask框架

代码目前你不需要去研究 我们写这个只是为了验证form表单的功能而已

css

# 注释
/**/  由于前端代码都笔记多并且没有什么规律 所以我们都会利用注释来帮助我们维护代码

# 语法结构
选择器 {
  属性1:值;
	属性2:值;
  属性3:值;
}

# 选择器
1.基本选择器
	id选择器
  	#d1 {}
  类选择器
  	.c1 {}
  标签选择器
  	div {}
  通用选择器
  	* {}
 	p#d1.c1  <p id="d1" class="c1"></p>  emmet插件

2.组合选择器
	我们将前端标签的嵌套定义为父亲 儿子 后代 兄弟等等关系
	后代选择器
  	div p {}  只要是div内部的p都拿到
  儿子选择器
    div>p {}	只拿内部第一层级的p
  毗邻选择器
  	div+p	{}	紧挨着我的同级下一个
  弟弟选择器
  	div~p	{}	同级别下面所有的p

3.属性选择器  []
	[username]
  [username='jason']
  input[username='jason']
ps:标签既可以有默认的书写 id class...
  还可以有自定义的书写并且支持多个
  <p id='d1' username='jason'></p>

今日内容

分组与嵌套
伪类选择器
伪元素选择器
选择器优先级
css属性相关(操作标签样式)

分组与嵌套

div,p,span {  /*逗号表示并列关系*/
            color: yellow;
        }
#d1,.c1,span  {
            color: orange;
        }

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: black;
        }
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }
        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }
        
        input:focus {  /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.jd.com/">小轩在不在?</a>
<p>点我有你好看哦</p>
<input type="text">
</body>
</html>

伪元素选择器

p:first-letter {
            font-size: 48px;
            color: orange;
        }
p:before {  /*在文本开头 同css添加内容*/
            content: '你说的对';
            color: blue;
        }
p:after {
            content: '雨露均沾';
            color: orange;
        }
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)

选择器优先级

"""
id选择器
类选择器
标签选择器
行内式
	
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        /*
            1.选择器相同 书写顺序不同
                就近原则:谁离标签更近就听谁的
            2.选择器不同 ...
                行内 > id选择器  > 类选择器 > 标签选择器
                精确度越高越有效
        */
        #d1 {
            color: aqua;
        }
        /*.c1 {*/
        /*    color: orange;*/
        /*}*/
        /*p {*/
        /*    color: red;*/
        /*}*/
    </style>
<!--    <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
    <p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p>
</body>
</html>

css属性相关

<style>
        p {
            background-color: red;
            height: 200px;
            width: 400px;
        }
        span {
            background-color: green;
            height: 200px;
            width: 400px;
            /*行内标签无法设置长宽 就算你写了 也不会生效*/
        }
</style>

字体属性

p {
            /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

            /*font-size: 24px;  !*字体大小*!*/

            /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/

            /*color: red;  !*直接写颜色英文*!*/
            /*color: #ee762e;  !*颜色编号*!*/
            /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/
            /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/

            /*当你想要一些颜色的时候 可以利用现成的工具
                1 pycharm提供的取色器
                2 qq或者微信截图功能
  							也可以多软件结合使用 
            */
        }

文字属性

p {
            /*text-align: center;  !*居中*!*/
            /*text-align: right;*/
            /*text-align: left;*/
            /*text-align: justify;  !*两端对齐*!*/

            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            /*text-decoration: line-through;*/
            /*text-decoration: none;*/
            /*在html中 有很多标签渲染出来的样式效果是一样的*/
            font-size: 16px;
            text-indent: 32px;   /*缩进32px*/
        }
        a {
            text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
        }

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #d1 {
            height: 500px;
            background-color: red;
        }
        #d2 {
            height: 500px;
            background-color: green;
        }
        #d3 {
            height: 500px;
            background-image: url("222.png");
            background-attachment: fixed;
        }
        #d4 {
            height: 500px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        p {
            background-color: red;

            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
            /*border-left-width: 5px;*/
            /*border-left-color: red;*/
            /*border-left-style: dotted;*/

            /*border-right-width: 10px;*/
            /*border-right-color: greenyellow;*/
            /*border-right-style: solid;*/

            /*border-top-width: 15px;*/
            /*border-top-color: deeppink;*/
            /*border-top-style: dashed;*/

            /*border-bottom-width: 10px;*/
            /*border-bottom-color: tomato;*/
            /*border-bottom-style: solid;*/
            border: 3px solid red;  /*三者位置可以随意写*/

        }
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }
    </style>
</head>
<body>
    <p>穷人  被diss到了  哭泣.png</p>
<div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
<div id="d1"></div>
</body>
</html>

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*#d1 {*/
        /*    !*display: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
        /*    display: inline;  !*将标签设置为行内标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: inline;*/
        /*}*/
        /*#d1 {*/
        /*    display: block;  !*将标签设置成块儿级标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: block;*/
        /*}*/
        /*#d1 {*/
        /*    display: inline-block;*/
        /*}*/
        /*#d2 {*/
        /*    display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!*/
        /*}*/
    </style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>  
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>

盒子模型

"""
盒子模型
	就以快递盒为例
		快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
		盒子的厚度(标签的边框 border)
		盒子里面的物体到盒子的距离(内容到边框的距离  padding内边距)
		物体的大小(内容 content)
	
	
	如果你想要调整标签与标签之间的距离 你就可以调整margin
	
	浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
	
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;  /*上下左右全是0
            /*margin: 10px 20px;  !* 第一个上下 第二个左右*!*/
            /*margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*!*/
            /*margin: 10px 20px 30px 40px;  !*上 右 下 左*!*/
        }
        /*p {*/
        /*    margin-left: 0;*/
        /*    margin-top: 0;*/
        /*    margin-right: 0;*/
        /*    margin-bottom: 0;*/
        /*}*/

        #d1 {
            margin-bottom: 50px;
        }


        #d2 {
            margin-top: 20px;  /*不叠加 只取大的*/
        }

        #dd {
            margin: 0 auto;  /*只能做到标签的水平居中*/
        }
        p {
            border: 3px solid red;
            /*padding-left: 10px;*/
            /*padding-top: 20px;*/
            /*padding-right: 20px;*/
            /*padding-bottom: 50px;*/

            /*padding: 10px;*/
            /*padding: 10px 20px;*/
            /*padding: 10px 20px 30px;*/
            /*padding: 10px 20px 30px 40px;*/  /*规律和margin一模一样*/
        }
    </style>
</head>
<body>
<!--    <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!--    <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!--    <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->

<p>ppp</p>

</body>
</html>

浮动

"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
        body {
            margin: 0;
        }
        #d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;  /*浮动  浮到空中往左飘*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: greenyellow;
            float: right;   /*浮动 浮到空中往右飘*/
        }
</style>

作业

今日作业
必做题
1.日考题总结并整理到个人博客中
2.从头到位敲一遍今天的css选择器及样式代码
选做题
1.尝试着搭建小米导航条(练习浮动 不要求搭的多好看)

============================================================================

每日测验(day53)

"""
今日考题
1.什么是python的垃圾回收机制
2.你所知道的能够实现单例模式的方式有哪些，尝试着手写几个
3.列举python中常用模块及主要功能，越多越好！
4.简述盒子模型
5.什么是浮动，浮动的作用
ps:每日考题一定要自己动手，自己查询出答案，锻炼自己的复习能力，搜商能力
"""

昨日内容回顾

分组与嵌套

# 多个选择器可以并列公用一套css样式
div,p,span {}
# 不同选择器之间也可以混合使用
.c1,#d1>span {}

伪类选择器

a:link {}
a:hover {}  # 需要记忆
a:active {}
a:visited {}
input:focus {}  # input框获取焦点

伪元素选择器

p:first-letter {}  # 通过css加文本内容 但是无法选中
p:before {}
p:after {}
# ps:before和after多用于清除浮动带来的负面影响

选择器优先级

"""
选择器相同 就近原则

行内 > id > class > 标签
精确度越高说话越硬
"""
ps:!important强制让标签采用你的样式 不推荐使用

宽和高

width
height
# 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度  但是可以通过css设置
# 行内标签宽度和高度都是有内部文本决定的  行内标签是无法设置长宽的 无效

字体属性

# 字体样式 草书 行书 ...
font-family
# 字体大小
font-size
# 字重
font-weight
# 文本颜色
	1 直接写颜色英文
  2 写颜色编号 #4e4e4e
  3 写颜色的三基色 rgb(128,128,128)  # 范围0-255
  4 可以给颜色加透明度 rgba(128,128,128,0.5)  # 范围0-1
 	ps:可以用pycharm 微信 qq等软件快速的获取你想要的颜色

文字属性

# 文字对齐
text-align
		center
# 文字装饰 记忆  主要就是用来给a标签去掉自带的下划线
text-decoration
		none
# 首行缩进
text-indent

背景属性

# 背景色
backgroud-color
# 背景图片
background:#fff url() no-repeat center center
"""
ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀
"""
ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中
  
# 背景图片实际应用的案例

边框

# 任何一个标签都有上下左右四个方向的边框
border-width
border-style
border-color
简写
border

# 画圆
border-radius:50%

display属性

# 能够让标签具有自身没有的属性和特征
display
	none  隐藏 并且原来的位置也没了
  inline
  block
  inline-block
ps:visibility:hidden只隐藏 位置还在

css盒子模型

# 1 外边距(标签与标签之间的距离)			 margin
# 2 边框													border
# 3 内边距/内填充									 padding
# 4 内容												  content

"""
body标签默认自带8px的margin

margin:
	10 上下左右
	10 20 上下 左右
	10 20 30 上 左右 下
	10 20 30 40 上 右 下 左
padding:
	10 上下左右
	10 20 上下 左右
	10 20 30 上 左右 下
	10 20 30 40 上 右 下 左
"""

浮动float

"""
只要是前期页面布局 一般都是用浮动来设计页面
能够让标签脱离正常的文档流漂浮到空中(距离用户更近)

浮动的元素没有块儿级和行内一说 标签多大浮动起来之后就占多大
"""

今日内容

解决浮动带来的影响
溢出属性
定位
验证浮动和定位是否脱离文档流
z-index模态框
透明度opacity
简单博客园首页搭建
JavaScript编程语言开头

今日内容详细

解决浮动带来的影响

# 浮动带来的影响
会造成父标签塌陷的问题

"""
解决浮动带来的影响 推导步骤
	1.自己加一个div设置高度
	2.利用clear属性
		#d4 {
            clear: left;  /*该标签的左边(地面和空中)不能有浮动的元素*/
        }
  3.通用的解决浮动带来的影响方法
  	在写html页面之前 先提前写好处理浮动带来的影响的 css代码
  	.clearfix:after {
            content: '';
            display: block;
            clear:both;
        }
    之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
    上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix
"""

溢出属性

p {
            height: 100px;
            width: 50px;
            border: 3px solid red;
            /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/
            /*overflow: hidden;  !*溢出部分直接隐藏*!*/
            /*overflow: scroll;  !*设置成上下滚动条的形式*!*/
            /*overflow: auto;*/
        }

定位

静态

所有的标签默认都是静态的static，无法改变位置
相对定位(了解)

相对于标签原来的位置做移动relative
绝对定位(常用)

相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

eg:小米网站购物车

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
固定定位(常用)

相对于浏览器窗口固定在某个位置

eg:右侧小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
            left: 50px;  /*从左往右   如果是负数 方向则相反*/
            top: 50px;  /*从上往下    如果是负数 方向则相反*/
            /*position: static;  !*默认是static无法修改位置*!*/
            position: relative;
            /*相对定位
            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然你哪怕没有动 但是你的性质也已经改变了
            */
        }

        #d2 {
            height: 100px;
            width: 200px;
            background-color: red;
            position: relative;  /*已经定位过了*/
        }
        #d3 {
            height: 200px;
            width: 400px;
            background-color: yellowgreen;
            position: absolute;
            left: 200px;
            top: 100px;
        }

        #d4 {
            position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
            bottom: 10px;
            right: 20px;

            height: 50px;
            width: 100px;
            background-color: white;
            border: 3px solid black;
        }
    </style>
</head>
<body>
<!--    <div id="d1"></div>-->

<!--<div id="d2">-->
<!--    <div id="d3"></div>-->
<!--</div>-->

<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到顶部</div>

</body>
</html>

**ps:**浏览器是优先展示文本内容的

验证浮动和定位是否脱离文档流(原来的位置是否还保留)

"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流
	1.相对定位
# 脱离文档流
	1.浮动
  2.绝对定位
  3.固定定位
  
<!--<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow"></div>-->

<!--<div style="height: 100px;width: 200px;background-color: red;"></div>-->
<!--<div style="height: 100px;width: 200px;background-color: greenyellow;position: absolute;left: 500px"></div>-->
<!--当没有父标签做到位 就参照与body-->
<!--<div style="height: 100px;width: 200px;background-color: blue;"></div>-->

<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>

z-index模态框

eg:百度登陆页面 其实是三层结构
  1.最底部是正常内容(z=0)  最远的
  2.黑色的透明区(z=99)  		中间层
  3.白色的注册区域(z=100)  离用户最近

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .modal {
            background-color: white;
            height: 200px;
            width: 400px;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 100;
            margin-left: -200px;
            margin-top: -100px;

        }
    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆页面</h1>
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <button>点我点我~</button>
</div>
</body>
</html>

透明度opacity

# 它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色 
而opacity可以修改颜色和字体

opacity: 0.5;

作业书写

"""
当你在设计页面的时候 先用div划分区域，之后填写基本内容，最后再调节样式
在书写html代码的时候 class、id等属性最好都起的见名知意
"""

博客园页面搭建

自己课下尝试着搭建，不要照搬照套我的

Js简介

1.js也是一门编程语言 它也是可以写后端代码的
	用js一统天下 前后端都可以写
  	nodejs 支持js代码跑在后端服务器上
    然而并不能 想的太天真了!!!
2.js跟java一毛钱关系都没有，纯粹是为了蹭当时java的热度


ECMAScript和JavaScript的关系
因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。


JS版本
	主要还是用的5.1和6.0

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习

# js的注释
"""
// 单行注释

/*
多行注释1
多行注释2
多行注释3
*/
"""

# 两种引入方式
	1.script标签内部直接书写js代码
  2.script标签src属性引入外部js代码

# js语法结构
	js是以分号作为语句的结束
  但是如果你不写分号，问题也不大 也能够正常执行 但是它就相当于没有结束符

js学习流程

变量
数据类型
流程控制
函数
对象
内置方法/模块

变量

"""
在js中 首次定义一个变量名的时候需要用关键字声明
	1.关键字var
		var name='jason'
	2.es6推出的新语法
		let name='jason'
		如果你的编辑器支持的版本是5.1那么无法使用let
		如果是6.0则向下兼容 var let
"""
# var与let的区别
n = 10
for n in range(5):
  print(n)
print(n)  
# var 5		let 10

"""
var在for循环里面定义也会影响到全局
let在局部定义只会在局部生效
"""

常量

# python中没有真正意义上的常量 默认全大写就是表示常量
# js中是有真正意义上的常量的
const pi = 3.14

作业

今日作业
必做题
1.整理今日内容至博客
2.博客园首页搭建(独立完成)
3.预习js内容:https://www.cnblogs.com/Dominic-Ji/p/9111021.html

========================================================================

每日测验(day54)

"""
今日日考
1.
	二进制转换成十进制：v = “0b1111011”
	十进制转换成二进制：v = 18
	八进制转换成十进制：v = “011”
	十进制转换成八进制：v = 30
	十六进制转换成十进制：v = “0x12”
	十进制转换成十六进制：v = 87
2.简述可迭代对象，迭代器对象，生成器对象及应用场景
3.什么是元类?元类的应用场景有哪些，能具体说说吗？
4.你用的MySQL是哪个引擎，各个引擎之间有什么区别
5.你所知道的定位有哪些，每个定位各有什么特点，列举哪些是不脱离文档流的哪些是脱离文档流的
"""

昨日内容回顾

Ps:浏览器默认优先展示文本内容

清除浮动带来的影响

"""
浮动的元素会造成父标签的塌陷

解决塌陷推导步骤
	1.自己写一个标签强行撑起一个高度
	2.clear属性
			clear:left\right\both
	3.统一解决方式	提前定义好后续直接使用
  	.clearfix:after {
  		content:'';
  		display:block;
  		clear:both;
 	 }
 	 谁塌陷了就给谁加上clearfix类属性
"""

溢出属性

"""标签内部的内容超出了标签自身的范围会造成内容的溢出"""
overflow:hidden/scroll/auto/visible
  
# 圆形头像制作
overflow:hidden
  
img {
    max-width:100%;
  }

定位

"""
静态 static
	默认所有的标签都是静态的 无法改变位置	

相对定位 relative
	相对于标签自身原来的位置
	(如果你讲标签的position由static变成relative，那么标签就会由没有定位过的标签变成已经定位过的标签 性质就改变了)

绝对定位 absolute
	eg:小米购物车
	相对于已经定位过的父标签(如果没有则以body作为参照)

固定定位  fixed
	eg:回到顶部、右侧小广告...
	相对于浏览器窗口定位

left
top
right
bottom
"""

# 脱离文档流
	1.浮动
  2.绝对定位
  3.固定定位
# 不脱离文档流
	1.相对定位

z-index

# 其实是用来调节指向我们人的z轴的距离   模态框
"""
eg:百度登陆页面 三层结构
	1.底部正常文本内容
	2.黑色的布
	3.白色的登陆页面
"""
z-index:999

透明度
```
opacity  # 颜色和字体均可改变
```

简易版本的博客园首页

"""
先用div划定区域
再用HTML先占位
最后调节样式
	1.在给标签起id或者class属性的时候 也应该做到见名知意

css单独开设文件书写
	1.上来先用注释表明用途 以及作用区域
		/*这是一个博客园首页的样式文件*/
		
		/*通用样式*/
    body {
    	margin:0;
    }
    a {
    	text-decoration:none
    }
    ul {
    	list-style-type:none
    	padding-left:0
    }
		
		/*左侧样式*/
		
		/*右侧样式*/
"""

js简介

"""
js也是一门编程语言(但是它内部的逻辑有很多bug，不是很严谨)
js的发展史 javascript ecmascript
主要版本
	5.1
	6

js是很容易学习的
	当你有了一门编程语言的基础之后 再去学其他编程语言真的没有那么难

js的注释
	//单行注释
	/**/  多行注释

js的引入方式
	两种
		script内部书写
		script src属性引入外部js文件

js是用分号作为语句的结束 但是你不写基本也没问题

"""

js变量

"""
在js中首次声明变量需要使用关键字
	var
		声明的都是全局
	let
		可以区分全局和局部
	for循环案例
	不用关键字其实也不报错(js非常的不严谨,不容易报错)
"""

js常量

"""
在js中是有真正意义上的常量的 
	const pi = 3.14
	pi = 3.44  # 报错
"""

今日内容概要

数值类型
字符类型
布尔值
null与undefined
对象

数组

自定义对象
流程控制
函数
内置对象

时间对象

正则对象

JSON对象
BOM操作(js操作浏览器显示动态效果等…)

今日内容详细

变量

"""
js变量的命名规范
	1.变量名只能是 
		数字 字母 下划线 $
	2.变量名命名规范(不遵循也可以)
		1.js中推荐使用驼峰式命名
			userName
			dataOfDb
		2.python推荐使用下划线的方式
			user_name
			data_of_db
	3.不能用关键字作为变量名
			不需要记忆 

js代码的书写位置
	1.可以单独开设js文件书写
	2.还可以直接在浏览器提供的console界面书写
		在用浏览器书写js的时候 左上方的清空按钮只是清空当前页面 代码其实还在
		如果你想要重新来 最好重新开设一个 页面
		(在使用浏览器书写 你自己的js代码的时候推荐你在 自己的html页面打开)
"""

数据类型

js也是一门面向对象的编程语言即一切皆对象!!!

js/python是一门拥有动态类型

name = 'jason'
name = 123
name = [1,2,3,4]
# name可以指向任意的数据类型 
# 但是有一些语言中，变量名之内指向一种后续不能更改

数值类型(number)

var a = 11;
var b = 11.11;
// 如何查看当前数据类型
typeof a;

var a = 11;
var b = 11.11;
typeof a;
typeof b;
"number"

// 特殊的 NaN:数值类型 表示的意思是“不是一个数字” NOT A NUMBER

// 类型转换
parseInt()
parseFloat()


parseInt('12312312')
12312312
parseFloat('11.11')
11.11
parseInt('11.11')
11
parseInt('123sdasdajs2312dasd')
123
parseInt('asdasdad123sdasdajs2312dasd')
NaN

字符类型(string)

var s = 'jason'
undefined
typeof s
"string"
var s1 = "jason"
undefined
typeof s1;
"string"
var s2 = '''egon'''  // 不支持三引号
VM665:1 Uncaught SyntaxError: Unexpected string

// 模版字符串
var s3 = `
asdkajsd
sdjkladj
asdjlajdkl
`
typeof s3
"string"
// 模版字符串除了可以定义多行文本之外还可以实现格式化字符串操作
// 书写${} 会自动去前面找大括号里面的变量名对应的值 如果没有定义直接报错
var name = 'jason'

var age = 18

var sss = `
   my name is ${name} and my age is ${age}
`
sss
"
   my name is jason and my age is 18
"

var s4 = `my name is ${namemmmmm}`
VM1140:1 Uncaught ReferenceError: namemmmmm is not defined
    at <anonymous>:1:24
// 在写js代码的时候 不要去管左侧箭头的内容


// 字符串的拼接
// 在python中不推荐你使用+做拼接 join
// 在js中推荐你直接使用+做拼接
name + age

字符类型常用方法

"""
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
	联想记忆
		MySQL
			concat
			concat_ws
			group_concat
		python
			join
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割
"""
# 记忆的时候一定要对比python去记 

var name = 'egondsb'
undefined

name.length
7

var name1 = '  egonDSB  '
undefined
name1
"  egonDSB  "
name1.trim()
"egonDSB"
name1.trimLeft()
"egonDSB  "
name1.trimRight()
"  egonDSB"

var name2 = '$$jason$$'
undefined
name2.trim('$')  # 不能加括号指定去除的内容
"$$jason$$"

name2.charAt(0)
"$"
name2.indexOf('as')
3

name2.substring(0,5)
"$$jas"
name2.slice(0,5)
"$$jas"
name2.substring(0,-1)  # 不识别负数
""
name2.slice(0,-1)  # 后面推荐就使用slice就可以
"$$jason$"


var name3 = 'eGoNDsb123666HahA'
undefined
name3.toLowerCase()
"egondsb123666haha"
name3.toUpperCase()
"EGONDSB123666HAHA"
var name = 'tank|hecha|liaomei|mengsao|...'
undefined

name.split('|')
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]
name.split('|',2)
(2) ["tank", "hecha"]0: "tank"1: "hecha"length: 2__proto__: Array(0)
name.split('|',10)  # 第二个参数不是限制切割字符的个数还是获取切割之后元素的个数
(5) ["tank", "hecha", "liaomei", "mengsao", "..."]


name.concat(name1,name2)
"tank|hecha|liaomei|mengsao|...  egonDSB  $$jason$$"
var p = 1111
undefined
name.concat(p)  # js是弱类型(内部会自动转换成相同的数据类型做操作)
"tank|hecha|liaomei|mengsao|...1111"


l = [1,2,3,4,5,6,7]
res = '|'.join(l)  # 直接报错
print(res)

布尔值(boolean)

"""
1.在python中布尔值是首字母大写的
	True
	False
2.但是在js中布尔值是全小写的
	true
	false
# 布尔值是false的有哪些
	空字符串、0、null、undefined、NaN
"""

null与undefined

"""
null
	表示值为空 一般都是指定或者清空一个变量时使用
		name = 'jason'
		name = null
undefined
	表示声明了一个变量 但是没有做初始化操作(没有给值)
	函数没有指定返回值的时候 返回的也是undefined
	
参考博客图解：厕所卷纸
https://www.cnblogs.com/Dominic-Ji/p/9111021.html
"""

对象

一切皆对象

数组(类似于python里面的列表) []

var l = [11,22,33,44,55]

typeof l
"object"
var l1 = [11,'sdasd',11.11,true]

l1[1]
"sdasd"
l1[-1]  # 不支持负数索引


var l = [111,222,333,444,555,666]
undefined
l.length
6
l.push(777)
7
l
(7) [111, 222, 333, 444, 555, 666, 777]
l.pop()
777
l
(6) [111, 222, 333, 444, 555, 666]
l.unshift(123)
7
l
(7) [123, 111, 222, 333, 444, 555, 666]
l.shift()
123
l.slice(0,3)
(3) [111, 222, 333]
l.reverse()
(6) [666, 555, 444, 333, 222, 111]
l.join('$')  # 跟python刚好相反
"666$555$444$333$222$111"

l.concat([111,222,333])  # extend
(9) [666, 555, 444, 333, 222, 111, 111, 222, 333]
l.sort()
(6) [111, 222, 333, 444, 555, 666]

# 三个比较重要的方法
var ll = [111,222,333,444,555,666]
ll.forEach(function(value){console.log(value)},ll)
VM2277:1 111  # 一个参数就是数组里面每一个元素对象
VM2277:1 222
VM2277:1 333
VM2277:1 444
VM2277:1 555
VM2277:1 666

ll.forEach(function(value,index){console.log(value,index)},ll)
VM2346:1 111 0  # 两个参数就是元素 + 元素索引
VM2346:1 222 1
VM2346:1 333 2
VM2346:1 444 3
VM2346:1 555 4
VM2346:1 666 5
undefined
ll.forEach(function(value,index,arr){console.log(value,index,arr)},ll)  # 元素 + 元素索引 + 元素的数据来源
VM2430:1 111 0 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 222 1 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 333 2 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 444 3 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 555 4 (6) [111, 222, 333, 444, 555, 666]
VM2430:1 666 5 (6) [111, 222, 333, 444, 555, 666]
undefined

ll.forEach(function(value,index,arr,xxx){console.log(value,index,arr,xxx)},ll)  # 最多三个
VM2532:1 111 0 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 222 1 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 333 2 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 444 3 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 555 4 (6) [111, 222, 333, 444, 555, 666] undefined
VM2532:1 666 5 (6) [111, 222, 333, 444, 555, 666] undefined
  
  

ll
(6) [111, 222, 333, 444, 555, 666]
ll.splice(0,3)  # 两个参数 第一个是起始位置 第二个是删除的个数
(3) [111, 222, 333]
ll
(3) [444, 555, 666]
ll.splice(0,1,777)  # 先删除后添加
[444]
ll
(3) [777, 555, 666]
ll.splice(0,1,[111,222,333,444])
[777]
ll
(3) [Array(4), 555, 666]



var l1 = [11,22,33,44,55,66]
undefined
l1.map(function(value){console.log(value)},l1)
VM3115:1 11
VM3115:1 22
VM3115:1 33
VM3115:1 44
VM3115:1 55
VM3115:1 66
l1.map(function(value,index){return value*2},l1)
(6) [22, 44, 66, 88, 110, 132]
l1.map(function(value,index,arr){return value*2},l1)
(6) [22, 44, 66, 88, 110, 132]

运算符

# 算术运算符
var x = 10;
var res1 = x++;
var res2 = ++x;
res1 10
res2 12
++表示自增1 类似于 +=1
加号在前先加后赋值 加号在后先赋值后加

# 比较运算符
1 == '1'  # 弱等于  内部自动转换成相同的数据类型比较了
true  

1 === '1'  # 强等于  内部不做类型转换

1 != '1'
false
1 !== '2'
true

# 逻辑运算符
	# python中 and or not
  # js中 && || !
5 && '5'
'5'

0 || 1
1

!5 && '5'
false

"""
一定要注意到底什么时候返回的是布尔值 什么是返回的是数据
按照后端逻辑理解吧 js这块看看就行了
"""

# 赋值运算符
= += -= *= ....

流程控制

# if判断
var age = 28;
# if(条件){条件成立之后指向的代码块}
if (age>18){
  console.log('来啊 来啊')
}
# if-else
if (age>18){
  console.log('来啊 来啊')
}else{
  console.log('没钱 滚蛋')
}
# if-else if else
if (age<18){
  console.log("培养一下")
}else if(age<24){
  console.log('小姐姐你好 我是你的粉丝')
}else{
  console.log('你是个好人')
}
"""
在js中代码是没有缩进的 只不过我们处于python书写习惯人为的加上了而已
()条件
{}代码块
"""

# switch语法
"""
提前列举好可能出现的条件和解决方式
"""
var num = 2;
switch(num){
  case 0:
  	console.log('喝酒');
  	break;  # 不加break 匹配到一个之后 就一直往下执行
  case 1:
  	console.log('唱歌');
  	break;
  case 2:
  	console.log('洗脚');
  	break;
  case 3:
  	console.log('按摩');
  	break;
  case 4:
  	console.log('营养快线');
  	break;
  case 5:
  	console.log('老板慢走 欢迎下次光临');
  	break;
  default:
  	console.log('条件都没有匹配上 默认走的流程')
}

# for循环
# 打印0-9数字
for(let i=0;i<10;i++){
  console.log(i)
}
# 题目1  循环打印出数组里面的每一个元素
var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
  console.log(l1[i])
}

# while循环
var i = 0
while(i<100){
  console.log(i)
  i++;
}

# 三元运算符
# python中三元运算符 res = 1 if 1>2 else 3
# JS中三元运算  res = 1>2?1:3 
条件成立取问好后面的1 不成立取冒号后面的3
var res = 2>5?8:10 # 10
var res = 2>5?8:(8>5?666:444)  # 666
"""
三元运算符不要写的过于复杂 
"""

函数

# 在python定义函数需要用到关键字def
# 在js中定义函数需要用到关键字function

# 格式
function 函数名(形参1,形参2,形参3...){函数体代码}

# 无参函数
function func1(){
  console.log('hello world')
}
func1()  # 调用 加括调用 跟python是一样的

# 有参函数
function func2(a,b){
  console.log(a,b)
}
func2(1,2)

func2(1,2,3,4,5,6,7,8,9)  # 多了没关系 只要对应的数据
VM3610:2 1 2
undefined

func2(1)  # 少了也没关系
VM3610:2 1 undefined
  
# 关键字arguments
function func2(a,b){
  console.log(arguments)  # 能够获取到函数接受到的所有的参数
  console.log(a,b)
}

function func2(a,b){
  if(arguments.length<2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}


# 函数的返回值  使用的也是关键字return
function index(){
  return 666
}
function index(){
  return 666,777,888,999
}
res = index();
999
res
999  # 只能拿到最后一个

function index(){
  return [666,777,888,999]
}
# js不支持解压赋值


# 匿名函数  就是没有名字
function(){
  console.log('哈哈哈')
}
var res = function(){
  console.log('哈哈哈')
}

# 箭头函数(要了解一下)  主要用来处理简单的业务逻辑 类似于python中的匿名函数
var func1 = v => v;  """箭头左边的是形参 右边的是返回值"""
等价于
var func1 = function(v){
  return v
}

var func2 = (arg1,arg2) => arg1+arg2
等价于
var func1 = function(arg1,arg2){
  return arg1+arg2
}

函数的全局变量与局部变量

# 跟python查找变量的顺序一致
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //输出结果是？


var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？


var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();

词法分析（直接忽略）

自定义对象

# 你可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加的方便

# 创建自定义对象 {}
"""第一种创建自定义对象的方式"""
var d1 = {'name':'jason','age':18}


var d = {'name':'jason','age':18}
typeof d
"object"

d['name']
"jason"
d.name  # 比python从字典获取值更加的方便
"jason"
d.age
18

for(let i in d){
  console.log(i,d[i])
}  # 支持for循环 暴露给外界可以直接获取的也是键


"""第二种创建自定义对象的方式  需要使用关键字 new"""
var d2 = new Object()  # {}

d2.name = 'jason'
{name: "jason"}

d2['age'] = 18
{name: "jason", age: 18}

Date对象

let d3 = new Date()
Fri May 15 2020 14:41:06 GMT+0800 (中国标准时间)
   
d3.toLocaleString()
"2020/5/15 下午2:41:06"

# 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()

let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()  # 月份从0开始0-11月
"1111/12/11 上午11:11:11"

# 时间对象具体方法
let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间戳

JSON对象

"""
在python中序列化反序列化
	dumps 		序列化
	loads			反序列化

在js中也有序列化反序列化
	JSON.stringify()								dumps
	JSON.parse()										loads			
"""
let d7 = {'name':'jason','age':18}
let res666 = JSON.stringify(d7)
"{"name":"jason","age":18}"

JSON.parse(res666)
{name: "jason", age: 18}

RegExp对象

"""
在python中如果需要使用正则 需要借助于re模块
在js中需要你创建正则对象
"""
# 第一种 有点麻烦
let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')
# 第二种 个人推荐
let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/

# 匹配内容
reg1.test('egondsb')
reg2.test('egondsb')

# 题目 获取字符串里面所有的字母s
let sss = 'egondsb dsb dsb'
sss.match(/s/)  # 拿到一个就停止了
sss.match(/s/g)	# 全局匹配  g就表示全局模式

sss.match(/s/)
["s", index: 5, input: "egondsb dsb dsb", groups: undefined]
sss.match(/s/g)
(3) ["s", "s", "s"]

# 全局匹配模式吐槽点
let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg2.test('egondsb')

reg3.test('egondsb')  # 全局模式有一个lastIndex属性
true
reg3.test('egondsb')
false
reg3.test('egondsb')
true
reg3.test('egondsb')
false

reg3.lastIndex
0
reg3.test('egondsb')
true
reg3.lastIndex
7

# 吐槽点二 
let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()

reg4.test()  # 什么都不传 默认传的是undefined
true
reg4.test()
true

reg4.test(undefined)
true
let reg5 = /undefined/
undefined
reg5.test('jason')
false
reg5.test()
true

"""
总结 你在用js书写正则的时候一定要注意上述问题
一般情况下你后续也不会解除到了
"""

Math对象(有兴趣就看一下)

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。

总结

"""
js数据类型
	自己从头到位敲一边
	有一些模棱两可的知识点直接忽略(逻辑漏洞...)
	JSON对象要掌握
"""

作业

必做题
1.博客园首页搭建(继续完成)
2.js部分博客整理(熟悉语法结构及重点强调知识点记忆)
3.基础薄弱的同学整理回顾之前的知识点，没事多找些代码敲一敲保持手感
选做题
1.编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出(提示:switch结构)

============================================================================

每日测验(day55)

"""
今日考题:
1.什么是Js，Js的数据类型有哪些,Js序列化反序列化用的是什么方法
2.现有三个普通函数a,b,c都需要用户登陆之后才能访问。现需要你写一个装饰器校验用户是否登陆，并且用户只要登陆一次其他函数在调用时也无需再校验(提示:全局标志位)
3.什么是进程，线程，协程，程序中如何依次创建/实现它们
"""

上周内容回顾

HTML

# HTTP协议

# 超文本标记语言 就是一堆标签 每个标签具有特定的含义 是浏览器展示页面所公用的一套标准

# 注释 <!---->

# web服务的本质
		服务端
 		客户端
    文件(.html)
    （你在浏览器上看到的花里胡哨的页面内部都是由HTML组成的）

# HTML文档结构
		html
  		head
    	body
      
# 标签的分类
	1.
  	单标签
    双标签
  2.
  	块儿级标签
    行内标签
    	特例:p标签
        
# 一堆标签
	标题:h1~h6
  u i s b
  hr br
  段落:p
    
# 特殊符号
	&nbsp;
  &amp;
  &gt;
  &lt;
  &copy;
  &reg;
  &yen;

# 标签笔记重要的两个属性
	id
  class
  
# 常用标签
	div
  span
  	自己联想简易版本的博客园页面搭建，体会上述标签的作用
  
  a链接标签
  	href
    	1.放url 点击跳转
      2.放其他标签的id值 锚点功能
    target
    	默认是当前页面跳转 _self
      也可以新建页面打开 _blank
    
  img图片标签
  	src
    	图片的地址
    
    alt
    	图片加载不出来的情况下展示提示信息
    
    title
  		鼠标悬浮上去之后展示的提示信息
    
    height、width

# 列表标签
	ul
  	li
    list-style-type:none
    padding-left:0px
  
  ol
  	li
    
  dl	
  	dt
    dd

# 表格表格
	表格标签不一定非要讲thead和tbody都写出来 也可以只有tbody没有thead
	table
  	thead
    	tr
      	th/td
    tbody
    
 		colspan
    rowspan

# form表单
	朝后端发的获取用户数据的标签 一定要写在form表单内
	action  控制数据提交的路径
  	1.不写
    2.全写
    3.后缀
  
  method  控制提交方式get/post
  	form默认是get请求
 	
  enctype  控制数据提交的编码格式	
  	urlencoded
    formdata
    ...
 	
# input标签
	type属性
  	text
    password
    date
    radio
    	checked  属性名和属性值相同的情况下可以简写
    checkbox
    	checked
    file
    
    submit
    	button标签也可以
    button
    reset
    
# select标签		
	默认是单选 可以设置成多选multiple
  一个个的下拉选项是由一个个的option标签组成
  	selected

# textarea标签
	获取大段文本

# label标签

"""
获取用户数据的标签都应该有name属性用来表明数据的含义 类似于字典的key
获取到的用户数据类似于字典的value(也是存储到标签的value属性中了)
"""

CSS

# 样式

# 注释 /**/

# 引入方式
	三种方式
  	1.style
    2.link
    3.行内
    
# 如何查找标签
	选择器 {属性名:属性值;...}

# 基本选择器
	id选择器
  	#d1
  class选择器
  	.c1
  标签选择器
  	div
 	通用选择器
  	*
# 组合选择器  我们将标签的嵌套关系比喻成了亲戚关系
	div span
  
  div>span
  
  div+span
  
  div~span

# 属性选择器
	input[username='jason']

# 不同选择器之间可以并列、混用
	div,p,span 
  
  div,#d1,.c1

# 伪类选择器
	a标签的四个状态
  	:link
    :hover	鼠标放上去
    :active
    :visited
    :focus	聚焦
# 伪元素选择器
	:first-letter
  :before
  :after
    	解决浮动带来的影响
      .clearfix:after {
        
      }
# 选择器的优先级
	行内  id	class 标签

# 属性相关
	font-family
  font-size
  font-weight
  color
  	red
    #eee
    rgb()
    rgba()
 	取色工具
 	
  text-align
  	center
  text-decoration
  	none
    a标签自带的下划线
  text-indent
  
  backgroud:red url('') no-repeat center center	
    	背景图片不动
      葫芦娃...
  
  border:3px solid red;
   
 	border-radius
  	50%  圆形头像
   
 	display
  	none
    block
    inline
    inline-block
  
  盒子模型
  	margin
    border
    padding
    content
  
  浮动
  	float
    	0.浮动多用于前期页面布局
    	1.浮动的元素会造成父标签塌陷
  
  清除浮动
  	1.clear
    2.通用的方式
    	哪里塌陷加哪里
      .clearfix:after{
        content:'';
        display:block;
        clear:both
      }
  溢出
  	overflow
    圆形头像
  
  定位
  	静态 static
    相对定位  relative
    绝对定位  absolute
    固定定位	fixed
    
  z-index
  	模态框
  
  透明度
  	opacity
 	
  box-shadow:3px 3px 3px rgba(0,0,0,0.5)

JS

# 面向对象的编程语言

# 注释	//		/**/

# 引入方式
	script

# 数据类型

# 变量
	var 5.1版本及之前的
  let 6.0版本新出的
  
  变量命名规范
  	1.数字 字母 下划线 $
    2.驼峰命名
    	userName
    3.不能有关键字
# 常量
	const

# 数值类型 number
	NaN
# 字符类型string
	模版字符串
  	res = `
    sd
    ads
    `
    
    res=`
    asdsa ${name} ...
    `
# 布尔值boolean
	true、false

# null与undefined
	厕纸图片

# 数组对象	python中的列表 []

# 运算符
	++
  
  ===
  
  && || !
  
# 流程控制  （）条件		{}代码块
if-else if -else
	if(){}else if(){}else{}

switch

for
	for(let i=0;i<10;i++){}

while
	while(i<100){}

# 三元运算
	1>2?3:4
# 函数
function func(arg1,arg2,...){
  arguments
  return  不能返回多个 需要你自己构造容器类型返回
}

# 箭头函数
var func1 = v => v

# 自定义对象
"""
在js中创建对象有一个关键字new
"""
d1 = {'name':'jason','password':123}
d1.name 

d2 = new Object()
d2.name = 'jason'


# Date对象

# JSON对象
	JSON.stringify()			dumps
  JSON.parse()					loads

# RegExp对象
	1.全局模式下有一个lastIndex属性
  2.什么都不写默认匹配undefined

# Math对象(了解)

今日内容概要

JS结束

BOM与DOM
jQuery框架

选择器

操作样式

今日内容详细

BOM与DOM操作

# 截至目前为止 我们虽然已经学会了js语法 但是你会发现跟浏览器和html文件还是一点关系没有
"""
BOM
	浏览器对象模型  Browser Object Model
		js代码操作浏览器
DOM
	文档对象模型	  Document Object Model
		js代码操作标签
"""

BOM操作

# window对象
window对象指代的就是浏览器窗口

window.innerHeight  浏览器窗口的高度
900
window.innerWidth   浏览器窗口的宽度
1680

window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px')
# 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
# 扩展父子页面通信window.opener()  了解

window.close()  关闭当前页面

window子对象

window.navigator.appName
"Netscape"
window.navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

window.navigator.userAgent		掌握  # 用来表示当前是否是一个浏览器
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

"""
扩展:仿爬措施
	1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器
		userAgent
		user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
	如何破解该措施
		在你的代码中加上上面的user-agent配置即可
"""

window.navigator.platform
"MacIntel"

# 如果是window的子对象 那么window可以省略不写

history对象

window.history.back()  回退到上一页
window.history.forward()  前进到下一页
# 对应的就是你浏览器左上方的两个的箭头

location对象(掌握)

window.location.href	# 获取当前页面的url
window.location.href = url  # 跳转到指定的url
window.location.reload()  # 属性页面   浏览器左上方的小圆圈

弹出框

警告框
确认框
提示框

alert('你不要过来啊！！！')
undefined

confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
false
confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
true

prompt('手牌号给我看一下','22号消费888')
"来宾三位"

计时器相关

过一段时间之后触发(一次)
每隔一段时间触发一次(循环)

<script>
    function func1() {
        alert(123)
    }
    let t = setTimeout(func1,3000);  // 毫秒为单位 3秒之后自动执行func1函数

    clearTimeout(t)      // 取消定时任务  如果你想要清除定时任务 需要日前用变量指代定时任务


    function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发
    }
    show()
</script>

DOM操作

"""
DOM树的概念

所有的标签都可以称之为是节点

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应


DOM操作操作的是标签 而一个html页面上的标签有很多 
	1.先学如何查找标签
	2.再学DOM操作标签
	
DOM操作需要用关键字document起手
"""

查找标签

直接查找(必须要掌握)

"""
id查找
类查找
标签查找
"""
# 注意三个方法的返回值是不一样的
document.getElementById('d1')
<div id="d1">…</div>

document.getElementsByClassName('c1')
HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection
      
document.getElementsByTagName('div')
HTMLCollection(3) [div#d1, div, div, d1: div#d1]
                   
                   
let divEle = document.getElementsByTagName('div')[1]
divEle
<div>div>div</div>
"""
当你用变量名指代标签对象的时候 一般情况下都推荐你书写成
xxxEle
	divEle
	aEle
	pEle
"""

间接查找(熟悉)

let pEle = document.getElementsByClassName('c1')[0]  # 注意是否需要索引取值

pEle.parentElement  # 拿父节点
<div id="d1">"div
    "<div>div>div</div><p class="c1">…</p><p>div>p</p></div>
pEle.parentElement.parentElement
<body>…</body>
pEle.parentElement.parentElement.parentElement
<html lang="en"><head>…</head><body>…</body></html>
pEle.parentElement.parentElement.parentElement.parentElement
null

let divEle = document.getElementById('d1')
divEle.children  # 获取所有的子标签
divEle.children[0]
<div>div>div</div>

divEle.firstElementChild
<div>div>div</div>

divEle.lastElementChild
<p>div>p</p>

divEle.nextElementSibling  # 同级别下面第一个
<div>div下面div</div>

divEle.previousElementSibling  # 同级别上面第一个
<div>div上面的div</div>

节点操作

"""
通过DOM操作动态的创建img标签
并且给标签加属性
最后将标签添加到文本中
"""
let imgEle = document.createElement('img')  # 创建标签

imgEle.src = '111.png'  # 给标签设置默认的属性
"111.png"
imgEle

imgEle.username = 'jason'  # 自定义的属性没办法点的方式直接设置
"jason"
imgEle
<img src="111.png">


imgEle.setAttribute('username','jason')   # 既可以设置自定义的属性也可以设置默认的书写
undefined
imgEle
<img src="111.png" username="jason">
imgEle.setAttribute('title','一张图片')
imgEle
<img src="111.png" username="jason" title="一张图片">

let divEle = document.getElementById('d1')
undefined
divEle.appendChild(imgEle)  # 标签内部添加元素(尾部追加)
<img src="111.png" username="jason" title="一张图片">


"""
创建a标签
设置属性
设置文本
添加到标签内部
	添加到指定的标签的上面
"""
let aEle = document.createElement('a')

aEle
<a></a>
aEle.href = 'https://www.mzitu.com/'
"https://www.mzitu.com/"
aEle
<a href="https://www.mzitu.com/"></a>

aEle.innerText = '点我有你好看!'  # 给标签设置文本内容
"点我有你好看!"
aEle
<a href="https://www.mzitu.com/">点我有你好看!</a>
let divEle = document.getElementById('d1')
undefined
let pEle = document.getElementById('d2')
undefined
divEle.insertBefore(aEle,pEle)  # 添加标签内容指定位置添加
<a href="https://www.mzitu.com/">点我有你好看!</a>


"""
额外补充
	appendChild()
		removeChild()
		replaceChild()
	
	
	setAttribute()  设置属性
		getAttribute()  获取属性
		removeAttribute()  移除属性
"""

# innerText与innerHTML
divEle.innerText  # 获取标签内部所有的文本
"div 点我有你好看!
div>p
div>span"

divEle.innerHTML  # 内部文本和标签都拿到
"div
        <a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div&gt;p</p>
        <span>div&gt;span</span>
    "
    
divEle.innerText = 'heiheihei'
"heiheihei"
divEle.innerHTML = 'hahahaha'
"hahahaha"

divEle.innerText = '<h1>heiheihei</h1>'  # 不识别html标签
"<h1>heiheihei</h1>"
divEle.innerHTML = '<h1>hahahaha</h1>'  # 识别html标签
"<h1>hahahaha</h1>"

获取值操作

# 获取用户数据标签内部的数据
let seEle = document.getElementById('d2')
seEle.value
"111"
seEle.value
"333"

let inputEle = document.getElementById('d1')
inputEle.value

# 如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value  # 无法获取到文件数据
"C:\fakepath\02_测试路由.png"

fileEle.files
FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList
      
fileEle.files[0]  # 获取文件数据
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}

class、css操作

let divEle = document.getElementById('d1')
undefined
divEle.classList  # 获取标签所有的类属性
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]


divEle.classList.remove('bg_red')  # 移除某个类属性
undefined

divEle.classList.add('bg_red')  # 添加类属性
undefined
divEle.classList.contains('c1')  # 验证是否包含某个类属性
true
divEle.classList.contains('c2')
false

divEle.classList.toggle('bg_red')  # 有则删除无则添加
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false
divEle.classList.toggle('bg_red')
true



# DOM操作操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
"red"
pEle.style.fontSize = '28px'
"28px"
pEle.style.backgroundColor = 'yellow'
"yellow"
pEle.style.border = '3px solid red'
"3px solid red"

事件

"""
达到某个事先设定的条件 自动触发的动作
"""
# 绑定事件的两种方式
<button onclick="func1()">点我</button>
<button id="d1">点我</button>

<script>
    // 第一种绑定事件的方式
    function func1() {
        alert(111)
    }
    // 第二种
    let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        alert(222)
    }
</script>


"""
script标签既可以放在head内 也可以放在body内
但是通常情况下都是放在body内的最底部


# 等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
            // 第一种绑定事件的方式
            function func1() {
                alert(111)
            }
            // 第二种
            let btnEle = document.getElementById('d1');
            btnEle.onclick = function () {
                alert(222)
            }
        }
"""

============================================================================

每日测验（day56）

"""
今日考题
1.列举你所知道的PEP8 Python编码规范
2.求结果(易错题)
    v1 = 1 or 3
    v2 = 1 and 3
    v3 = 0 and 2 and 1
    v4 = 0 and 2 or 1
    v5 = 0 and 2 or 1 or 4
    v6 = 0 or Flase and 1
3.简述字符编码发展史，以及你所知道的字符编码，每个字符编码表的在表示字符内部位数区别
4.js代码书写位置有几种，什么是事件，js如何绑定事件
"""

昨日内容回顾

BOM与DOM操作

BOM操作

# window对象
window.innerHeight
window.innerWidth
window.open()  # 新建窗口打开指定的页面
	window.open(url,'','height,width,top,bottom')
window.close()  # 关闭当前窗口

# navigator对象
navigator.userAgent		# 后面讲爬虫还会涉及

# history对象
window.history.forward()
window.history.back()

# location对象
window.location.href  # 获取当前页面的url
window.location.href = url  # 跳转到指定的url
window.loacation.reload()

# 弹出框
alert()
confirm()  获取到用户点击的确定还是取消
prompt()		获取到用户输入的内容

# 计时器相关
1.
	setTimeout()
	clearTimeout()
2.
	setInterval()
  clearInterval()

DOM操作

"""
DOM树的概念

DOM操作可以操作
	HTML
	CSS
	事件

既然要操作 那首先得学会如何查找标签
"""

# 直接查找
document.getElementById('d1')  # 直接获取到标签对象
document.getElementsByClassName('c1')  # 数组
document.getElementsByTagName('div')  # 数组

# 间接查找
parentElement
children
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling

# 节点操作
	1.创建img标签，赋值属性，添加到文档中
  2.创建a标签，赋值属性和内部文本，添加到文档中
 	"""
 	1.创建标签
 		let pEle = document.createElement('p')
 	2.赋值属性
 		pEle.id = 'd1'
 		pEle.setAttribute('username','jason')
 		pEle.setAttribute('class','c1')
 	3.赋值内部文本
 		pEle.innerText = '我是p标签'
 	4.添加到其他标签内部
 		appendChild()
 			...
 		insertBefore()
 			...
 		setAttribute()
 			get...
 			remove...
 	"""
# innerText与InnerHTML
	# innerText只能获取标签内部的文本 设置文本的时候不识别HTML
  # InnerHTML文本和标签都获取 设置文本的时候识别HTML

# 获取值操作  value
	inputEle = document.getElementById('i1')
  inputEle.value
# 获取文件数据
  inputEle.files	# 数组  [文件对象,文件对象1...]
  inputEle.files[0]
# class操作
	classList
  classList.add()
  classList.remove()
  classList.contains()
  classList.toggle()  # 有删无加
# css操作  只要想操作标签css先用style起手
pEle.style.color
pEle.style.backgroudColor
pEle.style.marginTop
pEle.style.fontSize			
"""
会讲css中横杆或者下划线去掉 然后讲后面的单词变大写
font-size				fontSize
"""

# 事件
"""
到达某个条件自动触发的动作
"""
# 绑定事件的两种方式
	<p onclick='func()'></p>
  <p id='d1'></p>
  
  <script>
  	// 第一种
  	function func(){}
    // 第二种
    pEle = document.getElementById('d1')
    pEle.onclick = function(){}
  </script>
# js代码到底应该写在html页面的哪个位置
	一般都是放在body内最下方
# onload
	等待XXX加载/读取/渲染...完毕
  XXX.onload
  	等待XXX好了

今日内容概要

原生JS事件结束
jQuery(封装了js的前端框架(模块))

很容易与我们学的DOM操作混淆

原生js事件绑定

我们直接写几个案例，看懂即可

开关灯案例

<div id="d1" class="c1 bg_red bg_green"></div>
    <button id="d2">变色</button>

    <script>
        let btnEle = document.getElementById('d2')
        let divEle = document.getElementById('d1')
        btnEle.onclick = function () {  // 绑定点击事件
            // 动态的修改div标签的类属性
            divEle.classList.toggle('bg_red')
        }
    </script>

input框获取焦点失去焦点案例

<input type="text" value="老板 去吗?" id="d1">

<script>
    let iEle = document.getElementById('d1')
    // 获取焦点事件
    iEle.onfocus = function () {
        // 将input框内部值去除
        iEle.value = ''
        //  点value就是获取   等号赋值就是设置
    }
    // 失去焦点事件
    iEle.onblur = function () {
        // 给input标签重写赋值
        iEle.value = '没钱 不去!'
    }
</script>

实时展示当前时间

<input type="text" id="d1" style="display: block;height: 50px;width: 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    // 先定义一个全局存储定时器的变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
    // 1 访问页面之后 将访问的时间展示到input框中
    // 2 动态展示当前时间
    // 3 页面上加两个按钮 一个开始 一个结束
    function showTime() {
        let currentTime = new Date();
        inputEle.value = currentTime.toLocaleString()
    }

    startBtnEle.onclick = function () {
        // 限制定时器只能开一个
        if(!t){
            t = setInterval(showTime,1000)  // 每点击一次就会开设一个定时器 而t只指代最后一个
        }
    }
    endBtnEle.onclick = function () {
        clearInterval(t)
        // 还应该将t重置为空
        t = null
    }
</script>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<select name="" id="d1">
    <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "河北": ["廊坊", "邯郸",'唐山'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市'],
        '上海':['浦东新区','静安区','黄浦区'],
        '深圳':['南山区','宝安区','福田区']
    };
    // 选for循环获取省
    for(let key in data){
        // 将省信息做成一个个option标签 添加到第一个select框中
        // 1 创建option标签
        let opEle = document.createElement('option')
        // 2 设置文本
        opEle.innerText = key
        // 3 设置value
        opEle.value = key  // <option value="省">省</option>
        // 4 将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    // 文本域变化事件  change事件
    proEle.onchange = function () {
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        // 清空市select中所有的option
        cityEle.innerHTML = ''
        // 自己加一个请选择
        let ss = "<option disabled selected>请选择</option>"
        // let oppEle = document.createElement('option')
        // oppEle.innerText = '请选择'
        // oppEle.setAttribute('selected','selected')
        cityEle.innerHTML = ss

        // for循环所有的市 渲染到第二个select中
        for (let i=0;i<currentCityList.length;i++){
            let currentCity = currentCityList[i]
            // 1 创建option标签
            let opEle = document.createElement('option')
            // 2 设置文本
            opEle.innerText = currentCity
            // 3 设置value
            opEle.value = currentCity  // <option value="省">省</option>
            // 4 将创建好的option标签添加到第一个select中
            cityEle.appendChild(opEle)
        }
    }
</script>
</body>
</html>

jQuery

"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作 
类似于python里面的模块  在前端模块不叫模块  叫 “类库”

兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery的宗旨
	write less do more
	让你用更少的代码完成更多的事情

复习
	python导入模块发生了哪些事？
		导入模块其实需要消耗资源
	jQuery在使用的时候也需要导入
		但是它的文件非常的小(几十KB) 基本不影响网络速度

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点 django部分学)

版本介绍

jQuery文件下载
	压缩  		容量更小
	未压缩
"""
# jQuery在使用之前 一定要确保已经导入了

针对导入问题

# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
	可以借助于pycharm自动初始化代码功能完成自动添加
  	配置
    	编辑
      	file and code template
  """我不想下载jQuery文件 能不能使用呢？"""
  
# 2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
	CDN:内容分发网络
  	CDN有免费的也有收费的
    前端免费的cdn网站:
      	bootcdn
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  """你的计算机必须要有网络"""
  
  
# jQuery基本语法
	jQuery(选择器).action()
  秉持着jQuery的宗旨 jQuery简写	$
  jQuery()  === $()

# jQuery与js代码对比
	eg:将p标签内部的文本颜色改为红色
   	// 原生js代码操作标签
		let pEle = document.getElementById('d1')
		pEle.style.color = 'red'

		// jQuery操作标签
		$('p').css('color','blue')

先学如何查找标签

基本选择器

// id选择器
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
// class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
// 标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]

"""一定要区分开(重点)"""
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id="d1">…</div>
document.getElementById('d1')
<div id="d1">…</div>
// 标签对象如何转jQuery对象
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]

组合选择器/分组与嵌套

$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]
$('*')
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
               
$('#d1,.c1,p')  # 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
              
$('div span')  # 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span')  # 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span')  # 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span')  # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

基本筛选器

$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
               
$('ul li:first')  # 大儿子 
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:last')  # 小儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:eq(2)')		# 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:even')  # 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:odd')  # 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:gt(2)')  # 大于索引
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:lt(2)')  # 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:not("#d1")')  # 移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
         
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")')  # 选取出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]

属性选择器

$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="egon"]')
w.fn.init [p, prevObject: w.fn.init(1)]

$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

表单筛选器

$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]

$(':text')  # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':password')  # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]


:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...

表单对象属性
:enabled
:disabled
:checked
:selected
"""特殊情况"""
$(':checked')  # 它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$(':selected')  # 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked')  # 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]

筛选器方法

$('#d1').next()  # 同级别下一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextAll()
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextUntil('.c1')  # 不包括最后一个
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)
              
              
$('.c1').prev()  # 上一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)
$('.c1').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$('.c1').prevUntil('#d2')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
              
$('#d3').parent()  # 第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]
$('#d3').parents()
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body')
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
              
              
$('#d2').children()  # 儿子
              
$('#d2').siblings()  # 同级别上下所有
              
              
              
$('div p')
# 等价           
$('div').find('p')  # find从某个区域内筛选出想要的标签 
              
              
"""下述两两等价"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)
                                                                                    
$('div span:last')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').last()
                                                                                    
w.fn.init [span, prevObject: w.fn.init(3)]
$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]

============================================================================

每日测验（day57）

"""
今日考题:
1.有一个列表[3,4,1,2,5,6,6,5,4,3,3]请写出一个函数，找出该列表中没有重复的数的总和
2.简述数据库表设计中一对一、一对多、多对多的应用场景,char与varchar的区别
3.js代码书写位置有几种，什么是事件，js如何绑定事件，常见的事件有哪些
4.什么是jQuery，它的基本语法是什么，jQuery导入方式有哪些分别有什么区别，
列举你所知道的jQuery选择器(针对表单筛选器是否有注意事项)
"""

昨日内容回顾

js事件

# js绑定事件的两种方式

# 自己独立的敲出来昨天的案例
"""
1.开关灯
	pEle.classList.add()
	...
2.input框获取、失去焦点
	onfocus
	onblur
3.计时器
	onclick
	js代码逻辑
4.省市联动
	onchange文本域变化
		就记忆一个select
"""

jQuery简介

"""
内部封装了并且提供了额外功能的模块、框架
	类库

兼容多个浏览器

版本更新
	1.X
	2.X
	3.X

宗旨
	write less do more

如何导入jQuery
	1.将文件下载到本地直接导入(压缩、未压缩)
		好处在于没有网也可以正常使用
		不好的地方在于需要重复书写，文件路径还要固定
		(pycharm模块功能 自动添加固定的代码
			配置
				编辑
					file and code template
						html
						py
		)
		
	2.CDN服务
		CDN的概念:内容分发网络
		参考网站:bootcdn
			前端相关的应用程序都有免费的cdn服务
		
		好处在于无需下载对应的文件，直接走网络请求使用
		不好的地方在于必须要有网

基本语法结构
	jQuery().action()		=== $().action()
"""

jQuery选择器

# 基本选择器
$('#d1')
$('.c1')
$('span')
"""
jQuery选择器拿到的都是jQuery对象(你可以看成是一个数组)

重点
	jQuery对象和标签对象的区分
		jQuery >>> 标签对象
			$('#d1')[0]
		
		标签对象 >>> jQuery
			$(document.getElementById('d1'))
	不同的对象之间调用的方法是不一样的，不能混用
"""

# 组合、分组、嵌套
$('div,span,p')
$('#d1,.c1,div')
$('div span')  # 后代
$('div>span')	 # 儿子
$('div+span')  # 毗邻
$('div~span')  # 弟弟


# 基本筛选器
"""
针对已经得到的结果进行二次筛选
:first
:last
:eq(index)
:even
:odd
:gt(index)
:lt(index)
:not
:has  从后代元素中筛选
	$('div:has(".c1")')
"""

# 属性选择器
$('[username]')
$('[username="jason"]')
$('input[username="jason"]')

# 表单筛选器
$('input[type="text"]')
$(':text')
:text
...
:file

  
"""
特殊情况
	$(':checked')  拿到默认选中的checkbox和option
		$('input:checked')
	在书写表单筛选器的时候 如果前面可以加限制条件最好加一个
"""

# 筛选器方法
.next()
.nextAll()
.nextUntil()  # 不包含最后一个

.prev()
.prevAll()
.prevUntil()  # 不包含最后一个

.parent()
.parents()
.parentsUntil()  # 不包含最后一个

.children()  # 儿子们
.siblings()  # 兄弟 同级别上下所有

$('div p')   ===   $('div').find('p')

# 基本筛选器优化封装
.first()
.last()
.not()
.has()
.eq()
"""
选择器无论你用哪个都可以 只要能够实现需求就行
"""

今日内容概要

今天要把jQuery全部结束

jQuery操作标签
jQuery绑定事件
jQuery补充知识点
jQuery动画效果(了解)
Bootstrap(前端框架)开头

今日内容详细

jQuery练习题

在这里插入图片描述

$('#i1')
r.fn.init [div#i1.container]
           
$('h2')
r.fn.init [h2, prevObject: r.fn.init(1)]

$('input')
r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
              
$('.c1')
r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]

$('.btn-default')
r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]
           
$('.c1,h2')
r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]

$('.c1,#p3')
r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]
              
$('.c1,.btn')
r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]
               
$('form').find('input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
              
$('label input')
r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
              
$('label+input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
              
$('#p2~li')
r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]

$('#f1 input:first')
r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]
           
$('#my-checkbox input:last')
r.fn.init [input, prevObject: r.fn.init(1)]

$('#my-checkbox input[checked!="checked"]')
r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]__proto__: Object(0)

$('label:has("input")')
r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)]

操作标签

# 操作类
"""
js版本														jQuery版本
classList.add()										addClass()
classList.remove()								removeClass()
classList.contains()							hasClass()
classList.toggle()								toggleClass()
"""

# css操作
<p>111</p>
<p>222</p>
"""一行代码将第一个p标签变成红色第二个p标签变成绿色"""
$('p').first().css('color','red').next().css('color','green')
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
class MyClass(object):
    def func1(self):
        print('func1')
        return self

    def func2(self):
        print('func2')
        return self
obj = MyClass()
obj.func1().func2()

# 位置操作
offset()  # 相对于浏览器窗口
position()  # 相对于父标签

scrollTop()		# 需要了解
	$(window).scrollTop()
  0
  $(window).scrollTop()
  969
  $(window).scrollTop()  # 括号内不加参数就是获取
  1733
  $(window).scrollTop(0)  # 加了参数就是设置
  n.fn.init [Window]
  $(window).scrollTop(500)
  n.fn.init [Window]
scrollLeft()

# 尺寸
$('p').height()  # 文本
20
$('p').width()
1670
$('p').innerHeight()  # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight()  # 文本+padding+border
26
$('p').outerWidth()
1674


# 文本操作
"""
操作标签内部文本
js											jQuery
innerText								text()  括号内不加参数就是获取加了就是设置
innerHTML								html()

$('div').text()
"
    
        有些话听听就过去了，不要在意，都是成年人!
    
"
$('div').html()
"
    <p>
        有些话听听就过去了，不要在意，都是成年人!
    </p>
"
$('div').text('你们都是我的大宝贝')
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').html('你个臭妹妹')
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').text('<h1>你们都是我的大宝贝</h1>')
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').html('<h1>你个臭妹妹</h1>')
w.fn.init [div, prevObject: w.fn.init(1)]
"""
# 获取值操作
"""
js													jQuery
.value											.val()
"""
$('#d1').val()
"sasdasdsadsadad"
$('#d1').val('520快乐')  # 括号内不加参数就是获取加了就是设置

w.fn.init [input#d1]
$('#d2').val()
"C:\fakepath\01_测试路由.png"
$('#d2')[0].files[0]  # 牢记两个对象之间的转换
File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
           
           
# 属性操作
"""
js中																jQuery
setAttribute()											attr(name,value)
getAttribute()											attr(name)
removeAttribute()										removeAttr(name)

在用变量存储对象的时候 js中推荐使用	
	XXXEle			标签对象
jQuery中推荐使用
	$XXXEle			jQuery对象
"""
let $pEle = $('p')
undefined
$pEle.attr('id')
"d1"
$pEle.attr('class')
undefined
$pEle.attr('class','c1')
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
$pEle.attr('id','id666')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.attr('password','jason123')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.removeAttr('password')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]       
      
           
"""
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
"""
           
$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
"checked"
$('#d3').attr('checked','checked')  # 无效
w.fn.init [input#d3]
           
           
$('#d2').prop('checked')
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]
           
           
# 文档处理
"""
js																		jQuery
createElement('p')										$('<p>')
appendChild()													append()

"""
let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')          
$('#d1').append($pEle)  # 内部尾部追加
$pEle.appendTo($('#d1')) 
           
$('#d1').prepend($pEle)  # 内部头部追加
w.fn.init [div#d1]
$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)]
         
$('#d2').after($pEle)  # 放在某个标签后面
w.fn.init [p#d2]
$pEle.insertAfter($('#d1'))
        
$('#d1').before($pEle)
w.fn.init [div#d1]
$pEle.insertBefore($('#d2'))

$('#d1').remove()  # 将标签从DOM树中删除
w.fn.init [div#d1]
           
$('#d1').empty()  # 清空标签内部所有的内容
w.fn.init [div#d1]

事件

// 第一种
    $('#d1').click(function () {
            alert('别说话 吻我')
    });
  
// 第二种(功能更加强大 还支持事件委托)
    $('#d2').on('click',function () {
            alert('借我钱买草莓 后面还你')
    })

克隆事件

<button id="d1">屠龙宝刀，点击就送</button>

<script>
    $('#d1').on('click',function () {
        // console.log(this)  // this指代是当前被操作的标签对象
        // $(this).clone().insertAfter($('body'))  // clone默认情况下只克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件

    })
</script>

自定义模态框

"""
模态框内部本质就是给标签移除或者添加上hide属性
"""

左侧菜单

<script>
    $('.title').click(function () {
        // 先给所有的items加hide
        $('.items').addClass('hide')
        // 然后将被点击标签内部的hide移除
        $(this).children().removeClass('hide')
    })
</script>
<!--尝试用一行代码搞定上面的操作-->

返回顶部

<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>

自定义登陆校验

# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 获取用户输入的用户名和密码 做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用户名不能为空")
        }
        if (!passWord){
            $passWord.next().text('密码不能为空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>

input实时监控

<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)  
    })
</script>

hover事件

<script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
    //     alert(123)
    // })

    $('#d1').hover(
        function () {
            alert('我来了')  // 悬浮
    },
        function () {
            alert('我溜了')  // 移开
        }
    )
</script>

键盘按键按下事件

<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift键')
        }
    })
</script>

今日作业

"""
今日作业
必做
1.利用jQuery链式操作一句话完成菜单显隐展示
2.整理日考题目
3.整理今日内容完成博客书写
选做
1.预习前端框架Bootstrap
"""

============================================================================

每日测验(day58)

"""
1.下面这段代码的输出结果是什么，并给出你的解释
def index():
    return [lambda x : i * x for i in range(4)]
print([m(2) for m in index()]) 
2.什么是函数的递归调用?书写递归函数需要注意什么？你能否利用递归函数打印出下面列表中每一个元素(只能打印数字),l = [1,[2,[3,[4,[5,[6,[7,[8,[9]]]]]]]]]
3.jQuery的链式操作有什么特点，如何做到？
4.jQuery绑定事件的方式有哪些，列举出你所知道的事件
"""

昨日内容回顾

样式类操作

"""
addClass()										classList.add()					
removeClass()				
hasClass()
toggleClass()
"""

css操作

.css(属性名,属性值)
"""
jQuery链式操作
	一行代码可以搞定很多事情
	jQuery对象在调用jQuery方法之后返回的还是当前对象本身
	(本质:return self)
"""

位置操作

scrollTop
scrollLeft
# 回到顶部
$(window).scrollTop()  # 获取
$(window).scrollTop(300)  # 设置

尺寸操作

# 文本的高和宽	
		height()
# 文本+padding
		innerHeight()
# 文本+padding+border
		outterHeight()

文本操作

"""
.text()  文本						innerText()
.html()	 文本+标签			 innerHTML()
	括号内不加参数就是获取 加了就是设置
"""
"""
获取值
.val()									value
获取文件数据
	转成标签对象.files
"""

属性操作

"""
.attr()						
	.attr('class')									getAttribute
	.attr('class','c1')							setAttribute
.removeAttr()											removeAttribute


# 针对checkbox、radio、option选中的checked、selected属性不要用attr
建议你使用prop()
	prop('checked')
	prop('checked',true/false)
"""

文档处理

# jQuery如何创建标签
document.createElement('p')			===							$('<p>')

A.append(B)
B.appendTo(A)

prepend()
prependTo()

...


remove()		移除标签
empty()			清空标签内部所有的内容

事件处理

# jQuery两种绑定事件的方式
# 第一种
	$('#d1').click(function(){})
# 第二种
	$('#d1').on('click',function(){})

  
"""
this
	指代的就是当前被操作对象本身(有点像面向对象的self)
"""
# 克隆事件
	clone()		默认情况下只克隆标签和文本不克隆事件
  	clone(true)
# 自定义模态框
	绑定事件控制标签类属性的添加和删除
# 左侧菜单
	一行代码搞定
# 返回顶部
	$(window).scroll(function(){
	
	})
# 自定义登陆校验功能
	.val()
# hover事件
	$('#d1').hover(function(){})  # 进出都会触发
  
  $('#d1').hover(
    function(){},
    function(){}
  ) 
# input框实时监控输入内容事件
	$('#d1').on('input',function(){})
# 键盘按键事件
	$(window).keydown(function(event){
  	event.keyCode
})
  $(window).keyup(function(){})

"""
web领域永远没有绝对的安全！！！
"""

今日内容概要

jQuery结束
前端框架Bootstrap
手动搭建一个图书管理系统页面

今日内容详细

阻止后续事件执行

<script>
    $('#d2').click(function (e) {
        $('#d1').text('宝贝 你能看到我吗?')
        // 阻止标签后续事件的执行 方式1
        // return false
        // 阻止标签后续事件的执行 方式2
        // e.preventDefault()
    })
</script>

阻止事件冒泡

<script>
        $('#d1').click(function () {
            alert('div')
        })
        $('#d2').click(function () {
            alert('p')
        })
        $('#d3').click(function (e) {
            alert('span')
            // 阻止事件冒泡的方式1
            // return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
        })
</script>

事件委托

<button>是兄弟，就来砍我!!!</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $('body').on('click','button',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

页面加载

# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})
# 第二种
$(function(){
  // js代码
})
# 第三种
"""直接写在body内部最下方"""

动画效果

$('#d1').hide(5000)
w.fn.init [div#d1]
$('#d1').show(5000)
w.fn.init [div#d1]
$('#d1').slideUp(5000)
w.fn.init [div#d1]
$('#d1').slideDown(5000)
w.fn.init [div#d1]
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1]

补充

# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""
# data()
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
               
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
               
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
           
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"

前端框架Bootstrap

该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可

在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

版本选择建议使用v3版本：https://v3.bootcss.com/

注意

bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery

布局容器

<div class="container">
    	左右两侧有留白
</div>

<div class="container-fluid">
			左右两侧没有留白
</div>
# 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面

栅格系统

<div class="row"></div>
写一个row就是将所在的区域划分成12份

<div class="col-md-6 ">  获取你所要的份数
# 在使用bootstrap的时候 脑子里面一定要做12的加减法

栅格参数

.col-xs-	.col-sm-	.col-md-	.col-lg-
# 针对不同的显示器 bootstrap会自动选择对应的参数
# 如果你想要兼容所有的显示器 你就全部加上即可


# 在一行如何移动位置
<div class="col-md-8 c1 col-md-offset-2"></div>

排版

bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式

效果一样，但是标签表达的意思不一样（语义）

表格

<table class="table table-hover table-striped table-bordered">
		
<tr class="success">
            <td>1</td>
            <td>jason</td>
            <td>123</td>
            <td>study</td>
</tr>

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

表单

<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <h2 class="text-center">登陆页面</h2>
        <form action="">
            <p>username:<input type="text" class="form-control"></p>
            <p>password:<input type="text" class="form-control"></p>
            <p>
                <select name="" id="" class="form-control">
                    <option value="">111</option>
                    <option value="">222</option>
                    <option value="">333</option>
                </select>
            </p>
            <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
            <input type="submit">
        </form>
    </div>
</div>

# 针对表单标签 加样式就用form-control
	class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
"""

# 针对报错信息 可以加has-error（input的父标签加）
<p class="has-error">
	username:
  <input type="text" class="form-control">
</p>

按钮

<a href="https://www.mzitu.com/" class="btn btn-primary">点我</a>
<button class="btn btn-danger">按我</button>
<button class="btn btn-default">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning">按我</button>


<button class="btn btn-warning btn-lg">按我</button>
<button class="btn btn-warning btn-sm">按我</button>
<button class="btn btn-warning btn-xs">按我</button>
<input type="submit" class="btn btn-primary btn-block">  
通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

图表

<h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>


    <style>
        span {
            color: greenyellow;
        }
    </style>

# 扩展

导航条

<nav class="navbar navbar-inverse">
<nav class="navbar navbar-default">

分页器

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

弹框

https://lipis.github.io/bootstrap-sweetalert/
  
  
swal('你还好吗?')
undefined
swal('你还好吗?')
undefined
swal('你还好吗?','我不好，想你了!')
undefined
swal('你还好吗?','我不好，想你了!','success')
undefined
swal('你还好吗?','我不好，想你了!','warning')
undefined
swal('你还好吗?','我不好，想你了!','error')
undefined
swal('你还好吗?','我不好，想你了!','info')
undefined
# 我们在后面的课程中 还会涉及到该部分内容

作业

"""
今日作业
必做题
1.前端框架Bootstrap整体文档看一遍
2.自定义点赞功能，点击按钮旁边的数字动态加一
3.自己尝试着搭建图书管理系统页面
4.自己尝试着搭建jQuery练习题页面
"""

花小智

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
老男孩前端学习笔记

前端（day50）什么是前端"""任何与用户直接打交道的操作界面都可以称作前端比如：电脑界面手机界面平板界面后端类似与幕后操作者不直接与用户打交道"""前端学习路径HTML：网页的骨架没有任何的样式CSS：给骨架添加各种样式变得好看JavaScript：控制网页的动态效果前端框架：BOOTSTRAP、 JQuery、 Vue 提前给你封装好了很多操作、按照固定语法调用即可软件开发架构cs 客服端服务端bs 浏览器服务端ps: bs也是cs##
复制链接

扫一扫