第一天 HTML
第一节 HTML简介
-
文件名后缀为.html或.htm
第二节 HTML基本标签
2.1 结构标签
<html><html>:根标签 <head></head>：头标签 <title></title>:页面的标题 <body></body>：主体标签：网页内容
2.2 排版标签
1.注释标签：<!--注释--> 2.换行标签：<br/> 3.段落标签：<p>文本文字</p> 特点：段与段之间有行高 属性：align对齐方式 (left：左对齐 center：居中 right：右对齐) 4.水平线标签:<hr/> 属性: width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示) size: 水平线的粗细 (像素表示，例如：10px) color:水平线的颜色 align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
2.3 标题标签
<h1></h1>—-<h6></h6> 随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；
2.4 容器标签
<div></div>:块级标签，独占一行，换行 <span></span>:行级标签，所有内容都在同一行 作用： <div></div>:主要是结合css页面分块布局 <span></span>:进行友好提示信息
2.5 列表标签
无序列表标签： <ul></ul>
属性：type :三个值，分别为
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
示例如下：
<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
有序列表标签：<ol></ol>
属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>
示例如下：
<ol type="I">有序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
-
定义列表
dl (defination list) 定义列表
dt (defination title) 定义标题
dd (defination description) 定义描述
代码示例
定义列表 <dl> <dt>苹果</dt> <dd>苹果是一种水果，富含维生素C，美容养颜，吃了长寿....</dd> </dl>
2.6 图片标签
<img/> 独立标签
属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度
height:高度
border:边框
align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明
title:图片的悬停显示
hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
2.7 链接标签
<a>文本或图片</a>
属性：
href:跳转页面的地址(跳转到外网需要添加协议)
target:_self(自己) _blank(新页面，之前页面存在) _parent _top 默认_self
_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
2.8 表格标签
-
table、tr、td、 th
-
colspan 属性，用法先扣再填
-
rowspan属性
2.9 文本格式化标签
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
第三节 HTML表单标签
3.1form标签
常用属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理 method:请求方式：get 和post enctype:表示是表单提交的类型 默认值：application/x-www-form-urlencoded 普通表单 multipart/form-data 多部分表单(一般用于文件上传) text/plain 普通文本 get: 1.数据存在地址栏中,请求参数都在地址后拼接 path?name=张三&password=123456 2.不安全 3.效率高 4.get请求大小有限制，不同浏览器有不同，但是大约是2KB使用情况：一般情况用于查询数据。 post： 1.地址栏没有数据：请求参数单独处理。 2.安全可靠 3.效率低 4.post请求大小理论上无限。使用情况：一般用于插入修改等操作 put deleteheader
3.2 input标签
type: 以下为type可能要取的值：
1.1 text 文本框 输入内容
1.2 password 密码框 密文或者掩码
1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据
表示同一组中只能选中一个( checked ="checked" 表示选中)
1.4 checkbox 表示多选 ，name必须一致，
表示同一组中可以选多个，返回值是个数组( checked ="checked" 表示选中)
1.5 file ：表示上传控件
以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取)
以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
1.6 submit 提交
1.7 reset 重置
1.9 image 图片提交按钮
1.10 button 普通按钮
1.11 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
1.12 email 表示邮箱格式的数据
name属性：表单元素名字，只有name属性才能提交给服务器。
value属性：提交给服务器的数据
placeholder：提示信息
高级属性：
disabled:禁用
readonly:只读
3.3 select元素
<select name="city"> <!--select标签添加该属性multiple="multiple"表示多选 、size表示显示的个数-->
<!--option表示下拉列表项-->
<option value="北京">北京</option>
<!--selected="selected"表示选中该项-->
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
<option value="杭州">杭州</option>
</select>
3.4 textarea 元素
<textarea cols="100" rows="5"> 表示5行100列的区域可以输入内容，该元素没有value属性
3.5 示例综合代码--注册
<form action="" method="get"> <table align="center"> <caption> <h1>注册</h1></caption> <tr> <td align="right">用户名：</td> <td><input type="text" name="username" value="bluesky" /></td> </tr> <tr> <td align="right">密码：</td> <td><input type="password" name="password" /></td> </tr> <tr> <td align="right">确认密码：</td> <td><input type="password" name="confirmpwd" /></td> </tr> <tr> <td align="right">性别：</td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" checked="checked" />女 </td> </tr> <tr> <td align="right">爱好：</td> <td> <input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球 <input type="checkbox" name="hobby" value="足球 " />足球 <input type="checkbox" name="hobby" value="乒乓球 " />乒乓球 <input type="checkbox" name="hobby" value="羽毛球 " />羽毛球 </td> </tr> </tr> <tr> <td align="right">上传头像：</td> <td> <input type="file" name="upload" /> </td> </tr> </tr> <tr> <td align="right">居住地：</td> <td> <select name="city"> <option value="北京">北京</option> <option value="上海" selected="selected">上海</option> <option value="广州">广州</option> <option value="杭州">杭州</option> </select> </td> </tr> </tr> <tr> <td align="right">个人介绍：</td> <td> <textarea cols="100" rows="5"> </textarea> </td> </tr> </tr> <tr> <td></td> <td align="center"> <input type="submit" value="注册" /> <input type="reset" value="重置" /> </td> </tr> </table> </form>
第五节 HTML框架标签
5.1 frameset
示例代码
-
top.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body bgcolor="red"> <h1>HTML的框架标签</h1> </body> </html> -
left.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body bgcolor="#FFA600"> <a href="http://www.qfedu.com">千锋官网</a><br/> <a href="http://www.qfedu.com">JAVA官网</a><br/> <a href="http://www.qfedu.com">JAVA在线</a><br/> </body> </html> -
right.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body bgcolor="#00FFFF"> <h1>正文内容</h1> </body> </html> -
content.html
<!--1.框架标签不能和body同时出现 2.frameset: border去除框架标签的框 ，示例：border="0" border="10px" bordercolor="yellow" 3.frame框大小不变：两种情况: 第一种：border ="0" 第二种： noresize="noresize" 不改变大小 备注:scrolling是否显示滚动条 yes 显示 no 不显示 auto 如果内容高度超过屏幕高度直接显示滚动， 4. frame 是框，内容使用src来填充， 定位显示到指定位置： 使用name属性 例如： 点击left.html的标签跳转内容显示在right.html 1.给right.html的frame添加name属性，方便定位。 2.在left.html中使用target目标定位，根据name名查找 --> <frameset rows="200,*" border="10px" bordercolor="yellow"> <frame src="top.html" scrolling="yes" noresize="noresize" /> <frameset cols="200,*"> <frame src="left.html" scrolling="yes" noresize="noresize" /> <frame src="right.html" name="content" scrolling="yes" /> </frameset> </frameset>
第六节 HTML的其它标签和特殊字符
6.1其他标签
<!--该网页的关键字-->
<meta name="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta name="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<!--页面自动跳转,2秒后跳转到百度-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--该网页的编码-->
<meta charset="UTF-8"> html5
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
6.2特殊字符
< 小于号
> 大于号
& 与字符
" 引号
® 己注册
© 版权
™ 商标
空格
 制表符
小结
基本标签：
（1）结构标签 html head title body
（2）排版p br hr
（3）标题 h1-h6
（4）容器 div span
（5）列表 ul ol dl
（6） 表格 table
（7） 图片 img
（8）超链接 a
表单内容
form
action 表单提交的服务器地址
method 提交方式
enctype 编码类型
表单元素
input
type: text password radio checkbox button submit reset image file hidden email
select
textarea
框架标签
frameset
rows
cols
frame
其他标签
meta
特殊字符
第二天 CSS层叠样式表
第一节 CSS简介
-
概念
CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 多个样式可以层层覆盖叠加，如果不同的css样式对同一个html标签进行修饰，样式有冲突的,应用优先级高的，不冲突的样式规则共同作用。
-
特点
1 丰富的样式定义 CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2 易于使用和修改 CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。 另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
3 多页面应用 CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4 层叠 简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
5 页面压缩 在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间
第二节 CSS使用方式
-
内联方式
把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：
<div style="color:blue;font-size:50px">This is my HTML page. </div>
好处:可以单独设置某个元素样式，缺点：不利于样式重用
-
内部方式
在head标签中使用style标签引入css,示例如下: <style type=“text/css”> //告诉浏览器使用css解析器去解析 div {color:red; font-size:50px} </style> 好处：可以控制页面中多个元素样式，缺点：只能一个页面使用 -
外部方式
将css样式抽成一个单独文件，谁用谁就引用，好处：多个页面可以同时使用。 示例如下： 单独文件div.css: 内容示例：div{color:green;font-size:50px} 引用语句写在head标签内部， 链接式： <link rel="stylesheet" type="text/css" href=“div.css"></link> rel:代表当前页面与href所指定文档的关系 type:文件类型，告诉浏览器使用css解析器去解析 href:css文件地址 导入式： <style type="text/css"> @import url("div.css") </style> 该内容放在head标签中 备注:link和@import区别： 1.link所有浏览器都支持，@import某些版本低的IE不支持 2.@import是等待html加载完成才加载，link解析到这个语句，就加载 3.@import不支持js动态修改 -
优先级 内联样式>内部样式>外部样式，就近原则
第三节 CSS选择器
3.1 基本选择器
-
标签选择器
-
id选择器
-
class选择器
3.2 属性选择器
格式为:html标签[属性='属性值']{css属性:css属性值;}
或者html标签[属性]{css属性:css属性值;}，
具体示例如下:
body内容：
<form name="login" action="#" method="get">
<font size="3">用户名：<font>
<input type=“text" name="username" value="zhangsan" /> </br>
密码： <input type="password" name="password" value="123456" /> </br>
<input type="submit" value="登录"></input>
</form>
head中书写：
<style type="text/css">
input[type='text'] {
background-color: pink
}
input[type='password'] {
background-color: yellow
}
font[size] {
color: green
}
a[href] {
color: blue;
}
</style>
3.3 伪元素选择器
语法：
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
具体示例如下：
<a href="https://hao.360.cn/">点我吧</a>
<style type="text/css">
<!--静止状态 -->
a:link {color: red;}
<!--悬浮状态 -->
a:hover {color: green;}
<!--触发状态 -->
a:active {color: yellow;}
<!--完成状态 -->
a:visited {color: blue;}
</style>
3.4 层级选择器
后代选择器
div p{...} 表示div中的p标签，所有的p,后代
div span{....} 表示div中的span标签，包括所有的span，后代
子代选择器
div>span{....} 表示 div中有一个span， span是子代
相邻兄弟 +
通用兄弟 ~
<div id="div1">
<div class="div11">
<span>span1-1</span>
</div>
<div class="div12">
<span>span1-2</span>
</div>
</div>
<div class="div2">
<div id="div22">
<span>span2-1</span>
</div>
<div id="div23">
<span>span2-2</span>
</div>
</div>
<style type="text/css">
#div1 .div11{color:red;}
#div1 .div12{color:purple;}
.div2 #div22{color:green;}
.div2 #div23{color:blue;}
</style>
3.5 其他选择器
-
全局选择器
-
群组选择器
第四节 CSS属性
-
文字属性
font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。 100 对应最细的字体变形，900 对应最粗的字体变形。 数字 400 等价于 normal，而 700 等价于 bold。
斜体（italic）是对每个字母的结构有一些小改动，来反映变化的外观。 倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
简写： font: italic bold 30px "幼圆","黑体"; /style weight size family swsf/
-
文本属性
text-indent:缩进元素中文本的首行,取值类型如下： text-indent:5em;表示此段落第一行缩进5个字符的宽度 text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十
-
背景属性
/简写 没有顺序/ background: red center no-repeat url(img/003.jpg);
-
列表属性
list-style-type:decimal;改变列表的标志类型 list-style-image: url("images/dog.gif");用图像表示标志 list-style-position: inside;确定标志出现在列表项内容之外还是内容内部 简写 list-style: decimal url(img/001.png) inside; 去掉样式: list-style:none; list-style-type:none; -
尺寸显示轮廓属性
width:设置元素的宽度 height:设置元素的高度 显示属性(display) display: none 不显示 block:块级显示 inline:行级显示 inline-block:行级块 轮廓（outline） 绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。常用属性： outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);设置轮廓的样outline-color:red;设置轮廓的颜色 outline-width:10px设置轮廓的宽度
-
浮动属性
浮动：简单理解---飘起来了
clear 属性
规定元素的哪一侧不允许其他浮动元素。
-
定位属性
postion: static（默认） | relative| absolute| fixed
第五节 CSS盒子模型
5.1 边框属性
border-style:边框样式，值有以下情况： solid:实线 double:空心线 dashed:虚线组成的边框 dotted:圆点组成的边框 border-color:边框颜色 border-width:边框宽度 简写 border: 1px solid red;
5.2 外边距属性
margin:外间距,边框和边框外层的元素的距离 margin:四个方向的距离(top right bottom left)
5.3 内边距属性
padding:内间距,元素内容和边框之间的距离((top right bottom left))
-
div水平居中显示
margin: 0 auto; /*0 上下 0 左右 auto*/
-
div垂直居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
height: 300px;
background-color:#FFC0CB;
/*弹性盒子*/
display: flex;
/*垂直对齐*/
align-items: center;
/*水平对齐*/
justify-content: center;
}
#div1,#div2{
width: 100px;
height: 100px;
}
#div1{
background-color: #6495ED;
}
#div2{
background-color: #7FFFD4;
}
</style>
</head>
<body>
<div id="box">
<div id="div1">第一个div</div>
<div id="div2">第二个div</div>
</div>
</body>
</html>
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
第六节 CSS3扩展属性
6.1 border-radius
圆角属性
6.2 box-shadow
用于向方框添加阴影
6.3 background-size
属性规定背景图片的尺寸
6.4 background-image
为指定元素使用多个背景图像
6.5 text-shadow
可向文本应用阴影
第三天 JS基础使用
第一节JS概述
-
简介
JavaScript(LiveScript)一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
第二节 JS基本语法
2.1 数据类型
-
基本（原始）类型
number、string、boolean、undefined、null五种
-
引用（对象）类型
Number String Boolean Object Array
2.2 JavaScript的三种使用方式
-
第一种方式：在<script>标签中，script可以放在网页中任何位置。
<script type="text/javascript"> var num=10; var d=new Date(); document.write(num); </script>
-
第二种方式：使用外部JavaScript文件，把js代码放入单独的文件中 ，这个文件的扩展名.js
<script type="text/javascript" src="js/myjs.js"></script>
-
第三种方式： 放在标签中的事件属性中,常见事件 ,onclick
<input type="button" value="你点我啊" onclick="alert('你点我干嘛')" />
2.3 JS运算符
-
== 自动转型比较数值
-
===直接比较地址
第三节 JS函数和事件
3.1 函数定义
function functionName(parameters){
//执行的代码
}
3.2 匿名函数
/*匿名函数*/
var method1=function(){
document.write("这是一个匿名函数");
}
method1();
/*匿名函数(自执行匿名函数)*/
(function(s){
document.write("这是一个自执行匿名函数"+s);
})("hahaha");
3.3 闭包
闭包就是能够读取其他函数内部局部变量的函数; 闭包可以理解成“定义在一个函数内部的函数“。
闭包三个条件：
1 闭包是一个内部函数
2 闭包能够读取其他（外部）函数的局部变量
3 闭包和局部变量在同一个作用域。
使用形式：1 闭包作为函数的返回值；2闭包作为函数的参数。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闭包 closure</title>
<script type="text/javascript">
/*定义一个函数*/
function a(){
var a=10;
document.write(a);
document.write("<br/>");
}
// a();
// a();
// a();
function b(){
var num=10;//没有释放
/*函数包含函数*/
function c(){
num++;
document.write(num);
document.write("<br />")
}
return c;
}
var f=b();//f是一个函数：闭包
f();
f();
f();
</script>
</head>
<body>
</body>
</html>
好处：1 使局部变量常驻内存，2 避免污染全局变量 3 .提高封装性保护局部变量
3.4 系统函数
-
提示框 alert();
-
确认框 confirm();
-
输入框 prompt()；
-
字符串转换整数 parseInt();
-
字符串转成小数 parseFloat();
-
判断数字是不是不是一个数字 isNaN();
3.5 事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素内容改变(离开光标触发) |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 光标移动到HTML元素 |
| onmouseout | 光标离开HTML元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
3.6 字符串、正则表达式
-
字符串常用函数演示
var str="hello,我爱java";//原始类型 var str2=new String("hello");//引用类型对象类型 var str3=String("hello");//原始类型 document.write(str==str2); document.write("<br/>"); document.write(str===str2); document.write("<br/>"); document.write(typeof(str2)); document.write("<br/>"); //document.write(str instanceof String); document.write("长度:"+str.length); document.write("<br/>"); document.write("指定位置的字符:"+str.charAt(0)); document.write("<br/>"); document.write("indexOf:"+str.indexOf("java")); document.write("<br/>"); var ss=str.split(","); document.write(ss.length); document.write("<br/>"); var s1=str.substr(6,6); document.write(s1); var s2=str.substring(6,12); document.write(s2); -
RegExp 对象
语法：
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;
修饰符
修饰符 描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。 元字符
元字符 描述 . 查找单个字符，除了换行和行结束符。 \w 查找单词字符。[a-zA-Z0-9_] \W 查找非单词字符。 \d 查找数字。[0-9] \D 查找非数字字符。 \s 查找空白字符。 \S 查找非空白字符。 \b 匹配单词边界。 量词
量词 描述 n+ 匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a" n* 匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。 n? 匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。 n{X} 匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。 n{X,} X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。 n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。 n$ 匹配任何结尾为 n 的字符串。 ^n 匹配任何开头为 n 的字符串。 RegExp 对象方法
方法 描述 exec 检索字符串中指定的值。返回找到的值，并确定其位置。 test 检索字符串中指定的值。返回 true 或 false。 支持正则表达式的 String 对象的方法
方法 描述 match 找到一个或多个正则表达式的匹配。 replace 替换与正则表达式匹配的子串。 split 把字符串分割为字符串数组。
小结
（1）javascript是一门脚本语言，动态添加，弱类型语言。
（2）定义变量
var
（3）javascript包括基本（原始）类型,引用（对象）类型
原始类型：number boolean string undefined null
引用类型：Object (Person)、Array
（4）运算符
（5）选择（if（条件））、循环
（6）函数和事件
自定义函数
匿名函数
系统函数
事件: onchange onclick onmouseover onmouseout onkeydown onload
（7）字符串（记住）
（8）正则表达式
第四天 JS的DOM和BOM
第一节 DOM
1.1 概述
-
通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
-
JS DOM能力
-
JavaScript 能够改变页面中的所有 HTML 元素。
-
JavaScript 能够改变页面中的所有 HTML 属性。
-
JavaScript 能够改变页面中的所有 CSS 样式。
-
JavaScript 能够对页面中的所有事件做出反应。
-
1.2 获取HTML元素
-
id找到HTML元素
var x=document.getElementById("intro"); -
标签名找到 HTML 元素
var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); -
类名找到HTML 元素
var x=document.getElementsByClassName("intro");