前端基础知识
根据视频教程总结:视频地址
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{
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;
150%; /* 相对父元素的宽度 */
}
background-image
设置背景图片。
高和宽是在网页上显示的图片的大小(如果图片宽高大于设置的宽高,则只会显示图片的局部)。
background-repeat 可以设置是否重复显示图片(如果图片真实高宽小于设置的宽高,则默认重复显示图片铺满这块区域)
background-position: 设置图片的位置(以图片左上角为基准点,放到某个位置。屏幕左上角是0,0)
.img{
background-image: url(icon.png);
height: 50px;
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="20%; background-color:gray; float:left">a</div>
<div style="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; 980px" class="ui-helper-clearfix">
<div style=" 20%; float: left;">part1</div>
<div style=" 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; 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 让菜单固定在左侧*/
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- 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=" 100%; line-height: 50px;">
<div id="i1" style="background-color: red; 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%;
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{
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{
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>