Web前端大全
前端
一、什么是前端
任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面 手机界面 平板界面
什么是后端
后端类似于幕后操作者(一堆让人头皮发麻的代码)
不直接跟用户打交道
为何学前端
全栈开发工程师
但是前端这一块我们不会学的很详细
只要求做到能够看得懂基本的前端代码以及能够搭建一些简单的页面即可
先打下前端的基础 为后续可能需要扩展做准备
前端学习历程
HTML:网页的骨架 没有任何的样式
CSS:给骨架添加各种样式 变得好看
JS:控制网页的动态效果
前端框架:BOOTSTRAP、JQuery、Vue
提前给你封装好了很多操作 你只需要按照固定的语法调用即可
软件开发架构
cs 客户端 服务端
bs 浏览器 服务端
ps:bs本质也是cs
浏览器窗口输入网址回车发生了几件事
""" 1 浏览器朝服务端发送请求 2 服务端接受请求(eg:请求百度首页) 3 服务端返回相应的响应(eg:返回一个百度首页) 4 浏览器接收响应 根据特定的规则渲染页面展示给用户看 """ 浏览器可以充当很多服务端的客户端 百度 腾讯视频 优酷视频.... 如何做到浏览器能够跟多个不同的客户端之间进行数据交互？ 1.浏览器很牛逼 能够自动识别不同服务端做不同处理 2.制定一个统一的标准 如果你想要让你写的服务端能够跟客户端之间做正常的数据交互 那么你就必须要遵循一些规则：HTTP协议
HTTP协议
""" 超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式... 该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩 你就自己写客户端 用户想要使用 就下载你专门的app即可 """ # 四大特性 1.基于请求响应 2.基于TCP/IP协议作用于应用层之上的协议 3.无状态 不保存用户的信息 eg:一个人来了一千次 你都记不住 每次都当他如初见 由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术 cookie、session、token... 4.无/短链接 请求来一次我响应一次 之后我们两个就没有任何链接和关系了 长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲) # 请求数据格式 请求首行(标识HTTP协议版本，当前请求方式) 请求头(一大堆k,v键值对) \r\n 空行 请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据) # 响应数据格式 响应首行(标识HTTP协议版本，响应状态码) 响应头(一大堆k,v键值对) \r\n 空行 响应体(返回给浏览器展示给用户看的数据) # 响应状态码 用一串简单的数字来表示一些复杂的状态或者描述性信息 404:请求资源不存在 1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据 2XX:服务端成功响应了你想要的数据(200 OK请求成功) 3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面) 4XX:请求错误 404:请求资源不存在 403:当前请求不合法或者不符合访问资源的条件 5XX:服务器内部错误(500) # 请求方式 1.get请求 朝服务端要数据 eg:输入网址获取对应的内容 2.post请求 朝服务端提交数据 eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验 # url:统一资源定位符(大白话 网址)
参考：HTTP协议
二、HTML简介
超文本标记语言
如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
<h1>hello word</h1> <a href="https://www.mzitu.com/">click me！give you some color to see see！</a> <img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />
HTML注释
# 注释:注释是代码之母 <!--单行注释--> <!-- 多行注释1 多行注释2 多行注释3 --> 由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找 <!--导航条开始--> 导航条所有的html代码 <!--导航条结束--> <!--左侧菜单栏开始--> 左侧菜单栏的HTMl代码 <!--左侧菜单栏结束-->
HTML文档结构
""" 超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可) 书写网页的一套标准 除了HTML可以书写前端页面之外 还有XML也可以书写前端页面 odoo框架内部的前端页面全部是用XML书写 公司内部管理软件 ERP """ # 注释 <!--注释--> # 文档结构 <html> <head></head>：都不是给用户看的 主要是给浏览器看的一些配置信息 <body></body>：body书写的所有的内容 都是给用户看的 </html>
<html> <head></head>:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的 <body></body>:body内的标签 写什么浏览器就渲染什么 用户就能看到什么 </html>
PS:文件的后缀名其实是给用户看到的，只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能
<h1></h1> <a href="https://www.mzitu.com/"></a> <img/> 1 双标签 2 单标签(自闭和标签)
head内常用标签
title 定义网页标题信息
style 内部支持直接书写css代码
link 引入外部css文件
script 内部可以书写js代码并且也可以引入外部js文件
meta 定义网页源信息
keywords
description
<title>Title</title> 网页标题 <style> h1 { color: greenyellow; } </style> 内部用来书写css代码 <script> alert(123) </script> 内部用来书写js代码 <script src="myjs.js"></script> 还可以引入外部js文件 <link rel="stylesheet" href="mycss.css"> 引入外部css文件 <!--当你在用浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户-->
<meta name="keywords" content="老男孩教育,老男孩,老男孩培训,Python培训,Linux培训,网络安全培训,Go语言培训,人工智能培训,云计算培训,Linux运维培训,Python自动化运维,Python全栈开发,IT培训">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> 网页的描述性信息
三、body内常用标签
基本标签
""" h1～h6 标题标签 p段落标签 u i b s hr br """ # 特殊符号 空格 大于 > 小于 < & ® © ¥
<h1>我是h1</h1> 标题标签 1～6级标题 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <p>段落</p> <br> 换行 <hr> 水平分割线
标签的分类2
""" 分类1: 双标签 <h1></h1> 单标签 <img/> 分类2: 块儿级标签:独占一行 可以设置长宽 div p 注意：块儿级标签内部可以嵌套任意的行内标签和块儿级标签 但是p标签只能嵌套行内标签 行内标签:自身文本多大就占多大 不能设置长宽 span a img PS：上述的规定只是HTML书写规范 如果你不遵循 不会报错 浏览器会自动帮你解除嵌套关系 """
# 1 块儿级标签:独占一行 h1~h6 p div 1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化 2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签 但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签 如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来) 总结: 只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签 但是p标签只能嵌套行内标签（HTML书写规范） # 2 行内标签:自身文本多大就占多大 i u s b span 行内标签不能嵌套块儿级标签 可以嵌套行内标签
特殊符号
空格 > 大于号 < 小于号 & & ¥ ¥ © © 商标® ®
常用标签
div 块儿级标签
span 行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签
img标签
# 图片标签 <img src="" alt=""> src 1.图片的路径 可以是本地的也可以是网上的 2.url 自动朝该url发送get请求获取数据 alt="这是我的前女友" 当图片加载不出来的时候 给图片的描述性信息 title="新垣结衣" 当鼠标悬浮到图片上之后 自动展示的提示信息 height="800px" width="" 高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放 如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真
a标签
# 链接标签 <a href=""></a> """ 当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色 如果点击过了就会是紫色（浏览器给你记忆了） """ href 1.放url，用户点击就会跳转到该url页面 2.放其他标签的id值 点击即可跳转到对应的标签位置 target 默认a标签是在当前页面完成跳转 _self 你也可以修改为新建页面跳转 _blank # a标签的锚点功能 """eg:点击一个文本标题 页面自动跳转到标题对应的内容区域""" <a href="" id="d1">顶部</a> <h1 id="d111">hello world</h1> <div style="height: 1000px;background-color: red"></div> <a href="" id="d2">中间</a> <div style="height: 1000px;background-color: greenyellow"></div> <a href="#d1">底部</a> <a href="#d2">回到中间</a> <a href="#d111">回到中间</a>
标签具有的两个重要属性
1.id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
该值有点类似于面向对象里面的继承 一个标签可以继承多个class值
标签既可以有默认的书写也可以有自定义的书写，如下面的username属性
<p id="d1" class="c1" username="jason" password="123"></p>
列表标签
无序列表(较多)
<ul> <li>第一项</li> <li>第二项</li> <li>第二项</li> <li>第二项</li> </ul> 虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
有序列表(了解)
<ol type="1" start="5"> <li>111</li> <li>222</li> <li>333</li> </ol> 1 A I a ... 参考博客了机即可
标题列表(了解)
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl>
表格标签
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='' 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按钮
<button></button>
""" 能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器 """ # 写一个注册功能 <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>
四、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.之后再学如何添加样式 """
# 注释 /**/ 由于前端代码都笔记多并且没有什么规律 所以我们都会利用注释来帮助我们维护代码 # 语法结构 选择器 { 属性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>
基本选择器
# 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; }
分组与嵌套
# 多个选择器可以并列公用一套css样式 div,p,span {} # 不同选择器之间也可以混合使用 .c1,#d1>span {}
div,p,span { /*逗号表示并列关系*/
color: yellow;
}
#d1,.c1,span {
color: orange;
}
伪类选择器
a:link {} a:hover {} # 需要记忆 a:active {} a:visited {} input:focus {} # input框获取焦点
<!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 {} # 通过css加文本内容 但是无法选中
p:before {}
p:after {}
# ps:before和after多用于清除浮动带来的负面影响
p:first-letter { font-size: 48px; color: orange; } p:before { /*在文本开头 同css添加内容*/ content: '你说的对'; color: blue; } p:after { content: '雨露均沾'; color: orange; } ps: before 和 after 通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
选择器优先级
""" 选择器相同 就近原则 行内 > id > class > 标签 精确度越高说话越硬 """ ps: !important 强制让标签采用你的样式 不推荐使用
""" 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属性相关
width height # 块儿级标签的宽度不修改的情况下默认占浏览器一整行，块儿级标签的高度也是取决于标签内部的文本的高度 但是可以通过css设置 # 行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效
<style> p { background-color: red; height: 200px; width: 400px; } span { background-color: green; height: 200px; width: 400px; /*行内标签无法设置长宽 就算你写了 也不会生效*/ } </style>
字体属性
# 字体样式 草书 行书 ... 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等软件快速的获取你想要的颜色
<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或者微信截图功能 也可以多软件结合使用 */ } </style>
文字属性
# 文字对齐 text-align center # 文字装饰 记忆 主要就是用来给a标签去掉自带的下划线 text-decoration none # 首行缩进 text-indent
<style> 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标签去掉自带的下划线 需要掌握*/ } </style>
# 背景色 backgroud-color # 背景图片 background:#fff url() no-repeat center center """ ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀 """ ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中 # 背景图片实际应用的案例
<!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>
边框
# 任何一个标签都有上下左右四个方向的边框 border-width border-style border-color 简写 border # 画圆 border-radius:50%
<!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属性
# 能够让标签具有自身没有的属性和特征 display none 隐藏 并且原来的位置也没了 inline block inline-block ps: visibility:hidden 只隐藏 位置还在
<!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>
盒子模型
# 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 上 右 下 左 """
""" 盒子模型 就以快递盒为例 快递盒与快递盒之间的距离(标签与标签之间的距离 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.自己加一个div设置高度 2.利用clear属性 #d4 { clear: left; /*该标签的左边(地面和空中)不能有浮动的元素*/ } 3.通用的解决浮动带来的影响方法 在写html页面之前 先提前写好处理浮动带来的影响的 css代码 .clearfix:after { content: ''; display: block; clear:both; } 之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可 上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix """
溢出属性
"""标签内部的内容超出了标签自身的范围会造成内容的溢出""" overflow:hidden/scroll/auto/visible # 圆形头像制作 overflow:hidden img { max-width:100%; }
<style> p { height: 100px; width: 50px; border: 3px solid red; /*overflow: visible; !*默认就是可见 溢出还是展示*!*/ /*overflow: hidden; !*溢出部分直接隐藏*!*/ /*overflow: scroll; !*设置成上下滚动条的形式*!*/ /*overflow: auto;*/ } </style>
定位
-
所有的标签默认都是静态的static，无法改变位置
-
相对定位(了解)
相对于标签原来的位置做移动relative
-
绝对定位(常用)
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
eg:小米网站购物车
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位
-
固定定位(常用)
相对于浏览器窗口固定在某个位置
""" 静态 static 默认所有的标签都是静态的 无法改变位置 相对定位 relative 相对于标签自身原来的位置 (如果你讲标签的position由static变成relative，那么标签就会由没有定位过的标签变成已经定位过的标签 性质就改变了) 绝对定位 absolute eg:小米购物车 相对于已经定位过的父标签(如果没有则以body作为参照) 固定定位 fixed eg:回到顶部、右侧小广告... 相对于浏览器窗口定位 left top right bottom """ # 脱离文档流 1.浮动 2.绝对定位 3.固定定位 # 不脱离文档流 1.相对定位
<!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>
""" 浮动 相对定位 绝对定位 固定定位 """ # 不脱离文档流 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模态框
# 其实是用来调节指向我们人的z轴的距离 模态框 """ eg:百度登陆页面 三层结构 1.底部正常文本内容 2.黑色的布 3.白色的登陆页面 """ z-index:999
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;
五、js
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变量的命名规范 1.变量名只能是 数字 字母 下划线 $ 2.变量名命名规范(不遵循也可以) 1.js中推荐使用驼峰式命名 userName dataOfDb 2.python推荐使用下划线的方式 user_name data_of_db 3.不能用关键字作为变量名 不需要记忆 js代码的书写位置 1.可以单独开设js文件书写 2.还可以直接在浏览器提供的console界面书写 在用浏览器书写js的时候 左上方的清空按钮只是清空当前页面 代码其实还在 如果你想要重新来 最好重新开设一个 页面 (在使用浏览器书写 你自己的js代码的时候推荐你在 自己的html页面打开) """
""" 在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
六、js数据类型
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 """
七、js对象
-
数组(类似于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}
""" 在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) 返回角的正切。
八、BOM与DOM操作
# 截至目前为止 我们虽然已经学会了js语法 但是你会发现跟浏览器和html文件还是一点关系没有 """ BOM 浏览器对象模型 Browser Object Model js代码操作浏览器 DOM 文档对象模型 Document Object Model js代码操作标签 """
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()
# 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起手 """
""" 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好了
直接查找(必须要掌握)
""" 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>p</p> <span>div>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) } } """
十一、原生js事件绑定
#样式类操作 """ 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[0] """ # 属性操作 """ .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领域永远没有绝对的安全！！！ """
<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
""" 内部封装了并且提供了额外功能的模块、框架 类库 兼容多个浏览器 版本更新 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内部封装了原生的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')
选择器总览
# 基本选择器 $('#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() """ 选择器无论你用哪个都可以 只要能够实现需求就行 """
基本选择器
# 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)]
十三、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属性 """
左侧菜单
<div class="title">菜单1 <div class="iterm">1</div> <div class="iterm">2</div> <div class="iterm">3</div> </div> <div class="title">菜单2 <div class="iterm">1</div> <div class="iterm">2</div> <div class="iterm">3</div> </div> <div class="title">菜单3 <div class="iterm">1</div> <div class="iterm">2</div> <div class="iterm">3</div> </div> <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>
阻止后续事件执行
<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
注意
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">«</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">»</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 # 我们在后面的课程中 还会涉及到该部分内容
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！