前端
day42
WEB基础知识
分为前端与后端
c/s
c:客户端client
s:服务端server 后端
特点;必须通过指定的客户端软件,才能访问服务端的一种程序例如QQ
b/s
B:浏览器 Browser
特点:通过浏览器就能访问服务端的一种程序
前端
内容的展示
browser 浏览器
后端
逻辑的处理
HTML
html 显示的内容
css 样式 美化
js 动态效果
Hyper(超级) Text(文本) Markup(标记) language(语言)
HTML(超级文本标记语言)
标记的分类
封闭类型的标记也称为"双标记"必须成对出现
语法:<标记>内容</标记>
非封闭类型的标记也称为"单标记"
语法:<标记> 或者</标记>
在一对标记中允许出现另一对(一个)标记 (功能的嵌套)
注意:嵌套标记的书写格式==>被嵌套的标记要通过一个tab缩进键来表示层级关系
语法
属性必须声明在开始标记中
属性与标记名称之间用"空格"隔开
属性的值与属性之间使用"="连接
一个元素允许有多属性,多属性之间排名不分前后,中间用"空格"隔开即可
标签的分类
块级标记
h1-h6
行类标签
| 标签 | 描述 |
|---|---|
| span | 一行 |
| b或strong | 加粗 |
| i或em | 斜体 |
| u | 下划线 |
| s 或 del | 删除线 |
| sup | 上标 |
| sub | 下标 |
| p | 段落 有间距 前后 |
| br | 换行 |
| 注释 |
图片
<img src="地址" alt="图片加载失败提示信息" width="宽度" height="高度" title="悬浮显示信
超连接
<a href="地址" target="_blank">显示信息</a> <!--新页面打开-->
<a href="地址" target="_self">显示信息</a> <!--当前页面打开-->
锚连接
<a name="mao">锚点</a>
<a href="#mao">到锚点</a>
特殊符号
| 符号 | 描述 |
|---|---|
| 空格 | |
| > | 大于号 |
| < | 小于号 |
| © | 版权号 |
HTML标签
HTML标签
head 一个的思维
meta 元信息
charset 编码
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
description 描述
Keywords 关键字
title 标题
<style></style> <!-- css -->
<link rel="stylesheet" href=""> <!-- 连接 -->
<script></script> <!-- js -->
body 一个人的身体
day43
内容回顾
前后端怎么交互
浏览器发送一个请求到后端，后端处理逻辑，把结果（HTML文本）返回给浏览器。
前端
HTML 骨架 内容
css 样式
js 动态效果
HTML 超文本标记语言
标记 标签
分类
单边标记\双边标记
head
<meta> 编码 关键字 描述
<title>标题的内容</title>
link style script
body
内联(行内)标签
字体
加粗 b strong
斜体 i em
上下标 sup sub
中划线 下划线 del s u
<span></span>
<br>
<a href="链接" target="_blank" title >页面显示的内容</a>
href: 链接地址
锚点： #id
target：打开方式
_blank： 新建一个窗口
_self: 当前窗口
title: 鼠标悬浮上显示的标题
<img src="图片的地址" alt='' title width="20px" height="100%" >
src: 网络地址、本地地址（相对路径、绝对路径）
alt ： 链接地址有问题时提示的内容
title: 鼠标悬浮上显示的标题
width： 设置图片的宽度
height：设置图片的高度
width和height选择一个
特殊字符：
 : 空格
块级标签
h1 - h6
今日内容
块级标签
排版标签
p:一个文本级别的段落标签 前后有间距
P标签中不嵌套其他的块级标签
div 没有任何样式的块级标签
hr 分割线
列表
无序列表
type="原点的样式"
<!-- 样式 disc（实心圆、默认）、 circle（空心圆）、none（无）、square（方点）-->
<ul >
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
<ul type="none">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
<ul type="circle">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
<ul type="square">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
有序列表
type="数字的样式" start =“起始值”（数字）
<!-- 样式 1（数字）、 a（小写字母）、A（大写）、I（罗马数字）-->
<ol>
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="1">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="a" start="25">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="A">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="I">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
定义列表
dt 标题
dd 内容
<dl>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>
</dl>
表格
<!--有表头的表格-->
<!--tbale 嵌套 thead tbody
thead和tbody嵌套tr
tr嵌套 th td
-->
<!--tbale 属性
border 边框
cellpadding 元素和单元格的边距
cellspacing 单元格和边框的间距
-->
<!--tr 属性
align 内容的水平排列 left center right
valign 内容的垂直排列 top middle bottom
-->
<!--td 属性
rowspan 占几行
colspan 占几列
-->
<table border="1" cellpadding="20px" cellspacing="20px">
<thead>
<tr align="left">
<th> 序号</th>
<th> 姓名</th>
<th> 年龄</th>
</tr>
</thead>
<tbody>
<tr align="center" valign="bottom">
<td>1</td>
<td >alex</td>
<td >84</td>
</tr>
<tr align="center" valign="top">
<td>2</td>
<td >alex</td>
</tr>
<tr>
<td>2</td>
<td>wusir</td>
<td rowspan="2">2208</td>
</tr>
</tbody>
</table>
<!-- 无表头的表格-->
<table border="1" cellpadding="20px" cellspacing="20px">
<tbody>
<tr align="center" valign="bottom">
<td>1</td>
<td >alex</td>
<td >84</td>
</tr>
<tr align="center" valign="top">
<td>2</td>
<td >alex</td>
</tr>
<tr>
<td>2</td>
<td>wusir</td>
<td rowspan="2">2208</td>
</tr>
</tbody>
</table>
表单
<!-- form 标签
action： 提交的地址
-->
<!-- input 标签
type： 类型
text：普通文本
password：密码 密文
ra dio： 单选框
checkbox： 复选框
submit： 提交按钮
能提交数据 input有name属性 有value值
-->
<button>提交</button>
<!--
form表单中button和type=‘submit’的input的作用是一样的
-->
<form action="http://127.0.0.1:9999">
<input type="text" name="user" placeholder="请输入用户名"> <!--name:提交数据的key value:值 placeholder：占位的内容 -->
<input type="password" name="pwd" value="3714">
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2" checked > 女 <!-- checked默认选中 -->
<input type="checkbox" name="hobby" value="1"> 跳
<input type="checkbox" name="hobby" value="2"> 唱
<input type="checkbox" name="hobby" value="3"> rap
<input type="checkbox" name="hobby" value="4"> 篮球
<input type="submit">
<button>提交</button
</form>
label
<!--给input标签定义id 给label标签的for填上id-->
<label for="i1">用户名：</label>
<input id="i1" type="text" name="user" placeholder="请输入用户名">
其他的input
<input type="hidden" name="alex" value="alexdsb"> <!-- 隐藏的input框 -->
<input type="reset"> <!-- 重置按钮 -->
<input type="button" value="提交"> <!-- 普通的按钮 -->
<button type="button">提交</button> <!-- 普通的按钮 -->
<input type="date"> <!-- 日期格式 -->
select option
<!--下拉框 单选 -->
<!--size 框的大小 -->
<select name="city" id="" size="4" >
<option value="1">北京</option>
<option value="2" selected >上海</option> <!-- selected默认选中 -->
<option value="3">深圳</option>
</select>
<!--下拉框 多选 -->
<!--size 框的大小 -->
<select name="city" id="" size="4" multiple>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
上传文件
<input type="file" name="f1">
<form enctype="multipart/form-data"> <!--编码指定为multipart/form-data-->
CSS
引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内联引入-->
<style>
div {
color: #ffef6b
}
</style>
<!--外联引入：链接 使用较多 -->
<link rel="stylesheet" href="index.css">
<!--外联引入：导入-->
<style>
@import url('index.css');
</style>
</head>
<body>
<!--行内引入-->
<div style="color: red">黄焖鸡米饭</div>
<div>黄焖鸡排骨</div>
</body>
</html>
简单的样式
color: #ffef6b; /*字体颜色*/
width: 200px; /*宽度*/
height: 200px; /*高度*/
background: blue; /*背景颜色*/
选择器
基本选择器
标签\id\类\通用选择器
<style>
div { 标签
color: #ffef6b;
}
a {
color: green;
}
span {
color: #42ff68;
}
#sp1 { id
color: chartreuse;
}
.cai { 类
color: #192aff;
}
.x1 {
background: #3bff00;
}
* {
background: #3bff00;
}
</style>
<body>
<!--<div >黄焖鸡米饭</div>-->
<!--<div>黄焖鸡排骨</div>-->
<div>黄焖鸡米饭
<span class="cai">鸡</span>
<span>米饭</span>
<a href="xxxx">外卖连接</a>
</div>
<div>黄焖鸡排骨
<span class="cai x1 x2">排骨</span>
<span>米饭</span>
</div>
<span id="sp1">米饭</span>
</body>
排版标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>段落1</h1>
<p>
从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。
错误写法：（把h系列的标签放到p里）</p>
<div> 从学习p的第一天开始，就要死死记住</div>
<hr>
<div> 从学习p的第一天开始，就要死死记住</div>
<p>从学习p</p>
</body>
</html>
列表代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<ul >-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ul>-->
<!--<ul type="none">-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ul>-->
<!--<ul type="circle">-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ul>-->
<!--<ul type="square">-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ul>-->
<!--<ul type="disc">-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ul>-->
<!--<ol>-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ol>-->
<!--<ol type="1">-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ol>-->
<!--<ol type="a" start="25">-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ol>-->
<!--<ol type="A">-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ol>-->
<!--<ol type="I">-->
<!-- <li>手机</li>-->
<!-- <li>电脑</li>-->
<!-- <li>iPad</li>-->
<!--</ol>-->
<dl>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>
</dl>
</body>
</html>
表格代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellpadding="20px" cellspacing="20px">
<thead>
<tr align="left">
<th> 序号</th>
<th> 姓名</th>
<th> 年龄</th>
</tr>
</thead>
<tbody>
<tr align="center" >
<td>1</td>
<td >alex</td>
<td rowspan="2" valign="top">84</td>
</tr>
<tr align="center" valign="top">
<td>2</td>
<td >alex</td>
</tr>
<tr>
<td>2</td>
<td>wusir</td>
<td rowspan="2">2208</td>
</tr>
</tbody>
</table>
<table border="1" cellpadding="20px" cellspacing="20px">
<tbody>
<tr align="center" valign="bottom">
<td>1</td>
<td >alex</td>
<td >84</td>
</tr>
<tr align="center" valign="top">
<td>2</td>
<td >alex</td>
</tr>
<tr>
<td>2</td>
<td>wusir</td>
<td rowspan="2">2208</td>
</tr>
</tbody>
</table>
</body>
</html>
表单代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:9999" >
<!-- <input type="text" name="user" placeholder="请输入用户名"> <!–name:提交数据的key value:值 placeholder：占位的内容 –>-->
<!-- <input type="password" name="pwd">-->
<!-- <input type="radio" name="sex" value="1" checked > 男-->
<!-- <input type="radio" name="sex" value="2"> 女-->
<!-- <input type="checkbox" name="hobby" value="1" checked="checked"> 跳-->
<!-- <input type="checkbox" name="hobby" value="2"> 唱-->
<!-- <input type="checkbox" name="hobby" value="3"> rap-->
<!-- <input type="checkbox" name="hobby" value="4"> 篮球-->
<!-- <input type="submit">-->
<!-- <p>-->
<!-- <label for="i1">用户名：</label><input id="i1" type="text" name="user" placeholder="请输入用户名">-->
<!-- </p>-->
<!-- <p>-->
<!-- 密码：<input type="password" name="pwd" >-->
<!-- </p>-->
<!-- <input type="hidden" name="alex" value="alexdsb">-->
<!-- <input type="reset">-->
<!-- <input type="button" value="提交"> <!– 普通的按钮 –>-->
<!-- <select name="city" id="" size="4" multiple>-->
<!-- <option value="1" selected="selected">北京</option>-->
<!-- <option value="2">上海</option>-->
<!-- <option value="3">深圳</option>-->
<!-- </select>-->
<!-- <input type="file" name="f1">-->
<input type="text">
<button>提交</button>
</form>
</body>
</html>
css引入代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <!–外联引入：链接 使用较多 –>-->
<link rel="stylesheet" href="index.css">
<!-- <!–外联引入：导入–>-->
<!-- <style>-->
<!-- @import url('index.css');-->
<!-- </style>-->
</head>
<body>
<!--<!–行内引入–>-->
<!--<div >黄焖鸡米饭</div>-->
<!--<div>黄焖鸡排骨</div>-->
<div>黄焖鸡米饭
<span class="cai">鸡</span>
<span>米饭</span>
<a href="xxxx">外卖连接</a>
</div>
<div>黄焖鸡排骨
<span class="cai x1 x2">排骨</span>
<span>米饭</span>
</div>
<span id="sp1">米饭</span>
</body>
</html>
day44
内容回顾
前后端怎么交互
浏览器发送一个请求到后端，后端处理逻辑，把结果（HTML文本）返回给浏览器。
前端
HTML 骨架 内容
css 样式
js 动态效果
HTML 超文本标记语言
标记 标签
分类
单边标记\双边标记
head
<meta> 编码 关键字 描述
<title>标题的内容</title>
link style script
body
内联(行内)标签
字体
加粗 b strong
斜体 i em
上下标 sup sub
中划线 下划线 del s u
<span></span>
<br>
<a href="链接" target="_blank" title >页面显示的内容</a>
href: 链接地址
锚点： #id
target：打开方式
_blank： 新建一个窗口
_self: 当前窗口
title: 鼠标悬浮上显示的标题
<img src="图片的地址" alt='' title width="20px" height="100%" >
src: 网络地址、本地地址（相对路径、绝对路径）
alt ： 链接地址有问题时提示的内容
title: 鼠标悬浮上显示的标题
width： 设置图片的宽度
height：设置图片的高度
width和height选择一个
特殊字符：
 : 空格
块级标签
h1 - h6
今日内容
块级标签
排版标签
p:一个文本级别的段落标签 前后有间距
P标签中不嵌套其他的块级标签
div 没有任何样式的块级标签
hr 分割线
列表
无序列表
type="原点的样式"
<!-- 样式 disc（实心圆、默认）、 circle（空心圆）、none（无）、square（方点）-->
<ul >
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
<ul type="none">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
<ul type="circle">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
<ul type="square">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ul>
有序列表
type="数字的样式" start =“起始值”（数字）
<!-- 样式 1（数字）、 a（小写字母）、A（大写）、I（罗马数字）-->
<ol>
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="1">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="a" start="25">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="A">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
<ol type="I">
<li>手机</li>
<li>电脑</li>
<li>iPad</li>
</ol>
定义列表
dt 标题
dd 内容
<dl>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>
<dt>城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>深圳</dd>
</dl>
表格
<!--有表头的表格-->
<!--tbale 嵌套 thead tbody
thead和tbody嵌套tr
tr嵌套 th td
-->
<!--tbale 属性
border 边框
cellpadding 元素和单元格的边距
cellspacing 单元格和边框的间距
-->
<!--tr 属性
align 内容的水平排列 left center right
valign 内容的垂直排列 top middle bottom
-->
<!--td 属性
rowspan 占几行
colspan 占几列
-->
<table border="1" cellpadding="20px" cellspacing="20px">
<thead>
<tr align="left">
<th> 序号</th>
<th> 姓名</th>
<th> 年龄</th>
</tr>
</thead>
<tbody>
<tr align="center" valign="bottom">
<td>1</td>
<td >alex</td>
<td >84</td>
</tr>
<tr align="center" valign="top">
<td>2</td>
<td >alex</td>
</tr>
<tr>
<td>2</td>
<td>wusir</td>
<td rowspan="2">2208</td>
</tr>
</tbody>
</table>
<!-- 无表头的表格-->
<table border="1" cellpadding="20px" cellspacing="20px">
<tbody>
<tr align="center" valign="bottom">
<td>1</td>
<td >alex</td>
<td >84</td>
</tr>
<tr align="center" valign="top">
<td>2</td>
<td >alex</td>
</tr>
<tr>
<td>2</td>
<td>wusir</td>
<td rowspan="2">2208</td>
</tr>
</tbody>
</table>
表单
<!-- form 标签
action： 提交的地址
-->
<!-- input 标签
type： 类型
text：普通文本
password：密码 密文
ra dio： 单选框
checkbox： 复选框
submit： 提交按钮
能提交数据 input有name属性 有value值
-->
<button>提交</button>
<!--
form表单中button和type=‘submit’的input的作用是一样的
-->
<form action="http://127.0.0.1:9999">
<input type="text" name="user" placeholder="请输入用户名"> <!--name:提交数据的key value:值 placeholder：占位的内容 -->
<input type="password" name="pwd" value="3714">
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="2" checked > 女 <!-- checked默认选中 -->
<input type="checkbox" name="hobby" value="1"> 跳
<input type="checkbox" name="hobby" value="2"> 唱
<input type="checkbox" name="hobby" value="3"> rap
<input type="checkbox" name="hobby" value="4"> 篮球
<input type="submit">
<button>提交</button
</form>
label
<!--给input标签定义id 给label标签的for填上id-->
<label for="i1">用户名：</label>
<input id="i1" type="text" name="user" placeholder="请输入用户名">
其他的input
<input type="hidden" name="alex" value="alexdsb"> <!-- 隐藏的input框 -->
<input type="reset"> <!-- 重置按钮 -->
<input type="button" value="提交"> <!-- 普通的按钮 -->
<button type="button">提交</button> <!-- 普通的按钮 -->
<input type="date"> <!-- 日期格式 -->
select option
<!--下拉框 单选 -->
<!--size 框的大小 -->
<select name="city" id="" size="4" >
<option value="1">北京</option>
<option value="2" selected >上海</option> <!-- selected默认选中 -->
<option value="3">深圳</option>
</select>
<!--下拉框 多选 -->
<!--size 框的大小 -->
<select name="city" id="" size="4" multiple>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
上传文件
<input type="file" name="f1">
<form enctype="multipart/form-data"> <!--编码指定为multipart/form-data-->
CSS
引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内联引入-->
<style>
div {
color: #ffef6b
}
</style>
<!--外联引入：链接 使用较多 -->
<link rel="stylesheet" href="index.css">
<!--外联引入：导入-->
<style>
@import url('index.css');
</style>
</head>
<body>
<!--行内引入-->
<div style="color: red">黄焖鸡米饭</div>
<div>黄焖鸡排骨</div>
</body>
</html>
简单的样式
color: #ffef6b; /*字体颜色*/
width: 200px; /*宽度*/
height: 200px; /*高度*/
background: blue; /*背景颜色*/
选择器
基本选择器
标签\id\类\通用选择器
<style>
div { 标签
color: #ffef6b;
}
a {
color: green;
}
span {
color: #42ff68;
}
#sp1 { id
color: chartreuse;
}
.cai { 类
color: #192aff;
}
.x1 {
background: #3bff00;
}
* {
background: #3bff00;
}
</style>
<body>
<!--<div >黄焖鸡米饭</div>-->
<!--<div>黄焖鸡排骨</div>-->
<div>黄焖鸡米饭
<span class="cai">鸡</span>
<span>米饭</span>
<a href="xxxx">外卖连接</a>
</div>
<div>黄焖鸡排骨
<span class="cai x1 x2">排骨</span>
<span>米饭</span>
</div>
<span id="sp1">米饭</span>
</body>
高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p+a {
color: red;
}
</style>
</head>
<body>
<div>
<a>这是一个a0 </a>
<p>这是一个p </p>
<a >这是一个a1 </a>
<a >这是一个a2 </a>
<a>这是一个a3 </a>
</div>
</body>
</html>
选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#p1 {*/
/* color: green ;*/
/*}*/
.c1 {
color: blue ;
}
p.c1 {
color: red;
}
p.c2 {
color: rgba(255,103,0,0);
}
</style>
</head>
<body>
<p id="p1" class="c1 c2 " >aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
</body>
</html>
字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-family: '宋体';
}
#p1 {
font-size:100px;
font-weight:900;
font-family: '华文楷体','微软雅黑 Light','宋体';
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<p id="p1">这是一个p标签</p>
</body>
</html>
文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
background-color:yellow ;
height: 80px;
text-align: left;
/*font-size: 18px;*/
color: red;
text-decoration: line-through;
text-indent:2em;
line-height: 80px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<u>这是一个p标签</u>
<s>这是一个p标签</s>
<p id="p1">这是一个p标签</p>
<p style="font-size: 18px">这是一个p标签</p>
<a href="">这是一个a标签</a>
</body>
</html>
文字的溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-overflow</title>
<style type="text/css">
.div0 {
width: 300px;
border: 1px solid darkblue;
}
.div1 {
width: 300px;
border: 1px solid red;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
}
.div2 {
width: 300px;
border: 1px solid black;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*修剪超出的文本*/
text-overflow: clip;
}
.div3 {
width: 300px;
border: 1px solid chocolate;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*显示省略符号来代表被修剪的文本*/
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="div0">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div1">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div2">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div3">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
</body>
</html>
文字溢出
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
/*background-color: red;*/
/*background-image: url("1.png");*/
/*background-repeat: no-repeat;*/
/*background-position:right bottom;*/
width: 900px;
height: 900px;
background: red url("1.png") no-repeat left center;
}
</style>
</head>
<body>
<div>
<p>
这是一个p标签
</p>
</div>
</body>
</html>
边框的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: red;
width: 100px;
height: 100px;
/*border: 2px;*/
/*border-color: black yellow;*/
/*border-style: solid dotted ;*/
/* 4个 方向 上 右 下 左
2个 上下 左右
1个 所有方法
*/
/*border-left:2px ;*/
/*border-left-color:yellow ;*/
/*border-left-style:solid ;*/
border: #3bff00 2px solid;
}
</style>
</head>
<body>
<div>
<p>
这是一个p标签
</p>
</div>
</body>
</html>
块和行内的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
display: block;
background: #3bff00;
}
div {
width: 100px;
height: 100px;
/*display: inline-block;*/
background: #ff1cf2;
}
#div1 {
display: none;
}
</style>
</head>
<body>
<span>行内</span><span>行内</span><span>行内</span>
<div id="div1">块1</div>
<div>块</div>
</body>
</html>
盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background: #3bff00;
height: 200px;
width: 200px;
padding: 20px;
/*padding-top: 10px;*/
border: 2px red solid;
margin: 20px;
}
</style>
</head>
<body>
<div>块1</div>
<div style="margin-top: -30px" >块1</div>
</body>
</html>
day45
内容回顾
选择器
基本选择器
标签 div p span
id #id
类 class=‘xxx x2’ .xxx
通用选择器 * {}
高级选择器
后代 div p 找div标签下所有的p标签
子代 div>p 找div标签下子代的p标签
毗邻 div+p 找div标签下一个p标签
弟弟 div~p 找div标签后面所有的p标签
属性 [href] [href='www.baidu.com'] 找有属性为href的标签 找有属性href=www.baidu.com的标签
并集 div,p,span 找逗号左右所有的标签
交集 div.x1 找class=‘x1‘的div的标签
伪类 a:link 没有访问过的样式 a:visited 访问过后的样式 a:active 鼠标按下时的样式
div:hover 鼠标悬浮上的样式
伪元素 p:before p标签内部之前 content 内容
p:after p标签内部之后 content 内容
p:fistt-letter 一个元素的样式
选择器的优先级
行内（1000） > id(100) > 类（10） > 标签（1） >继承（0）
优先级会累加但是不进位
!important 最高级别
颜色的表示
rgb 光学三原色 红色 绿色 蓝色
rgb(0,0,0) 黑色 rgb(255,255,255) 白色
十六进制 #000000 - #ffffff #000-#fff
单词 green red
rgba(0,0,0,0) 0 完全透明 1 完全不透明
字体
font-family：’宋体‘,'微软雅黑'；
font-size: 字体大小 默认16px;
font-weight: 粗细 sold; 100-900 400
color: 字体颜色
文本
text-aligin: 文字水平排列 left center right
line-hight : 行高
text-indent: 缩进 2em
text-decoration: underline overline line-through none
背景图片
background-color : 背景颜色
background-imge : 背景图片 URL('')
background-repeat: repeat repeat-x repeat-y no-repeat
background-position : 12px 12px \ left right center top center bottom
background-size: 图片大小的设置 px % cover 整个覆盖 contain 包含在内
background: 颜色 图片 重复 位置；
边框
border-style: solid 实心 double 双线 dotted 实心圆 dashed虚线
border-color：
border-size：
border-color： red green; red green gray yellow;
border-botom-color
border : 1px green solid ;
行内和块的元素
display： inline 基本不用
display：block 块
display：inline-block 行内块
display：none 无 不显示 不占位
盒模型
width: 内容的宽
height： 内容的高
border： 边框
padding： 内边距
margin： 外边距
塌陷现象 ：上下时只取最大的margin
今日内容
overflow
overflow: visible; 可见 默认
overflow: hidden; 隐藏
overflow: auto; 超出时出现滚动条
overflow: scroll; 显示滚动条
浮动
float: right; left ： 脱离文档流 先浮动的先占位，后面的紧贴着
清除浮动：
.clear{
clear: both;
}
<div id="father" style="">
<div id="d1" class="box"></div>
<div class="box"></div>
<div class="clear"></div>
</div>
伪元素清除法：
.clearfix:after{
content: '';
display: block;
clear: both;
}
定位
相对定位 relative 相对于原位置进行定位，还占原来的位置
绝对定位 absolute 相对于已经有相对定位的父标签的定位\相对于body的定位 不占原来的位置
固定定位：fixed 相对于窗口的位置
top: ;
left: ;
right: ;
bottom: ;
z-index
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
javascript 编程语言
ECMAScript 标准化的规范
DOM document object model 文档对象模型
BOM bowser object model 浏览器对象模型
JS引入
写在html script标签内部
<script>
alert('hello,world!')
</script>
变量
变量名 数字 字母 下划线 $
使用var 定义变量 var a =1
var a ; 表示声明了一个变量 undefined
注释
当行注释 //
多行注释 /*
*/
输出和输入
alert() 弹窗
console.log() 控制台输出
prompt('请输入')
"1111111"
var a = prompt('请输入')
基本的数据类型
number 数字
表示整数 浮点数 NaN not a number
a.toFixed(2) 保留小数位数 四舍五入
string 字符串
var a = '单引号'
var a = “双引号“
布尔值 boolean
true
false
空元素 null 未定义undefined
var a = null;
var a ; undefined
数组
var a = [1,2,3]
var a = new Array()
对象
var a = {name:'alex',age:87}
var a = {'name':'alex','age':87}
取值 a['name']
赋值 a['name'] = 'alexdsb'
浮动代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
height: 100px;
width: 100px;
background-color: green;
border: red solid;
float: right;
}
#d1 {
background-color: #4c3880;
}
#father {
background-color: #ff1cf2;
}
.clear{
clear: both;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="father" style="" class="clearfix">
<div id="d1" class="box"></div>
<div class="box"></div>
<!-- <div class="clear"></div>-->
</div>
<div style="height: 300px;background-color:#000;"></div>
</body>
</html>
定位代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
position: relative;
height: 150px;
width: 100px;
background-color: green;
border: #433aff solid 1px;
/*display: inline-block;*/
z-index: 2;
}
.father {
position: relative;
height: 110px;
width: 200px;
background-color: #7a8053;
/*z-index: 1;*/
}
.box1 {
position: relative;
width: 200px;
height: 200px;
z-index: 3 ;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="father">
<div class="box box1" style="background-color: #ff1cf2"></div>
</div>
<div class="box" style="background-color: red"></div>
</body>
</html>
day46
内容回顾
css
overflow
溢出：
visible 可见
hidden 隐藏
auto 不超出时正常 超出了有滚动条
scroll 滚动条
浮动
float ： left right
浮动起来脱离文档流 不占位置
清除浮动：clear:both
伪元素清除法：
.clearfix {
content:'';
clear:both;
display:block;
}
overflow: hidden; 给父标签加
定位
position: relative absolute fixed
top
left
rigt
bottom
相对定位: 相对于原来的位置的定位 占用原来的位置
绝对定位： 相对于已经定位的父标签/html页面的位置的定位 不占原来的位置
固定定位： 相对于窗口的位置
z-index
显示层级的优先级
1. 数值越大越在上
2. 没有单位
3. 从父现象：父亲的z-index值小，自己的z-index值再大也没有用
4. 浮动的元素没有z-index
javascript
ECMAScript 标准化的规则 ES5 ES6
DOM
BOM
引入
方式一：
<script>
js代码
</script>
方式二：
xxxx.js
<script src='xxxx.js'></script>
js的标准
结束符 ;
注释 单行注释 //
多行注释 /* 多行 */
变量
变量名 数字 字母 下划线 $ 数字不能开头 区分大小写
定义一个变量 var
var a ; 声明变量 undefined
a= 1;
var a = 1;
输入输出
alert('弹出的窗口')
console.log（‘xxxx’）
var a = prompt('提示')
基本数据类型
number
var a = 1;
var b = 1.1;
typeof(a) number
NaN
string
var a = '单引号'
var a = "双引号"
a[0]
属性： a.length 长度
方法：
trim() 左右去空白
a.indexOf('a') 根据字符查找索引
a.concat('xxxxxx') 字符串的拼接
a.slice(0,3) 切片
a.split('',2) 分割 数字代表取前几个元素
a.toUpperCase() 变大写
a.toLowerCase() 变小写
boolean
true
false
null
定义一个空
undefined
声明了 但是没有定义
内置对象类型
Array 数组
var a = [1,2,3,4,5];
var a = new Array();
a[0] =1;
属性： length 长度
方法：
push 从后面插入
unshfit 从前面插入
pop 从后面删除 支持索引
shfit 从前面删除
a.concat('1','2') a.concat([1,2,3,4]) 拼接列表
a.slice(0,3) 切片
a.join(',') 拼接元素
a.sort() 排序
a.reverse() 翻转
a.splice(0,0,items) 删除的位置 删除的个数 替换的元素
自定义对象
var a = {}
var a = { name:'alex' }
取值 a['name']
赋值 a['age'] = 73
今日内容
数据类型的转换
字符串转数字
parseInt 字符串转整形
parseFloat 字符串转浮点型
Number(null) 0
Number(undefined) NaN
数字转字符串
String(111.1111)
var a = 11
var b = a.toString()
转布尔值
Boolean('')
true [] {}
false 0 ‘’ null undefined
运算符
赋值运算符
= += -= *= /=
算数运算符
+ - * / %
a++ ++a 自加1
比较运算符
> < >= <=
== !=
=== !==
// != NaN 值为true
字符串 + 数字 字符串
字符串 - 数字 = 数字
逻辑运算
或 与 非
与 1 && 2
或 false || true
非 !true
流程控制
条件 （）
代码块 {}
if
if (2>1){
console.log(1)
}
if (2 < 1) {
console.log(1)
} else {
console.log(2)
}
if (2 < 1) {
console.log(1)
} else if (2 > 1) {
console.log(3)
} else {
console.log(2)
}
case switch
var error_num = 1;
switch (error_num) {
case 1:
console.log(1);
break;
case 2:
console.log(2);
break;
default:
console.log('xxxx');
}
while
while(i<=9){ //判断循环条件
console.log(i);
i++; //更新循环条件
}
do - while 至少执行一次
do{
console.log(i)
i++;//更新循环条件
}while (i<10)
for
var a = [1,2]
for (i in a ){
// i 索引
// a[i]
}
for (var i=0;i<a.length;i++){
// a[i]
}
三元运算
var c = a>b ? a:b //如果a>b成立返回a，否则返回b
函数
python
def 函数名():
函数体
return 1
函数名()
js
function 函数名(参数){
函数体
return 返回值
}
arguments 伪数组 接受所有的参数
匿名函数
function (参数){
函数体
return 返回值
}
自执行函数
(函数)(参数，参数)
函数
函数（参数）
var c = (function (a,b){
console.log(arguments)
console.log(a,b)
return 1
})(1,2)
function add(a, b) {
console.log(arguments);
console.log(a, b);
return 1
}
add(1.2)
(function (a, b) {
console.log(arguments);
console.log(a, b);
return 1
})(1, 2)
正则表达式
var reg = RegExp('\\d')
var reg = /\d/
reg.test('sss1') 能匹配成功返回true 不能返回false
字符串中使用正则
var a = 'alex is a dsb'
var reg = /a/
a.match(reg) 从左到右匹配一次
a.match(/a/g) g 代表获取所有
a.match(/a/ig) i 忽略大小写
a.search(/a/) 获取索引值 只找一个 匹配到就是索引 匹配不到就是-1
a.replace(/a/ig,'123') 替换 ig替换所有并且忽略大小写
问题1：
var reg = /\d/g
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
false
问题2
var reg = /\d/
reg.test() #不写内容相当于写的undefined
day47
内容回顾
js
引入
在HTML中写标签
<script>
js代码
</script>
引入文件
<script src='js文件' ></script>
// link href
变量
var 声明变量
数字 下划线 字母 $
不能数字开通 不能使用关键
基本的数据类型
number
1 1.222
string
'' ""
属性： length
方法：trim() charAt() indexOf() split() slice() concat()
boolean
true [] {}
false '' null undefined NaN
null 定义的空
undefined 未定义
内置的对象
Array
var a = [1,2,3,4,5]
var a = new Array()
a[1] // 2
a[1] = 3
属性： length
方法: push() pop() unshfit() shift() concat() join(',,') slice() sort() reverse()
splice(1,2,4,4,5,6,7)
自定义的对象
var a = { 'name':'alex','age':84 }
a['name'] // 'alex'
a['name'] ='alexdsb' // 'alex'
数据类型的转换
数字转字符串
num.toString()
String(num)
字符串转数字
parseInt(s) // NaN
parseFloat(s)
Number（s） // null _> 0 undefined NaN
转化成布尔值
Boolean()
运算符
赋值运算符
= += -+ *= /=
算数运算符
+ - * / % ++ --
var a = 1;
var b = a++ // b 1 a 2
var a = 1;
var b = ++a // b 2 a 2
比较运算
> < >= <=
== !=
=== !==
逻辑运算
或 || // or
与 && // and
非 ! // not
流程控制
if判断
if (条件){
// 条件满足时执行的代码
}
if (条件){
// 条件满足时执行的代码
}else {
// 条件不满足时执行的代码
}
if (条件){
// 条件满足时执行的代码
else if (条件){
// 条件满足时执行的代码
}
}else {
// 条件不满足时执行的代码
}
switch case
switch (值){
case 1 :
// 要执行的代码
break;
case 2 :
// 要执行的代码
break;
default:
// 值不匹配的时候执行的代码
}
while
while (条件) {
// 条件满足时执行的代码
}
do - while
do {
// 不管条件是佛满足先执行一次，如果满足条件继续执行的代码
}while (条件)
for
for ( i in arr ) {
// i 获取到索引
}
for (var i=0;i<arr.length;i++) {
// i 是自己声明的索引
// 执行完代码后 i自增
}
三元运算：
var a = 条件 ？ 条件成立时的值：条件不成立时的值
// a = 条件成立时的值 if 条件 else 条件不成立时的值
函数
function 函数名（参数）{
// 函数体
return 返回值 // [1,2,3,4]
}
函数名（参数）
匿名函数
function （参数）{
// 函数体
return 返回值 // [1,2,3,4]
}
自执行函数
（function 函数名（参数）{
// 函数体
return 返回值 // [1,2,3,4]
}）（参数，参数）
// argumenets 接受了所有的参数
正则表达式
var reg = RegExp('[0-9]')
var reg = RegExp('\\d')
var reg = /\d/
reg.test('字符串') // 判断字符中是否包含正则表达式的内容
字符串的正则的应用
var a ='alex is a big sb'
a.match(/a/) // a.match(/a/g) a.match(/a/gi) g查找所有 i忽略大小写
a.search(/a/) // 匹配元素的索引
a.replace(/a/,'777') // 替换掉匹配了的元素
问题1：
var reg = /\d/g
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
false
问题2：
var reg = /\w{5,10}/
undefined
reg.test() // 不写内容 就是'undefined'
true
今日内容
DOM
document object model 文档对象模型
查找元素
直接查找
document.getElementById('div1') // 通过ID查找 返回一个节点
document.getElementsByClassName('son') // 通过类名查找 返回一个对象 对象中包含多个节点
document.getElementsByTagName('div') /// 通过标签名查找
间接查找
节点.parentNode // 找到父节点
节点.children // 找子节点 多个节点
节点.firstElementChild // 找第一个子节点
节点.lastElementChild // 找最后一个子节点
节点.nextElementSibling //找下一个兄弟节点
节点.previousElementSibling //找上一个兄弟节点
节点的属性操作
节点.getAttribute('属性') //获取属性
节点.setAttribute('属性','值') //设置属性
节点.removeAttribute('属性') //删除属性
节点的文本操作
节点.innerText // 标签的文本内容
节点.innerHTML // 标签内部的HTML文本
节点.innerText='设置的文本' // 标签的文本内容
节点.innerHTML='设置HTML的文本' // 标签内部的html的文本
节点的值操作
// input select textarea
节点.value // 获取节点的值
节点.value = '值' // 设置节点的值
节点样式的操作
节点.style // 所有的样式 只有行内样式才能拿多
节点.style.样式名称
节点.style.样式名称 = '值' // 设置样式
节点类的操作
节点.classList // 节点所有的class
节点.classList.add（'类名'） // 给节点添加一个类
节点.classList.remove（'类名'） // 给节点删除一个类
节点的操作
document.createElement('标签的名字') // 创建一个标签节点 div a span
添加节点到文档中
父节点.appendChild(子节点) // 添加一个子节点到父节点的后面
父节点.insertBefore(新节点,父节点的子节点) // 添加一个子节点到父节中的指定子节点前
删除节点
父节点.removeChild(子节点) // 通过父节点删除子节点
替换节点
节点.replaceChild(新节点,节点的子节点)
复制节点
节点.cloneNode() // 不写数字或者0 只拷贝节点
节点.cloneNode(1) // 拷贝节点和它的子孙节点
事件
事件的绑定
// 方式一
<div onclick="alert('你点我了')">
事件示例
</div>
// 方式二
<div onclick="func()">
事件示例2
</div>
<script>
function func() {
alert('你点我了')
alert('你还点')
}
</script>
// 方式三
<div id="div1">
事件示例3
</div>
<script>
var div1 = document.getElementById('div1')
div1.onclick = function () {
alert('你点我了');
alert('你还点');
alert('你还点!!!');
}
</script>
事件的种类
| 属性 | 当以下情况发生时，出现此事件 |
|---|---|
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被点击 |
| onresize | 窗口或框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被点击 |
滚动事件：
<script>
//实施监听滚动事件
window.onscroll = function () {
console.log(1111)
console.log('上' + document.documentElement.scrollTop)
console.log('左' + document.documentElement.scrollLeft)
console.log('宽' + document.documentElement.scrollWidth)
console.log('高' + document.documentElement.scrollHeight)
}
</script>
BOM
browser object model
窗口
打开新窗口
window.open(url,target)
关闭窗口
window.close() // 只能关闭用open打开的窗口
窗口的宽高
window.innerHeight 高度
window.innerWidth 宽度
定时器 **
定时器 **
// setTimeout 某段时间结束后触发执行
function func(){
alert('是否已满18岁')
}
setTimeout(func,2000)
// setInterval 设置时间间隔的定时器 每隔一段时间要触发执行函数
var ret= setInterval(func, 500); // 开启定时器
clearInterval(ret) // 关闭定时器
location **
location.href // 当前的地址
location.href = '地址' // 当前页面会跳转到新页面
dom代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1" class="father">
<div id="son1" class="son b1">
<a href="" id="diva"></a>
</div>
<div id="son2" class="son">
<img src="" alt="">
</div>
</div>
<script>
var div1 = document.getElementById('div1')
// console.log(div1)
var son = document.getElementsByClassName('son')
console.log(son)
// var son = document.getElementsByTagName('div')
// console.log(son)
</script>
</body>
</html>
值的操作代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1" >
<select id="s2">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<textarea id="t1"></textarea>
<script>
var i1= document.getElementById('i1');
var s1= document.getElementById('s1');
var t1= document.getElementById('t1');
</script>
</body>
</html>
类和样式的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.son {
width: 100px;
height: 100px;
background-color: red;
}
.b1 {
background-color: green;
}
</style>
</head>
<body>
<div id="div1" class="father">
<div id="son1" class="son b1" >
<a href="" id="diva"></a>
</div>
<div id="son2" class="son">
<img src="" alt="">
</div>
</div>
<script>
</script>
</body>
</html>
时间的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="alert('你点我了')">
事件示例
</div>
<div onclick="func()">
事件示例2
</div>
<script>
function func() {
alert('你点我了')
alert('你还点')
}
</script>
<div id="div1">
事件示例3
</div>
<script>
var div1 = document.getElementById('div1')
div1.onclick = function () {
alert('你点我了');
alert('你还点');
alert('你还点!!!');
}
</script>
<input type="text">
</body>
</html>
滚动代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<script>
// s = document.getElementById('scroll');
//实施监听滚动事件
window.onscroll = function () {
console.log(1111)
console.log('上' + document.documentElement.scrollTop)
console.log('左' + document.documentElement.scrollLeft)
console.log('宽' + document.documentElement.scrollWidth)
console.log('高' + document.documentElement.scrollHeight)
}
</script>
</body>
</html>
day48
内容回顾
DOM
dom数
整个HTML就是一个数 多个节点
节点含的内容:本身的内容 属性 关系
查找节点
直接查找
var 节点 = document.getElementById('id) 通过id查找返回一个
var 节点 = document.getElementsByClassName('类型') 通过类名查找 返回多个 按索引拿一个
var 节点 = document.getElementsByTagName('div') 通过标签名查找 返回多个 按照索引拿一个
间接查找
节点.children //多个子节点
节点.firstElementChild //父节点下的第一个子节点
节点.lastElementChild //父节点下的最后一个子节点
节点.parentNode //父节点
节点.nextElementSibling //下一个兄弟节点
节点.previousElementSibling//前一个兄弟节点
属性的操作
节点.getAttribute("属性名")//获取属性
节点.setAttribute('属性名,'属性值')//设置属性
节点.removeAttribute('属性名') //删除属性
文本的操作
节点.innerText //节点中的内容
节点.innerText = '文本' //节点中的内容 不识别标签
节点.innerHTML //节点中的HTML文本
节点.innerHTML = '文本' ..节点中的HTML文本 识别标签
值的操作
input select textarea
节点.value //获取节点的值
节点.value = '值' //设置节点的值
样式的操作
节点.style.样式属性 //获取样式的值 只能获取行内样式
节点.style.样式属性 = '值' //设置样式的值
类的操作
节点.classList //查找类的名称
节点.classList.add('类名') //添加
节点.classList.remove('类名') //删除
节点.classList.toggle('类名') //转换 存在的时候删除.没有的时候添加
节点.classList.contains('类名') //包含
节点的操作
document.createElement('标签名') // 创建标签节点
父节点.appendChild(子节点) // 添加节点到父节点后面
父节点.insertBefore(子节点，父节点中的子节点 ) // 添加节点到某个子节点的前面
父节点.removeChild（子节点） // 通过某个父节点删除子节点
父节点.replaceChild(新节点，替换的节点) // 替换节点
节点.cloneNode(值) // 复制节点 值0 只复制该节点 值1 复制所有的子孙节点
事件
绑定事件
<button id = 'b1'><button>
方式一
<script>
var b1 = document.getElementById('b1')
b1.onclick = function (){
// 点击事件后要执行的代码
}
<script>
方式二
<button id='b1' onclick='fn()'><button/>
<script>
function fn(){
// 点击事件后要执行的代码
}
</script>
常用事件
onclick 鼠标单击
onfocus 获取焦点
onblur 失去焦点
onmouseover 鼠标悬浮
onmouseout 鼠标移出
onsubmit 提交表单触发
onslecet 下拉框选中
onchange 文本下拉框改变时
onkeyup 键松开
onload 文档图片加载完成
onscroll 滚动条滚动
BOM
窗口
window.open('url地址',打开方式)
window.close() // 只能关闭用open打开的窗口
定时器(重点)
// 每隔一段时间要执行一次操作
var 定时器的id = setInterval(函数,毫秒数) //开启定时器每隔一段时间执行函数
clearInterval(定时器的id) //关闭定时器
// 一段时间后再执行函数
var 定时器的id = setTimeout(函数,毫秒数) //开启定时器时间到了在执行函数
clearTimeout(定时器的id) //关闭定时器
location**
location.href //当前的地址
location.href = '新的地址' //跳转到新地址
location.reload() //刷新页面
history
history.back() //后退
history.forward() //前进
history.go() // 0 刷新 -1 后退 1前进
今日内容
博客:https://www.cnblogs.com/maple-shaw/articles/6972913.html
jQuery的优点
- 浏览器的兼容性好
- 隐式循环
- 链式编程
Jquery对象和DOM对象的关系,转换
Jquery对象内部封装DOM对象,方法
DOM对象 ——》 Jquery对象
Jquery（DOM对象） $（DOM对象）
Jquery对象 ——》 DOM对象
Jquery对象[索引] $（DOM对象）[]
Jquery 和 $ 是一个东西
jQuery的选择器
基本选择器
id选择器 类选择器 标签选择器 通用选择器
$('#id')
$('.类名')
$('标签名')
$('*')
交集选择器
$('li.city#l1')
并集选择器
$('div,li,a')
层级选择器
后代选择器 空格 自带选择器> 毗邻选择+ 弟弟选择器~
$('ul li') // 选择ul 下的所有li标签
$('ul>a') //选择ul 下的子代中的a标签
$('#l1+li') //选择id为l1的标签后的一个li标签
$('#l1~li') //选择id为l1的标签后的所有的li标签
属性选择器
$('[属性]')
$('标签[属性]') //选择某个包含某个属性的标签
$('[属性="值"]')
$('[属性$="值"]') //属性结尾为某个值的标签
$('[属性A="值"]') //属性开头为某个标签
$('[属性*="值"]')//属性包含某个值标签
jQuery的筛选器
基本筛选器
$('选择器:帅选器')
$('选择器:first') 第一个
$('选择器:last') 最后一个
:eq(索引) 等于某索引的标签
:gt(索引) 大于某索引的标签
:lt(索引) 小于某索引的标签
:odd 奇数
:even 偶数
:not(选择器) //在当前的标签内排除某些标签
:has("选择器") 获取一个包含子代对象的父对象
type筛选器
$(':text')
$(':radio')
$(':checkbox')
$(':password')
$(':submit')
$(':button')
$(':file')
$(':reset')
注意： date 不支持
状态选择器
$(':disabled') // 禁用的标签
$(':enabled') // 可使用的标签
$(':checked') // radio、checkbox、select（option） 选中的标签
$(':selected') // select 选中的option标签
jQuery的筛选器方法
.children() // 子代
.parent() // 父代
.parents() // 父辈们
.parentsUntil('选择器') // 找父辈们，直达某个标签，且不包含该标签
.siblings() // 所有兄弟标签
.prev() // 上一个
.prevAll() // 前面所有的兄弟
.prevUntil() // 前面的兄弟到某个标签位置
.next() // 下一个
.nextAll() // 后面所有的兄弟
.nextUntil() // 后面的兄弟到某个标签位置
first() 第一个
last() 最后一个
eq() 等于
has() // $('li').has('a') 选择一个包含a标签的li标签
find() // $('li').find('a') 在li标签下找所有的a标签
not() // 在所有的标签内排除某些标签
filter() // 获取一些满足条件的标签 交集选择器
day49
补充内容
1.循环多个元素时
var ul_li = $('li')
for (let i=0;i<ul_li.length;i++){
console.log('li',ul_li[i])
} // let 声明的变量只能在代码跨中生效
2.局部变量 全局变量
function f(){
var b = 2; //局部变量
let c = 3; //在当前代码块生效
d = 4;
}
内容回顾
jquery
jquery是一个高度封装了js的库
jq 封装 dom对象\方法
$ == jQuery
引入方式
<script src="jquery.3.4.1.js"> </script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
$('选择器') jQuery('选择器')
dom对象 —— 》 jq对象
$(dom对象)
jq对象 —— 》 dom对象
jq对象[index]
jquery选择器
$('选择器')
基本选择器
通用选择器 $('*')
标签选择器 $('div')
id选择器 $('#id')
类选择器 $('.类名')
交集选择器 $('div.类名') $('div#id')
并集选择器 $('div,.类名')
层级选择器
后代选择器 $('div p')
子代选择器 $('div>p')
毗邻选择器 $('div+p')
弟弟选择器 $('div~p')
属性选择器
$('[属性]')
$('[属性="值"]')
$('[属性!="值"]')
$('[属性$="值"]')
$('[属性^="值"]')
$('[属性*="值"]')
jquery筛选器
$('选择器:筛选器')
:first 第一个
:last 最后一个
:eq(index) 按照索引取
:gt(index) 索引大于index的对象
:lt(index) 索引小于index的对象
:odd 奇数
:even 偶数
:not(‘选择器’) 排除选择器的其他的对象 排除某些
:has（'选择器'） 获取一个包含子代对象的父对象
表单
:text password radio checkbox submit button file reset date(用不了)
:disabled enabled checked(radio\checkbox\select(option)) selected(option)
$(':checkbox:checked') // 选择已选中的checkbox
$(':selected')
jquery筛选器方法
子代: .children()
父亲： .parent（） .parents() .parentsUntil('选择器')
兄弟： siblings()
弟弟： next() nextAll() nextUntil('选择器')
哥哥： prev() prevAll() prevUntil('选择器')
first
last
eq
has 获取一个包含子代对象的父对象
not 排除选择器的其他的对象 排除某些
filter 交集选择器
find 找子代
今日内容
事件的绑定
<button>按钮1</button>
<button>按钮2</button>
<script>
$('button').click(function () {
alert('你点我干啥')
alert('点你咋地')
alert('再点一个试试')
})
</script>
jQuery对象的操作
文本的操作
.text() // 获取标签的内容
.text(内容) // 设置标签的内容
.html() // 获取标签的内容
.html(HTML标签文本) // 设置标签的内容
.html(DOM对象) // 设置标签的内容
.html(jq对象) // 设置标签的内容
标签的操作
添加 // js 父节点.appendChild(新的节点) 父节点.insertBefore(新的节点,参考节点)
父子关系：
添加到后面
a.append（b） 在a节点孩子中添加一个b
// a 父节点 b 新添加的子节点
// a 必须是jq对象 b （标签字符串、dom对象、jq对象 ）
a.appendTo(b) 把a节点添加到b的孩子中
// b 父节点 a 新添加的子节点
// a 必须是jq对象 b （选择器、dom对象、jq对象 ）
添加到前面
a.prepend(b) b.prependTo(a)
兄弟关系：
a.after(b) 在a的后面添加一个b b.insertAfter(a) 把b添加到a的后面
a.before(b) 在a的前面添加一个b b.insertBefore(a) 把b添加到a的前面
// 操作同一个对象时，操作多次，相当于是移动的效果。
删除 remove detach empty
remove // 删除标签并且删除事件 返回值是标签对象
detach // 删除标签，但是保留事件 返回值是标签对象
empty // 清空标签内容，但是保留标签本身
替换
a.replaceWith(b) // 用b替换a标签
a.replaceAll(b) // 用a替换所有的b (选择器、jq对象、dom对象)
拷贝
clone(false) // 只拷贝标签
clone(true) // 拷贝标签也拷贝事件
属性的操作
普通属性
.attr('属性') // 获取属性的值
.attr('属性','值') // 设置单个属性的值
.attr({'属性'：'值'，'属性2':'值'}) // 设置多个属性的值
removeAttr('属性') // 删除单一属性
值
input select textarea
val（） // 获取值
val（'值'） // 设置值
// radio checkbox select 是否选中使用prop 不建议attr
.prop('属性') // 获取属性的值
.prop('checked',true) // checked 变为选中状态
.prop('checked',false) // checked 变为未选中状态
类
addClass() // 添加类
removeClass() // 删除类
toggleClass() // 切换类
事件绑定代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<script>
$('button').click(function () {
alert('你点我干啥')
alert('点你咋地')
alert('再点一个试试')
})
</script>
</body>
</html>
文件操作代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<p></p>
<p></p>
<script>
var p = document.getElementsByTagName('p')[0];
p.innerText = '这是第一个p标签';
p.innerHTML = '<a href="http://www.mi.com">这是一个a标签</a>';
var t = $('p:first').text() ; // 获取标签的内容
console.log(t);
var last = $('p:last');
var a = document.createElement('a')
a.innerText ='这是第二个a标签'
a.setAttribute('href','http://www.mi.com')
last.html($(a)) // 设置标签的html
</script>
</body>
</html>
添加标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<div>
<ul id="u1">;
<li>1</li>
<li id="l1">2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
var fa = $('ul');
var l1 = $('#l1');
var li = document.createElement('li');
li.innerText =5;
$(li).insertAfter(l1)
</script>
</body>
</html>
删除标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<button id="b1">按钮</button>
<ul>
<li>11</li>
<li>22</li>
<li id="l3" >33</li>
</ul>
<script>
// $('#b1').click(function () {
// alert('点我试试')
// }
// )
//
var l4 = $('<li>')
l4.text(44)
</script>
</body>
</html>
拷贝标签代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<button>按钮</button>
</body>
<script>
$('button').click(function () {
var btn = $(this).clone()
$('body').append(btn)
})
</script>
</html>
属性的操作代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<a href="" ></a>
<input type="text">
<select >
<option value="1" selected>北京</option>
<option value="2">上海</option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="radio" name="sex" value="1" checked >
<input type="radio" name="sex" value="2">
</body>
</html>
类的操作代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
.red {
background-color: red;
}
.big {
width: 200px;
height: 200px;
}
.hide {
display: none;
}
</style>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<div></div>
</body>
</html>
菜单代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.header{
height: 48px;
background-color: yellow;
}
.body{
min-height: 500px;
}
.menu{
width: 20%;
min-height: 500px;
float: left;
}
.content{
width: 80%;
background-color: #dddddd;
min-height: 500px;
float: left;
}
.menu .item .tou{
border: 1px solid #4c3880;
padding: 8px 0;
background-color: brown;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="body">
<div class="menu">
<div class="item">
<div class="tou" >蔬菜</div>
<div class="ti hide">
<a>胡萝卜</a>
<a>皇冠</a>
<a>茄子</a>
</div>
</div>
<div class="item">
<div class="tou">水果</div>
<div class="ti hide">
<a>香蕉</a>
<a>苹果</a>
</div>
</div>
<div class="item">
<div class="tou" >蔬菜</div>
<div class="ti hide">
<a>胡萝卜</a>
<a>皇冠</a>
<a>茄子</a>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery.3.4.1.js"></script>
<script>
$('.tou').click(function () {
// $(this).next().removeClass('hide');
// $(this).next().toggleClass('hide');
// $(this).next().removeClass('hide'); //把自己展开
// $(this).parent().siblings().find('.ti').addClass('hide'); // 让其他隐藏
$('.ti').addClass('hide');
$(this).next().removeClass('hide'); //把自己展开
});
</script>
</body>
</html>
day50
内容回顾
文本操作
节点.text() // 获取标签文本
节点.text('文本内容') // 设置标签文本内容
节点.html('<a>xxxx</a>') // 设置标签html的内容 (dom对象、jq对象)
标签操作
增加
父子关系： 给父标签内部添加子标签
父标签.append（子标签） 子标签.appendTo（父标签） 添加到后面
父标签.prepend（子标签） 子标签.prependTo（父标签） 添加到前面
兄弟关系： 给兄弟前后添加兄弟标签
兄标签.after(弟标签) 弟标签.insertAfter（兄标签）
兄标签.before(弟标签) 弟标签.insertBefore（兄标签）
删除
remove 删除标签和事件 返回当前删除的标签
detach 删除标签 不删除事件 返回当前删除的标签
empty 清空内部的内容 保留当前的标签
替换
a.replaceWith(b) // 用b去替换a
b.replaceAll(a) // 用b去替换a
克隆
.clone() // 仅复制标签 0 false
.clone(true) // 复制标签和事件
属性操作
通用属性
.attr('属性') // 获取某个属性的值
.attr('属性'，‘值’) // 设置单个属性的值
.attr({'属性'：‘值’，'属性'：‘值’}) // 设置多个属性的值
.removeAttr('属性') // 删除某个属性
表单的值
input select textarea （value）
.val() // 获取标签的值
.val(‘值’) // 获取标签的值
$('#s1').val(['1','2']) // 设置select的多选的值
radio checkbox select // 查看是否选中
类
.addClass('类名') // classList.add()
.removeClass('类名') // classList.remove()
.toggleClass('类名') // classList.toggle() 切换 有就删除 没有就添加
css
.css（'css样式名'） // 获取对应样式的值
.css（'css样式名','值'） // 设置对应样式的值
.css（{'css样式名':'值','css样式名2':'值'}） // 设置对应样式的值
盒子模型
width() // 内容的宽
height() // 内容的高
innerHeight() // 内容 + 内边距 高
innerWidth() // 内容 + 内边距 宽
outerWidth() // 内容 + 内边距 + 边框 宽
outerHeight() // 内容 + 内边距 + 边框 高
outerHeight(true) // 内容 + 内边距 + 边框 + 外边距 高
outerWidth(true) // 内容 + 内边距 + 边框 + 外边距 宽
设置宽高的时候 只是设置内容的宽高
今日内容
动画
滑动系列
slideDown 向下划入
slideUp 向上划出
slideToggle 切换
slideDown（毫秒数，回调函数）
show显示 hide 隐藏 toggle切换
渐入渐出
配合hover()事件使用
fadeIn 渐入
fadeOut 渐出
fadeToggle 切换
stop() 停止之前的动画
事件
绑定事件
// bind
$('button').bind('click',{'a':'bb'},fn); // 事件类型 参数 函数
function fn(e) { // e 事件的对象
console.log(e);
console.log(e.data); // 传的参数
// alert(123)
}
$('button').bind('click',fn);
function fn(e) {
console.log(e);
}
// 事件
$('button').click({'a': 'b'}, fn) // 参数 函数
function fn(e) {
console.log(e.data);
}
$('button').click( fn)
function fn(e) {
console.log(e.data);
}
解除事件
$('button').unbind('click')
常用的事件
click(function(){...}) // 点击事件
focus(function(){...}) // 获取焦点
blur(function(){...}) // 失去焦点
change(function(){...}) //内容发生变化，input（鼠标移出），select等
keyup(function(){...})
mouseover/mouseout
mouseenter/mouseleave = hover(function(){...})
文档的加载
js
window.onload = function () { // 页面 图片 视频 音频 都加载好执行
$('#b1').click(
function () {
$('.mask').show()
}
);
}
// window.onload 只执行一次 多次的划 后面的覆盖前面的
jquery
$(window).ready(function () { // 页面 图片 视频 音频 都加载好执行
$('#b1').click(
function () {
$('.mask').show()
}
);
})
// $(window).ready() 可执行多次 不会覆盖
$(document).ready(function () { // 页面 都加载好执行
$('#b1').click(
function () {
$('.mask').show()
}
);
})
})
// 简写
$(
function () { // 页面 都加载好执行
$('#b1').click(
function () {
$('.mask').show()
}
);
)
each
$('li').each(function (i,dom) {
console.log(i,dom)
console.log(i,dom.innerText)
})
作业：
- 小米购物车
- input框单独校验（不能为空）手机号
- 模态框
小米购物车代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
position: relative;
float: right;
}
.d2 {
position: absolute;
right: 0;
top: 0;
width: 120px;
height: 40px;
background-color: rgb(172, 172, 172);
text-align: center;
line-height: 40px;
}
.d3 {
position: absolute;
right: 0;
top: 40px;
width: 300px;
height: 60px;
background-color: pink;
display: none;
}
</style>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<div class="d1">
<div class="d2 clearfix">购物车（<span>0</span>）</div>
<div class="d3"></div>
</div>
<script>
// var flag = true;
// $('.d2').click(function () {
//
//
//
// if (flag) {
// $('.d3').css('display', 'block')
//
// } else {
// $('.d3').css('display', 'none')
//
// }
// flag = !flag
//
// })
// var flag = true;
// $('.d2').click(function () {
//
// // $('.d3').slideToggle(1000,
// // function () {
// // alert('结束了')
// // })
//
//
// if (flag) {
//
// // $('.d3').slideDown(1000)
// $('.d3').show(1000)
//
// } else {
// // $('.d3').slideUp(1000)
// $('.d3').hide(1000)
// }
// flag = !flag
//
// })
// var flag = true;
// $('.d2').click(function () {
// var _this = $(this);
// if (flag) {
// _this.css('color', 'red')
//
// } else {
// _this.css('color', 'black')
//
// }
// flag = !flag;
// $('.d3').toggle(1000)
// // $('.d3').toggle(1000, function () {
// // if (flag) {
// // _this.css('color', 'red')
// //
// // } else {
// // _this.css('color', 'black')
// //
// // }
// // flag = !flag;
// // })
//
// })
var flag = true;
$('.d2').hover(function () {
$('.d3').stop()
$('.d3').fadeToggle();
// if (flag) {
//
//
// $('.d3').fadeIn(1000)
//
// } else {
//
// $('.d3').fadeOut(1000)
// }
flag = !flag
})
</script>
</body>
</html>
绑定事件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<button>点击</button>
<script>
// $('button').bind('click',{'a':'bb'},fn);
//
// function fn(e) {
// console.log(e);
// console.log(e.data);
// // alert(123)
// }
//
// $('button').bind('click',fn);
//
// function fn(e) {
// console.log(e);
// }
//
// $('button').click({'a': 'b'}, fn)
//
// function fn(e) {
// console.log(e.data);
// }
$('button').click( fn)
function fn(e) {
console.log(e.data);
$('button').unbind('click')
}
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<input type="text" id="i1">
<input type="text" id="i2">
<select name="" id="">
<option value="1">北京</option>
<option value="2">上海</option>
</select>
<script>
$('#i1').focus(function () {
console.log('获取到焦点了')
})
$('#i1').blur(function () {
console.log('失去到焦点了')
})
$('#i1').change(function () {
console.log('内容修改了')
})
$('select').change(function () {
console.log('内容修改了~~~')
})
$('#i1').keyup(function (e) {
console.log(e.keyCode)
})
</script>
</body>
</html>
静态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
<style>
.mask {
position: absolute;
top: 0;
left: 0;
background-color: rgba(127, 127, 127, 0.5);
width: 100%;
height: 100%;
display: none;
}
.model {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
background-color: white;
margin-top: -200px;
margin-left: -250px;
}
</style>
</head>
<body>
<h3> 模态框示例 </h3>
<button id="b1">显示</button>
<div>
<div class="mask">
<div class="model">
<input type="text">
<input type="password">
</div>
</div>
</div>
<script>
$('#b1').click(
function () {
$('.mask').show()
}
);
$(window).keyup(function (e) {
if (e.keyCode === 27) {
$('.mask').hide()
}
})
</script>
</body>
</html>
鼠标悬浮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
background-color: red;
width: 300px;
height: 300px;
}
.son {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
// $('.father').mouseover(function () {
// console.log('我进来了！')
// })
//
// $('.father').mouseout(function () {
// console.log('我出来了！')
// })
// $('.father').mouseenter(function () {
// console.log('我进来了！')
// })
//
// $('.father').mouseleave(function () {
// console.log('我出来了！')
// })
// $('.father').hover(
// function () {
// console.log('hover')
// }
// )
</script>
</body>
</html>
文档加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.3.4.1.js"></script>
<style>
.mask {
position: absolute;
top: 0;
left: 0;
background-color: rgba(127, 127, 127, 0.5);
width: 100%;
height: 100%;
display: none;
}
.model {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
background-color: white;
margin-top: -200px;
margin-left: -250px;
}
</style>
<script src="home.js"></script>
<script src="index.js"></script>
<!-- <script>-->
<!-- window.onload = function () { // 页面 图片 视频 音频 都加载好执行-->
<!-- $('#b1').click(-->
<!-- function () {-->
<!-- $('.mask').show()-->
<!-- }-->
<!-- );-->
<!-- $(window).keyup(function (e) {-->
<!-- if (e.keyCode === 27) {-->
<!-- $('.mask').hide()-->
<!-- }-->
<!-- })-->
<!-- }-->
<!-- window.onload = function () { // 页面 图片 视频 音频 都加载好执行-->
<!-- $('#b1').click(-->
<!-- function () {-->
<!-- $('.mask').show()-->
<!-- }-->
<!-- );-->
<!-- }-->
<!-- $(window).ready(function () { // 页面 图片 视频 音频 都加载好执行-->
<!-- $('#b1').click(-->
<!-- function () {-->
<!-- $('.mask').show()-->
<!-- }-->
<!-- );-->
<!-- $(window).keyup(function (e) {-->
<!-- if (e.keyCode === 27) {-->
<!-- $('.mask').hide()-->
<!-- }-->
<!-- })-->
<!-- })-->
<!-- $(document).ready(function () { // 页面 都加载好执行-->
<!-- $('#b1').click(-->
<!-- function () {-->
<!-- $('.mask').show()-->
<!-- }-->
<!-- );-->
<!-- $(window).keyup(function (e) {-->
<!-- if (e.keyCode === 27) {-->
<!-- $('.mask').hide()-->
<!-- }-->
<!-- })-->
<!-- })-->
<!-- $(-->
<!-- function () { // 页面 都加载好执行-->
<!-- $('#b1').click(-->
<!-- function () {-->
<!-- $('.mask').show()-->
<!-- }-->
<!-- );-->
<!-- $(window).keyup(function (e) {-->
<!-- if (e.keyCode === 27) {-->
<!-- $('.mask').hide()-->
<!-- }-->
<!-- })-->
<!-- }-->
<!-- )-->
<!-- document.onload = function () { // 页面 都加载好执行-->
<!-- $('#b1').click(-->
<!-- function () {-->
<!-- $('.mask').show()-->
<!-- }-->
<!-- );-->
<!-- $(window).keyup(function (e) {-->
<!-- if (e.keyCode === 27) {-->
<!-- $('.mask').hide()-->
<!-- }-->
<!-- })-->
<!-- }-->
<!-- </script>-->
</head>
<body>
<h3> 模态框示例 </h3>
<button id="b1">显示</button>
<div>
<div class="mask">
<div class="model">
<input type="text">
<input type="password">
</div>
</div>
</div>
</body>
</html>
day51
内容回顾
前端
HTML
css
js
js /jquery $ == jQuery
jquery封装js的一个库
dom对象 jQuery对象
dom _> jq $(dom对象)
jq _> dom jq对象【index】
js 操作标签 标签的属性 文本 事件
document.getEmelentById
document.getEmelentsByClassName
document.getEmelentsByTagName
document.createEmelent
添加 删除 替换 克隆
getAttribute()
setAttribute()
removeAttribute()
节点.innerText
节点.innerText =
节点.innerHTML
节点.innerHTML =
节点.onclick = fn
windows.onload = fn // 页面 视频 图片 音频
body.onload = fn // 页面
jq
$('选择器：筛选器').筛选器方法()
# . * div div.s1 div,span
div p
div>p
div+p
div~p
[href] "[href='xxx']" "[href!='xxx']" "[href$='xxx']" "[href^='xxx']" "[href*='xxx']"
:first
:last
:eq(index)
:has(选择器)
:not(选择器)
first（）
last（）
parent() children()
siblings()
prev() next()
has() not()
文本
text() html()
属性
attr('属性')
值
val（）
属性
prop（‘selected’） prop（‘checked’）
事件
jq.bind('事件名'，参数，函数)
函数名（e）{
e.data // 插入的参数
}
jq.事件名(参数，函数)
函数名（e）{
e.data // 插入的参数
}
jq.unbind('事件名')
常用的事件
click
focus blur
change
mouseenter mouseleave hover
mouseover mouseout
动画
show hide toggle
slideDown(时间，函数) slideUp() slideToggle()
fadeIn fadeOut fadeToggle
stop() 停止动画
事件冒泡
触发子代的事件，父辈的事件也依次执行。
阻止事件冒泡：
return false
e.stopPropagation()
事件委托
利用事件冒泡的原理，将子代的事件委托给父代执行。
$('tbody').on('click','button',function () {
console.log(this)
})
bootstrap
http://www.fontawesome.com.cn/
前端展示数据代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.mask {
position: absolute;
top: 0;
left: 0;
background-color: rgba(127, 127, 127, 0.5);
width: 100%;
height: 100%;
display: none;
}
.model {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
background-color: white;
margin-top: -200px;
margin-left: -250px;
}
</style>
<script src="jquery.3.4.1.js"></script>
<script>
$(function () {
var flag = false
$('#all').click(function () {
if (!flag) {
$(':checkbox').prop('checked', true)
$(this).text('取消')
} else {
$(':checkbox').prop('checked', false)
$(this).text('全选')
}
flag =!flag
})
$('#reverse').click(function () {
$(':checkbox').each(function (index, dom) {
var checked = $(dom).prop('checked')
$(dom).prop('checked',!checked)
})
})
$('#add').click(function () {
$('.mask').show()
})
$('#save').click(function () {
$('.mask').hide();
var tr = $('tbody tr:first').clone();
tr.find(':checkbox').prop('checked',false);
tr.children().slice(1,3).each(function (i, d) {
$(d).text($('.model input').eq(i).val())
});
tr.css('display','').appendTo('tbody')
$('.model input').val('')
})
//
// $('tr button').click(function () {
// $(this).parent().parent().remove()
// })
$('tbody').on('click','button',function () {
console.log(this)
$(this).parent().parent().remove()
})
})
</script>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr style="display: none">
<td><input type="checkbox"></td>
<td></td>
<td></td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>alex</td>
<td>alex3714</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>alex1</td>
<td>alex3714</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>alex2</td>
<td>alex3714</td>
<td>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<div>
<div class="mask">
<div class="model">
<p>
用户名： <input type="text">
</p>
<p>
密码： <input type="text">
</p>
<button id="save">保存</button>
</div>
</div>
</div>
</body>
</html>
事件冒泡代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
background-color: red;
width: 300px;
height: 300px;
}
.son {
background-color: green;
width: 100px;
height: 100px;
}
</style>
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
$('.father').click(function () {
alert('我是你爸爸')
})
$('.son').click(function (e) {
alert('你是我儿子')
// return false
e.stopPropagation()
})
</script>
</body>
</html>
删格代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.row div {
background-color: #ff1cf2;
border: 1px solid;
/*height: 900px;*/
}
</style>
</head>
<body>
<div class="container">
<h1>h1. Bootstrap heading</h1>
<p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh
ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla
non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio
sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget
metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</p>
<div class="row">
<div class=" col-md-8 col-md-offset-2">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
</div>
<div class="row">
<p>对不齐</p>
<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<div class=" col-md-3 col-md-offset-2">col-lg-1</div>
</div>
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
risus.
</dd>
</dl>
</div>
</body>
</html>
前端展示数据(bs)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.mask {
position: absolute;
top: 0;
left: 0;
background-color: rgba(127, 127, 127, 0.5);
width: 100%;
height: 100%;
display: none;
}
.model {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 400px;
background-color: white;
margin-top: -200px;
margin-left: -250px;
}
</style>
<script src="jquery.3.4.1.js"></script>
<script>
$(function () {
var flag = false
$('#all').click(function () {
if (!flag) {
$(':checkbox').prop('checked', true)
$(this).text('取消')
} else {
$(':checkbox').prop('checked', false)
$(this).text('全选')
}
flag = !flag
})
$('#reverse').click(function () {
$(':checkbox').each(function (index, dom) {
var checked = $(dom).prop('checked')
$(dom).prop('checked', !checked)
})
})
$('#add').click(function () {
$('.mask').show()
})
$('#save').click(function () {
$('.mask').hide();
var tr = $('tbody tr:first').clone();
tr.find(':checkbox').prop('checked', false);
tr.children().slice(1, 3).each(function (i, d) {
$(d).text($('.model input').eq(i).val())
});
tr.css('display', '').appendTo('tbody')
$('.model input').val('')
})
//
// $('tr button').click(function () {
// $(this).parent().parent().remove()
// })
$('tbody').on('click', 'button', function () {
console.log(this)
$(this).parent().parent().remove()
})
})
</script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="add">新增</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
新增
</button>
<div class="row">
<div class="col-lg-5 col-lg-offset-2">
<table class="table table-bordered table-hover">
<thead>
<tr class="active">
<th>选择</th>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr style="display: none">
<td><input type="checkbox"></td>
<td></td>
<td></td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>alex</td>
<td>alex3714</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>alex1</td>
<td>alex3714</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>alex2</td>
<td>alex3714</td>
<td>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="col-lg-11" style="margin-top: 20%">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label" >用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="save" type="submit" class="btn btn-default">保存</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--<div>-->
<!-- <div class="mask">-->
<!-- <div class="model">-->
<!-- <div class="col-lg-11" style="margin-top: 20%">-->
<!-- <form class="form-horizontal">-->
<!-- <div class="form-group">-->
<!-- <label for="inputEmail3" class="col-sm-2 control-label" >用户名</label>-->
<!-- <div class="col-sm-10">-->
<!-- <input type="text" class="form-control" id="inputEmail3">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <label for="inputPassword3" class="col-sm-2 control-label">密码</label>-->
<!-- <div class="col-sm-10">-->
<!-- <input type="password" class="form-control" id="inputPassword3" placeholder="Password">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="form-group">-->
<!-- <div class="col-sm-offset-2 col-sm-10">-->
<!-- <button id="save" type="submit" class="btn btn-default">保存</button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->
</body>
</html>
表单代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<script src="jquery.3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<i class="fa fa-battery-4" aria-hidden="true"></i>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<a href="" class="btn btn-default">跳转</a>
<div class="col-lg-8">
<form class="form-horizontal ">
<div class="form-group has-error has-feedback">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" readonly>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
精度条代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="jquery.3.4.1.js"></script>
</head>
<body>
<div class="progress">
<div class="progress-bar" style="min-width: 2em;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
0%
</div>
</div>
<script>
var i =0;
setInterval(function () {
i++;
if (i<=100){
$('.progress-bar').text(i + '%').css('width', i + '%')
}
},100)
</script>
</body>
</html>
