前端简介
前端基础知识
根据视频教程总结：视频地址
HTML
head 标签
head 标签的内容，不会显示在web页面上，它只是定义了一些浏览器标签标题，页面编码等信息。
title 标签
title 标签定义了浏览器标签的标题
<head>
<title>窗口1</title>
</head>
meta 标签
meta 标签是一个自闭合标签，可以定义页面的编码格式，页面的定时刷新和跳转，以及一些其他信息
<head>
<!-- 页面编码-->
<meta charset="UTF-8">
<!-- 定时两秒刷新一次页面-->
<meta http-equiv="Refresh" content="2">
<!-- 2秒后跳转到百度-->
<meta http-equiv="Refresh" content="2; Url=http://www.baidu.com"/>
<title>Title</title>
</head>
link 标签
link 标签可以定义引用外界 CSS 样式。也可以定义浏览器标签页标题旁边的小图标。
定义CSS
href 属性是本地 css 文件的相对路径
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
定义小图标
icon.png 是本地的一个小图片
<head>
<link rel="shortcut icon" href="icon.png">
</head>
style 标签
style 标签内部写的是 CSS 代码。
<style>
div{
width: 20px;
}
</style>
script 标签
script 标签内部，写的是 JavaScript 代码（最好是放在body标签里面的最底下！！！）
<script>
var x=10;
</script>
也可以直接导入一个 js 脚本：
<script src="common.js"></script>
body 标签
在网页上我们能看到的主体内容，都存放在 body 标签里面。
标签的 name， value 属性
很多标签都有 name，value属性，它们的作用主要是用来向服务器后台发送数据用的。因为很多标签都是让用户输入数据的，譬如登陆时的用户名和密码。name 属性的值，会作为键（键值对的键），value属性的值（当然，用户名这种文本框不需要手动写value属性，因为它会自动将用户输入字符作为value，但是像单选框这种类型，就需要手动定义value属性），会作为键值对的值，传递给服务器。这样服务器就可以拿这个键值对，处理用户的数据了。所以name，value属性的值，是和服务器后台挂钩的。
简单来说，name和value定义了键值对的键和值，方便服务器后台获取。
常见标签
特殊符号
在html中，一些特殊符号是用特殊代码表示的，如 表示空格，< 表示 <, > 代表 > 等等。
div 标签
div 标签没有自身特殊的格式，一个文字加上这个标签和不加这个标签，外表看上去没有任何变化。但是我们可以通过给 div 标签加上特殊样式，就可以改变这个标签内部的元素的样式。（div 标签占据屏幕一整行，属于块级标签）
span 标签
span 标签本身也没什么特殊样式。和div 类似（但是span 标签不会占据屏幕一整行，而是根据 span 标签中的内容，自适应大小）
内联标签，块级标签
块级标签（block），这种标签自己独占一行，写在它后面的其他标签会被挤到下一行。
内联标签（inline），它的大小就是内容的大小，不会自动换行，也无法单纯的设置标签的宽度和高度。
inline-block ，这种标签具有上面两种的属性。它不会自动换行，但是也可以设置宽度和高度等属性。
p 标签
p 标签代表一个段落，它本身是有格式的！（段落间距）
<body>
<p>
这是一个段落。
</p>
<p>
这是第二个段落。
</p>
</body>
br 标签
br 标签是一个自闭合标签，它代表一个换行符。
<body>
<p>
这是一个段落的第一句话。<br /> 这是第一段的换行后的第二句话。
</p>
</body>
img 标签
显示一个图片, src 属性代表图片的地址。
<img src="icon.png" style="heifht: 500px;">
a 标签
链接跳转
a 标签代表一个超链接。可以给文字等设置超链接，可以实现点击的跳转。它有两个重要的属性：href, target
href 代表了链接的地方。target 代表如何打开这个链接：_blank 代表在新标签页打开。
<body>
<a href="http://www.baidu.com" target="_blank">点击我跳转</a>
</body>
<!-- 如果你不想要跳转到任何地方，可以在 href 处写上: -->
<body>
<a href="javascript:void(0)">点我没反应</a>
</body>
锚
锚相当于一个锚点，点击这个锚点，就可以直接跳转到锚点指向的位置（譬如你想从当前网页顶部，直接跑到页面的底部，就可以在页面顶部创建一个锚点，指向页面底部的某个元素）
格式：href="#id"
将想要跳转到的元素的 id 属性值，放到 a 标签的 href 属性中（记住要加 #）
<body>
<!-- 格式： #id -->
<a href="#1">跳转到底部</a>
<div style="height: 1000px">模拟网页中间的大段内容</div>
<!-- 要有id 属性，切记网页所有标签的 id 都应该不重复！！！ -->
<div id="1">底部</div>
</body>
h 标签
h 标签代表标题。类似于 word 中的一级标题，二级标题...
h有6个等级。分别为： h1, h2, h3, h4, h5, h6
<body>
<h1>
标题一
</h1>
<h2>
标题二
</h2>
</body>
form 标签
form 标签通常用来放置用户输入的内容，然后可以将用户输入的内容，发送给服务器后台。它有两个属性：method, action
action 定义了发送的地址，通常是一个 url 链接。
method 定义了发送的方法：get，post
enctype 如果不需要上传文件，可以不写。需要上传文件时，必须要写。
<form action="http://www.baidu.com/" method="post" enctype="multipart/form-data">
<p>用户名：<input type="text"></p>
<p>密码：<input type="password"></p>
<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="重置">
</form>
input 标签
input 标签可以创建让用户输入的内容。譬如文本框，密码框，单选项，多选项等等。
type 属性定义了标签的类型。
文本框
<!-- 文本输入框 -->
<p>
name : <input type="text" name="user_name">
</p>
密码框
<!-- 密码输入框，会自动隐藏真实密码 -->
<p>
password : <input type="password" name="password">
</p>
单选项
针对单选项，value 属性定义了发送给服务器后台数据的值，假设用户选择了 '男' ,那么form表单会发送：
{'gender': 1} 这种类型的数据。
<!-- 单选框，单不加 name 属性无法实现单选，可以选中多个选项，并且无法取消选择 -->
<p>
gender:
男：<input type="radio">
女：<input type="radio">
</p>
<!-- 单选框，加了相同的 name 属性（一定要相同），就变成了互斥的单选项 -->
<p>
gender:
男：<input type="radio" name="gender" value="1">
女：<input type="radio" name="gender" value="0">
</p>
<!-- checked 属性可以将此单选框变成选中的状态 -->
<p>
<input type="radio" checked="checked">
</p>
多选项
<!-- 多选项，可以同时勾选多个，也可以取消. checked属性可以设置默认选中。-->
<p>
多选项：<br>
唱歌：<input type="checkbox" name="favor" value="1"><br>
看电影：<input type="checkbox" name="favor" value="2"><br>
打游戏：<input type="checkbox" name="favor" value="3" checked="checked">
</p>
文件上传
<!-- 文件上传选项 -->
<p>
<input type="file"/>
</p>
提交
submit 类型，可以提交一个form 表单中用户填写的数据。 value 是按钮显示出来的名字
例子见下方。
按钮
按钮类型，对 form 表单没有什么影响（需要用户自己写一些函数，绑定在按钮上才有用）
例子见下方。
重置按钮
重置按钮，可以将用户在 form 表单中填写的所有数据清空。
<form>
<p>用户名：<input type="text"></p>
<p>密码：<input type="password"></p>
<!-- value 属性是按钮在网页上显示的文字 -->
<input type="submit" value="提交">
<input type="button" value="按钮">
<input type="reset" value="重置">
</form>
textarea 标签
这个标签可以让用户输入一大串文本。(可以换行，多段落)
<textarea name="user_info"></textarea>
<textarea>我是文本区域内的默认值。</textarea>
select 标签
select 标签可以实现下拉选项。
option 标签设置每个选项。option 标签的 selected 属性，可以将此选项设置成默认值。
<body>
<div>
<!-- 下拉选项，option 定义了每一个选项内容 -->
<p>城市:
<select name="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">广州</option>
</select>
</p>
<!-- multiple 可以让下拉选项变成展开的样式。 size 定义了展示几个 -->
<p>城市:
<select multiple size="3">
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>广州</option>
<option>广州</option>
</select>
</p>
<p>
<!-- 带有分组的下拉菜单，optgroup 定义了分组，label属性定义了分组的名称。这个名称是无法选中的 -->
<select>
<optgroup label="安徽省">
<option>黄山</option>
<option>六安</option>
</optgroup>
<optgroup label="山东省">
<option>枣庄</option>
<option>济南</option>
</optgroup>
</select>
<!-- 默认选中某个选项 -->
<select>
<option>上海</option>
<option selected="selected">广东</option>
<option>上海</option>
</select>
</p>
</div>
</body>
label 标签
label 可以让一个 label 和后面的内容相关联。下面的例子中，用户点击 用户名 这三个字，鼠标光标就会自动放到用户名的输入框中，相当于点击文字和点输入框是一样的效果。
<p>
<label for="2">用户名：
<input id="2" type="text">
</label>
</p>
<p>
<label>密码：
<input type="password">
</label>
</p>
ul，ol 标签
ul，ol 标签都是代表列表。ul 标签的 li 用 · 表示每一项。 ol 用数字放在列表前代表每一项。
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<ol>
<li>content</li>
<li>content</li>
<li>content</li>
</ol>
table 标签
table 标签声明一个表格。它是由行和列组成的。一个表格包含多行(<tr>), 每行又包含多列(<td>)。
<table> 声明一个表格
<thead> 声明表格的表头（可以忽略不写）
<tbody> 表格的内容 （可以忽略不写）
<th> 表头的每一列
<tr> 一行
<td> 一列
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
</thead>
<tbody>
<tr>
<td>列1的值</td>
<td>列2的值</td>
</tr>
<tr>
<td>列1的值</td>
<td>列2的值</td>
</tr>
</tbody>
</table>
合并单元格
两个属性：
colspan="2" 代表横跨两列，即水平方向合并两个单元格
rowspan="2" 代表纵跨两行，即竖直方向合并两个单元格
下面的例子是一个3行2列的表格。
表头的第一列占据了2个单元格，所以我们只写一个 <th> 就行了
表格body里 第一行的第一列单元格纵跨了2行，所以下一行保留一个 <td> 就够了
总之就是表格的大小是固定的，只要有人占多了位置，被占据的就要被踢出去。
<table border="1">
<thead>
<tr>
<!-- 横跨两列 -->
<th colspan="2">列1</th>
</tr>
</thead>
<tbody>
<tr>
<!-- 纵跨两行 -->
<td rowspan="2">列1的值</td>
<td>列2的值</td>
</tr>
<tr>
<td>列2的值</td>
</tr>
</tbody>
</table>
iframe 标签
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
<iframe src="https://www.baidu.com/"></iframe>
CSS
CSS 指层叠样式表 (Cascading Style Sheets)。
三种设置方式和优先级
有三种设置它的方式：
标签内部的 style 属性
仅作用于当前标签
<div style="color: green;">我的世界</div>
html的 head 头部 style 标签
<head>
<style>
div{
color: green;
}
</style>
</head>
html的 hread 头部 link标签
在head 标签中，通过 link 标签引入外部 css 文件，实现样式。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
优先级：标签内部 > 头部 style 标签 > link 外部文件
语法
如果是写在标签内部，则给标签添加一个 style 属性：使用键值对的方式，填写想要施加的属性样式和值。并且多个属性之间，用 ; 分隔开。
<div style="color:red;">
....
</div>
如果是写在 <head> 的 <style> 标签中，或者是外部 css 文件中。则：
选择器{
属性：值;
...
}
选择器 是你想要施加样式的对象，如 div, a, p 或者是一些 class 属性的值，等等。
譬如：
<style>
/* 这是注释 */
div{
color: red;
}
</style>
CSS选择器
我们想要对标签设置样式，自然需要先选中标签，css 有多种方式可以给你想要的标签添加样式。
标签选择器
直接定义一个固定的标签，给页面所有的这个标签添加样式。
给所有 div 标签设置颜色红色。
<style>
/* 这是注释 */
div{
color: red;
}
</style>
id选择器
给某 id 的标签设置样式，使用：#id 的格式。因为 html 中所有标签的 id 不能重复，所以这个选择器不常用。
<style>
#i1{
color: green;
}
</style>
<!-- 分隔符 -->
<body>
<div id="i1">
id=1的标签
</div>
</body>
class 选择器
html 中每一个标签都可以有一个 class 属性，并且 class 的值可以相同。我们可以通过设置某个 class 的样式，对这些标签设置样式。
<style>
.class_1{
color: red;
}
</style>
属性选择器
选择某个标签后，还可以筛选响应的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 筛选 class='c1'，并且此标签的 abc 属性值为 'a' 的标签 */
.c1[abc='a']{
color: red !important;
}
</style>
</head>
<body>
<!-- 自定义了一个属性 abc -->
<div class="c1" abc="a">111</div>
<div class="c1" abc="b">111</div>
<div class="c1" abc="c">111</div>
<div class="c1" abc="a">111</div>
</body>
</html>
层级选择器
如果嵌套多个标签，我们可以给定标签层的路径，设置某一层的标签的样式
每一个层级，都用空格隔开
<style>
.class_1 div p a{
color: red;
}
/* 上面的和下面的样式，两者等效 */
.class_1 div p .class_2{
color: red;
}
</style>
<body>
<div class="class_1">
<div>
<p>
<a class="class_2">就是这里</a>
</p>
</div>
</div>
</body>
组合选择器
我们想要对多个标签或者 class 选择器施加相同的样式，可以将这些选择器用 , 分隔开：
<style>
.class_1,a,p,.class_2{
color: red;
}
</style>
小知识：
!important
如果一个标签，施加了多个样式，可能某个样式的优先级比较低，没有成功施加样式，可以这样做：
!important 会无视别的样式的优先级，确保当前样式一定会执行。
<style>
.c1{
color: red !important;
}
</style>
:after
:after 可以给所选择的标签的内容后面，添加新的内容。新内容用 'content' 定义
/* 给 p 标签内容的后面，添加一个 '。' */
p:after{
content: '。';
}
:before
同上。
常见属性
color
color可以设置字体颜色，有三种设置方式：颜色名称，16进制rgb颜色，rgb(255,255,255,0.5)
div{
color: red;
color: #FFB6C1;
color: rgb(0,255,200,0.6); /* 前三个值代表 rgb，最后一个代表透明度
}
background-color
设置元素的背景颜色，同样支持三种颜色方式（见 color 属性）
font-size
设置字体大小。
div{
font-size: 50px;
font-size: 100%; /* 相对父元素的大小 */
}
height, width
元素的高度，不支持百分比。width宽度，支持百分比
div{
height: 500px;
width: 150%; /* 相对父元素的宽度 */
}
background-image
设置背景图片。
高和宽是在网页上显示的图片的大小（如果图片宽高大于设置的宽高，则只会显示图片的局部）。
background-repeat 可以设置是否重复显示图片（如果图片真实高宽小于设置的宽高，则默认重复显示图片铺满这块区域）
background-position: 设置图片的位置（以图片左上角为基准点，放到某个位置。屏幕左上角是0，0）
.img{
background-image: url(icon.png);
height: 50px;
width: 100px;
background-repeat: no-repeat;
background-position: -100px -200px;
}
border
border设置边框线条。想要设置单独某个边框，可以使用：
border-left, border-right, border-top, border-bottom
后面跟的值分别是：边框粗细，边框线条样式，边框颜色(有一个特殊的透明色：transparent)
table{
border: 1px solid red;
border-left: 2px dotted green;
}
利用border实现特殊小三角效果：
会沿着两个对角线，将标签填充成四个颜色小三角形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon{
display: inline-block;
border-top: 20px solid red;
border-right: 20px solid green;
border-bottom: 20px solid yellow;
border-left: 20px solid magenta;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
display
display可以改变一个元素的展示方式
div{
display: none; /* 顾名思义，彻底隐藏一个元素，就好像它不存在一样 */
display: inline; /* 将一个块级标签转换成内联标签 */
display: block; /* 将一个内联标签转换成块级标签 */
}
margin, padding
margin 控制一个元素的外边距(元素仅仅移动，保持一个边距)。（margin-left, -top, -right, -bottom可以分别调节四个边距）
margin 后面可以跟1-4个值：
div{
margin: 0 auto; /* 0代表上下间距为0，左右间距自动（通常会自动居中） */
margin: 0 10px; /* 0代表上下间距为0，左右间距10px */
margin: 10px 20px 30px 40px; /* 分别代表上边距，右边距，下边距，左边距 */
margin: 10px 20px 30px; /* 分别代表上边距10px，左右边距都是20px，下边距30px */
margin: 0; /* 上下左右边距都是0 */
margin-left: 0;
}
padding 控制一个元素的内边距（元素会向某个方向扩大），同样有 -left，-top, -right, -bottom
<div style="height: 100px; border:1px solid green;">
<input style="margin-top:20px; padding-bottom:10px;" type="text" />
</div>
margin 设置的是标签的外边距，增加一个边距，会让整个标签移动（相当于整个标签平移了）。
padding 设置的是标签的内边距，增加它会增加标签的大小（一个标签的大小包含了可供放置内容的区域和内边距，扩大内边距会增大标签的大小，但是不会增加可供放置内容区域的大小）
top，bottom等设置的是标签的边缘，它们会将标签的边缘放置在相应的位置，通过top，left，right，bottom的结合，可以肆意拉伸一个标签，变大或变小。
float
float：left，right，top，bottom
float，顾名思义，可以让一个标签悬浮起来。譬如下面的例子中，div 标签有三个子标签。我们想让前两个子标签放在一行（它们的宽度加起来刚好100%，所以能放在一行。但是div标签是块级标签，每个单独占一行，没法放在一行），所以我们就需要让他们靠 left float 起来，这样它们就会自动填充空隙（跑到一行中）。但是它们悬浮以后，父级 div 就无法囊括住这两个子标签了，所以需要第三个 div ，设置 style="clear: both" , 让它们依然和父标签在一起。
<div style="border:1px solid red;">
<div style="width:20%; background-color:gray; float:left">a</div>
<div style="width:80%; background-color:black; float:left">b</div>
<div style="clear: both"></div>
</div>
上面我们用了一个 clear: both 来重新撑起父级标签。现在有个更好的做法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 这个选择器，可以让拥有 float 样式子标签的标签，重新被撑满 */
.ui-helper-clearfix:after{
content: '.'; /* 在当前类选择器的标签内容的后面，添加一个 . */
clear: both; /* 让子标签的悬浮状态，重新撑起父标签 */
display: block; /* 变成 块级标签 */
visibility: hidden; /* 隐藏上面添加的 . */
height: 0; /* 消除 . 带来的高度 */
}
</style>
</head>
<body style="margin:0">
<!-- 添加了一个清除塌缩的类 ui-helper-clearfix-->
<div style="background-color: lightgray; width:980px" class="ui-helper-clearfix">
<div style="width: 20%; float: left;">part1</div>
<div style="width: 80%; float: left;">part2</div>
</div>
</body>
</html>
position
这个属性可以设置一个元素的位置。它有三种定位方式：
position: fixed / absolute / relative
fixed: 固定位置。不管如何滚动页面，永远显示在那个位置。
absolute: 单独使用也可以固定位置，但是会随着页面的滚动而滚动。如果有别的标签使用了 relative，则当前使用了 absolute 的标签，会根据 那个 relative 的标签进行定位。
relative：给别的标签作为相对定位用的。
<body>
<!-- 最外层div使用了 relative -->
<div style="border:1px solid red; height: 1000px; width:500px; position:relative">
<!-- 使用了 fixed，会一直固定在这个位置 -->
<div style="position: fixed; top:0px; left:0px;">顶部</div>
<div style="margin-top:200px; height:300px;background-color:gray;">
<!-- 使用了 absolute，它会一层一层往上找 relative，找到后会根据 relative 标签，设置位置 -->
<div style="position:absolute; bottom:0px; right:0px;">相对定位</div>
</div>
</div>
</body>
bottom, top, right, left
四种设置元素位置的属性
<div style="top:0px; left: 0px; ">
顶部
</div>
opacity
设置不透明度。取值范围 0-1。1代表不透明，0代表透明
.shadow{
background-color: black;
top:0;
left:0;
right:0;
bottom:0;
opacity:0.4;
}
z-index
设置不同选择器样式的优先级，值越大，优先级越高。想要 z-index 生效，必须使用 position，或者父元素使用了 positoin。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shadow{
position: fixed;
background-color: black;
top:0px;
left:0px;
right:0px;
bottom:0px;
opacity:0.5;
z-index:1;
}
.show{
position: fixed;
color:red;
background-color:white;
z-index:11;
}
</style>
</head>
<body>
<input type="submit" name="submit" >
<!-- 遮罩层 -->
<div class="shadow" style=""></div>
<!-- 显示层 -->
<div class="show">
<input type="text"/>
</div>
</body>
</html>
list-style-type
设置 <ul>, <li> 标签前面的 · 样式
ul{
list-style-type: none; /* 将列表前面的小圆点设置为无 */
}
line-height
设置行高，设置了此属性的标签，它的子标签会自动垂直方向居中
div{
line-height: 50px;
}
cursor
设置鼠标的样式（小手，指针，十字等）
div{
cursor: pointer; /* 鼠标小手的样式 */
}
hover
设置鼠标悬停的样式，针对一个标签，如果设置了 hover，当鼠标悬停在此标签上时，会自动应用设置的样式
div:hover{ /* 设置鼠标悬停在div标签上时，此div的背景色变成 红色 */
background-color: red;
}
font
设置字体大小，是否是斜体，
div{
font-size: 10px;
font-size: 1em; /* 1em =16px, 16px是浏览器默认大小 */
font-style:normal; /* 设置文字正常还是斜体。italic 是斜体文字，oblique 是倾斜的文字 */
font-weight:normal; /* 字体粗细。normal, bold */
}
text-align
设置文字左右对齐方式，譬如 center, left, right
span{
text-align: center;
}
overflow
假设一个标签的内容太多，超出了标签的大小，overflow 会生成一个滑动条，实现标签内部的内容滑动，而不是无限扩大标签的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*清除body默认的边距*/
body{
margin: 0;
}
.title{
height: 50px;
background-color: green;
}
.left_menu{
position: absolute; /*使用 absolute 让菜单固定在左侧*/
width: 200px;
left: 0;
top: 50px;
bottom: 0; /* 下边缘为0（拉长标签） */
background-color: red;
}
.content{
position: absolute; /*使用 absolute 让内容固定*/
top: 50px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto; /* overflow 会让超出标签区域的内容，生成一个下拉滑动条，而不是让网页往下增长 */
}
</style>
</head>
<body>
<div class="title">Title</div>
<div class="left_menu">sss</div>
<div class="content">
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>ddddddddd<br>
</div>
</body>
</html>
@media 响应式布局
@media 可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
如果文档宽度小于 300 像素则修改背景颜色(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
JavaScript
常见符号
== // 判断两个变量的值是否相等（不判断类型，数字的 123 和字符串的 '123' 会认为相等）
!= // 不相等（同样不判断类型）
=== // 判断两个变量的值和类型是否相等
!== // 判断类型和值是否不相等
&& // 并且；类似于 python 的 and
|| // 或
变量类型
变量和注释
var 关键字声明局部变量。不加关键字声明的是全局变量。
// 单行注释
/* 多行注释
*/
var x = 10;
a = 20;
特殊变量
null
null 代表一个特殊的变量，类似于 python 中的 None
var a = null;
undefined
undefined 代表一个暂未赋值的变量。
var a; // 此时 a 就是 undefined
var b = undefined; // 这样也行
数字类型
javascript 中不区分整数型和浮点型数字，所有数字都用浮点型表示
类型转换
- parseInt() 将一个值转换成数字，不成功返回 Nan
- parseFloat() 将一个之转换成浮点型，不成功返回 Nan
特殊值
- Nan 代表一个非数字的值；可以通过
isNaN()判断。 - Infinity 代表一个无穷数；可以通过
isFinite()判断。
字符串类型
常用方法：
var a = ' ab abcde ';
var b = '123456'
a.trim() // 去除左右空白符号
a.trimLeft() // 去除左边空白符号
a.trimRight() // 右边
a.charAt(0) // 获取某个索引位置的字符
a.concat(a,b) // 拼接 a,a,b 这三个字符串
a.indexOf('a', 2) // 获取索引2位置后面的第一个a的索引
a.lastIndexOf('a', 2)
a.substring(2,3) // 返回一个2-3索引的字符串（不包含3）
a.slice(2,3) // 切片
a.toLowerCase() // 转换成小写
a.toUpperCase() // 大写
a.split('b', 2) // 按照 'b' 分割，返回列表的前两个。
数组类型
声明数组：
var a = [];
a.push(1) // 末尾追加
a.pop() // 末尾弹出
a.unshift(2) // 头部追加
a.shift() // 头部删除
a.slice(2,3) // 切片
a.reverse() // 反转
a.join(sep) // 使用 sep 这个符号来拼接；类似于python： sep.join(list)
a.concat(val,...) // 拼接
a.sort()
a.splice(index, deleteCount, value1,value2...) // 从索引 index的地方开始，删除 deleteCount 个元素，然后插入 value1,value2...
字典对象
JavaScript中没有字典这个概念，它有一个类似于字典的对象，我们姑且叫它字典。它的表现形式和字典起始一样。
var a = {"k1": 1; "k2": 2}
a["k1"]
时间类型
d = new Date()
// 可以自己在 chrome 浏览器的控制台上试试，有代码自动提示功能。
d.getYear();
d.setYear(2022);
d.setHours(d.getHours()+2);
条件判断语句
if...else
if(condition){
} else if(){
} else{
}
switch
switch(name){
case "wnag":
console.log('wang');
break;
case "zhang":
...
}
while
while (condition){
...
break;
continue;
}
for
第一种样式：和 java 中的语法很像
var a = [1,2,3];
for(var i=0; i<a.length; i++){
console.log(a[i]);
}
第二种：
var a = [1,2,3];
var b = {"k1": 1; "k2": 2};
// 针对数组，遍历的是索引
for(var item in a){
console.log(a[item]); // 记住，这里的 item 依然是索引！不是里面的元素！
}
// 针对字典对象，遍历的是 key
for(var key in b){
console.log(key) // 这里的遍历的是 key，可以通过 b[key] 取值。
}
异常处理
try...catch...finally
捕获异常。
try{
code;
}catch(e){
code;
}finally{
code; // finally 无论有无异常，都会执行。
}
throw new Error
抛出异常
throw new Error('Error with ....')
函数
普通函数
function func1(args){
code;
return xxx;
}
匿名函数
var func1 = function(args){
args = args + 1;
return args;
}
类似于 python 中的 lambda:
func1 = lambda x: x+1
自执行函数
创建一个匿名函数，并执行它
格式：(匿名函数)(传递的参数值)
(function(args){return args+1})(123)
// 上面的自执行函数可以分解如下：
// 1. 声明函数
function func1(args){
return args+1;
}
// 2. 执行函数
func1(123)
对象序列化
var a = [1,2,3]
a = JSON.stringify(a) // 将a序列化成字符串
JSON.parse(a) // 将字符串反序列化成对象
转义
url转义
将 URL 中的特殊符号，转义
<script>
var url = 'http://www.baidu.com/?name="我的世界"';
// 将url进行转义（汉字变成特殊符号）
url = encodeURI(url)
console.log(url)
// 将特殊符号的url，解码
url = decodeURI(url)
console.log(url)
// 不仅将汉字转义，对 / 等这个符号也转义
url = encodeURIComponent(url)
console.log(url)
// 将其解码
url = decodeURIComponent(url)
console.log(url)
</script>
值转义
仅仅将值转义，不针对URL
var name = "我的"
name = escape(name) // 编码
unescape(name) // 解码
eval
可以将一段字符串，当成可执行命令执行
var a = 'alert(123)'
eval(a)
DOM 元素查找
直接查找
document.getElementById("i1") // 根据ID获取一个标签
document.getElementsByName("xxx") // 根据name属性获取标签集合
document.getElementsByClassName("class1") // 根据class属性获取标签集合
document.getElementsByTagName("div") // 根据标签名获取标签集合
根据标签的上下文查找
var tag = document.getElementsByTagName("div"); // return an array of all div.
ele = tag[0]
// 查找 Node（譬如一个标签元素。它会有文本内容，会有属性。内容和属性都各属于一个Node，链接到这个元素上），所以我们查找Node，会返回标签的各个Node，然后从Node中获取文本内容等。
ele.parentNode // 父节点
ele.childNodes // 所有子节点
ele.firstChild // 第一个子节点
ele.lastChild // 最后一个子节点
ele.nextSibling // 下一个兄弟节点
ele.previousSibling // 上一个兄弟节点
// 查找 Element，查询出来标签元素。
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
查找标签的内容值
value
针对带有 value 属性的标签（譬如输入框，勾选框等），我们可以通过 value 取值
var tags = document.getElementByTagName("input")
tag = tags[0]
tag.value
innerHTML, innerText
对于包含春文本形式的标签（不带value属性）我们可以通过 innerHTML 或者 innerText 取值
它们的不同之处是：假设内容中嵌套了 html 标签，innerHTML 可以将其原样返回。innerText 只会返回内部的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>这是内容<span>(嵌套了内容)</span>，还是内容。</div>
<script>
var tags=document.getElementsByTagName("div");
var tag = tags[0];
console.log(tag.innerText); // 这是内容(嵌套了内容)，还是内容。
console.log(tag.innerHTML); // 这是内容<span>(嵌套了内容)</span>，还是内容。
</script>
</body>
</html>
标签的 class 属性
获取标签的 class 属性值。
className 可以获取一个标签的 class 属性（作为一个字符串）
classList 也可以获取一个标签的 class 属性（作为一个数组）
var tag = document.getElementByClassName("div")[0];
tag.className // return the string type class value of the div.
tag.classList // return an array of all classes of the div.
// 添加或删除某个值
tag.classList.remove("c1") // remove a class value of the tag.
tag.classList.add("c1") // add a class value of the tag.
标签的样式
tag.style.attribute 可以动态的修改标签的样式。
var tag = document.getElementByClassName("div")[0];
tag.style.color='red';
tag.style.fontSize='20px';
标签的属性
简单粗暴的获取，设置，删除一个标签的属性的值。
tag.getAttribute("attribute_name")
tag.setAttribute("attribute_name", "value")
tag.removeAttribute("attribute_name")
tag.setAttribute('class', 'c1') // 将标签的 class 设置为 c1;
tag.removeAttirbute("class") // 删除标签的 class 属性
创建HTML标签
方式一：创建标签对象
var tag = document.createElement('a') // 创建 a 标签
// 设置内容和 class,href 属性
tag.innerText = "链接文字"
tag.className = "c1"
tag.href = "http://www.baidu.com"
方式二：字符串方式
var tag = "<a class='c1' href='http://www.baidu.com'>链接文字</a>"
插入创建的标签
插入纯文字标签
tag.insertAdjacentHTML(where, str_obj)
var div = document.getElementsByTagName("div")[0];
var p2 = "<p>p2</p>";
div.insertAdjacentHTML("beforeBegin", p2);
插入标签对象
tag.insertAdjacentElement(where, obj)
var div = document.getElementsByTagName("div")[0];
var tag = document.createElement('a'); // 创建 a 标签
// 设置内容和 class,href 属性
tag.innerText = "链接文字";
tag.className = "c1";
tag.href = "http://www.baidu.com";
div.insertAdjacentElement("beforeBegin", tag);
where 有如下四种选项：
beforeBegin 当前元素的前面插入（关系是兄弟节点）
beforeEnd 当前元素的内部的最后插入（关系是父子节点）
afterBegin 当前元素的内部的开头插入（关系是父子节点）
afterEnd 当前元素的后面插入（关系是兄弟节点）
插入子节点
将对象当成子节点，插入到末尾。
tag.appendChild(obj)
var div = document.getElementsByTagName("div")[0];
var tag = document.createElement('a'); // 创建 a 标签
// 设置内容和 class,href 属性
tag.innerText = "链接文字";
tag.className = "c1";
tag.href = "http://www.baidu.com";
div.appendChild(tag);
在某个子节点的前面，插入子节点
tag.insertBefore(tag1, children_tag)
var div = document.getElementsByTagName("div")[0];
var tag = document.createElement('a'); // 创建 a 标签
// 设置内容和 class,href 属性
tag.innerText = "链接文字";
tag.className = "c1";
tag.href = "http://www.baidu.com";
div.insertBefore(tag, div.children[0]); // 插入到 div 的第一个孩子节点之前
查找 form 表单
var tag = document.getElementById('form1') // 通过 id 获取 form 表单
tag.submit() // 提交form表单
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onscroll="bodyScroll();">
<form action="www.baidu.com" id="form1" method="post">
<input type="text">
<a onclick="submit()">提交</a> <!-- 使用a标签，绑定函数实现提交 -->
</form>
<script>
function submit(){
var form = document.getElementById('form1');
form.submit();
}
</script>
</body>
</html>
定时器
setInterval(function, time)
setInterval 可以间隔一段时间，一直循环执行一个函数。
setInterval(function(){alert(123)}, 2000); // 每隔两秒，执行一次前面的匿名函数,返回一个对象
clearInterval(interval)
清除 setInterval 设置的定时任务。
var interval = setInterval(function(){alert(123)}, 2000); // 每隔两秒，执行一次前面的匿名函数,返回一个对象
clearInterval(interval)
setTimeout(function, time)
和 setInterval 类似，等待多久后，执行一次前面的函数（只执行一次）
setTimeout(function(){alert(111)}, 2000) // 2秒后，执行一次前面的匿名函数
clearTimeout(ojb)
var interval = setTimeout(function(){alert(111)}, 2000);
clearTimeout(interval);
url 刷新，重定向
location.href // 获取当前url
location.href = "url" // 重定向到指定 url
location.reload() // 刷新
弹出框
确认弹出框
var result = confirm('确定关闭？')
console.log(result) // true or false;
警告框
alert('出现错误！')
文档标签高度
文档高度
文档总高度
获取文档总高度（加上滚动条）
document.documentElement.offsetHeight
当前屏幕显示的文档高度
document.documentElement.clientHeight
标签高度
标签自身高度
tag.offsetHeight
标签最近的一个祖宗元素
父级元素应该要 positioned，否则会一层层网上找，直到找到 body 标签。
tag.offsetParent // 返回一个元素
标签到 offsetParent 标签的高度
tag.offsetTop
滚动高度
tag.scrollTop
html 事件
事件不仅可以针对某个单独的标签，还可以针对整个窗口window。
针对标签：
<div onclick="func1();">
点击会触发 func1 这个函数。
</div>
针对窗口：
window.onclick = function(){ // 在窗口上任意位置点击，都会触发这个函数
alert(1234);
}
针对一些特殊事件，函数会接受一个包含所有信息的 event 对象:
window.onkeydown = function(event){ // event 是按下的事件
console.log(event.keyCode); // 打印事件的按键的代码
}
onfocus
onfocus 会在鼠标聚焦在当前标签时，运行 onfocus 属性值指定的函数
onblur
会在鼠标失去聚焦当前标签时，执行指定的函数
onclick
会在鼠标点击当前标签时，执行指定的函数
onscroll
滚动事件
jQuery
语法和选择器
基础语法：
$(selector).action() // '$' 等同于 jQuery；selector代表选择器，通常是一个字符串或某个DOM元素。action是要采取的动作。
常见选择器：来源w3school
元素 元素| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 元素 |
| :last | $("p:last") | 最后一个 元素 |
| :even | $("tr:even") | 所有偶数 |
| :odd | $("tr:odd") | 所有奇数 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 - |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 元素 |
| :text | $(":text") | 所有 type="text" 的 元素 |
| :password | $(":password") | 所有 type="password" 的 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 元素 |
| :button | $(":button") | 所有 type="button" 的 元素 |
| :image | $(":image") | 所有 type="image" 的 元素 |
| :file | $(":file") | 所有 type="file" 的 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
查找节点
父节点和祖先节点
parent() // 查找当前节点的父节点
parents() // 当前节点的所有祖先节点
parentsUntil('xxx') // 当前节点直到 xxx 的所有祖先节点
譬如：
$("span").parent()
$("span").parents()
$("span").parentsUntil("body")
子孙节点
$("xxx").children() // 只会查找xxx 的儿子节点。
$("xxx").find() // 会查找当前节点的所有子孙...
兄弟节点
$("span").siblings() // 当前节点的所有兄弟节点
$("span").next() // 当前节点的下一个兄弟节点
$("span").nextAll() // 当前节点的剩下的所有兄弟节点
$("span").nextUntil("div") // 介于当前节点和div兄弟节点之间的，所有兄弟节点
$("span").prev() // 和上面类似，方向相反
$("span").prevAll()
$("span").prevUntil("xxx")
过滤
$('div').find(".xxx") // 查找当前div下面所有class='xxx'的标签。
$("div p").last(); // div标签下面的最后一个 p标签
$("p").eq(1); // 当前页面的第二个 p 标签（索引为1）
$("p").filter(".intro"); // class="intro" 的所有 p 标签
$("p").not(".intro"); // class不是 intro 的 p 标签
修改文档:来源w3school
| 方法 | 描述 | 实例 | 解释 |
|---|---|---|---|
| addClass() | 向匹配的元素添加指定的类名。 | $("p:first").addClass("intro"); |
向第一个 p 元素添加一个类 |
| after() | 在匹配的元素之后插入内容。（兄弟节点） | $("p").after("<p>Hello world!</p>"); |
在每个 p 元素后插入内容 |
| append() | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 | $("div").append(" <b>Hello world!</b>"); |
在每个 div 元素内部的末尾插入内容 |
| appendTo() | 向目标结尾插入匹配元素集合中的每个元素。 | $("<b>Hello World!</b>").appendTo("div"); |
把内容，添加到 div 标签内部的末尾 |
| attr() | 设置或返回匹配元素的属性和值。（只写一个参数，取值。两个参数，设置值） | $("img").attr("width","180"); |
改变图像的 width 属性 |
| before() | 在每个匹配的元素之前插入内容。（兄弟节点） | $("p").before("<p>Hello world!</p>"); |
在每个 p 元素前插入内容： |
| clone() | 创建匹配元素集合的副本。 | $("body").append($("p").clone()); |
克隆并追加一个 p 元素 |
| detach() | 从 DOM 中移除匹配元素集合。 | $("p").detach(); |
移除所有 p 元素 |
| empty() | 删除匹配的元素集合中所有的子节点。 | $("p").empty(); |
移除 p 元素的内容 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 | alert($("p:first").hasClass("intro")); |
检查第一个 p 元素是否包含 "intro" 类 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 | $("p").html("Hello <b>world</b>!"); |
设置所有 p 元素的内容 |
| insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 | $("<span>Hello world!</span>").insertAfter("p"); |
在每个 p 元素之后插入 span 元素 |
| insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 | $("<span>Hello world!</span>").insertBefore("p"); |
在每个 p 元素之前插入 span 元素 |
| prepend() | 向匹配元素集合中的每个元素开头插入由参数指定的内容。 | $("p").prepend("<b>Hello world!</b>"); |
在 p 元素的开头插入内容 |
| prependTo() | 向目标开头插入匹配元素集合中的每个元素。 | $("<b>Hello World!</b>").prependTo("p"); |
在每个 p 元素的开头插入内容 |
| remove() | 移除所有匹配的元素。 | $("p").remove(); |
移除所有 p 元素 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 | $("p").removeAttr("id"); |
从任何 p 元素中移除 id 属性 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 | $("p:first").removeClass("intro"); |
移除所有 p 的 "intro" 类 |
| replaceAll() | 用匹配的元素替换所有匹配到的元素。 | $("p").replaceAll("<b>Hello world!</b>"); |
用粗体文本替换每个段落 |
| replaceWith() | 用新内容替换匹配的元素。 | $("p").replaceWith("<b>Hello world!</b>"); |
用粗体文本替换每个段落 |
| text() | 设置或返回匹配元素的内容。（不写参数取值。写参数设置值） | $("p").text("Hello <b>world</b>!"); |
设置所有 p 元素的内容 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 | ||
| unwrap() | 移除并替换指定元素的父元素。 | ||
| val() | 设置或返回匹配元素的值。 | $(":text").val("Hello World"); |
设置输入文本框的值 |
| wrap() | 把匹配的元素用指定的内容或元素包裹起来。 | ||
| wrapAll() | 把所有匹配的元素用指定的内容或元素包裹起来。 | ||
| wrapinner() | 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 |
事件
click
// $(function(){}); 这个是在 dom 文档树刚生成时，就执行内部的匿名函数。不用等待网页所有资源加载完毕。
$(function (){
$("div").click(function (){ // obj.click(func(){})；当点击某个对象时，会自动触发内部的 func(){} 函数。
alert($(this).text())
})
})
bind
$("div").bind("click",function(){ // 主动给 click 事件，添加一个处理函数。
alert($(this).text())
});
delegate
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。(它可以动态的给元素添加处理程序，譬如当文档已经加载完毕，但是用户出发了其他事件，产生了一些新的标签，delegate也可以给这些新产生的标签，添加这些功能。)
语法：
$(selector).delegate(childSelector,event,data,function)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>123</div>
<div>145</div>
<script src="jquery-3.6.0.js"></script>
<script>
$(function (){
$("body").delegate('div', 'click', function (){
alert($(this).text())
})
})
</script>
</body>
</html>
循环
$.each([...], function(){})
$(selector).each(function(){})
each 可以循环处理一个数组，在 each 里的 function 中，return false 代表 break 中止循环。return 仅仅代表 continue 继续循环。
插件
font awsome
easyUI
jqueryUI
bootstrap
bxslider
示例
文字滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 100%; line-height: 50px;">
<div id="i1" style="background-color: red; width: 200px; margin: 0 auto;">欢迎领导莅临指导</div>
</div>
<script>
// 设置自动执行某个函数的间隔，单位毫秒
setInterval("func1()", 1000);
function func1(){
// 通过 id 获取某个标签
var tag = document.getElementById('i1');
// innerText 获取标签的内部文本
var text = tag.innerText;
// 字符串拼接
var newText = text.substring(1, text.length) + text.charAt(0);
// 设置标签的内部文本为xxx
tag.innerText = newText;
}
</script>
</body>
</html>
输入框提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- onfocus 在光标聚焦在当前标签时触发。onblur 是光标移出当前标签时触发。-->
<input id='i1' type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/>
<script>
function Focus(){
var tag = document.getElementById("i1"); // 通过 id 值获取标签
if(tag.value === "请输入关键字"){ // 通过标签的 value 属性，获取它的值。
tag.value = ""; // 给标签设置内容
}
}
function Blur(){
var tag = document.getElementById("i1");
if(tag.value.length === 0){
tag.value = "请输入关键字";
}
}
</script>
</body>
</html>
动态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.shadow{
position: fixed; /* 固定位置，填充一个黑色的遮罩层 */
top:0;
left:0;
right:0;
bottom:0;
background-color: black;
opacity: 0.6;
z-index: 1000; /* 设置 css 层级的优先级 */
}
.model{
position: fixed;
background-color: white;
top: 50%;
left: 50%;
width:400px;
height:300px;
margin-left: -200px;
margin-top: -150px;
z-index: 1001;
}
.hide{
display: none;
}
</style>
</head>
<body>
<!--login 按钮，触发一个事件-->
<input type="button" value="login" onclick="login()"/>
<!--遮罩层-->
<div class="shadow hide"></div>
<!-- 模型层，用户输入用户名密码-->
<div class="model hide">
<input type="text" name="user_name" /> <br/>
<input type="password" name="user_pwd" /> <br/>
<!-- 点击提交按钮，恢复 -->
<input type="submit" value="login" onclick="show()"/>
</div>
<script>
function login(){
// 根据 className 获取标签
var shadow = document.getElementsByClassName('shadow')[0];
var model = document.getElementsByClassName('model')[0];
// 对标签的 class 属性，删除 hide 值
shadow.classList.remove('hide');
model.classList.remove('hide');
}
function show(){
var shadow = document.getElementsByClassName('shadow')[0];
var model = document.getElementsByClassName('model')[0];
shadow.classList.add('hide');
model.classList.add('hide');
}
</script>
</body>
</html>
复选框的全选，取消，反选
普通版
有点小问题。我们知道 checkbox 有个特殊属性checked, 它可以设置选中的状态。我们可以在html中写死这个值，让它选中或者不选中。但是当我们在网页上真的勾选或者取消勾选，它的真实的状态是由 标签的一个内部属性决定的，不会动态的给标签添加这个 'checked' 属性。所以我们通过 'checked' 这个属性，很难获取它的真实状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: white;
}
.c2{
width:200px;
}
</style>
</head>
<body>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="取消" onclick="checkNull()">
<input type="button" value="反选" onclick="checkReverse()">
<table>
<thead>
<tr>
<th>选择</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>吃饭</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>睡觉</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>豆豆</td>
</tr>
</tbody>
</table>
<script>
function checkAll(){
var tags = document.getElementsByTagName("input")
for(var i=0;i<tags.length;i++){
tags[i].setAttribute('checked', 'checked');
}
}
function checkNull(){
var tags = document.getElementsByTagName("input")
for(var i=0;i<tags.length;i++){
tags[i].removeAttribute('checked', 'checked');
}
}
function checkReverse(){
var tags = document.getElementsByTagName("input")
for(var i=0;i<tags.length;i++){
if(tags[i].checked === true){
tags[i].checked = false;
}else{
tags[i].checked = true;
}
}
}
</script>
</body>
</html>
jquery 版
需要导入 jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="取消" onclick="checkNull()">
<input type="button" value="反选" onclick="checkReverse()">
<table>
<thead>
<tr>
<th>选择</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>吃饭</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>睡觉</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>豆豆</td>
</tr>
</tbody>
</table>
<script>
function checkAll(){
// each 函数可以遍历查询出来的元素列表中的每一个元素。
// 它可以接受一个函数参数，会自动传递给这个函数一个索引值，说明当前处理的哪个元素
$("td :checkbox").each(function(i){
$(this).prop('checked', true); // this 这个特殊值，代表了当前处理的那个元素。通过 prop 函数，设置 'checked' 的状态。
})
}
function checkNull(){
$("td :checkbox").each(function(i){
$(this).prop('checked', false);
})
}
function checkReverse(){
$("td :checkbox").each(function(i){
if($(this).prop('checked')){ // prop 只给了一个参数，会获取 checked 的状态
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
})
}
</script>
</body>
</html>
点赞特效（+1 漂浮扩大)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
position: relative; /* 提供一个相对位置，供以后使用 */
padding: 50px;
}
</style>
</head>
<body>
<div>
<!-- favor函数传递了一个 this。这个 this 就代表当前标签 -->
<a onclick="favor(this)">点赞</a>
</div>
<div>
<a onclick="favor(this)">点赞</a>
</div>
<script>
function favor(ele){
var left = 92;
var top = 50;
var opacity = 1;
var fontSize = 18;
// 创建一个 span 标签，并设置它的内容和样式
var span = document.createElement('span');
span.innerHTML = '+1'; // 设置内容
span.style.position = 'absolute'; // 根据 div 中的 relative，使用 absolute
span.style.fontSize = fontSize;
span.style.top = top + 'px';
span.style.left = left + 'px';
span.style.fontSize = fontSize;
span.style.opacity = opacity;
ele.parentElement.appendChild(span); // 给传递过来的 ele 这个标签，添加一个兄弟节点
var interval = setInterval(function (){ // serInterval 函数可以设置定时循环执行，它返回一个对象。通过清除这个对象，可以取消定时循环任务
// 在定时循环中，每次移动一下位置，放大字体大小，透明度减少
top -= 5;
left += 5;
fontSize += 5;
opacity -= 0.1;
// 重新给标签设置一下样式。
span.innerHTML = '+1';
span.style.position = 'absolute';
span.style.fontSize = fontSize;
span.style.top = top + 'px';
span.style.left = left + 'px';
span.style.fontSize = fontSize + 'px';
span.style.opacity = opacity;
// 当彻底透明后，取消这个定时任务，然后删除掉这个透明的标签。如果不取消任务，这个标签会一直往右侧飘，让网页无限变宽
if(opacity <= 0){
clearInterval(interval)
ele.parentElement.removeChild(span);
}
}, 100)
}
</script>
</body>
</html>
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
position: fixed; /* 固定位置 */
right: 10px;
bottom: 10px;
cursor: pointer;
}
.hide{
display: none;
}
</style>
</head>
<!--body 标签添加一个滚动事件-->
<body onscroll="bodyScroll();">
<div id="i1" class="back hide" onclick="backTop()">返回顶部</div>
<div style="height:2000px">
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</div>
<script>
//
function backTop(){
document.documentElement.scrollTop = 0; // 通过设置文档到顶部的距离，来回到顶部
}
function bodyScroll(){
var h = document.documentElement.scrollTop; // 判断到顶部的距离
var tag = document.getElementById('i1');
// 如果当前文档距离顶部大于100像素，就显示 '返回顶部' 按钮
if(h >= 100){
tag.classList.remove('hide');
}else{
tag.classList.add('hide');
}
}
</script>
</body>
</html>
判断用户名不能为空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onscroll="bodyScroll();">
<form action="http://www.baidu.com">
<input type="text" id="userName">
<!-- return XXX(), 是因为这个标签本身就有一个 submit 事件，如果 onclick 事件返回一个 false，就会停止剩下的提交事件 -->
<input type="submit" value='提交' onclick="return checkValue()">
</form>
<script>
function checkValue(){
var user = document.getElementById('userName');
if(user.value.length > 0){
return true;
}else{
alert('用户名不能为空！')
return false;
}
}
</script>
</body>
</html>
自动展开折叠菜单栏
注意：需要下载 jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.js"></script>
<style>
.menu{
width: 200px;
height: 600px;
overflow: auto;
border: 1px solid lightgray;
}
.title{
background-color: green;
color: white;
line-height: 30px;
font-weight: bold;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item" onclick="showMenu(this)">
<div class="title">菜单一</div>
<div class="content hide">
<p>content1</p>
<p>content2</p>
<p>content3</p>
</div>
</div>
<div class="item" onclick="showMenu(this)">
<div class="title">菜单二</div>
<div class="content hide">
<p>content1</p>
<p>content2</p>
<p>content3</p>
</div>
</div>
<div class="item" onclick="showMenu(this)">
<div class="title">菜单三</div>
<div class="content hide">
<p>content1</p>
<p>content2</p>
<p>content3</p>
</div>
</div>
<div class="item" onclick="showMenu(this)">
<div class="title">菜单四</div>
<div class="content hide">
<p>content1</p>
<p>content2</p>
<p>content3</p>
</div>
</div>
</div>
<script>
// jQuery("xxx") == $("xxx") 两种语法是相同的
function showMenu(ele){
// $(ele) 将Dom标签对象转换成 jquery 对象
// $(ele)[0] 将jquery对象，重新转回 dom 对象。
if($(ele).find('.content').hasClass('hide')){
$(ele).find(".content").removeClass('hide');
}else{
$(ele).find(".content").addClass('hide');
}
$(ele).siblings().find(".content").addClass('hide')
}
</script>
</body>
</html>
复制添加搜索条件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<div>
<div>
<a onclick="addItem(this)"> + </a>
<input type="text">
</div>
</div>
<script>
function addItem(ele){
// 复制当前标签的父标签
var div = $(ele).parent().clone();
// 给它的子节点 a 标签设置属性和值
div.find('a').attr("onclick", "remItem(this)");
div.find('a').text(' - ');
// 在当前标签的父标签的父标签里的末尾，追加此标签
$(ele).parent().parent().append(div);
}
function remItem(ele){
// 删除此标签的父标签
$(ele).parent().remove()
}
</script>
</body>
</html>
编辑模式，退出编辑模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.editing{
background-color: red;
color: white;
}
</style>
</head>
<body>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="取消" onclick="checkNull()">
<input type="button" value="反选" onclick="checkReverse()">
<input type="button" value="编辑" onclick="edit(this)">
<table>
<thead>
<tr>
<th>选择</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td class="content">吃饭</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td class="content">睡觉</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td class="content">豆豆</td>
</tr>
</tbody>
</table>
<script src="jquery-3.6.0.js"></script>
<script>
function edit(ele){
if($(ele).hasClass('editing')){ // 说明正在编辑，要保存一下
$(ele).removeClass('editing') // 移出这个 class，退出编辑模式
$(".content input").each(function (){ // 遍历 input 标签
var content = $(this).val(); // 获取 input 标签的值。this 代表当前遍历的 input 标签
$(this).parent().text(content); // 将input的值，赋值给父标签
$(this).remove() // 删除掉这个 input 标签
})
}else{
$(ele).addClass("editing"); // 添加 class，意味着进入编辑模式
$(".content").each(function (){ // 遍历带有 content 类的标签
if($(this).parent().find(':checkbox').prop('checked')){ // 找到当前标签的父标签下的 checkbox类型的标签，获取它是否被勾选
var content = $(this).text(); // 当前标签的内容
var input = "<input type='text' value='" + content + "'/>"; // 将标签的内容，和 input 标签拼接在一起
$(this).text('') // 删除当前标签内容
$(this).append(input); // 添加拼接的 input 标签
}
})
}
}
function checkAll(){
// each 函数可以遍历查询出来的元素列表中的每一个元素。
// 它可以接受一个函数参数，会自动传递给这个函数一个索引值，说明当前处理的哪个元素
$("td :checkbox").each(function(i){
$(this).prop('checked', true); // this 这个特殊值，代表了当前处理的那个元素。通过 prop 函数，设置 'checked' 的状态。
})
}
function checkNull(){
$("td :checkbox").each(function(i){
$(this).prop('checked', false);
})
}
function checkReverse(){
$("td :checkbox").each(function(i){
if($(this).prop('checked')){ // prop 只给了一个参数，会获取 checked 的状态
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
})
}
</script>
</body>
</html>
