1.6、前端笔记01

编程界小学生

于 2023-03-26 18:32:09 发布

阅读量2.2k

点赞数

分类专栏：软件测试文章标签：前端 javascript java

本文链接：https://blog.csdn.net/weixin_39446297/article/details/129782483

版权

软件测试专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、网页开发介绍

【面试题：网页的实现】

网页主要由三个部分组成：结构、表现、行为

结构：网页的结构和内容，如：一个网页中包含文字。图片，音视频等，由HTML实现

表现：设定网页的样式，如：字体的大小，颜色，图片形状，由CSS实现

行为：控制用户和网页的交互，如：点击按钮请求等，由JavaScript实现

总之，结构决定了网页是什么，表现决定了网页是什么样子，行为决定网页能做什么

二、HTML简介

1、概念

标记：html中所有的操作都是通过标记实现的，标记就是一个标签，写法：<标签名称>

网页语言：制作网页的语言

开发模式：

C/S:Client/Server,客户端/服务端

B/S- Browser/Server - 浏览器/服务器，

基于HTTP协议的（超文本传输协议）实现服务器的HTML资源传给Browser浏览器的客户端的。流程：客户端先请求(Request)服务器的HTML资源，然后由服务器查找资源并响应(Response)给客户端

html的作用：描述网页，展示信息给用户

2、`html`的规范

1、一个html文件都包含开始标签和结束标签<html></html>

2、html包含两部分内容

(1)<head></head>：是来设置html页面的属性和配置信息

(2)<body></body>：显示在页面上的内容

3、html的一部分标签有开始标签和结束标签，必须成对出现

例如：<title></title>

4、html的有些特殊标签没有结束标签，在标签内结束

例如：换行标签：<br/>

分割线：<hr/>

5、html的代码不区分大小写

3、`html`的操作思想

【面试题】

网页中有很多的数据，不同f的数据可能需要不同的显示效果，这个时候需要使用标签将需要操作的数据封装起来，通过修改标签的属性值实现标签内数据样式的变化

一个标签就相当于是一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化

三、常用标签

1.结构标签

<html>
    <head>
        <title>标题</title>
        <meta charset="utf-8"/>
    </head>
    <body> 
        <!--注释内容-->
        hello word!
    </body>  
</html>

2、文字标签`<font></font>`以及一些属性

文字标签：修改文字的样式

标签：<font></font>

属性：

text-decoration:underline/line-through/overline 下划线/字体中间有一条线/上面有一条线

font-style:oblique/italic斜体

font-weight 给文字加粗 font-weight:100

font-size 文字的大小 eg：font-size:20px

color文字的颜色，有两种表示方式，一种是英文单词，另一种是使用16进制表示。

eg:color:red 或者 color:#ffffff

【#123456,每两位表示一种颜色】，分别为红色，绿色，蓝色，就是采用RGB，一般情况下，借助于工具

现不同的颜色，拾色器：https://www.runoob.com/tags/html-colorpicker.html，其中，#FFFFF表示白色

#000000表示黑色

<html>
    <head>
        <title>文字标签1</title>
        <mage charset="utf-8"/>
    </head>
    <body>
        <font size="1" color="red"> 西游记 </font>
        <br/><!--换行-->
        <font size="2" color="#abc"> 西游记 </font>
        <hr/><!--分割线-->
        <font style="font-size: 32px;color: darkgreen;">不带走一片云彩</font>
		<br />
		<font style="font-size: 2em;color: darkgreen;">不带走一片云彩</font>
    </body>
</html>

3.排版标签`<p></p>、<hr/>、<br/>`

1、段落标签：设置段落，标签：<p></p>

2、水平线标签 hr：<hr 属性 />，属性：size:水平线的宽度，color：水平线的颜色，width：水平线的

3、换行标签：<br />

text-indent: 2em一般用于设置段落缩进

line-height:40px设置文本的行高

background: cyan和background-color: cyan设置背景颜色

<body>  
		<hr/>
		<!--这是一个注释-->
		<p style="color:blue;text-indent:2em;line-height:50px;background-color:#cccccc">这是一个普通段落，的设计好的环境的话 的手机多少号多少好的手机多少号多少,的设计好的环境的话 的手机多少号多少好的手机多少号多,
		的设计好的环境的话 的手机多少号多少好的手机多少号多,
		的设计好的环境的话 的手机多少号多少好的手机多少号多</p>
		<hr/>
		<b>这是一个加粗的段落。。。哈说废话废话多符合双方的飞虎队的身份和地方生活的方式回答说废话废话多少等哈说辅导费时间</b>
		<hr size="20px" width="200px" color="red"/>
	</body>

4.文本格式化标签(`strong/del/ins/em/big/sub/sup`双标签)

<b></b>和<strong></strong>：加粗

<s></s>和<del></del>：删除线

<u></u>和<ins></ins>：下划线

<i></i>和<em></em>：斜体

<small></small>和<big></big>：小号字体和大号字体

<sub></sub>：下标

<sup></sup>：上标

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		三国演义<br/>
		<strong>三国演义</strong><br/>
		<s>原价</s>：<del>999</del><br/>
		活动价:9.9
		<br/>
		唐僧 <ins>白骨精</ins> <u>黑熊怪</u><br/>
		猴哥 <em>八戒</em>
		<br/>
		<small>悟空三打<small>白骨精</small></small><br/>
		<big><big>悟空</big>被赶回了花果山</big><br/>
		log<sub>10</sub>100<br/>
		2<sup>3</sup>
	</body>
</html>

5.标题标签`<h1></h1>`会自动换行

标签：

<h1></h1> ：一级标题 <h2></h2>：二级标题 <h3></h3> ：三级标题

<h4></h4> ：四级标题 <h5></h5> ：五级标题 <h6></h6>：六级标题

h1的字体最大， h6的字体最小，从h1到h6，大小是依次变小，同时会自动换行

align:right/center文字显示在右边/中间，默认显示在左边

<html>
	<head>
		<title>标题标签</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h1 align="right">刘姥姥三进大观园</h1>
		<h2 align="center">刘姥姥三进大观园</h2>
		<h3 style="color:red">刘姥姥三进大观园</h3>
		<h4>刘姥姥三进大观园</h4>
		<h5>刘姥姥三进大观园</h5>
		<h6>刘姥姥三进大观园</h6>
	</body>
</html>

6.字符实体(` <>©®÷&times`)

常用字符实体： 空格、<小于、>大于、©版权、®注册商标、÷除、×乘

<html>
	<head>
		<title>字符实体</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		大a*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明
		<hr/>
		2&lt;3<br/>
		2&lt;3 7&gt;6
		<hr/>
		&copy;正午阳光<br/>
		&reg;秋名山神车<br/>
		9&divide;3<br/>
		3&times;3<br/>
	</body>
</html>

7.图片标签`<img />`

格式：<img src="图片路径"/>

属性：

src：图片的路径

网络资源：直接赋值网址即可

本地资源：资源要在当前工程目录下，只能使用相对路径，不能使用绝对路径

width：图片显示的宽度

height：图片显示的高度

alt：图片上的文字提示【图片的替换文本,如果图片资源加载不出来, 显示该文本】

title：鼠标悬浮标题，注意和alt的区别

border-radius:5%每条边有5%的圆角

【路径问题】

找不到资源路径，则会出现404的错误

绝对路径：包含盘符的路径

相对路径：没有盘符，表示一个文件相对于另外一个文件的位置，以后在实际项目开发中常用

<html>
	<head>
		<title>图片标签</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<img 			src="https://img10.360buyimg.com/n7/jfs/t1/198541/33/18160/89241/619b5445E50371f54/146f2efb0a57ef66.jpg"/>
		<img width="220px" height="220px" style="border:3px blue solid" src="psb6.jpg"/>
		<img width="220px" height="220px" style="border:5px blue dashed" src="../s4.jpg"/>
		<img width="220px" height="220px" style="border:5px blue dotted" src="img/psb7.jpg"/>
		<hr/>
		<img width="220px" height="220px" src="file:///D:/2202/day18/psb6.jpg"/>
		<img width="220px" height="220px" alt="图片飞走了" title="放大吗" src="file:///E:/tools/anquan.jpg"/>
		<hr/>
		<img style="border-radius:5%" src="https://img10.360buyimg.com/n7/jfs/t1/115689/23/23353/188945/6243400fE8e59e794/402c3d42d1a247df.jpg"/>
		<img style="border-radius:30%" src="https://img10.360buyimg.com/n7/jfs/t1/115689/23/23353/188945/6243400fE8e59e794/402c3d42d1a247df.jpg"/>
		<img style="border-radius:50%" 		       src="https://img10.360buyimg.com/n7/jfs/t1/115689/23/23353/188945/6243400fE8e59e794/402c3d42d1a247df.jpg"/>
	</body>
</html>

8、元素的边框`border`

border-radius:10%四个角的10%成圆角

<html>
	<head>
		<title>边框</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h6>元素的边框</h6>
		<img style="border-left:13px blue solid;border-top:6px green solid;border-right:6px red solid;border-bottom:6px yellow solid;border-radius:10%" src="https://img10.360buyimg.com/n7/jfs/t1/177749/1/14577/106118/60f5a5b5E6b5d9c03/2a8c4e949ba4c8f2.jpg"/>
	</body>
</html>

9、超链接标签：`<a></a>`

href 链接地址

target="_blank"在一个新的界面打开链接，不设置的话默认是同一个页面

text-decoration:none 去下滑线

<html>
	<head>
		<title>超链接标签</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h6>超链接标签</h6>
		<a target="_blank" href="https://www.w3school.com.cn/">w3School</a>
		<br/>
		<a target="_blank" href="边框.html">边框</a>
		<br/>
		<a target="_blank" href="../day18/图片标签.html">图片</a>
		<br/>
		<a style="text-decoration:none;color:red" href="http://news.baidu.com">百度新闻</a>
		<br/>
	</body>
</html>

10、绝对位置标签：`position:absolute`

<html>
	<head>
		<title>绝对位置</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<img style="position:absolute;left:100px;top:300px" src="https://img12.360buyimg.com/n1/s190x190_jfs/t1/128392/19/26749/201541/623d9822E2c50c6b5/4d2feb459ba4aceb.jpg"/>
	
	</body>
</html>

11、相对位置标签：`position:relative`

<img src="https://img14.360buy<html>
	<head>
		<title>相对对位置</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<img src="https://img14.360buyimg.com/n7/jfs/t1/195862/39/25633/456778/62426ef8E7f5b03f3/876c317408cd3f53.jpg"/>
		<img style="position:relative;left:220px;top:195px;" src="https://img12.360buyimg.com/n1/s190x190_jfs/t1/128392/19/26749/201541/623d9822E2c50c6b5/4d2feb459ba4aceb.jpg"/>
	
	</body>
</html>img.com/n7/jfs/t1/195862/39/25633/456778/62426ef8E7f5b03f3/876c317408cd3f53.jpg"/>
<img style="position:relative;left:220px;top:195px;" src="https://img12.360buyimg.com/n1/s190x190_jfs/t1/128392/19/26749/201541/623d9822E2c50c6b5/4d2feb459ba4aceb.jpg"/>

12、悬浮位置标签：`position:fixed` 底部

<html>
	<head>
		<title>悬浮位置</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<img src="https://img14.360buyimg.com/n7/jfs/t1/195862/39/25633/456778/62426ef8E7f5b03f3/876c317408cd3f53.jpg"/>
		<img style="position:relative;left:220px;top:1195px;" src="https://img12.360buyimg.com/n1/s190x190_jfs/t1/128392/19/26749/201541/623d9822E2c50c6b5/4d2feb459ba4aceb.jpg"/>
		<a href="#top" style="position:fixed;left:50px;bottom:50px;">回到顶部</a>
	</body>
</html>

13、音视频标签`<audio></audio>、<video></video>`

<html>
	<head>
		<title>音视频标签</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h6>音视频标签</h6>
		<hr/>
		<audio src="mm.mp3" controls loop autoplay></audio>
		<hr/>
		<video src="heihei.mp4" controls loop autoplay></video>
		<hr/>
	</body>
</html>

14、块标签 `<div></div>`

<span></span>拼接标签，相当于块，可以使用相对位置

<html>
	<head>
		<title>块标签</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<div style="width:200px;height:600px;background-color:#aaa">
			<img width="100px" height="100px" src="https://img12.360buyimg.com/n7/jfs/t1/195830/39/21622/512616/62415d26E7240e4f5/f2fbbeb5285c04dc.jpg"/>
		</div>
		<div style="width:800px;height:200px;backgroundcolor:#ccc;position:absolute;left:235px;top:20px">
			<h6>桃花岛</h6>
			<p>黄药师很忙</p>
		</div>
		<div style="width:800px;height:400px;backgroundcolor:#bbb;position:absolute;left:235px;top:240px;">
			<h6>绝情谷</h6>
			<b>绝情谷---裘千仞</b>
			<span>黄蓉找到郭靖</span><span>郭靖找到了穆念慈</span>
		</div>
	</body>
</html>

15、列表标签

dl-->dt-->dd （自定义列表）

ol->li typ=i/a/1 罗马数字、英文字母、阿拉伯数字（有序列表）

ul->li typ=circle/disc/square 空心圆点、实心圆点（默认值）、实心方框（无序列表）

<html>
	<head>
		<title>列表标签</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<dl>
			<dt>微信</dt>
			<dd>微信支付</dd>
			<dd>微信朋友圈</dd>
			<dd>微信小程序</dd>
		</dl>
		<hr/>
		<ol type="i">
			<li>张学友</li>
			<li>刘德华</li>
			<li>黎明</li>
			<li>郭富城</li>
		</ol>
		<hr/>
		<h6>热点点击</h6>
		<ol>
			<li><a href="#">江苏盐城经开区：城市有“气质” 发展高品质</a></li>
			<li><a href="#">阻击疫情 | 铜陵环保铁军女战士：绽放在</a></li>
			<li><a href="#">疫情防控 共克时艰 | 台州市生态环境局三门</a></li>
			<li><a href="#">中国二冶山东分公司枣庄市人民医院项目加</a></li>
			<li><a href="#">全力抗疫 环保助力 吹响生态环保人的战</a></li>
		</ol>
		<h6>无序列表</h6>
		<ul type="square">
			<li>重庆森林</li>
			<li>2046</li>
			<li>阿飞正传</li>
			<li>东邪西毒</li>
			<li>东成西就</li>
		</ul>
	</body>
</html>

16、列表标签推荐

list-style-type:none 去除ul li前面的小图标

display:inline 设置元素对象作为行内元素显示，在li 里面用

margin-left:10px 实现间隔

<div style="width:250px;height:5648px;border:1px white solid">
	<ul style=" list-style-type:none;width:auto;margin:0 auto;">
		<li style="display:inline">
			<div style="width:178px;height:260px;background-color:#fff">
				<center>
				<img width="160px" height="160px"  src="https://img11.360buyimg.com/n2/jfs/t1/103803/38/21322/138152/61e532f5E6a2e56cc/8c5afc68d9af073e.jpg"/>
				<font style="color:red;font-size:14px">¥4599.00</font><br/>
				<font style="color:#aaa;font-size:14px">生日礼物</font>
				</center>
			</div>
		</li>
		<li>
			<div style="width:178px;height:260px;background-color:#fff">
				<center>
				<img width="160px" height="160px"  src="https://img12.360buyimg.com/n2/jfs/t1/86718/21/24575/267910/624483bbEa90b2d7e/ac65de577783f9c6.jpg"/>
				<font style="color:red;font-size:14px">¥4599.00</font><br/>
				<font style="color:#aaa;font-size:14px">生日礼物</font>
				</center>
			</div>
		</li>

17、表格标签 `<table></table>` `tr/th` 行/列

align="center" 属性居中

<table width="800px" height="300px" bgcolor="green" border="3px" bordercolor="blue">
	<tr align="center">
		<th>id</th>
		<th>name</th>
		<th>tel</th>
		<th>pw</th>
	</tr>
	<tr align="center">
		<td>1</td>
		<td>唐僧</td>
		<td>13889898988</td>
		<td>999</td>
	</tr>
</table>

18、使用表格实现物品列表

<table width="1000px" height="800px">
	<tr>
		<td>
			<div style="width:220px;height:300px">
				<img width="220px" height="220px" 			src="https://img14.360buyimg.com/n7/jfs/t1/185771/17/17304/757226/6108a6a5Eed68c3fe/bb605b75d110a4fb.png"/>
				<center>
				<font style="color:red;font-size:14px">￥428.00</font><br/>
				<font style="color:gray;font-size:12px">新款牛皮大容量包包</font>
				</center>
			</div>	
		</td>
        <td>
			<div style="width:220px;height:300px">
				<img width="220px" height="220px" src="https://img14.360buyimg.com/n7/jfs/t1/116227/15/22993/406700/62416c8eE6a7b1789/b08814aad2ccd1e1.jpg"/>
				<center>
				<font style="color:red;font-size:14px">￥428.00</font><br/>
				<font style="color:gray;font-size:12px">新款牛皮大容量包包</font>
				</center>
			</div>
		</td>
    </tr>
</table>

19、表格的变形（合并单元格）`rowspan`合并列 `colspan`合并行

<table width="300px" height="100px" bgcolor="green" border="2px" bordercolor="blue">
	<tr>
		<td>曹操</td>
		<td>18</td>
		<td rowspan="3">男</td>
	</tr>
	<tr>
		<td>曹植</td>
		<td>2</td>
	</tr>
	<tr>
		<td>曹丕</td>
		<td>4</td>
	</tr>
	<tr>
		<td>曹皇后</td>
		<td>1</td>
		<td>女</td>
	</tr>
</table>
<table width="300px" height="100px" bgcolor="green" border="2px" bordercolor="blue">
	<tr align="center">
		<td colspan="3">曹家人信息</td>
	</tr>
	<tr>
		<td>曹植</td>
		<td>2</td>
		<td>男</td>
	</tr>
	<tr>
		<td>曹丕</td>
		<td>4</td>
		<td>男</td>
	</tr>
	<tr>
		<td>曹皇后</td>
		<td>1</td>
		<td>女</td>
	</tr>
</table>

20、表单标签 `input`

action：提交的位置【服务器地址】"#"是一个假地址

method：提交采用的方法，数据提交的方式[post get]

1>普通输入项：

2>密码输入项：

8>提交按钮：

9>重置按钮:

注：重置按钮并不是清空数据，而是回到最初状态，按钮上的文字默认为重置

<html>
	<head>
		<title>表单标签</title>
		<meta charset="utf-8"/>
	</head>
	<body>
	<h6>欢迎注册：</h6>
		<form action="http://www.baidu.com" method="get">
			用户名:<input type="text" name="uname"/><br/>
			密码:<input type="password" name="upw"/><br/>  
			<input type="submit" value="提交"/><br/>
			<input type="reset" value="重置"/><br/>
			
		</form>
	</body>
</html>

21、input标签

name 为了给服务器进行声明数据类型，表单标签中几乎都需要【除了按钮】

value 用户选了是什么就是什么

radio 单选框

checkbox 复选框

<html>
	<head>
		<title>input标签</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h6>input标签的常见类型</h6>
		<form action="#" method="get">
		<hr/>
		输入框:<br/>
		名字：<input type="text" id="in1"/>
		<hr/>
		按钮：<br/>
		<input type="button" value="按钮"/>
		<hr/>
		单选框<br/>
		请选择性别：
		<br/>
		男：<input type="radio" name="sex" value="man"/><br/>
		女：<input type="radio" name="sex" value="woman"/><br/>
		<hr/>
		复选框<br/>
		请选择你喜欢的电影：<br/>
		霸王别姬：<input type="checkbox" name="movie" value="bwbj"/><br/>
		英雄：<input type="checkbox" name="movie" value="yx"/><br/>
		西部世界：<input type="checkbox" name="movie" value="xbsj"/><br/>
		权利的游戏：<input type="checkbox" name="movie" value="qy"/><br/>
		大话西游：<input type="checkbox" name="movie" value="dhxy"/><br/>
		<hr/>
		上传文件：<input type="file"/>
		<hr/>
		请填写邮件：<input type="email"/>
		<hr/>
		<input type="hidden" value="qqq"/>
		<hr/>
		<textarea cols="70" rows="10">
		</textarea>
		</form>
	</body>
</html>

22、input标签2

html>
	<head>
		<title>input标签2</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<hr/>
		<input type="color"/><br/>
		<input type="date"/><br/><br/>
		<input type="time"/><br/>
		<input type="image" src="https://img14.360buyimg.com/n7/jfs/t1/185771/17/17304/757226/6108a6a5Eed68c3fe/bb605b75d110a4fb.png"/><br/>
		<hr/>
		<input type="range" min="0" max="10" value="8"/>
	</body>
</html>

23、`select-->option`标签

<body>
	<select name="s1">
		<option>西安</option>
		<option>兰州</option>
		<option>宝鸡</option>
		<option>渭南</option>
		<option>咸阳</option>
		<option>张掖</option>
	</select>
</body>

24、`iframe`的使用

可以多个网页在一个页面上显示

<html>
	<head>
		<title>iframe的使用</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<iframe width="400px" height="1000px" src="http://news.baidu.com/">
		</iframe>
		<iframe style="position:absolute;left:450px;top:20px" width="500px" height="500px" src="http://news.baidu.com/"></iframe>
		
		<iframe style="position:absolute;left:1000px;top:20px" width="500px" height="500px" src="file:///D:/2202/day19/input%E6%A0%87%E7%AD%BE2.html"></iframe>
	</body>
</html>

25、边距问题`margin` 外边距、`padding`内边距

<html>
	<head>
		<title>边距问题</title>
		<meta charset="utf-8"/>
	</head>
	<body>
	<img src="https://img13.360buyimg.com/n7/jfs/t1/199601/25/4011/124574/611f6687E510504d9/0e91d0966aa72456.jpg"/>
		<div style="width:300px;height:300px;border:3px blue solid;margin-top:10px;margin-left:10px;padding-left:20px;padding-top:20px">
			<img src="https://img14.360buyimg.com/n7/jfs/t1/176486/15/22011/449511/61b40f2aE1e55324e/20d4d342eed05be0.jpg"/>
		</div>
	</body>
</html>

三、`css`

1、`css`的通用选择器

<html>
	<head>
		<title>css的通用选择器</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			*{
				margin:10px;
			}
		</style>
	</head>
	<body>
		<h6 id="qq">css的通用选择器</h6>
		<p id="dy">段誉---虚竹</p>
		<img id="img1" src="https://img13.360buyimg.com/n7/jfs/t1/89445/2/24821/97801/6236a625E54c8e427/29c5be7a981d478b.jpg"/>
		<img src="https://img11.360buyimg.com/n7/jfs/t1/210256/35/19635/346185/62416145E886675f4/fca6d95f67287711.jpg"/>
		<img src="https://img10.360buyimg.com/n7/jfs/t1/207561/12/12943/140919/61bc4160Ee48d3395/4791f23811f262a2.jpg"/>
		<h1>王语嫣</h1>
	
	</body>
</html>

2、`css`的基本选择器

需要在head中增加<style test="text/css"> </style>

id="名称" #名称{}

class="名称" .名称{}

标签 标签{} eg：img{}

<html>
	<head>
		<title>css的基本选择器</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			img{
				width:200px;
				height:200px;
			}
			.killer{
				width:100px;
				height:100px;
			}
			#bfx{
				width:300px;
				height:300px;
			}
		</style>
	</head>
	<body>
		<h6>css的基本选择器 三种基本选择器的优先级  id >> 类选择器 >> 标签选择器</h6>
		<img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2869422067.webp"/>
		<img id="bfx" class="killer" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2868425292.webp"/>
		<img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2869137086.webp"/>
		<img class="killer" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2868462052.webp"/>
		<img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2869751944.webp"/>
		<img class="killer" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2670448229.jpg"/>
	</body>
</html>

3、div的悬浮`float:left;`块标签向左并排出现

background-color:#ccc 背景颜色

<html>
	<head>
		<title>div的悬浮</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			#bigdiv{
				width:675px;
				height:300px;
				border:1px blue solid;
			}
			.moviediv{
				width:115px;
				height:249px;
				float:left;
				margin-left:15px;
				margin-top:18px;
			}
			.movieimg{
				width:115px;
				height:170px;
				margin-bottom:20px;
			}
			.moviename{
				font-size:14px;
				color:#aaa;
				margin-top:10px;
			}
			.xzgp{
				width:90px;
				height:24px;
				background-color:blue;
				margin-top:10px;
				font-size:10px;
				color:white;
				padding-left:10px;
				padding-right:10px;
				padding-top:3px;
				padding-bottom:3px;
			}
			.namediv{
			    margin-bottom:10px;
			}
		</style>
	</head>
	<body>
		<h6>正在热映的电影：</h6>
		<div id="bigdiv">
			<div class="moviediv">
				<img class="movieimg" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2867060943.webp"/>
				<center>
					<div class="namediv"><font class="moviename">月球陨落</font></div>
					<span class="xzgp">选座购票</span>
				</center>
			</div>
			<div class="moviediv">
				<img class="movieimg" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2869076642.webp"/>
				<center>
					<div class="namediv"><font class="moviename">月球陨落</font></div>
					<span class="xzgp">选座购票</span>
				</center>
			</div>
			<div class="moviediv">
				<img class="movieimg" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2797468943.webp"/>
				<center>
					<div class="namediv"><font class="moviename">月球陨落</font></div>
					<span class="xzgp">选座购票</span>
				</center>
			</div>
			<div class="moviediv">
				<img class="movieimg" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2868425292.webp"/>
				<center>
					<div class="namediv"><font class="moviename">月球陨落</font></div>
					<span class="xzgp">选座购票</span>
				</center>
			</div>
			<div class="moviediv">
				<img class="movieimg" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2633855969.webp"/>
				<center>
					<div class="namediv"><font class="moviename">月球陨落</font></div>
					<span class="xzgp">选座购票</span>
				</center>
			</div>
		</div>
	</body>
</html>

4、元素的覆盖（几个元素重叠）

<img src="">

5、`opacity`透明度取值范围 0-1

<html>
	<head>
		<title>透明度属性</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			#div1{
				width:200px;
				height:200px;
				background-color:blue;
				opacity:0.5;
			}
		</style>
	</head>
	<body>
		<div id="div1">
		
		</div>
		
	</body>
</html>

6、多个类作用于同一个标签

<img class="c1 c2" str=""/>

7、一个类作用于多个标签

<img class=c1 src=""/>
<font class=c1>文字</font>

8、多选择器（多个类或标签有共同的属性）

<style type="text/css">
    h3,font,p,b,#div1,.div2
</style>

<h3>文字</h3>
<font>文字</font>
<p>文字</p>
<b>文字</b>
<hr/>
<div id="div1">三国</div>
<div class="div2">三国</div>

9、包含选择器（层次选择器）也可以连接三个等等

<style type="text/css">
    img{
    }
    #div1 .uu{     
    }
</style>
<body>
    <div id="div1">
        <img class="uu" src="">
        <img class="uu" src="">
    </div>
    <img src="">
</body>

10、兄弟选择器（匹配相邻的标签）

+选择后面一个

~选择后面所有

<style type="text/css">
    #aa{    
    }
	<!--选择#aa后面的一个li-->
    #aa + li{
	}
	<!--选择#aa后面的所有li-->
    #aa ~ li{
	}
</style>
<body>
    <ol>
        <li>文本</li>
        <li id="aa">文本</li>
        <li>文本</li>
        <li>文本</li>
        <li>文本</li>
    </ol>
</body>

11、伪类选择器

hover：鼠标至于其上

before/after：添加头部或尾部，需要用content

first-letter/first-line：设置第一个字符或者第一行

格式：

<style type="text/css">
	#div:hover{}
    #div:before/after{
        content:"添加的内容";
        colore:red
    }
    #div:first-letter/first-line{
    }
</style>

12、结构选择器（伪类选择器）

#uu li:first-child 第一个

#uu li:last-child 最后一个

#uu li:nth-child(n)第n个

#uu li:empty 选择空的

#uu li:not(#zz) 选择不是#zz 的

<style type="text/css">
    #uu li:first-child{
    }
    #uu li:last-child{
    }
    #uu li:nth-child(4){
    }
    #uu li:empty{
    }
    #uu li:not(#zz){
    }
</style>
<body>
    <ul id="uu">
        <li>文本</li>
        <li id="aa">文本</li>
        <li>文本</li>
         <li></li>
        <li>文本</li>
        <li di="zz">文本</li>
    </ul>
</body>

13、属性选择器

用法：

<style type="text/css">
    input[name]{
    }
    input[name="uname"]{
    }
    input[typ="password"]{
    }
</style>
<body>
    <input type="text" name="uname"/><br/>
    <input type="text" name="qq"/><br/>
    <input type="password" name="ss"/><br/>
    <input type="text"/><br/>
</body>

14、权重

行内权重–>id–>class–>标签选择器 eg:img (从大到小)

15、`css`属性

font-family:宋体 (黑体、楷体)

letter-spacing 字母间距

word-spacing 单词间距

direction:rtl 文本显示在右方

text-shadow:7px 7px red 阴影

overfiow:hidden/scroll/auto 出了div的文字删除/滚动条/滚动条

cursor:crosshair/pointer鼠标十字/手的样式

16、`css` 外联

1、先写一个css文件 .css

2、索引进html中用link

<html>
    <head>
        <link href="<!--css文件名-->" type="test/css" rel="stylesheet"/>
    </head>
    <body>
    </body>
</html>

17、连接属性

link 控制未访问过的颜色等

visited 访问过之后的属性

hover 鼠标放上去的属性

<html>
	<head>
		<title>链接属性</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			a:link{
				color:red;
			}
			a:visited{
				color:pink;
			}
			a:hover{
				color:blue;
			}
		</style>
	</head>
	<body>
		<a href="http://news.baidu.com">百度新闻</a>
		<a href="http://www.tencent.com">腾讯qq</a>
	</body>
</html>
<!--<a href="链接地址">连接名称</a>-->

**#### 回顾：（重点css选择器）

1、属性：

list-style:none 去除ul li前面的小图标

display:inline 显示在一行且不会换行，在li 里面用

margin-left:10px 实现间隔（right/top/bottom）

text-decoration:none 超链接去掉下滑线

padding-top 内上距离

margin-top 外上边距

border:1px blue solid 边框绿色实现

border-readius:10% 圆边 border-left-readius:10% 左边圆边

position:absolute 绝对位置

position:relative 相对位置

position:fixed 可以设置回到顶部

float:left 左悬浮

<span></span> 连接在一起

<center></center>居中

width 宽、 height 高

3、iframe 可以多个网页在一个页面上显示

<iframe width="400px" height="1000px" src="http://news.baidu.com/">
</iframe>

4、dl-->dt-->dd （自定义列表标签）

5、ol->li typ=i/a/1 罗马数字、英文字母、阿拉伯数字（有序列表标签）

6、ul->li typ=circle/disc/square 空心圆点、实心圆点（默认值）、实心方框（无序列表标签）

7、<style type="text/css"> 选择器id 、class、同标签 <style>

新内容：

1、元素的覆盖（几个元素重叠）

<img src="">

2、`opacity`透明度取值范围 0-1

3、多个类作用于同一个标签

<img class="c1 c2" str=""/>

4、一个类作用于多个标签

<img class=c1 src=""/>
<font class=c1>文字</font>

5、多选择器（多个类或标签有共同的属性）

<style type="text/css">
    h3,font,p,b,#div1,.div2
</style>

<h3>文字</h3>
<font>文字</font>
<p>文字</p>
<b>文字</b>
<hr/>
<div id="div1">三国</div>
<div class="div2">三国</div>

6、包含选择器（层次选择器）也可以连接三个等等

<style type="text/css">
    img{
    }
    #div1 .uu{     
    }
</style>
<body>
    <div id="div1">
        <img class="uu" src="">
        <img class="uu" src="">
    </div>
    <img src="">
</body>

7、兄弟选择器（匹配相邻的标签）

+选择后面一个

~选择后面所有

<style type="text/css">
    #aa{    
    }
	<!--选择#aa后面的一个li-->
    #aa + li{
	}
	<!--选择#aa后面的所有li-->
    #aa ~ li{
	}
</style>
<body>
    <ol>
        <li>文本</li>
        <li id="aa">文本</li>
        <li>文本</li>
        <li>文本</li>
        <li>文本</li>
    </ol>
</body>

8、伪类选择器

hover：鼠标至于其上

before/after：添加头部或尾部，需要用content

first-letter/first-line：设置第一个字符或者第一行

格式：

<style type="text/css">
	#div:hover{}
    #div:before/after{
        content:"添加的内容";
        colore:red
    }
    #div:first-letter/first-line{
    }
</style>

9、结构选择器（伪类选择器）

#uu li:first-child 第一个

#uu li:last-child 最后一个

#uu li:nth-child(n)第n个

#uu li:empty 选择空的

#uu li:not(#zz) 选择不是#zz 的

<style type="text/css">
    #uu li:first-child{
    }
    #uu li:last-child{
    }
    #uu li:nth-child(4){
    }
    #uu li:empty{
    }
    #uu li:not(#zz){
    }
</style>
<body>
    <ul id="uu">
        <li>文本</li>
        <li id="aa">文本</li>
        <li>文本</li>
         <li></li>
        <li>文本</li>
        <li di="zz">文本</li>
    </ul>
</body>

10、属性选择器

用法：

<style type="text/css">
    input[name]{
    }
    input[name="uname"]{
    }
    input[typ="password"]{
    }
</style>
<body>
    <input type="text" name="uname"/><br/>
    <input type="text" name="qq"/><br/>
    <input type="password" name="ss"/><br/>
    <input type="text"/><br/>
</body>

11、权重

行内权重–>id–>class–>标签选择器 eg:img (从大到小)

12、`css`属性

font-family:宋体 (黑体、楷体)

letter-spacing 字母间距

word-spacing 单词间距

direction:rtl 文本显示在右方

text-shadow:7px 7px red 阴影

overfiow:hidden/scroll/auto 出了div的文字删除/滚动条/滚动条

cursor:crosshair/pointer鼠标十字/手的样式

13、`css` 外联

1、先写一个css文件 .css

2、索引进html中用link

<html>
    <head>
        <link href="<!--css文件名-->" type="test/css" rel="stylesheet"/>
    </head>
    <body>
    </body>
</html>

`JS:即JavaScript`

主要是DOM部分的应用

编程语言：变量、表达式、句子、流程控制语句、函数、类

表达式：条件表达式、逻辑表达式、算数表达式

条件表达式：2>3

逻辑表达式：true or false x+y>10

算数表达式：2+3、2*3

测试：测所有的可能、

一、基础知识

1、数据类型

//单行注释 /* */多行注释

number 数字类型

underfined 未定义类型

string 字符串类型

boolean 布尔类型（只有真假）

object 对象类型（把空、数组类型认为是对象类型）

array 数组类型

null 空类型

NAN无法运算时

<script type="text/javascript">
	//文档对象 document
	document.write("<hr/>");
	document.write("<img src=''/>");
	document.write("<hr/>");
	//变量的定义 var
	var a=10;
	document.write("a="+a); //+是拼接的意思
	x=10；
	document.write(x);  //a、x 在这里面相当于一个盒子（或地址的名字），盒子里放的10
	a="hello"
	document.write(x);
	var y;//只声明变量
	document.write(typeof(y));//查找y的类型
	y=ture;//布尔值（ture/false）
	y=["aa","bb",1,"cc" ]//数组
	y=new array("aa","bb",1,"cc");//数组
	y=null;//空
</script>

2、`object`对象类型

<script type="text/javascript">
	//第一种写法
	var person=new object;
	persion.name=uu;
	persion.age=20
	document.write("persion.name");
	document.write("persion.age");
	//第二种写法
	var stu={
		name:"qq"
		age:18,
		sex="man"
	}
	document.write("stu.name");
	document.write("stu.sex");
</script>

3、`document`对象

<script type="text/javascript">
document.write("<h6>'甜蜜蜜'</h6>");
document.write("<hr/>");
document.write("<div id='div1'><img id='img1' src=''/></div>");
document.write("<ul><li>qq</li><li>ww</li><li>ds</li><li>xs</li><li>cc</li></ul>");
</script>

4、算数运算符

特点：参与运算的是数字，结果也是数值

赋值运算符：= 将右边复制给左边

+、-、*、/、%、++、--

++/--自增或自减1

<script type="text/javascript">
	var x=10,y=3
	document.write("x="+x+" y="+y);
	document.write("x+y="+(x+y));
	x=2;
	y=2+3*x++;   //本身先参与运算再自增 y=8
	document.write("x="+x+" y="+y);
	x=2;
	y=2+3*++x;   //本身先自增再参与运算 y=11
	document.write("x="+x+" y="+y);
</script>

5、关系运算符

特点：参与的一般也是数字，结果是一个布尔

>、>=、<、<=、!=、==

<script type="text/javascript">
	var a=10,b=3
	document.write("a="+a+" b="+b);document.write("<br/>");
	document.write("a>b?---"+(a>b));
	document.write("a< b?---"+(a< b));  //小于号后面加空格，要不就容易变成标签
	document.write(2=="2");   //只判断值不判断类型
	document.write(2==="2");  //既判断类型也判断值
</script>

6、逻辑运算符

&&、||、！ and、or、not

短路：a && b，若a为假，则后面不运算；a || b，若a为真，则后面不做运算。

&、|不会短路

<script type="text/javascript">
	var a=true,b=false
	document.write("a && a---"+(a&&a));document.write("<br/>");
	document.write("a || b---"+(a||b));document.write("<br/>");
	document.write("!a---"+(!a)); document.write("<br/>");
	x=10,y=3;
	z = x*3>y*5
	v = y/5>x*2
	jieguo1 = z && v;
	document.write(jieguo1);
</script>

7、位运算符（了解）：二进制相同位置上的运算

&、|、~、与、或、非 同时为1才为1

二进制：物理上最容易实现开和关

~首位为1是正，首位是0为负（取反加1）

^相异为真，相同为假

<script type="text/javascript">
	a=8,b=7;
	document.write("a="+a+" b="+b);document.write("<br/>");
	//a&b 结果为 0   8 是   0000 1000		10 是  0000 1010
					7 是 & 0000 0111		 ！10是  1111 0101 
                    结果    0000 0000      取反加1是0000 1011=-11
	document.write("a & b--"+(a&b)); document.write("<br/>");
	document.write("");  
	document.write(""); document.write("<br/>"); 
	document.write("");  
</script>

8、运算符的优先级

位的移动<< >> >>>（了解）

左移右移

a=8 a<<2 a=32

a=8 a>>2 a=2

=赋值运算级别最低

9、`js`的打log

<script type="text/javascript">
	var a=10;
	console.log("a="+a);//网页上看不见，可以右击，检查-控制台
	document.write("a="+a); document.write("<br/>"); 
</script>

10、流程控制语句（控制语句的执行，可以跳过一些，选择一些）

10.1 条件语句(`if else`)

单个语句

<script type="text/javascript">
	//单分支
	var a=10;
	if(a>0){
		document.write("a是大于0的");
	}
	//双分支
	if()
</script>

if - else嵌套语句

<script type="text/javascript">
	//成绩   90 A 80 B 70 C 60 D  不及格
	var cj=88;
	if(cj>=0 && cj<=100){
		if(cj>=90){
			document.write("A");
		}else if(cj>=80){
			document.write("B");
		}else if(cj>=70){
			document.write("C");
		}else if(cj>=60){
			document.write("D");
		}else{
			document.write("不及格");
		}
	}else{
		document.write("无效成绩")
	}		
</script>

10.2 分支语句

switch ->case break-> default 语句

<script type="text/javascript">
	var day=4;
	switch(day){
		case 1:
			document.write("凉拌面");
			break;
		case 2:
			document.write("油泼面");
			break;
		case 3:
			document.write("剁椒面");
			break;
		case 4:
			document.write("炒拉条");
			break;
		case 5:
			document.write("驴蹄子");
			break;
		default:
			documrnt.write("吃大餐");
			break;
	}
</script>

switch ->case break-> default 语句2

<script type="text/javascript">
    var yue=4;
    //123 春天	456 夏天	789 秋天	10 11 12 冬天
    switch(yue){
        case 1:
        case 2:
        case 3:
            document.write("春天");
            break;
        case 4:
        case 5:
        case 6:
            document.write("炎热的夏天");
            break;
        case 7:
        case 8:
        case 9:
            document.write("凉爽的秋天");
            break;
        case 10:
        case 11:
        case 12:
            document.write("寒冷的冬天");
            break;
        default:
            document.write("无效值");
            break;
    }
</script>

10.3 循环语句

while 循环语句

<script type="text/javascript">
	/*
	while(条件表达式){
		循环块；
	}
	*/
	//打印三次hello world
	/*document.write("Hello world");
	document.write("Hello world");
	document.write("Hello world");*/
			
	var i=0;
	while(i<3){
		document.write("hello Wolrd");
		document.write("<br/>");
		i++;//变化可以让循环最终停下来
		console.log("i="+i);
	}
	//计算1---5之间的和
	document.write("<hr/>");
	var sum=0;//定义一个变量来接收结果
	var i=1;
	while(i<=5){
		//sum=sum+i;
		sum+=i;
		i++;
	}
	document.write("1---5之间的和==="+sum);
	document.write("<hr/>");
	//计算1--100之间偶数的和
	sum=0;
	i=1;
	while(i<=100){
		if(i%2==0){
			sum+=i;
		}
		i++;
	}
	document.write("1-100之间偶数的和==="+sum);
	document.write("<hr/>");
	sum=0;
	i=2;
	while(i<=100){
		sum+=i;
		i+=2;
	}
	document.write("1-100之间偶数的和==="+sum);
</script>

do while 循环语句

<script type="text/javascript">
	/*
	do{
		循环块;
	}while(条件表达式);
	*/
	var i=0;
	do{
		document.write("Hello world");
		document.write("<br/>");
		i++;
	}while(i<3);
	document.write("<hr/>");
	//计算1--5之间的和
	var sum=0;
	i=1;
	do{
		sum+=i;
		i++;
	}while(i<=5);
	document.write("计算1--5之间的和==="+sum);
	document.write("<hr/>");
	//计算1--100之间奇数的和
	sum=0;
	i=1;
	do{
		if(i%2!=0){
			sum+=i;
		}
		i++;
	}while(i<=100);
	document.write("1--100之间奇数的和==="+sum);
	document.write("<hr/>");
	sum=0;
	i=1;
	do{
		sum+=i;
		i+=2;
	}while(i<=100);
	document.write("1--100之间奇数的和==="+sum);
</script>

for 循环

<script type="text/javascript">
	/*
	for(初始条件;判断条件;改变语句){
		执行块;
	}
	*/
	for(var i=0;i<3;i++){
		document.write("Hello world");
		document.write("<br/>");
	}
	//1--5的和
	sum=0;
	for(var i=1;i<=5;i++){
		sum+=i;
	}
	document.write("1--5的和==="+sum);
	document.write("<hr/>");
	//1--100之间偶数的和
	sum=0;
	for(var i=2;i<=100;i+=2){
		console.log("i+"+i);
		sum+=i;
	}
	document.write("1--100之间偶数的和==="+sum);
</script>

11、循环的嵌套

11.1 嵌套循环打印长方形

<script type="text/javascript">
	/*
    *****
    *****
    *****
    *****
    *****
    */
    i=1;
    while(i<=5){
    	j=1
    	while(j<=5){
    		document.write("*\t");
    		j++;
    	}
    	i++;
    	document.write("<br/>")
    }
    
    /*
    1-1 1-2 1-3
    2-1 2-2 2-3
    3-1 3-2 3-3
    一般把循环嵌套外面的循环叫外循环，里面的循环叫内循环
    外循环控制的是行，内循环值控制的是列
    */
    hang=1;
    while(hang<=3){
    	lie=1;
    	while(lie<=3){
    		document.write(hang+"-"+lie+"\t");//`\t`是转义字符是四个空格
    		lie++;
    	}
    	document.write("<br/>");
    	hang++;
    }
</script>

11.2 嵌套循环打印三角形

<script type="text/javascript">
	/*
    *
    **
    ***
    ****
    *****
    */
    i=1
    whlie(i<=5){
    	j=1;
    	while(j<=i){
    		document.write("*\t")
    		j++;
    	}
    	i++;
    	document.write("<br/>")
    }
    
</script>

11.3 循环嵌套3`for`

<script type="text/javascript">
	/*
	*****
	*****
	*****
	*****
	*****
	*/
	for(i=1;i<=5;i++){
		for(j=1;j<=5;j++){
			document.write("*\t");
		}
		document.write("<br/>");
	}
	document.write("<hr/>");
	/*
	*
	**
	***
	****
	*****
	*/
	for(i=1;i<=5;i++){
		for(j=1;j<=i;j++){
			document.write("*\t");
		}
		document.write("<br/>");
	}
	document.write("<hr/>");
	/*
	*****
	****
	***
	**
	*
	*/
	for(i=1;i<=5;i++){
		for(j=1;j<=6-i;j++){
			document.write("*\t");
		}
		document.write("<br/>");
		}

11.4 循环嵌套九九乘法表

<script type="text/javascript">
	for(i=1;i<=9;i++){
		for(j=1;j<=i;j++){
			document.write(j+"*"+i+"="+(i*j)+"&nbsp;&nbsp;&nbsp;&nbsp;");
		}
		document.write("<br/>");
	}
	document.write("<hr/>"); 
</script>

11.5 循环嵌套三角形

<script type="text/javascript">
	/*
    *
   * *
  * * *
 * * * *
* * * * *
    *     1  5
   **     2  45
  ***     3  345
 ****     4  2345
*****     5  12345

*/
		for(var i=1;i<=5;i++){
			for(var j=1;j<=5;j++){
				if(j>=6-i){
					document.write("*&nbsp;&nbsp;");
				}else{
					document.write("&nbsp;&nbsp;");
				}
			}
			document.write("<br/>");
		}
</script>

11.6 循环嵌套菱形

<script type="text/javascript">
/*
    *
   * *
  * * *
 * * * *
* * * * *
 * * * *
  * * *
   * *
    *
    *
   **
  ***
 ****
*****
 ****
  ***
   **
    *
	    i     j
    *   1     5
   **   2    45
  ***   3   345
 ****   4  2345
*****   5 12345
           j>=6-i
 ****   6  2345
  ***   7   345
   **   8    45
    *   9     5
	       j>=i-4
 */
	//菱形 九行五列
	for(var i=1;i<=9;i++){
		//分成上下两部分
		if(i<=5){//上半部分
			//前五行 i 12345
			for(var j=1;j<=5;j++){
				if(j>=6-i){
					document.write("*&nbsp;&nbsp;");
				}else{
					document.write("&nbsp;&nbsp;");
				}
			}
		}else{
			//后四行 i 6789
			for(var j=1;j<=5;j++){
				if(j>=i-4){
					document.write("*&nbsp;&nbsp;");
				}else{
					document.write("&nbsp;&nbsp;");
				}
			}
				
		}
		document.write("<br/>");
	}
</script>

11.7

<html>
	<head>
		<title>js的循环嵌套7增强01</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
		</style>
		
	</head>
	<body>
	<script type="text/javascript">
/*
1    1    1
  2  2    2
3 3  3  3 3
  4  4    4
5    5    5
*/
		for(var i=1;i<=5;i++){
			for(var j=1;j<=5;j++){
				if(i==3||j==3||j==5||(j==2&&(i==2||i==4))||(j==1&&(i==1||i==5))){
					document.write(i+"&nbsp;&nbsp;");
				}else{
					document.write("&nbsp;&nbsp;&nbsp;&nbsp;");
				}
			}
			document.write("<br/>");
		}

	</script>	
	</body>
</html>

11.8 遍历1–n

<html>
	<head>
		<title>js的循环嵌套7增强02</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
		</style>
		
	</head>
	<body>
	<script type="text/javascript">
/*
求100以内的质数
*/
		//用外循环遍历2--100之间的数
		for(var i=2;i<=100;i++){
			//判断i是不是质数
			//首先写一个标志位记录这个i是不是质数  
			var isZhi=true;
			//用i去除比它小的所有数
			for(var j=2;j < i;j++){
				//一旦有一个数被除尽  说明其不是质数  直接退出
				if(i%j==0){
					console.log(i+"---"+j);
					isZhi=false;
					break;//退出循环
				}
			}
			//判断这个数是不是质数
			if(isZhi){
				document.write(i+",");
			}
		}

	</script>	
	</body>
</html>

11.9 完数

<html>
	<head>
		<title>js的循环嵌套8增强03完数</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
		</style>
		
	</head>
	<body>
	<script type="text/javascript">
/*
一个数如果恰好等于它的因子之和，这个数就称为 "完数 "。例如6=1＋2＋3.编程 找出1000以内的所有完数。
*/
			//循环2-1000所有的数
			for(var i=2;i<=1000;i++){
				//判断i是不是完数
				//首先要求出i的因子之和
				sum=0;
				//求因子
				for(var j=1;j < i;j++){
					if(i%j==0){//除尽 说明j是i的因子
						if(i==496){
							console.log(j+"----");
						}
						sum+=j;
						//sum=sum+j;
					}
					
				}
				//判断因子之和是不是等于自己 如果是 说明是完数
				if(sum == i){
					document.write(i+",");
				}
			}

	</script>	
	</body>
</html>

18、`break和continue`

<html>
	<head>
		<title>js的循环停止</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
		</style>
		
	</head>
	<body>
	<script type="text/javascript">
		for(i=1;i<=5;i++){
			if(i==3){
				break;
			}
			document.write(i+",");
		}
		document.write("<br/>");
		for(i=1;i<=5;i++){
			if(i==3){
				continue;
			}
			document.write(i+",");
		}
		document.write("<hr/>");
		for(i=1;i<=5;i++){
			for(j=1;j<=5;j++){
				if(j==3){
					break;
				}
				document.write(i+"---"+j+"\t");
			}
			document.write("<br/>");
		}
		document.write("<hr/>");
		for(i=1;i<=5;i++){
			for(j=1;j<=5;j++){
				if(j==3){
					continue;
				}
				document.write(i+"---"+j+"\t");
			}
			document.write("<br/>");
		}

	</script>	
	</body>
</html>

二、函数（最重要的是参数和返回值）

1、系统函数

alert("警告信息") 弹出一个警告框

prompt("提示信息","默认输入的信息") 弹出提示框，可以与用户交互

parseInt("string字符串") 将string转换为number

confirm("确认信息--你真的要删除吗") 弹出对话框，点击”确定“按钮返回true，点击取消则返回false

setTimeout (“要执行的函数”，多少毫秒之后执行此函数) 在指定时间后执行函数

setInterval("函数或方法"，时间) 启动定时器

clearInterval关闭定时器

<html>
	<head>
		<title>系统的一些函数</title>
		<meta charset="utf-8"/>
		<style type="text/css">	
		</style>
	</head>
	<body>
	<script type="text/javascript">
		alert("这是一个警告框");
		var age = prompt("请输入你的年龄","20");
		document.write("用户的年龄:"+age);
		document.write("<br/>");
		
		document.write(typeof(age));document.write("<br/>");
		//age=age+2;
		document.write("修改后的年龄:"+age);document.write("<br/>");
		age=parseInt(age);//将string转换为number
		age+=2;
		document.write(typeof(age));document.write("<br/>");
		document.write("修改后的年龄:"+age);document.write("<br/>");
		var xz=confirm("你要删除吗");
		document.write(xz);document.write("<br/>");
		setTimeout("alert('砰。。。。')",10000);	
	</script>	
	</body>
</html>

2、自定义函数

function 函数名(参数1,参数2,…){

函数体

return 语句;

}

函数的关键字–function，函数名(驼峰命名，见名知意)–区别和调用

驼峰命名

大驼峰：每个单词首字母都是大写 eg:GetName
小驼峰：第一个单词首字母小写eg:getName

x,y 形参----形式参数也是变量----可以接收实参的值

实参—实际参数也就是调用函数的时候传递过来的值

返回值–就是函数的结果，调用者可以接收返回值得到函数的结果

return 关键字

作用1 结束这个函数
作用2 是返回结果

调用函数：事件名=函数名(参数)

2.1 自定义函数1

<html>
	<head>
		<title>自定义函数1</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
		</style>
		
	</head>
	<body>
	<script type="text/javascript">
		//首先函数的结构
		/*
			function 函数名(参数列表){
				函数体
				return 语句;
			}
		*/
		//计算两个数之和
		/*
		参数   有没有参数   有
		     有一个  一般是什么类型
		返回值
		     有没有返回值  有  返回什么
		*/
		//函数的声明 定义
		function oneAndOne(a,b){//a,b叫形参
			return a+b;
		}
		//调用函数
		var jieguo1 = oneAndOne(10,2);//10 2 叫实参  按顺序传递  a=10 b=2
		document.write(jieguo1);
		document.write("<br/>");
		var jieguo2=oneAndOne(999,888);
		document.write(jieguo2);
		document.write("<br/>");				
	</script>	
	</body>
</html>

2.2 自定义函数2

求1–n之间的偶数和
打印任意大小的正方形
打印任意大小的菱形

<html>
	<head>
		<title>自定义函数2</title>
		<meta charset="utf-8"/>
	</head>
	<body>
	<script type="text/javascript">
		//1 写一个函数 求1--n之间的偶数的和
		//参数和返回值
		//有  一个  n
		//有  sum
		function getOuSum(n){
			var sum=0;
			for(var i=2;i<=n;i+=2){
				sum+=i;
			}
			return sum;
		}
		var jieguo1=getOuSum(100);
		document.write(jieguo1);
		document.write("<hr/>");
		/*
			打印一个任意大小边的正方形
		*/
		function printSquare(n){
			for(var i=1;i<=n;i++){
				for(var j=1;j<=n;j++){
					document.write("*&nbsp;&nbsp;&nbsp;");
				}
				document.write("<br/>");
			}
		}
		printSquare(1);
		printSquare(1);
		printSquare(1);
		document.write("<hr/>");
		/*
		打印一个任意大小的菱形
		有参数  而且必须是奇数
		如果不是奇数  提示错误
		
	  九行九列
	                i       j           左         右
      *             1       5           6-i        i+4
     ***            2      456
    *****           3     34567
   *******          4    2345678
  *********         5   123456789           
   *******          6    2345678        i-4        14-i
    *****           7     34567
     ***            8      456
      *             9       5
		*/
		function printLing(n){
			if(n%2==0){
				document.write("请传入一个奇数");
				return;
			}
			zhong = (n+1)/2;
			for(var i=1;i<=n;i++){
				if(i<=zhong){
					for(var j=1;j<=n;j++){
						if(j>=zhong+1-i && j<=i+zhong-1){
							document.write("*");
						}else{
							document.write("&nbsp;&nbsp;");
						}
					}
				}else{
					for(var j=1;j<=n;j++){
						if(j>=i-(zhong-1) && j<=n+zhong-i){
							document.write("*");
						}else{
							document.write("&nbsp;&nbsp;");
						}
					}
				}
				document.write("<br/>");
			}
		}
		printLing(15);
		
	</script>	
	</body>
</html>

2.3 自定义函数3

判断一个数是不是质数
判断一个数是不是完数

<html>
	<head>
		<title>自定义函数3</title>
		<meta charset="utf-8"/>
	</head>
	<body>
	<script type="text/javascript">
		//写一个函数  判断一个数是不是质数
		//有 一个数n
		//有  bool(布尔值)
		function isZhiShu(n){
			//直接除所有比他小的数 如果有除尽就结束  
			for(var i=2;i<n;i++){
				if(n%i==0){
					//说明n不是质数了
					return false;//只要遇到return 函数直接结束
				}
			}
			//循环出来了 说明都没有除尽  说明n是质数了
			return true;
		}
		var jieguo1=isZhiShu(10);
		document.write(jieguo1);
		jieguo1=isZhiShu(17);
		document.write(jieguo1);
		for(var i=2;i<=100;i++){
			jieguo1=isZhiShu(i);
			document.write(i+"是不是质数？---"+jieguo1);
			document.write("<br/>");
		}
        /*
		2:判断一个数是不是完数
		参数  n
		返回值  bool
		完数   因子之和=自己
		*/
		function isWanShu(n){
			sum=0;
			for(var i=1;i<n;i++){
				if(n%i==0){
					sum+=i;
				}
			}
			if(sum==n){
				return true;
			}
			return false;
		}
		for(var i=2;i<=1000;i++){
			if(isWanShu(i)){
				document.write(i+",");
			}
		}
	</script>	
	</body>
</html>

2.4 自定义函数4

一个数的三倍加1
两个数之和
任意大小的直角三角形
1–n之间的和
一个数的阶乘

<html>
	<head>
		<title>自定义函数5</title>
		<meta charset="utf-8"/>
	</head>
	<body>
	<script type="text/javascript">
		//一个数的三倍加1
		function fun1(n){
			return 3*n+1;
		}
		var jieguo1=fun1(10);
		document.write(jieguo1);
		document.write("<hr/>");
		//两个int之和
		function fun2(a,b){
			return a+b;
		}
		he1=fun2(10,30);
		document.write(he1);
		document.write("<hr/>");
		he1=fun2("qq","ww");
		document.write(he1);
		document.write("<hr/>");
		//打印一个任意大小的直角三角形
		/*
*
**
***
****
*****
	     */
		function daYinZj(n){
			for(var i=1;i<=n;i++){
				for(var j=1;j<=i;j++){
					document.write("*&nbsp;");
				}
				document.write("<br/>");
			}
		}
		document.write("<hr/>");
		daYinZj(5);
		daYinZj(1);
		document.write("<hr/>");
		//求1---n之间的和
		function getSumToN(n){
			sum=0;
			for(var i=1;i<=n;i++){
				sum+=i;
			}
			return sum;
		}
		var jieguo1=getSumToN(5);
		document.write(jieguo1);
		document.write("<hr/>");
		//求一个整数的阶乘
		function getJc(n){
			var jc=1;
			for(var i=1;i<=n;i++){
				jc *= i;
			}
			return jc;
		}
		var jc1=getJc(5);
		document.write(jc1);
		document.write("<hr/>");
		//5 4 3 2 1
		function getJc2(n){
			var jc=1;
			for(;n>=1;n--){
				jc*=n;
			}
			return jc;
		}
		var jc2=getJc2(5);
		document.write(jc2);
		document.write("<hr/>");
	</script>	
	</body>
</html>

2.5 自定义函数 5 遍历数组1

定义数组：arr[1,2,3]``[] 里面放什么都可以，可以是数也可以是字符串，字符串要加" "

arr是数组名可以任意起名字

arr.length指的是arr 数组的长度

数组里第一个元素是arr[0]

<script type="text/javascript">
	function bianLi(arr){
		for(i=0;i< arr.length;i++){
			document.write(arr[i]);
			document.write("<br/>");
		}
	}
	arr1=[1,2,3,4,7,9];
	bianLi(arr1);
</script>

2.6 自定义函数 6遍历数组2

<script type="text/javascript">
	function bianLi(arr){
		for(var key in arr){//key 是数组的下标
			document.write(arr[key]+",")
		}
	}
</script>

2.7 自定义函数7

方法的功能要保持单一性，方便组合新的方法

返回两个数较大的一个
返回三个数较大的一个
返回一个数组中的最大值

<script type="text/javascript">
	//写一个函数 返回两个数比较大的一个
	function getMax(a,b){
		if(a==b){
			document.write("两个数相等");
			return;
		}
		if(a>b){
			return a;
		}
		return b;
	}
	//写一个函数 求三个数中最大的
	function getMaxInThreeNum2(a,b,c){
		bigger = getMax(a,b);
		if(bigger>c){
			return bigger;
		}
		return c;
	}
		max1=getMaxInThreeNum2(1099,88,9);
		document.write(max1);
		document.write("<hr/>");
	//求一个数组中的最大值
	function getMaxInArr(arr){
		max=arr[0];//最大值是数组中的一个值
		for(var key in arr){
			if(arr[k]>max){
				max=arr[k];
			}
		}
		return max;
	}
</script>

2.8点击事件1

点击换人名

<html>
	<head>
		<title>自定义函数10</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			#div1{
				width:100px;
				height:60px;
				background-color:green;
			}
		</style>
	</head>
	<body>
	<button onclick="fun1()">点击</button>
	<div id="div1"><h1>孙坚</h1></div>
	<script type="text/javascript">
		var names=["宝玉","黛玉","宝钗","张飞","关羽","刘备"];
		var index=0;//人的下标 
		//获取div的对象
		//getElementById("元素的id");  通过ID获取对象
		var div1=document.getElementById("div1");
		function fun1(){
			index=index%names.length;
			//console.log(index);
			var ren=names[index];
			console.log(ren);
			div1.innerHTML="<h1>"+ren+"</h1>";
			index++;
		}
	</script>	
	</body>
</html>

2.9 点击事件2

点击换照片

<html>
	<head>
		<title>自定义函数11</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			#img1{
				width:160px;
				height:200px;
			}
		</style>
		
	</head>
	<body>
	<button onclick="fun1()">点击</button>
	<img id="img1" src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2814949620.webp"/>
	
	<script type="text/javascript">
		var lang="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2687464822.jpg";
		var killer="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2814949620.webp";
		var isLang=false;
		var img1=document.getElementById("img1");
		function fun1(){
			//alert("qq");
			
			if(isLang){
				img1.setAttribute("src",killer);
			}else{
				img1.setAttribute("src",lang);
			}
			isLang = !isLang;
		}
	</script>	
	</body>
</html>

3 递归函数

函数自己调用了自己，一个是要有一个出口，第二个是要找到规律

常见例子：阶乘(规律：n!=n*(n-1)!)、斐波那契数列(规律：后一项是前两项之和，f(1)=1,f(2)=1)

<script type="text/javascript">
    //阶乘
    //先写出口。再写规律
    function  jieCheng(n){
        if(n==1){
            return 1;
        }
        return n*(jeiCheng(n-1));
    }
    //斐波那契数列 n表示第几个数
    //1 1 2 3 5 8 13 21 34 ...
    function getFbnq(n){
        if(n==1||n==2){
            return 1;
        } 
        return getFbnq(n-1)+getFbnq(n-2);
    }
    //桃子问题
    function getPeach(day){
        if(day==10){
            return 1;
        }
        return 2*getPeach(day+1)+2; 
    }
    for(i=10;i>=1;i--){
    	peach=getPeach(i);
    	document.write("第"+i+"天的桃子数："+peach);
    	document.write("<br/>");
   }
</script>

4、js获取元素对象

通过id获取 getElementById("id")

通过标签名获取 getElementsByTagName("标签名")

通过类名获取 getElementsByClassName("类名")

通过name来获取 getElementsByName("name属性值")

作用：

修改标签属性：标签对象.setAttribute("属性名","属性值")
修改css属性：对象.style.css属性="属性值" 属性值是数组不用带引号

【注意】css属性中带- 的属性在js 中会把-去掉然后后面一个单词的首字母大写，eg:backgrond-color--->backgrondColor

4.1 `js`获取元素1

4.2 `js`获取元素2

<html>
	<head>
		<title>js控制元素002</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			#div1{
				width:200px;
				height:200px;
				background-color:blue;
			}
			img{
				width:150px;
				height:150px;
			}
		</style>
	</head>
	<body>
		<img id="img1" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p501177648.jpg"/>
		<img  src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2401676338.jpg"/>
		<img  src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p479682972.jpg"/>
		<img  src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2563780504.jpg"/>
		<img  src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2614988097.jpg"/>
		<hr/>
		<button onclick="fun1()">按钮</button>
		<hr/>
		<button onclick="fun2()">按钮2</button>
		<img id="img2" src="https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2869045783.jpg"/>
	<script type="text/javascript">
		imgs=["https://img9.doubanio.com/view/photo/s_ratio_poster/public/p513344864.jpg",
		"https://img2.doubanio.com/view/photo/s_ratio_poster/public/p579729551.jpg",
		"https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2868462052.jpg",
		"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2395733377.jpg",
		"https://img1.doubanio.com/view/photo/s_ratio_poster/public/p1512562287.jpg"];
		var index=0;
		function fun2(){
			if(index == imgs.length){
				index = 0;
			}
			//首先获取对象
			img2 = document.getElementById("img2");
			img2.setAttribute("src",imgs[index]);
			index++;
		}
		function fun1(){
			//获取界面的所有图片--根据标签名获取所有的一种标签对象
			images=document.getElementsByTagName("img");
			console.log(images);
			//用一个循环一张张赋值
			for(var key in imgs){	
				//0 1 2 3 4 
				//当前的图片对象是 images[key]  imgs[key]
				console.log(key);
				images[key].setAttribute("src",imgs[key]);
			
			}
		}
	</script>	
	</body>
</html>

4.3 `js`获取元素3

<html>
	<head>
		<title>js控制元素003</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			div{
				width:200px;
				height:200px;
				background-color:red;
			}
		</style>	
	</head>
	<body>
		<div id="div1"></div>
		<button onclick="fun1()">按钮</button>
	<script type="text/javascript">
	//改变div背景颜色
		colors=["orange","yellow","green","blue","cyan","purple","pink"]
		div1=document.getElementById("div1");
		index=0;
		function fun1(){
			index=index%colors.length;
			div1.style.backgroundColor=colors[index];
			index++;
		}
	</script>	
	</body>
</html>

4.4 `js`获取元素4

<html>
	<head>
		<title>js控制元素004</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				border:3px solid white;
			}
			#div1{

				background-color:blue;
			}
			#div2{
				background-color:red;
			}
			#div3{
				background-color:yellow;
			}
			#div4{
				background-color:green;
			}
			#div5{
				background-color:orange;
			}
			img{
				width:150px;
				height:150px;
			}	
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
		<div id="div5"></div>
		<hr/>
		<button onclick="fun1()">按钮</button>
	<script type="text/javascript">
		colors=["red","orange","green","cyan","purple"];
		var index=0;
		function fun1(){
			index = index % colors.length;
			//获取所有的div对象
			divs=document.getElementsByTagName("div");
			divs[index].style.borderColor=colors[index];
			index++;
		}
	</script>	
	</body>
</html>

4.5 `js`获取元素5

<html>
	<head>
		<title>js控制元素005</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
			img{
				width:150px;
				height:150px;
			}
			.img1{
				border:3px solid red;
			}
		</style>
		
	</head>
	<body>
		<img class="img1" src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg"/>
		<img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2626308994.jpg"/>
		<img class="img1" src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614949805.jpg"/>
		<img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2516578307.jpg"/>
		<img class="img1" src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2360940399.jpg"/>
		<button onclick="fun1()">按钮</button>

	<script type="text/javascript">
		imgs=["https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2574551676.jpg",
		"https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2572166063.jpg",
		"https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614359276.jpg"];
		var index=0;
		function fun1(){
			index=index % imgs.length;
			images=document.getElementsByClassName("img1");
			images[index].setAttribute("src",imgs[index]);
			index++;
		}
	</script>	
	</body>
</html>

4.6 js获取元素6

<html>
	<head>
		<title>js控制元素006</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
			*{
				margin:10px;
			}
		</style>
		
	</head>
	<body>
		用户名：<input type="text" name="uname"/><br/>
		密码：<input type="text" name="upw"/><br/>

		<button onclick="fun1()">按钮</button>

	<script type="text/javascript">
		user=["qq","123"];
		function fun1(){
			uname=document.getElementsByName("uname")[0];
			upw=document.getElementsByName("upw")[0];
			uname.value=user[0];
			upw.value=user[1];
		}
	</script>	
	</body>
</html>

4.7`js`获取元素7

<html>
	<head>
		<title>js控制元素007</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
			*{
				margin:10px;
			}
		</style>
		
	</head>
	<body>
		用户名：<input type="text" name="uname"/><br/>
		密码：<input type="text" name="upw"/><br/>

		<button onclick="fun1()">按钮</button>

	<script type="text/javascript">
		users=[{name:"qq",mima:"123"},
				{name:"张飞",mima:"222"},
				{name:"关羽",mima:"sx"},
				{name:"曹操",mima:"999"},
				{name:"刘备",mima:"888"}
				];
		uname=document.getElementsByName("uname")[0];
		upw=document.getElementsByName("upw")[0];
		index=0;
		function fun1(){
			index=index%users.length
			uname.value=users[index].name;
			upw.value=users[index].mima;			
			index++;
		}
	</script>	
	</body>
</html>

4.8`js`获取元素8

<html>
	<head>
		<title>js控制元素008</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
			*{
				margin:10px;
			}
		</style>
		
	</head>
	<body>
		请选择性别:<br/>
		男:<input type="radio" name="sex" value="man"/><br/>
		女：<input type="radio" name="sex" value="woman"/><br/>

		<button onclick="fun1()">按钮</button>
		请选择喜欢的歌：<br/>
		棋子:<input type="checkbox" name="music" value="qz"/><br/>
		偷心:<input type="checkbox" name="music" value="tx"/><br/>
		香水有毒:<input type="checkbox" name="music" value="xs"/><br/>
		冲动的惩罚:<input type="checkbox" name="music" value="cddcf"/><br/>
		爱是你我:<input type="checkbox" name="music" value="asnw"/><br/>
		<button onclick="fun2()">按钮2</button>
	<script type="text/javascript">
		function fun2(){
			xz="";
			eles=document.getElementsByName("music");
			for(var key in eles){
				ele=eles[key];
				if(ele.checked){
					xz+=ele.value+",";
					console.log(xz);
				}
			}
			alert("用户喜欢的有--"+xz);
		}
		function fun1(){
			//首先根据单选框的name来获取所有元素
			eles = document.getElementsByName("sex");
			//console.log(eles);
			for(var key in eles){
				//eles[key]
				//console.log(eles[key]);
				ele=eles[key];
				if(ele.checked){
					alert("用户选择的是--"+ele.value);
				}
			}
		
		}
	</script>	
	</body>
</html>

4.9`js`获取元素9

<html>
	<head>
		<title>js控制元素009</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			
			*{
				margin:10px;
			}
		</style>
		
	</head>
	<body>
		<h6>欢迎注册：</h6>
		<form id="form1" action="#">
			用户名:<input type="text" name="uname"/><br/>
			密码:<input type="password" name="upw"/><br/>
		
		</form>
		<button onclick="fun1()">注册</button>
	<script type="text/javascript">
		function fun1(){
			//首先要获取form对象
			form1 = document.getElementById("form1");
			//console.log(form1);
			for(var key in form1){
				ele=form1[key];
				//根据名字来区分是哪一个 然后来获取用户的输入
				//console.log(ele.name);
				if(ele.name == "uname"){
					alert("用户名:"+ele.value);
				}else if(ele.name == "upw"){
					alert("密码:"+ele.value);
				}
			}
		}
	</script>	
	</body>
</html>

5、事件触发`onclick、onblur、onchange、ondblclick、onfocus、onkeyup、onload、onmouseout、onmouseover、onselect`

onblur 失去焦点(也就是光标离开输入框)触发

onchange 输入框内输入的内容发生改变后触发

onclick 单击对象后触发

ondblclick 双击对象后触发

onfocus 得到焦点时触发

onkeyup 键盘弹起时触发

window.onload=functon(){} (匿名方法–也叫回调方法)事件监听，监听的是页面加载完成，加载完成后自动调用function

onmouseout 鼠标离开触发 onmouseover 鼠标至于其上触发

onselect 全选时触发，

<html>
	<head>
		<title>js事件001</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			#div1{
				width:100px;
				height:100px;
				background-color:blue;
			}
			#div2{
				width:100px;
				height:100px;
				background-color:green;
				border:2px solid white;
			}
		</style>	
	</head>
	<body>
		<input id="in1" onblur="liKai()" type="text"/><br/>
		<input id="in2" onchange="gaiBian()" type="text"/><br/>
		<div id="div1" ondblclick="shuangJi()">
		
		</div>
		<input id="in3" onfocus="jiaoDianComming()" type="text"/><br/>
		<input id="in4" onkeyup="tanQi()" type="text"/><br/>
		<div id="div2" onmouseover="shuBiaoJin()" onmouseout="shuBiaoChu()">
		
		</div>
		<hr/>
		男：<input type="radio" name="sex" onchange="xuanZhong()" value="man"/><br/>
		女：<input type="radio" name="sex" onchange="xuanZhong()" value="woman"/><br/>
		<hr/>
		<select id="s1" onchange="gaiBian2()">
			<option>西安</option>
			<option>上海</option>
			<option>北京</option>
			<option>深圳</option>
			<option>广州</option>
		</select>
		<input type="text" onselect="quanXuan()" id="in10"/>
		
		
	<script type="text/javascript">
		function quanXuan(){
			in10 = document.getElementById("in10");
			alert(in10.value);
		}
		function gaiBian2(){
			s1=document.getElementById("s1");
			alert(s1.value);
		}
		function xuanZhong(){
			alert("0000");
			sexes=document.getElementsByName("sex");
			for(var key in sexes){
				zhi=sexes[key];
				if(zhi.checked){
					alert(zhi.value);
				}
			}
		}
		div2= document.getElementById("div2");
		function shuBiaoChu(){
			//console.log("鼠标离开了");
			div2.style.backgroundColor="green";
			div2.style.borderColor="white";
		}
		function shuBiaoJin(){
			//console.log("鼠标进来了");
			div2.style.backgroundColor="red";
			div2.style.borderColor="blue";
		}
		window.onload=function(){
			//事件监听
			//监听的是页面加载完成
			alert("页面加载完了");
		}
		div1= document.getElementById("div1");
		//匿名方法---回调方法
		div1.onclick=function(){
			alert("我被点击了");
		}
		function liKai(){
			in1 = document.getElementById("in1");
			alert("用户的输入是---"+in1.value);
		}
		function gaiBian(){
			in2 = document.getElementById("in2");
			alert("用户的输入是---"+in2.value);
		}
		function shuangJi(){
			//alert("我被双击了");
			div1= document.getElementById("div1");
			div1.style.backgroundColor="red";
		}
		function jiaoDianComming(){
			alert("你来了");
		}
		function tanQi(){
			in4 = document.getElementById("in4");
			console.log(in4.value);
		}
	</script>	
	</body>
</html>

5.1抓奖

<html>
	<head>
		<title>抓奖程序</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			*{
				margin:10px;
			}
			#div1{
				width:150px;
				height:60px;
				background-color:green;
			}
			
		</style>
		
	</head>
	<body>
		<div id="div1">
			<h1>悟空</h1>
		</div>
		
		<button onclick="kaiShi()">开始</button>
		<button onclick="ting()">停</button>
	<script type="text/javascript">
		var names=["八戒","唐僧","白骨精","蜘蛛精","白骨精","白骨精","白骨精","白骨精","白骨精","白骨精","黑熊怪","金角大王","如来","观音"];
		var div1=document.getElementById("div1");
		dsq=null;//定义一个计时器的对象
		function kaiShi(){
			dsq=setInterval("showName()",10);//使用dsq变量接收一个定时器的对象
		}
		function ting(){
			//让定时器停下来
			clearInterval(dsq);
			div1.innerHTML="<h1>八戒</h1>";
		}
		//写一个方法 来去改变名字
		var index=0;
		function showName(){
			index=index%names.length;
			namecur=names[index];
			namecur_nr="<h1>"+namecur+"</h1>";
			div1.innerHTML=namecur_nr;
			index++;
		}
	</script>	
	</body>
</html>

5.2 轮播图

<html>
	<head>
		<title>轮播图</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			*{
				margin:10px;
			}
			#img1{
				width:400px;
				height:300px;
			}
			
		</style>
		
	</head>
	<body>
		<img id="img1" onmouseover="ting()" onmouseout="jixu()" src="https://img9.doubanio.com/view/movie_gallery_frame_hot_rec/m/public/ed2e2888d2effb6.jpg"/>
		<br/>
		<button onclick="lastImg()">上一张</button>
		<button onclick="nextImg()">下一张</button>
	<script type="text/javascript">
		var dsq=null;
		window.onload=function(){
			//页面一加载完 就启动定时器
			dsq=setInterval("showImg()",1000);
		}
		function jixu(){
			dsq=setInterval("showImg()",1000);
		}
		function ting(){
			clearInterval(dsq);
		}
		var imgs=["https://img9.doubanio.com/view/movie_gallery_frame_hot_rec/m/public/ed2e2888d2effb6.jpg","https://img2.doubanio.com/view/movie_gallery_frame_hot_rec/m/public/19a1072e7ec03b2.jpg","https://img2.doubanio.com/view/movie_gallery_frame_hot_rec/m/public/cc5e7f948d3f8a1.jpg","https://img2.doubanio.com/view/movie_gallery_frame_hot_rec/m/public/f6868a415bf60ef.jpg","https://img1.doubanio.com/view/movie_gallery_frame_hot_rec/m/public/47d387c8e863907.jpg","https://img9.doubanio.com/view/movie_gallery_frame_hot_rec/m/public/9fa60a39642e964.jpg"];
		
		index=0;
		img1=document.getElementById("img1");
		function nextImg(){
			index++;
			if(index==6){
				index=0;
			}
			img1.setAttribute("src",imgs[index]);
		}
		function lastImg(){
			index--;
			if(index==-1){
				index=imgs.length-1;
			}
			img1.setAttribute("src",imgs[index]);
		}
		function showImg(){
			index=index%imgs.length;
			img1.setAttribute("src",imgs[index]);
			index++;
		}
	
	</script>	
	</body>
</html>

5.3 简单的动画

<html>
	<head>
		<title>简单的动画</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			#img1{
			    width:100px;
				height:100px;
				position:absolute;
				left:20px;
				top:50px;
			}
			#img2{
			    width:100px;
				height:100px;
				position:absolute;
				left:1200px;
				top:50px;
			}
			
		</style>
		
	</head>
	<body>
		<img id="img1" src="https://img2.baidu.com/it/u=1250419796,695826953&fm=253&fmt=auto&app=138&f=JPEG?w=441&h=436"/>
		
		<img id="img2" src="https://img1.baidu.com/it/u=3953567561,1235689747&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
	<script type="text/javascript">
			var dsq=null;
			window.onload=function(){
				dsq=setInterval("dong()",300);
			}
			var js=document.getElementById("img2");
			leftcs=1200;
			count=0;
			tmdcs=1;
			function dong(){
				leftzhi=leftcs-20*count;
				tmdzhi=tmdcs-0.01*count;
				if(leftzhi<=150){
					
					clearInterval(dsq);
					js.style.opacity=0;
				}else{
					js.style.opacity=tmdzhi;
					js.style.left=leftzhi;
					count++;
				}
			}
	</script>	
	</body>
</html>

6 根据`css`选择器获取元素

名字=document.querySelector("#img（id选择器）/.img（类选择器）/img（标签选择器）") 只选择第一个

名字=document.querySelectorAll("#img（id选择器）/.img（类选择器）/img（标签选择器）") 选择所有

7 `TCP和UDP、http和https、cookie和session`

cookie 客户端技术 cookie的信息存储在客户端机器上，可能被禁用，也可以被删除，安全性不高，存储的数量小，一般存储身份信息。

session 服务器技术 session存储在服务器上，用户不能操作，安全性高，存储数据量大。

8 cookie的存储和获取

split 分割

9 正则`(Regx)`表达式（了解）

正则表达式是对字符串操作的一种逻辑公式，用来表达式对字符串的一种过滤逻辑

zz=/[ ]/ 只控制一位 [123]第一位是1或2 或3中的一个

zz=/[123][abc]/ 第一位只能是123中的一个，第二位只能是abc中的一个

{ }表示的是几位

zz=/[123]{2}/ 两位都是123中的一个

zz=[1-9]{10} 10位1-9之间的数

zz=/^he/ 以he开头的字符串

zz=/ke$/ 以ke结束的字符串

zz=/^abc$/ 以abc 以abc结束（只有一个字符串满足就是它本身）

zz=/ab{2}/ a 后面两个b，再往后的字符不限制 zz=/ab{2,}/ a 后面两个到无穷多个b都可以

| 或 zz=/hi|hello|hehe/

. 表示啥都可以 zz=/a.{2,10}[1-9]/ a后面有2-10个任意字符之后还要有一个数字

zz=^.{3}$ 三个任意字符

zz=/^[1-9]{2}%$/ 百分之几十几

zz=/%[^0-9]%/ 百分号之间不能是0-9之间的数字

zz=/%\*%/ 百分号中间必须是*（ *本身有特殊含义，需要加转义字符）

以 ^ 开始以 $ 结束表示要求整个字符串完全匹配

\w 匹配字母数字下划线

\d 匹配0-9之间的数字

+指的是1到无穷个

* 表示0到无穷多个

9.1 `match` 方法

<body>
    请输入一个字符串：<input id="uname" type="text"/><br/>
    <button oncilick="pipei()">匹配</button>
    <p id="p1">结果</p>
    <script type="text/javascript">
        zz=/^abc$/;
        function pipei(){
            uname=document.getElementById("uname").value;
            p1=document.getElementById("p1");
            if(uname.match(zz)){
                p1.innerHTML="匹配成功";
            }else{
                p1.innerHTML="匹配失败";
            }
        }
    </script>
</body>

10 `js`的外链

将文件存成.js

<head>
    <script type="text/javascript" src="地址"></script>
</head>

编程界小学生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.6、前端笔记01

一、网页开发介绍【面试题：网页的实现】网页主要由三个部分组成：结构、表现、行为结构：网页的结构和内容，如：一个网页中包含文字。图片，音视频等，由HTML实现表现：设定网页的样式，如：字体的大小，颜色，图片形状，由CSS实现行为：控制用户和网页的交互，如：点击按钮请求等，由JavaScript实现总之，结构决定了网页是什么，表现决定了网页是什么样子，行为决定网页能做什么二、HTML简介1、概念标记：html中所有的操作都是通过标记实现的，标记就是一个标签，写法：<标签
复制链接

扫一扫