HTML
head 标签的内容，不会显示在web页面上，它只是定义了一些浏览器标签标题，页面编码等信息。
title 标签定义了浏览器标签的标题
<head> <title>窗口1</title> </head> 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 标签可以定义引用外界 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 标签内部写的是 CSS 代码。
<style> div{ width: 20px; } </style> script 标签内部，写的是 JavaScript 代码（最好是放在body标签里面的最底下！！！）
<script> var x=10; </script> 也可以直接导入一个 js 脚本：
<script src="common.js"></script> 在网页上我们能看到的主体内容，都存放在 body 标签里面。
很多标签都有 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 标签代表一个段落，它本身是有格式的！（段落间距）
<body> <p> 这是一个段落。 </p> <p> 这是第二个段落。 </p> </body> br 标签是一个自闭合标签，它代表一个换行符。
<body> <p> 这是一个段落的第一句话。<br /> 这是第一段的换行后的第二句话。 </p> </body> 显示一个图片, src 属性代表图片的地址。
<img src="icon.png" style="heifht: 500px;"> 链接跳转
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 标签代表标题。类似于 word 中的一级标题，二级标题…
h有6个等级。分别为： h1, h2, h3, h4, h5, h6
<body> <h1> 标题一 </h1> <h2> 标题二 </h2> </body> 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 标签可以创建让用户输入的内容。譬如文本框，密码框，单选项，多选项等等。
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 name="user_info"></textarea> <textarea>我是文本区域内的默认值。</textarea> 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 和后面的内容相关联。下面的例子中，用户点击 用户名 这三个字，鼠标光标就会自动放到用户名的输入框中，相当于点击文字和点输入框是一样的效果。
<p> <label for="2">用户名： <input id="2" type="text"> </label> </p> <p> <label>密码： <input type="password"> </label> </p> 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 标签声明一个表格。它是由行和列组成的。一个表格包含多行(<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 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 有多种方式可以给你想要的标签添加样式。
直接定义一个固定的标签，给页面所有的这个标签添加样式。
给所有 div 标签设置颜色红色。
<style> /* 这是注释 */ div{ color: red; } </style> 给某 id 的标签设置样式，使用：#id 的格式。因为 html 中所有标签的 id 不能重复，所以这个选择器不常用。
<style> #i1{ color: green; } </style> <!-- 分隔符 --> <body> <div id="i1"> id=1的标签 </div> </body> 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可以设置字体颜色，有三种设置方式：颜色名称，16进制rgb颜色，rgb(255,255,255,0.5)
div{ color: red; color: #FFB6C1; color: rgb(0,255,200,0.6); /* 前三个值代表 rgb，最后一个代表透明度 } 设置元素的背景颜色，同样支持三种颜色方式（见 color 属性）
设置字体大小。
div{ font-size: 50px; font-size: 100%; /* 相对父元素的大小 */ } 元素的高度，不支持百分比。width宽度，支持百分比
div{ height: 500px; width: 150%; /* 相对父元素的宽度 */ } 设置背景图片。
高和宽是在网页上显示的图片的大小（如果图片宽高大于设置的宽高，则只会显示图片的局部）。
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-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可以改变一个元素的展示方式
div{ display: none; /* 顾名思义，彻底隐藏一个元素，就好像它不存在一样 */ display: inline; /* 将一个块级标签转换成内联标签 */ display: block; /* 将一个内联标签转换成块级标签 */ } 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：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: 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> 四种设置元素位置的属性
<div style="top:0px; left: 0px; "> 顶部 </div> 设置不透明度。取值范围 0-1。1代表不透明，0代表透明
.shadow{ background-color: black; top:0; left:0; right:0; bottom:0; opacity:0.4; } 设置不同选择器样式的优先级，值越大，优先级越高。想要 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> 设置 <ul>, <li> 标签前面的 · 样式
ul{ list-style-type: none; /* 将列表前面的小圆点设置为无 */ } 设置行高，设置了此属性的标签，它的子标签会自动垂直方向居中
div{ line-height: 50px; } 设置鼠标的样式（小手，指针，十字等）
div{ cursor: pointer; /* 鼠标小手的样式 */ } 设置鼠标悬停的样式，针对一个标签，如果设置了 hover，当鼠标悬停在此标签上时，会自动应用设置的样式
div:hover{ /* 设置鼠标悬停在div标签上时，此div的背景色变成 红色 */ background-color: red; } 设置字体大小，是否是斜体，
div{ font-size: 10px; font-size: 1em; /* 1em =16px, 16px是浏览器默认大小 */ font-style:normal; /* 设置文字正常还是斜体。italic 是斜体文字，oblique 是倾斜的文字 */ font-weight:normal; /* 字体粗细。normal, bold */ } 设置文字左右对齐方式，譬如 center, left, right
span{ text-align: center; } 假设一个标签的内容太多，超出了标签的大小，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 可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
如果文档宽度小于 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(condition){ } else if(){ } else{ } switch(name){ case "wnag": console.log('wang'); break; case "zhang": ... } while (condition){ ... break; continue; } 第一种样式：和 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{ code; }catch(e){ code; }finally{ code; // finally 无论有无异常，都会执行。 } 抛出异常
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) 将 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) // 解码 可以将一段字符串，当成可执行命令执行
var a = 'alert(123)' eval(a) 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 属性值。
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 属性 方式一：创建标签对象
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 的第一个孩子节点之前 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 可以间隔一段时间，一直循环执行一个函数。
setInterval(function(){alert(123)}, 2000); // 每隔两秒，执行一次前面的匿名函数,返回一个对象 清除 setInterval 设置的定时任务。
var interval = setInterval(function(){alert(123)}, 2000); // 每隔两秒，执行一次前面的匿名函数,返回一个对象 clearInterval(interval) 和 setInterval 类似，等待多久后，执行一次前面的函数（只执行一次）
setTimeout(function(){alert(111)}, 2000) // 2秒后，执行一次前面的匿名函数 var interval = setTimeout(function(){alert(111)}, 2000); clearTimeout(interval); 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 事件不仅可以针对某个单独的标签，还可以针对整个窗口window。
针对标签：
<div onclick="func1();"> 点击会触发 func1 这个函数。 </div> 针对窗口：
window.onclick = function(){ // 在窗口上任意位置点击，都会触发这个函数 alert(1234); } 针对一些特殊事件，函数会接受一个包含所有信息的 event 对象:
window.onkeydown = function(event){ // event 是按下的事件 console.log(event.keyCode); // 打印事件的按键的代码 } onfocus 会在鼠标聚焦在当前标签时，运行 onfocus 属性值指定的函数
会在鼠标失去聚焦当前标签时，执行指定的函数
会在鼠标点击当前标签时，执行指定的函数
滚动事件
基础语法：
$(selector).action() // '$' 等同于 jQuery；selector代表选择器，通常是一个字符串或某个DOM元素。action是要采取的动作。 元素 元素
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 标签 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> <!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> 原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/30565
