1.HTML
基本结构：
<html>
<head>
</head>
<body>
hello html！
</body>
</html> head标签里可写：
<head>
<meta charset="utf-8" />
<title>mypage</title>
</head>body标签：
<body>
你好！！！！ <br />
<b>林富豪 </b> a<b c>d
</body>
</html>
<!-- <br />用于换行 <b> </b> 加粗
a<b c>d <小于 >大于 1. 2.&ensp；比 空格数多一点 3. 空格更多一点 -->页内布局常用标签：
<body>
<h1>我的标题</h1> <!--标题标签，比普通文本字更大，默认占满一行（块状效果），四个效果：改变字号，加粗，占满一行，加了上下间距 -->
<h2>我的标题</h2>
<h3>我的标题</h3>
<h4>我的标题</h4>
<h5>我的标题</h5>
<h6>我的标题</h6>
<p>我的段落</p> <!--段落标签。效果：加了上下间距和占满一行 -->
<div>我的div<div> <!--块标签。效果：块状效果 -->
普通文本
</body>行内结构排布常用标签：
<body>
普通文本<span>新文本</span> <!--行内标签，从左到右排列，单纯的把文本包裹起来（行内/内联效果） 该标签加上div标签常配合css或者js确定该文本位置。-->
普通文本<b>新文本</b> <!--加粗标签 -->
普通文本<em>新文本</em> <!--斜体标签 -->
普通文本<u>新文本</u> <!--下划线标签 -->
普通文本<u><b>新文本</b></u> <!--可嵌套使用 -->
普通文本<strong>新文本 <!--加粗标签,是一个单标签 -->
</body>自定义列表：
<body>
<hr /> <!--分割线 -->
<dl> <!--列表标签由三个标签组合起来使用，这三个标签都是块状标签 -->
<dt>列表标题</dt>
<dd>列表内容</dd>
</dl>
</body>有序列表：
<body>
<ol type="A"> <!--默认数字排序，可用type修改 A大写字母排，a小写字母排，I大写罗马数字排，i小写罗马数字排 -->
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ol>
</body>无序列表：
<body>
<ul type="square"> <!--可设置属性，改变标题的类型，不改默认点。square方块 ddisc默认的点 circle圆圈 -->
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
</body>a标签：
<body>
我的文本<a href="html基本结构.html">我的超链接</a> <!--也是行内标签，想让其有跳转效果，用href。-->
我的文本<a href="./html基本结构.html">我的超链接</a> <!--相对路径-->
我的文本<a href="/day1_html/html基本结构.html">我的超链接</a> <!-- 相对根路
-->
我的文本<a href="https://www.baidu.com">我的超链接</a> <!--绝对路径，一般用于访问外部资源 -->
我的文本<a href="http://127.0.0.1:8848/day1_html/html基本结构.html">我的超链接</a> <!--http路径-->
我的文本<a href="file:///G:/my-two/code/day1_html/html基本结构.html">我的超链接</a> <!--文件协议路径-->相对路径./与../区别_imyujh的博客-CSDN博客_相对路径
a标签做锚点：
<body>
<!--a标签也可做锚点，即当前页面跳转-->
我的文本<a href="https://www.baidu.com/s?wd=马保国&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">我的超链接</a>
<h1 id="myhl">我的标题</h1>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#">回到顶部</a> <!--页内跳转,回到顶部-->
<a href="###">回到顶部</a> <!--有页内跳转的超链接，但点了没效果，就为了看看-->
<a href="#myhl">指定跳转</a> <!--页内跳转,指定位置跳转。格式：#元素id-->
</body>a标签其它属性：
<body>
<!--a标签另一个属性，target,常用的属性值_blank和_self。默认_self表示当前页面（将当前页面换成要访问的页面），_blank表示新标签页（重新开个新页面作为访问的页面），标签页也叫tab页-->
我的文本<a target="_blank" href="https://www.baidu.com/s?wd=马保国&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">我的超链接</a>
</body>img标签：
<body>
<img alt="图片" width="100" height="100" /> <!--图片无法展示时，用文字说明一下。以及设置宽高（有专门的UI设计师设计）-->
</body>一些常用的网站：w3school w3cschool 这些网站里有一些完整的html标签。
表格标签：
<body>
<table bgcolor="aqua" border="1"> <!--border属性，加一个边框--> <!--bgcolor属性，设置背景颜色-->
<caption>用户信息表</caption> <!--caption标签，加一个表名-->
<thead> <!--thead标签，用来划分区域，头部部分-->
<tr> <!--行标签-->
<th>姓名</th> <!--th标签，列头，相比td标签，有加粗和居中的效果-->
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody> <!--tbody标签，用来划分区域，主体部分-->
<tr>
<td rowspan="2">小明</td> <!--td标签，单元格，以行为单位--> <!--rowspan跨列属性 -->
<td align="center">男</td> <!--td默认左对齐，align属性可设置为居中-->
<td>15</td>
</tr>
<tr>
<td colspan="2">小白</td> <!--colspan跨行属性 -->
<td>女</td>
<td>18</td>
</tr>
</tbody>
<!--tfoot 脚-->
</table>
</body>表单标签：
<body>
<form action="/myserve" method="get"> <!--表单标签form，属性action提交地址， 属性method,数据提交的方式，有get和post两种。 -->
<input type="text" name="username" /> <!--文本框-->
<input type="submit" /> <!--提交按钮-->
</form>
</body>表单元素标签：
<body>
<form action="/test" method="get">
<label for="mytext">用户名</label><input id="mytext" type="text" name="uname" maxlength="5" value="" placeholder="请输入用户名"/> <br />
<!-- label标签，提示信息标签，要加上for属性，和input标签的id属性配套使用。可让指定元素获取焦点 -->
<!--name="uname"表单提交数据时必须的属性,maxlength="5" 允许输入的最大长度 ,value="默认值"表示文本框内容的默认值 ,placeholder="请输入用户名"文本框内的提示信息-->
<input type="password" name="password" /> <br /> <!--密码框-->
<input type="hidden" name="myval" value="abc" /> <br />
<!--隐藏框-->
<!--type="radio"单选框,且对于name属性，多个框选用一个值（使用name属性进行分组）。 checked="checked默认某个值被选中-->
性别：<input id="gender1" name="gender" type="radio" value="1" /><label for="gender1">男</label>
<input name="gender" type="radio" value="2" checked="checked" />女
<input name="gender" type="radio" value="3" />女装大佬<br />
<!--type="checkbox"多选框，还是用name进行分组，多个选项用同一个name。同样配上value区分不同选项的值. -->
兴趣：<input name="hobby" type="checkbox" value="1" checked="checked" />爬山
<input name="hobby" type="checkbox" value="2" />蹦极
<input name="hobby" type="checkbox" value="3" />游泳
<input name="hobby" type="checkbox" value="4" />喝水<br />
<!--type="color"颜色选择框 type="datetime-local"年月日时分选择框
type="file"文件选择框，配合文件上传 type="email"一个有邮箱格式的输入框 -->
<input type="color" />
<input type="datetime-local" />
<input type="file" />
<input type="email" /><br />
<!-- input的其它几种按钮：type="submit"提交当前表单按钮，通过value属性可以修改提交按钮的文本,type="reset"重置当前表单按钮，会将表单重置成最初加载时的样子. type="button"自定义按钮，常用属性：disabled="disabled",禁用效果 -->
<input type="submit" value="我的文本" />
<input type="reset" value="我的重置" />
<input type="button" value="自定义按钮" disabled="disabled" />
<!-- <select>下拉列表select，配合option标签使用。name属性在select里.且一般传输是传码，不传文本，故在option里加value属性。下拉列表框默认选中第一个值，即下面的北京，可用selected="selected"调整.multiple="multiple"可将单选变为多选 -->
<select name="myarea" multiple="multiple">
<option value="010">北京</option>
<option selected="selected" value="010">上海</option>
<option value="010">深圳</option>
</select>
<!--textarea标签，多行文本。 -->
<textarea name="textarea" rows="10" cols="50">1233</textarea>
</form>
</body>页面嵌套标签（已过时）（这是不用body标签）：
<frameset rows="20%,*"> <!--将整个页面分成上下两部分，上面占20%-->
<frame src="top.html" />
<frameset cols="20%,*"> <!--将下面的部分再分成左右两部分，左面占20%-->
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>iframe标签(还在用)：
<body>
新页面<iframe src="mypage.html"></iframe> <!--可将其它页面引入-->
</body>2.Css
引入Css代码方式（最常用的）：
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color: red; <!--将我的文本颜色变为红色-->
}
</style>
</head>
<body>
<div>我的文本</div>
</body>元素标签选择器：
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color: blue;
}
p{
color:red;
}
</style>
</head>
<body>
<div>测试文本</div>
<p>测试文本</p>
<div>测试文本二</div>
</body>class选择器（style里推荐）：
<head>
<meta charset="utf-8">
<title></title>
<style>
.mycls{
color: red;
}
.mycls2{
color:green;
}
</style>
</head>
<body>
<h1>咏鹅--骆宾王</h1>
<p class="mycls">鹅鹅鹅</p>
<p class="mycls2">曲项向天歌</p>
<p class="mycls">白毛浮绿水</p>
<p class="mycls2">红掌拨清波</p>
</body>id选择器（css里不建议使用）：
<head>
<meta charset="utf-8">
<title></title>
<style>
#mytitle{
color:brown;
}
</style>
</head>
<body>
<h1 id="mytitle">咏鹅--骆宾王</h1>
<p >鹅鹅鹅</p>
<p >曲项向天歌</p>
<p >白毛浮绿水</p>
<p >红掌拨清波</p>
</body>class允许多值：
<head>
<meta charset="utf-8">
<title></title>
<style>
.mycls{
color:red;
}
.cls2{
background-color:lightcoral; <!--加背景颜色-->
}
.cls3{
border:1px solid black; <!--加边框，设置边框粗细和颜色-->
}
</style>
</head>
<body>
<h1 >咏鹅--骆宾王</h1>
<p class="mycls cls2 cls3">鹅鹅鹅</p>
<p >曲项向天歌</p>
<p class="mycls cls3">白毛浮绿水</p>
<p >红掌拨清波</p>
</body>
并集选择器（同时选多个元素和其它选择器，逗号隔开）：
<head>
<meta charset="utf-8">
<title></title>
<style>
.mycls,h1{
color:red;
}
p,h1{
color:red;
}
</style>
</head>
<body>
<h1 >咏鹅--骆宾王</h1>
<p class="mycls cls2 cls3">鹅鹅鹅</p>
<p >曲项向天歌</p>
<p class="mycls cls3">白毛浮绿水</p>
<p >红掌拨清波</p>
</body>交集选择器（之间无任何标点 ）：
<head>
<meta charset="utf-8">
<title></title>
<style>
p.mycls{
color:green;
}
</style>
</head>
<body>
<h1 class="mycls>咏鹅--骆宾王</h1>
<p class="mycls cls2 cls3">鹅鹅鹅</p>
<p >曲项向天歌</p>
<p class="mycls cls3">白毛浮绿水</p>
<p >红掌拨清波</p>
</body>后代选择器（父元素+空格+子元素，指所有满足条件的后代，子，孙，...）：
<head>
<meta charset="utf-8">
<title></title>
<style>
div p{
color:red;
}
.mytest p{
color:red;
}
</style>
</head>
<body>
<h1 >咏鹅--骆宾王</h1>
<p >鹅鹅鹅</p>
<p >曲项向天歌</p>
<!--div是两个p的父元素,可用标签组合，也可用样式组合-->
<div class="mytest">
<p >白毛浮绿水</p>
<p >红掌拨清波</p>
</div>
</body>子代选择器：
<head>
<meta charset="utf-8">
<title></title>
<style>
.mytest>p{
color:red;
}
.mytest>div>p{
color:green;
}
</style>
</head>
<body>
<!--子代选择器更精准一些，可修饰子代元素，也可修饰孙元素-->
<h1 >咏鹅--骆宾王</h1>
<div class="mytest">
<p >鹅鹅鹅</p>
<p >曲项向天歌</p>
<div>
<p >白毛浮绿水</p>
<p >红掌拨清波</p>
</div>
</div>
</body>属性选择器（[属性=属性值]）：
<head>
<meta charset="utf-8">
<title></title>
<style>
input[type="button"]{ <!--和交集选择器搭配使用-->
color:red;
}
</style>
</head>
<body>
<input type="button" value="按钮" />
<input type="text" value="文本框" />
<input type="button" value="按钮" />
</body>通用选择器（可被其它选择器轻易覆盖）：
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
color:red;
}
</style>
</head>
<body>
<h1 >咏鹅--骆宾王</h1>
<p >鹅鹅鹅</p>
<p >曲项向天歌</p>
<p >白毛浮绿水</p>
<p >红掌拨清波</p>
</body>css常用样式属性：
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
1.color，文字颜色。属性值可用英文字母，#0000FF形式
2.font-size字体大小。属性值可用xx-large超大号，可用像素50px，可用3.125rem。（rem相对默认字体的大小，3.125rem即相对原始字号的3.125倍）
3.font-family字体类型。常用黑体
4.text-align,文字对齐方式(默认左对齐).left,center,right.左中右
5.vertical-align:middle,图片和文字排在一行(默认底部对齐)。middle居中对齐，top顶部对齐，bottom底部对齐。
6.div块状效果。让其左右居中text-align:center。让其上下居中：让行高和块高相同。可设置块状的大小，可加边框，可让块内文字居中。
7.border边框，值是复合值，允许填多个值，中间用空格隔开。通常设置边框粗细（1px），线条（实线solid 虚线dashed），边框颜色（black）。也可不用复合使用，一个个分开写，border-1px这样分开写。 边框圆角border-radius:10px;可让边框变得更柔和,也可用%，border-radius:10%;比例最多到50%，此时为圆圈
8.text-decoration,文字修饰,underline下划线，line-through删除线，最常用的是none（给A标签用的，超链接一般带下划线，可让下划线消失。）
9.background-color:背景色
10.background背景图片,背景图片和背景颜色有冲突，一般用了背景图片，背景颜色看不着了。背景图片如果很小，会默认横纵，纵轴自己循环。background-repeat可设置重复方式,repeat-x只重复x轴，repeat-y只重复y轴no-repeat不重复
11.list-style可修改无序列表的样式，默认黑点。正方形点square，也可用图片做样式。
*/
p{
color:#0000FF; 文字颜色
text-align:center; 文字居中对齐
}
.mycls{
/* font-size:xx-large; */ 字体大小，超大号
font-size:50px;
font-family:"楷体"; 字体类型
}
.myimg{
/* vertical-align:middle; */ 图片和文字居中对齐
vertical-align:top;
/* vertical-align：bottom; */
}
.mydiv{
width:200px;
height:200px;
border:1px solid black; 边框粗细，实线，边框颜色
border-radius:50%; 边框圆角
text-align:center;
line-height:200px; 行高
/* text-decoration:underline; */ 文字修饰，下划线
background-color:#FFB6C1; 背景色
background:url(img/jdk1.7.jpeg) ; 图片路径
background-repeat:repeat-y; 重复方式，只重复y轴
}
.mydiv>a{
text-decoration:none; 文字修饰，让下划线消失
}
ul{
list-style:square; 无序列表的样式，正方形点
}
</style>
</head>
<body>
<h1>悯农--李绅</h1>
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
<p class="mycls">谁知盘中餐</p>
<p>粒粒皆辛苦</p>
<div class="mydiv">
<a href="xxx">超链接</a>我的文本</div>
<!-- 测试文字<img class="myimg" src="img/jdk1.7.jpeg"> -->
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</body>display属性：
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
display显示方式，常用的值：inline行内 block块 inline-block行内块（还是从左到右排列，但可设置宽高）
none看不见（元素还是存在的）,效果等同于opacity:0;（透明度为0）（透明度的取值在0到1之间）
显示颜色一般用rgb，对于rgba就是把透明度也加进去
*/
/* div,span{
border:1px solid black;
width:100px;
height:100px;
}
/* 设置宽高对行内元素无效*/
div{
border:1px solid black;
width:100px;
height:100px;
display:inline; /*将块元素改成行内元素*/
opacity:0.2;
}
span{
border:1px solid black;
width:100px;
height:100px;
display:none;
}
</style>
</head>
<body>
<div>mydiv</div>
<div>mydiv</div>
<div>mydiv</div>
<span>myspan</span>
<span>myspan</span>
<span>myspan</span>
</body>盒子模型相关属性：
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
盒子模型相关的属性： 1.content 内容，一般通过宽高设置
2.border 边框 1px solid black;
3.padding,内部填充，边框与内容之间的距离
4. margin外边距,用法同padding,两个值时多了auto属性值
以上四个元素都占单独的大小。有一个值发生改变，整体布局就会改变。
*/
.main{
width:400px;
height:400px;
border:1px solid black;
margin:0px auto;
}
.innerdiv{
width:100px;
height:100px;
border:10px solid black;
/* padding:10px; 边框与框内内容上下左右的距离*/
/* padding-left:50px; 边框与左边内容的距离*/
/* padding:10px 20px; 边框与上下10px，与左右20px */
/* padding:10px 20px 30px; 上，左右，下 */
padding:10px 20px 30px 40px; /*上，右，下，左（按表走的方向）*/
}
.mydiv{
/* margin:10px; */
/* margin-top:20px; 上边距 */
/* margin-left:20px; 左边距*/
/* margin:10px 20px 30px 40px; 上右下左 */
margin:10px 20px; /*上下和左右*/
margin:10px auto; /*auto可以让元素在父元素里左右居中*/
}
</style>
</head>
<body>
<div class="main">
<div class="innerdiv">div1</div>
<div class="innerdiv mydiv">div2</div>
<div class="innerdiv">div3</div>
</div>
</body>块嵌套：
<head>
<meta charset="utf-8">
<title></title>
<style>
/*overflow,溢出。大块里套小块，小块太多会超过外边界,超过的部分让其不显示，用hidden。 超过部分用滚动轴显示，
用scroll
另一种情况：父元素里面的每一个块会把其所在行占满，故虽然块右边是空白，但不会再放内容。（块元素是从上到下排列的）
若让块元素水平排列,用float，属性值有left，right
float也可让某个元素分成左右各一个
注：漂浮时要让所有的块都漂浮起来，若加入不漂浮的块，边界就会按不漂浮的块重新来算，且与不漂浮的块一起排列时效果也不好
若大块里套小块，小块里再套小块，就一层一层去排列，解决完一层再解决一层。
*/
.main{
width:400px;
height:400px;
border:1px solid black;
margin:0px auto;
overflow:scroll;
}
.innerdiv{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.toRight{
float:right;
}
</style>
</head>
<body>
<div class="main">
<div class="innerdiv">div1</div>
<div class="innerdiv">div2</div>
<div class="innerdiv">div3</div>
<div class="innerdiv">div4</div>
<div class="innerdiv">div5</div>
</div>
<div>
xxx系统 <span class="toRight">欢迎你xxx
</div>
</body>案例：打地鼠
案例：div+css替代frameset或farme做页面嵌套
伪类选择器：
<style>
/*伪类选择器，用于选取元素的状态，比较常见的两个状态：hover鼠标悬停，active鼠标点击（点击但没松开），只要是页面里能看到的元素都有状态，都可以修改*/
a:hover{ /* 悬浮状态 */
color:lightcoral; /* 修改文字颜色 */
font-size:x-large; /* 修改文字大小 */
}
a:active{ /* 点击效果 */
color:purple;
}
.mydiv{
width:100px;
height:100px;
border:1px solid black;
background-color:lightgreen;
}
.mydiv:hover{
background-color:lightblue;
cursor:pointer; /* 鼠标变成手也是样式效果 */
}
.mydiv:active{
background-color:olive;
}
</style>
</head>
<body>
<a href="xxx">超链接</a>
<div class="mydiv"></div> <!--对于div鼠标点击没什么效果，也可以添加效果 -->
</body>定位属性-position：
<head>
<meta charset="utf-8">
<title></title>
<style>
/*position属性默认static。其它属性值：
1.relative相对定位,以原来所在位置为原点，进行偏移。使用了属性值后，
通常还要使用另外两个属性，top(向下偏移)和left（向右偏移）来进行偏移。偏移量也可使用负值（故没有right和bottom）。元素未脱离文档流（其它元素不动，且位置改变的元素也是以原来位置为参照）。
2.absolute绝对定位，元素脱离文档流（其它元素视位置改变的元素不存在，按照默认文档流排列。位置改变的元素以整个窗口的页面位置为基准进行偏移。实际上，不在同一个图层了）
3.固定定位，元素脱离文档流，也是以窗口位置进行偏移，并固定在此处（拉滚动条也不动，不随页面移动而移动）
加了定位属性的块悬浮于其他块之上.实际上，样式表有分图层，z-index可改变图层顺序。默认图层为0，加了定位属性后，改变位置的元素所在图层变为1，故可覆盖原先元素。可给z-index一个-1的值，使改变位置的元素在原来元素的下面。
注：z-index只能用在有定位属性的元素上。
*/
.div1{
width:100px;
height:100px;
border:1px solid black;
background-color:lightblue;
}
/* .div2{
width:100px;
height:100px;
border:1px solid black;
background-color:lightcoral;
position:relative;
top:50px;
left:-50px;
} */
/* .div2{
width:100px;
height:100px;
border:1px solid black;
background-color:lightcoral;
position:absolute;
top:50px;
left:50px;
} */
.div2{
width:100px;
height:100px;
border:1px solid black;
background-color:lightcoral;
position:fixed;
top:50px;
left:50px;
z-index:-1;
}
.div3{
width:100px;
height:100px;
border:1px solid black;
background-color:lightgreen;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>导航条制作（行业内用ul和li去做）：
<head>
<meta charset="utf-8">
<title></title>
<style>
/* ul和li都是块元素，想水平排列，可用：1.悬浮 */
/* .mynav>li{
float:left;
border:1px solid black;
margin-left:20px; 加外边距
width:80px;
height:50px;
text-align:center;
line-height:50px;
}
.mynav{
list-style:none; 去无序列表标题
}
.mynav>li>a{
text-decoration:none; 去a标签下划线
color:lightcoral;
}
.mynav>li:hover{
background-color:lightgreen;
} */
/* 水平排列方法二：将块元素变成行元素，用display */
.mynav>li{
display:inline-block; /* 改成行内块 */
border:1px solid black;
margin-left:20px;
width:80px;
height:50px;
}
</style>
</head>
<body>
<ul class="mynav">
<li><a href="xxx"> 首页 </a></li>
<li><a href="xxx"> 关于惠达 </a></li>
<li><a href="xxx"> 卫浴产品 </a></li>
<li><a href="xxx"> 工程案例 </a></li>
</ul>
</body>3.javascript
javascript引入（最常用）：
<script> 页面中使用script标签，编写js代码
console.log("hello world!!!!")
</script>
js基本语法：
<head>
<meta charset="utf-8">
<title></title>
<script>
var myNum1 = 10; /* 变量类型会根据值的类型确定 */
console.log(myNum1); /*10 控制台会将不同类型的变量用不同颜色表示。数字用蓝色；字符串用黑色表示；*/
console.log(typeof myNum1); /* 检测变量的类型，结果为number */
var myStr1 = "abc"; /* 双引号引出是字符串，单引号引出也是字符串，点（键盘左上角，esc下面的点）引出也是字符串。 */
//var myStr2 = 'abc';
//var myStr3 = `abc`;
//var myStr4 = '"abc"'; /* 引号嵌套，单引号里套双引号，或者双引号里套单引号 */
//var myStr5 = "'abc'";
console.log(myStr1);
console.log(typeof myStr1);
var mybol1 = true;
//var mybol1 = false; 布尔值也是蓝色标记
console.log(mybol1);
console.log(typeof mybol1);
var myVar;
console.log(myVar); // 结果为undefined,未初始化类型。颜色为灰色
console.log(typeof myVar); //类型为undefined
/* console.log(myVar2); //未定义类型，控制台会报错。下面的语句不走了 (js从上到下，从左到右，逐行解析，解析出错，后面不再运行)
console.log(typeof myVar2); */
/* console.log(typeof myVar2); //undefined,可检测出该类型
console.log(myVar2); //报错 */
var myDate = new Date();
console.log(myDate);
console.log(typeof myDate); //object
var myFun = function(){
console.log("abc");
}
console.log(typeof myFun) //function
</script>
</head>类型转换函数：
<head>
<meta charset="utf-8">
<title></title>
<script>
var myNumStr1 = "10";
console.log(parseInt(myNumStr1)); //字符串转整数
var myNumStr2 = "10a";
console.log(parseInt(myNumStr2)); //也能转成10
var myNumStr3 = "1a0";
console.log(parseInt(myNumStr3)); //1 规则，从左到右解析，能读出来的给出，碰到解析不了的，停止解析。
var myNumStr4 = "a10";
console.log(parseInt(myNumStr4)); //NaN not a number
console.log(parseInt(typeof myNumStr4)); //number (设计者应付了事)
var myNumStr5 = "10.01";
console.log(parseInt(myNumStr5)); //10 (将小数点当成一个特殊字符，停止解析) 故parseInt也可用来截取整数部分
var myNumStr6 = "10.01";
console.log(parseFloat(myNumStr6)); //10.01 (将小数点给加进来)
var myNumStr7 = "1a0.01";
console.log(parseFloat(myNumStr7)); //1
var myNumStr8 = "10.0a1";
console.log(parseFloat(myNumStr8)); //10
var myNumStr9 = "a10.01";
console.log(parseFloat(myNumStr9)); //NaN
var myNum1 = 10;
console.log(myNum1.toString()); //10
</script>
</head>比较运算符：
var myNum1 = 10;
var myStr1 = "10";
console.log(myNum1==myStr1); //true js里有一些内置转换，会先将字符型数字和数字做一次转换，若转换成功，
//就直接当做数字用
console.log(myNum1===myStr1); //false 希望直接比较，不用内置转换，就用===
//其它内置转换的情况
var mybol1 = true;
var myNum2 = 1;
console.log(mybol1==myNum2); //true
console.log(mybol1===myNum2); //false逻辑运算符：
console.log(!0); //true ！的一个特殊用法：将数值类型转成布尔类型
小数相加问题：
var myNumber1 = 0.1;
var myNumber2 = 0.2;
//console.log(myNumber1 + myNumber2 ); //0.30000000000000004 精度丢失
//用toFixed保留指定位数的小数，转成的是字符串类型。想要数字再转一下，用parseFloat()
console.log(（myNumber1 + myNumber2）.toFixed(1) ); //0.3 条件语句：
<script>
//if-else
var mySource = 100;
if(mySource>80){
console.log("良好");
}else if(mySource>60){
console.log("及格");
}else{
console.log("差劲");
}
//switch-case
var myGrade = 'g';
switch(myGrade){
case 'g':console.log("奖励一袋零食");break;
case 'a':console.log("奖励一颗糖");break;
case 'x':console.log("奖励一巴掌");break;
default:console.log("啥都没有");break;
}
</script>循环语句：
//for
var myarr = [1,4,5,2,4,5]; //js里定义数组，直接[]
//遍历数组
for(var i=0;i<myarr.length;i++){
console.log(myarr[i]);
}
//for-in循环
var myarr1 = [1,4,5,2,4,5];
for(var x in myarr1){
console.log(myarr1[x]); //x是索引
}
//while
var myflag = true;
while(myflag){
if(xxx){
myflag = false;
}
}
//do-while
do{
//循环体
}while(myflag)课堂练习：
1.将1549各个位都摘出来，再相加，并输出相加后的结果。
var myNum = 1549;
var myGe = myNum%10;
var myShi = parseInt(myNum/10)%10;
var myBai = parseInt(myNum/100)%10;
var myQian = parseInt(myNum/1000);
var mySum = myGe + myShi + myBai + myQian;
console.log(mySum);2.0-6分别表示周日，周一到周六。在控制台输出工作日（一到五）和周末（六和日）
var myDay=0;
switch(myDay){
case 0:
case 6:console.log("周末");break;
case 1:
case 2:
case 3:
case 4:
case 5:console.log("工作日");break;
default:console.log("输入不合法");break;
}3.输出乘法口诀表，但不输出到控制台，输出到页面。用document.write("<h1>abc<h1>"); //可带标签
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
document.write(j+"x"+i+"="+j*i );
document.write(" ");
if(j*i<10){ //如果不是两位，补一个空格
document.write(" ");
}
}
document.write("<br />");
} 系统函数：
console.log(isNaN("abc")); //true
console.log(!isNaN("10")); //true
//eval
var mystr = "1+5*3";
console.log(mystr); //1+5*3
//如果字符串是一个算式，eval可将结果运算出来（把字符串当脚本运行，返回结果）
console.log(eval(mystr)); //16自定义函数：
function myfun(){ //不带形参的函数
console.log("运行了自定义函数");
}
myfun(); //函数的调用
function myfun1(a,b){ //带参数的函数，参数在js里是弱类型，不需要指明类型.多个参数用逗号隔开
var mySum = a+b;
console.log(mySum); //可打印出运算结果
}
myfun1(1,3); //调用要给实参
function myfun2(a,b){
var mySum = a+b;
return mySum; //可返回数据，比java少了返回值类型的定义 没返回值则不用加return
}
var myNum = myFun2(1,3); //接收返回值，可自己定义一个变量
console.log(myNum);
//匿名函数的写法，不用加函数名
var myFun2 = function(a,b){
return a-b;
}
console.log(myFun2(3,1)); //2鼠标点击 onclick事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myTest(){
console.log("按钮被点击了");
}
</script>
<style>
.mydiv{
width:100px;
height:100px;
border:1px solid black;
}
</style>
</head>
<body>
<input type="button" value="点我" onclick="myTest()" /> <!-- 点击事件，鼠标点击时触发该函数，每点击一次，触发一次 -->
<div class="mydiv" onclick="myTest()"></div> <!-- 页面的元素都可加点击事件 -->
</body>
</html>鼠标悬浮onmouseover事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function changeColor(){
console.log("鼠标经过");
console.log(document.getElementById("mydiv")); //通过id找元素
//找元素对象，再确定对象属性，再从样式属性诸多属性里找到要修改的属性，再把值改变。
document.getElementById("mydiv").style.backgroundColor = "lightcoral"; //修改元素背景颜色
}
function changeColor2(){
document.getElementById("mydiv").style.backgroundColor = "white";
}
</script>
<style>
.mydiv{
width:100px;
height:100px;
border:1px solid black;
}
</style>
</head>
<body>
<!-- onmousemove鼠标悬浮于元素事件 onmouseout鼠标离开元素事件 -->
<div id="mydiv" class="mydiv" onmousemove="changeColor()" onmouseout="changeColor2()"></div>
</body>
</html> 参数内容相同可简化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//这两个函数只有参数不同，怎么简化
/* function changeColor(){
document.getElementById("mydiv").style.backgroundColor = "lightcoral";
}
function changeColor2(){
document.getElementById("mydiv").style.backgroundColor = "white";
} */
function changeColor(mycolor){
document.getElementById("mydiv").style.backgroundColor = mycolor;
}
function changeColor2(mycolor){
document.getElementById("mydiv").style.backgroundColor = mycolor;
}
</script>
<style>
.mydiv{
width:100px;
height:100px;
border:1px solid black;
}
</style>
</head>
<body>
<!-- 谁调函数，谁传实参，传的字符串，在下面要加单引号（外面是双引号）。但传数字或者布尔，不需要加引号 -->
<div id="mydiv" class="mydiv" onmousemove="changeColor('red')" onmouseout="changeColor2('white')"></div>
</body>
</html> 当效果变化的元素和触发事件的元素是同一个元素，可简化代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myTest(){
console.log("被点了");
}
function changeColor(mycolor,myobj){
myobj.style.backgroundColor = mycolor;
}
function changeColor2(mycolor,myobj){
myobj.style.backgroundColor = mycolor;
}
</script>
<style>
.mydiv{
width:100px;
height:100px;
border:1px solid black;
}
</style>
</head>
<body>
<!-- this表示当前的元素 -->
<div id="mydiv" class="mydiv" onclick="myTest()" onmousemove="changeColor('red',this)" onmouseout="changeColor2('white',this)"></div>
</body>
</html>
点击一个元素，使另一个元素触发效果，还是用id去写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myTest(){
console.log("被点了");
document.getElementById("mydiv").style.backgroundColor="green"; //点击按钮使块元素变绿
}
function changeColor(mycolor,myobj){
myobj.style.backgroundColor = mycolor;
}
function changeColor2(mycolor,myobj){
myobj.style.backgroundColor = mycolor;
}
</script>
<style>
.mydiv{
width:100px;
height:100px;
border:1px solid black;
}
</style>
</head>
<body>
<!-- 没有关系的元素还是用id去写 -->
<input type="button" value="点我" onclick="myTest()" />
<div id="mydiv" class="mydiv" onclick="myTest()" onmousemove="changeColor('red',this)" onmouseout="changeColor2('white',this)"></div>
</body>
</html> onfocus获取焦点事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function changeTextColor(){
document.getElementById("mytext").style.color = "blue"; //获取焦点时，文本框内字体颜色变蓝
}
function changeTextColor2(){
document.getElementById("mytext").style.color = "black"; //失去焦点时，文本框内字体颜色变黑
}
function changeTextValue(){
//document.getElementById("mytext2").value = "abc123"; 获取焦点时，文本框内默认值改变
var nowVal = document.getElementById("mytext2").value; //读取默认值
console.log(nowVal);
}
//对元素的通用操作，读和写
//写操作：元素.属性="xxx"
//读操作：var xxx = 元素.属性
</script>
<style>
</style>
</head>
<body>
<!-- 一个时间只能有一个元素获取焦点 onfocus获取焦点事件 onblur失去焦点事件 -->
<input id="mytext" type="text" value="默认值" onfocus="changeTextColor()" onblur="changeTextColor2()" />
<input id="mytext2" type="text" value="默认值" onfocus="changeTextValue()" />
</body>
</html> onchange内容改变事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function getNowValue(myobj){ //文本框里的内容改变，会将改变后的内容打印输出到控制台
console.log(myobj.value);
}
function getSelectVal(){
//select标签虽然没有value，但内部已经做到转换，找到的是被选中的option的value
console.log(document.getElementById("mysel").value); //当选项改变时，会将对应的value值输出到控制台
}
</script>
</head>
<body>
<input id="mytext2" type="text" value="默认值" onchange="getNowValue(this)" />
<select id="mysel" onchange="getSelectVal()" >
<option value="010">北京</option>
<option value="020">上海</option>
<option value="030">深圳</option>
</select>
</body>
</html> 也可以改变下拉列表的选项使div块发生改变：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function changeDivBGC(){
var selColor = document.getElementById("clsel").value;
document.getElementById("mydiv").style.backgroundColor = selColor;
}
</script>
<style>
.mydiv{
width:100px;
height:100px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="mydiv" class="mydiv" ></div>
<!-- 当下拉列表选项改变，div块对应改变颜色。 -->
<select id="clsel" onchange="changeDivBGC()" >
<option value="blue">蓝色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
</select>
</body>
</html> 页面载入onload事件（此事件可用script标签放到最下面替换）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// document.getElementById("mytext").value = "abc123"; 会报错，不是函数，函数调用才执行。这里从上到下加载，
//加载到此处，元素还没生成，也就找不到元素，也就不能给默认值。
//解决方案一：生成元素后再执行这句话
//解决方案二：使用onload事件，页面加载结束，直接写在body里，此时script写在哪都行，但要配函数。
/* 解决方案二：对应函数
function myInit(){
document.getElementById("mytext").value = "abc123";
} */
</script>
</head>
<body>
<input id="mytext" type="text" />
</body>
<!-- 解决方案二：
<body onload="myInit()"> 整个body加载结束后会触发onload事件
<input id="mytext" type="text" />
</body> -->
<!-- 解决方案一：（推荐用此方案，更简单）
<script>
document.getElementById("mytext").value = "abc123";
</script> -->
</html>onload也可用元素绑定事件去写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//onload的另一种写法，叫元素绑定事件。这种写法也可以先找到元素，用document.getElementById("mytext").onload,后面一样
//元素绑定事件只能用匿名函数
window.onload = function(){
document.getElementById("mytext").value = "abc123";
}
</script>
</head>
<body>
<input id="mytext" type="text" />
</body>
</html>innerHTML属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="mytitle">我的标题</h1>
</body>
<script>
//操作元素的通用方法：找到元素，再点元素的属性。比如改文本框，按钮的值
//对双标签里的内容,用什么属性合适？ 用innerHTML，代表双标签里的内容
document.getElementById("mytitle").innerHTML = "new title";
</script>
</html> 键盘按键 onkeyup事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- onkeydown键盘按下事件 onkeyup键盘弹起事件 onkeypress键盘按下弹起复合事件-->
<input id="mytext" type="text" onkeyup="getTextVal()" />
<input id="mytext" type="text" onkeyup="getTextVal(event)" />
</body>
<script>
//看一下按键盘结束后文本框的值
function getTextVal(){
console.log(document.getElementById("mytext").value);
}
//keyCode键盘（识别）码
//该函数效果：每次按键会在控制台输出该按键对应的键盘码
function getTextVal(event){
console.log(event.keyCode);
}
</script>
</html> 案例：手机号输入效验：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="mytext" type="text" onkeyup="checkText()" /><span id="checkspan"></span>
</body>
<script>
//js里，正则必须写在两个斜杠中间
var myreg = /^1(3|4|5|7|8)\d{9}$/;
function checkText(){
var num1 = document.getElementById("mytext").value; //每次按键盘都会获得当前值
console.log(myreg.test(num1)); //用正则表达式效验输入是否正确，true则正确，false则错误
//想要给用户看，而不是在控制台看.显示的位置应该在文本框后面.正确提示信息为绿色，错误为红色。
if(myreg.test(num1)){
document.getElementById("checkspan").innerHTML = "格式正确";
document.getElementById("checkspan").style.color = "green";
}else{
document.getElementById("checkspan").innerHTML = "格式错误";
document.getElementById("checkspan").style.color = "red";
}
}
</script>
</html>网上的效果，正确给个对勾图片，错误给个叉叉图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 调一个图片对齐方式 */
img{
vertical-align:middle; /* 和文本框居中对齐 */
display:none; /* 不操作不显示图片 */
}
</style>
</head>
<body>
<!-- 正确显示图片一，错误显示图片二 -->
<input id="mytext" type="text" onkeyup="checkText()" /><img id="myimg" src="./false.png" />
</body>
<script>
var myreg = /^1(3|4|5|7|8)\d{9}$/;
function checkText(){
if(myreg.test(document.getElementById("mytext").value)){
document.getElementById("myimg").style.display = "inline"; /* 操作显示图片 */
document.getElementById("myimg").src = "./对勾.png";
}else{
document.getElementById("myimg").style.display = "inline";
document.getElementById("myimg").src = "./false.png";
}
}
</script>
</html>表单提交 onsubmit事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
vertical-align:middle;
display:none;
}
</style>
</head>
<body>
<!-- onsubmit限制表单提交 onsubmit="return false"无法提交 onsubmit="return true"可以正常提交-->
<form action="/server" method="get" onsubmit="return checkText()" >
<input id="mytext" type="text" onkeyup="checkText()" /><img id="myimg" src="./false.png" />
<input type="text" onkeyup="checkMail()" /><img id="myimg" src="./false.png" />
<br />
<input type="submit" />
</form>
</body>
<script>
var myreg = /^1(3|4|5|7|8)\d{9}$/;
function checkText(){
var flag = false;
if(myreg.test(document.getElementById("mytext").value)){
document.getElementById("myimg").style.display = "inline";
document.getElementById("myimg").src = "./对勾.png";
flag = true;
}else{
document.getElementById("myimg").style.display = "inline";
document.getElementById("myimg").src = "./false.png";
flag = false;
}
return flag;
}
function checkMail(){
return true;
}
function mySubmit(){ //效验其它所有结果，所有结果都为true才返回true
return checkText()&&checkMail();
}
</script>
</html>
BOM浏览器对象模型：
windows对象：
<script>
console.log(window.document); //用document可在控制台看到完整的代码
//document属于window对象，windows可省略不写
//以下全部过时，了解：
//alert("警告框");
//prompt("请输入");
//confirm("确定离开么 还有xx分钟就可以领取大奖")
</script>History对象：
<body>
<input type="button" value="go" onclick="myBack()" />
</body>
<script>
//浏览器历史记录的按钮实际上就是前进和后退按钮，
function myBack(){
//history.back(); 加载上一个浏览的文档(浏览器里的后退)
//history.forward(); 加载下一个浏览过的文档（浏览器里的前进）
history.go(0); //刷新页面，相当于在第0个历史记录里跳转
}
</script>Location对象：
<body>
<input type="button" value="跳转" onclick="myHREF()" />
<input type="button" value="刷新页面" onclick="myRefresh()" />
</body>
<script>
function myHREF(){
//页面跳转
location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=123&fenlei=256&rsv_pq=b3903db40004d883&rsv_t=26dfCMNmJN8OLu8M%2F6R0rmWsUMQJPAWUKGi369qTEIZJP7hLs1UlUXlvnmI&rqlang=cn&rsv_enter=0&rsv_dl=tb&rsv_btype=i&inputT=1073&rsv_sug4=1297"
}
//浏览器的刷新按钮通过location对象调用reload属性
function myRefresh(){
location.reload(); //刷新当前页面
}
</script>Document对象:
<body>
<div class="mycls">div1</div>
<div>div2</div>
<span class="mycls">span1</span>
<input id="mytext" type="text" />
<hr />
<input name="hobby" type="checkbox" value="1" />
<input name="hobby" type="checkbox" value="2" />
<input name="hobby" type="checkbox" value="3" />
<div class="mytest">
<p>鹅鹅鹅</p>
<p>曲项向天歌</p>
<div id="mydiv">
<p>拔毛浮绿水</p>
<p>红掌拨清波</p>
</div>
</div>
<!-- 让文本框1,2,3的颜色改变，先找到元素，故加特征，最简单的特征就是用div包起来，再给div加个id。 -->
<div id="aimdiv">
<input type="text" value="文本框1" />
<input type="text" value="文本框2" />
<input type="text" value="文本框3" />
<input type="button" value="按钮" />
<input type="checkbox" value="123" />
</div>
</body>
<script>
//document对象属于windows对象，代表当前文档
document.title="mypage"; //操作title标签（页面左上角的标题）
console.log(document.getElementById("mytext")); //通过id找到唯一的一个元素
console.log(document.getElementsByTagName("div")); //通过标签名查找元素
console.log(document.getElementsByName("hobby")); // 通过name属性查找元素
console.log(document.getElementsByClassName("mycls")); //通过class的值查找元素
console.log(document.getElementById("mydiv").getElementsByTagName("p")); //在某个元素中查找元素
//让文本框1,2,3的颜色改变 通过元素属性筛选元素
var eles = document.getElementById("aimdiv").getElementsByTagName("input"); //找到5个input标签
for(var i = 0;i<eles.length;i++){
if(eles[i].type=="text"){ //判断type是否为text，是则变为红色
eles[i].style.color="red";
}
}
</script>Window对象常用方法:
<body>
<input type="button" value="打开新窗口" onclick="myOpen()" />
<input type="button" value="关闭窗口" onclick="myClose()" />
</body>
<script>
//打开新窗口open。传入参数：1.打开窗口的地址 2.窗口名字
//3.一些可选项，比如窗口大小，所在位置，是否要滚动条，工具栏等 后两个参数选填，第一个必填
/* function myOpen(){
window.open("2history对象.html","","");
} */
//关闭窗口，没有参数。谁调用，就关谁（windows对象调用的，windows对象代表当前窗口）
/* function myClose(){
window.close();
} */
//关闭新窗口，不是当前窗口，只要获得新窗口对象，就可关闭。
//新窗口对象通过open的返回值获取
//函数内定义的变量只能在自己函数中生效，应用全局变量
//注：全局只针对当前页面生效
var newWin;
function myOpen(){
newWin = window.open("2history对象.html","","");
}
function myClose(){
newWin.close(); //此时关闭的是新窗口
}
</script>定时函数:
<body>
<input type="button" value="开始定时触发" onclick="myStart()" />
</body>
<script>
//两个定时函数： 1.setInterval（fun,time）定时重复不断地执行 clearInterval 停止
//两个参数，1.要执行的函数对象 2.间隔多长时间去执行，是毫秒数
//2.setTimeout（fun,time）定时执行一次 clearTimeout 停止
function myLog(){
console.log("1");
}
setInterval（"myLog()",1000); //页面加载结束后触发该定时函数，该定时函数每隔一秒执行一次myLog()函数。第一种写法，引号里加函数名加括号
//setInterval（myLog,1000); 第二种写法，不推荐
/* setInterval（function(){ 第三种写法，用匿名函数
console.log("1");
}
,1000); */
//通常定时函数通过按钮触发，故写法上会套在一起
function myStart(){
setInterval（function(){
console.log("1");
},1000);
//但要注意，按钮点完之后马上禁用，不然定时重复不断地执行。<body>
<input type="button" value="开始定时触发" onclick="myStart(this)" />
</body>
<script>
function myStart(myObj){
myObj.disabled = true; //按钮禁用
setInterval(function(){
console.log("1");
},1000);
</script><body>
<input type="button" value="开始定时触发" onclick="myStart(this)" />
<input type="button" value="停止定时" onclick="myStop()" />
</body>
<script>
//setTimeout用法和setInterval一样
setTimeout(function(){
console.log(3);
},1000);
var taskid;
function myStop(){
clearInterval(taskid); //参数是Interval的id，其id从开启的返回值获得。同样提升作用域
//clearTimeout() 是停掉setTimeout定时，参数是Timeout的id
}
function myStart(myObj){
myObj.disabled = true;
taskid = setInterval(function(){
console.log("2");
},1000);
}
</script>案例：页面定时跳转
案例：图片隐藏
案例：随机数
案例：生成界面
文档对象模型（dom树结构）：
获取元素节点：
<body>
<div id="aimdiv">
<div class="mydiv">
我的标签1
</div>
<div id="mydiv">
我的标签2
</div>
<div class="mydiv">
我的标签3
</div>
</div>
<input id="mytext" type="text" value="abc"/>
</body>
<script>
console.log(document.getElementById("mydiv")); //通过id获取元素
console.log(document.getElementsByTagName("div")); //通过标签名获取元素
console.log(document.getElementsByClassName("mydiv")); //通过class属性获取元素
</script> 根据节点层次关系获取节点（属性不加括号）：
<body>
<div id="aimdiv">
<div class="mydiv">
我的标签1
</div>
<div id="mydiv">
我的标签2
</div>
<div class="mydiv">
我的标签3
</div>
</div>
<input id="mytext" type="text" value="abc"/>
</body>
<script>
console.log(document.getElementsByClassName("mydiv")[0].parentNode); //第一个class属性为mydiv的节点的父节点。
console.log(document.getElementById("aimdiv").childNodes); //返回子节点集合（注：div标签间会有一些空白，属于文本节点）
console.log(document.getElementById("aimdiv").lastElementChild); //获取最后一个元素子节点
console.log(document.getElementById("aimdiv").lastChild); //获取最后一个子节点
console.log(document.getElementById("mydiv").previousElementSibling); //获取上一个元素节点节点属性操作：
<body>
<input id="mytext" type="text" value="abc" />
</body>
<script>
//之前的对元素属性的操作方法：
//document.getElementById("mytext").value = "123";
//使用方法的方式 getAttribute() 获取属性 setAttribute() 设置属性值
document.getElementById("mytext").setAttribute("value","123456");
document.getElementById("mytext").getAttribute("value"); //取值只需传入属性名
</script>文本节点操作：
<body>
<div id="aimdiv">
<div class="mydiv">
我的标签1
</div>
<div id="mydiv">
我的标签2
</div>
<div class="mydiv">
我的标签3
</div>
</div>
</body>
<script>
//.innerHTML 可解析html标签
//.innerText 不能解析html标签，纯文本
//document.getElementById("mydiv").innerHTML = "<h1>test</h1>"; 可带标签，将文本替换
//（我的标签2被修改为test，并增加了标签h1的效果）
document.getElementById("mydiv").innerText = "<h1>test</h1>"; //将"我的标签2"替换为" <h1>test</h1>"
</script>Dom动态操作相关方法：
<body>
<input type="button" value="添加元素" onclick="addEle()" />
<input type="button" value="添加元素2" onclick="addEle2()" />
<input type="button" value="删除元素" onclick="delEle()" />
<ul id="myul">
<li id="myli"><input type="button" value="女足夺冠"/> </li>
</ul>
</body>
<script>
function addEle(){ //功能：点击添加元素按钮，在无序列表中增加一条新闻
//添加新元素流程：1.创建元素createElement 2.把元素填入页面中appendChild，参数是新创建的元素
/* var newEle = document.createElement("li"); 1.创建元素
newEle.innerHTML="男足(没有)夺冠"; */ //3.写文本，用innerHTML属性
//document.getElementById("myul").appendChild(newEle); 2.把元素填入页面中appendChild，参数是新创建的元素，但此时只多出一个点，没有文本
//想把新添加的新闻放到女足新闻前面，用insertBefore //document.getElementById("myul").insertBefore(newEle,document.getElementById("myli"));
//将女足新闻做成按钮，新添加的新闻也做成按钮：（多了一层嵌套效果）
var newEle = document.createElement("input"); //1.创建input标签
newEle.setAttribute("type","button"); //6.input标签通过type属性决定各种类型（也可newEle.type = "button"）;
newEle.value="男足(没有)夺冠"; //2.写标签内容
var newli = document.createElement("li"); //3.创建li元素
newli.appendChild(newEle); //4.将input放在li里
document.getElementById("myul").appendChild(newli); //5.将准备好的li整个放到ul里
}
function addEle2(){
//cloneNode(bol) 克隆方法，参数为布尔值。bol决定子元素是否一起复制。若为false，则指复制了列表的图标。
//不写布尔值，默认false
var newEle = document.getElementById("myli").cloneNode(true);
document.getElementById("myul").appendChild(newEle);
}
function delEle(){
//removeChild删除节点
//通过元素结构 找到需要删除的子节点
//删除最后一个
document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild);
}
</script>dom动态操作简单的方法：
<body>
<input type="button" value="添加元素" onclick="addEle()" />
<input type="button" value="删除元素" onclick="delEle()" />
<ul id="myul">
<li id="myli"><input type="button" value="女足夺冠"/> </li>
</ul>
</body>
<script>
/*
添加或者替换时 把元素当文本操作
删除时 使用动态dom的删除方式
*/
function addEle(){
document.getElementById("myul").innerHTML += '<li id="myli"><input type="button" value="女足夺冠2"/> </li>';
}
function delEle(){
document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild);
}
</script>Dom操作表格相关方法：
<body>
<input type="button" value="添加一行数据" onclick="addNewRow()" />
<table id="mytable" border="1">
<caption>用户信息表</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小明</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>小白</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>小光</td>
<td>29</td>
</tr>
</tbody>
</table>
</body>
<script>
function addNewRow(){
/*
把table描述成二维数组
rows 行
cells 单元格
insertRow() insertCell() 参数都是索引
*/
console.log(document.getElementById("mytable").rows[3].cells[1].innerHTML); //4行2列----小光
//var newTR = document.getElementById("mytable").insertRow(0); 第1行添加
//var newTR = document.getElementById("mytable").insertRow(4); 最后一行添加
//但再想在最后一行添加要改索引，不方便，可用document.getElementById("mytable").rows.length。
var newTR = document.getElementById("mytable").insertRow(document.getElementById("mytable").rows.length);
//列一般定死，不会再扩
var newTd1 = newTR.insertCell(0);
var newTd2 = newTR.insertCell(1);
var newTd3 = newTR.insertCell(2);
newTd1.innerHTML="test";
newTd2.innerHTML="test";
newTd3.innerHTML="test";
}
</script>Dom操作表格简单方法：
<body>
<input type="button" value="添加一行数据" onclick="addNewRow()" />
<input type="button" value="删除最后一行" onclick="delRow()" />
<hr />
<input id="myCode" type="text" placeholder="编号" />
<input id="myName" type="text" placeholder="姓名" />
<input id="myAge" type="text" placeholder="年龄" />
<table id="mytable" border="1">
<caption>用户信息表</caption>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="mytbody">
<tr>
<td>1</td>
<td>小明</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>小白</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>小光</td>
<td>29</td>
</tr>
</tbody>
</table>
</body>
<script>
function addNewRow(){
var myCode = document.getElementById("myCode").value;
var myName = document.getElementById("myName").value;
var myAge = document.getElementById("myAge").value;
document.getElementById("mytbody").innerHTML+='<tr>'
+'<td>'+myCode+'</td>'
+'<td>'+myName+'</td>'
+'<td>'+myAge+'</td>'
+'</tr>'
}
function delRow(){
//删除最后一行
//document.getElementById("mytable").rows.length-1 数组长度-1 正好是最后一条数据的idx
document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
}
</script>Js常用对象：
String：
<script>
var myStr = "abc123efcg";
//indexOf()
console.log(myStr.indexOf("c")); //2
//lastIndexOf() 若找不到返回-1
console.log(myStr.lastIndexOf("ca")); //-1
//substring() 截取 两个参数:起，止的索引，包头不包尾
console.log(myStr.substring(2,4)); //c1
//substr() 两个参数：起,个数
console.log(myStr.substr(2,4)); //c123
//replace() 将第一个参数替换为第二个参数
console.log(myStr.replace("ef","oo")); //abc123oocg
//split()分割 通常用在有格式的字符串
var myStr2 = "id=5;name=jack;age=15";
var kvs = myStr2.split(";");
console.log(kvs); //Array(3) 0: "id=5" 1: "name=jack" 2: "age=15"
//将name=jack的值取出
for(var i = 0;i<kvs.length;i++){
var kandv = kvs[i].split("=");
//console.log(kandv[0]+'---'+kandv[1]); id---5 name---jack age---15
if(kandv[0]=="name"){
console.log(kandv[1]);
}
}
</script>Math：
<script>
var myNum = 10.1;
console.log(Math.ceil(myNum)); //11 ceil()向上取整
console.log(Math.floor(10.9)); //10 floor()向下取整
console.log(Math.round(10.4)); //10 round() 四舍五入
console.log(Math.abs(-10)); //10 绝对值
// 产生1-10间的整数,含1和10
console.log(Math.floor(Math.random()*10)+1); //Math.random() 0-1间的随机小数（包头不包尾）
</script>Date：
<script>
/*
日期对象，在js里较简单.没有格式化，没有日期转换
传入常用日期格式字符串，主要有两种
1.2022-12-12 12:12:12 2.2022/12/12 12:12:12
*/
var nowTime = new Date(); //获取当前时间
console.log(nowTime);
var myDate = new Date("2022/12/12 12:12:12"); //需要获取年月日时分秒，传入常用日期格式字符串
console.log(myDate);
</script>Array对象：
<script>
var myarr = new Array(5); //获取数组对象，可传参，参数为长度
var myarr2 = [1,"2",true,new Date(),[1,2,3]]; //也是定义数组，
console.log(myarr2.length); // 5 数组常用的属性，就这一个
//数组常用的方法：
//console.log(myarr2.join("_")); 将内容用‘-’拼成字符串
//1_2_true_Thu Mar 31 2022 16:16:13 GMT+0800 (中国标准时间)_1,2,3
//sort()排序
/* var myarr3 = [4,1,7,6,9];
myarr3.sort(function(a,b){ //需要传入排序规则，降序排列
return b-a;
}) */
/*
myarr3.push(2); 尾部添加元素
myarr3.unshift(3) 头部添加元素
myarr3.pop(); 尾部删除元素
myarr3.shift(); 头部删除元素 */
//替换元素 splice (索引 ,几个,...(替换成xxx)) 第三个参数为可变参数
var myarr3 = [4,1,7,6,9];
myarr3.splice(1,2,"a","b"); //第1个索引开始，替换两个，替换成ab
console.log(myarr3); //[4,a,b,6,9]
</script>
813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
