第一章、HTML

1 、概念

HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的
标准标记语言。
标记语言是由标签构成的语言。<标签名称>例如html，xml；标记语言不是编程语言。
HTML 运行在浏览器上，由浏览器来解析。

2、基本结构：

HTML文档也叫web页面。

2.1、基本结构

–>

这是我的第一个HTML页面 hello html 这是我的第一个HTML页面

2.2、html注释

语法：
HTML注释以结尾。
注释的部分浏览器不解析，注释是为了给程序员看，更好的了解html代码

3、HTML中常用标签

HTML中的标签有很多，我们只讲解比较常用的标签。其他标签请大家自行查询。

3.1.文本标签

3.1.1.标题标签 h1–h6:字体逐渐缩小

一般用在文章的标题上。

3.1.2 段落标签

一般在正文

3.1.3 换行标签

一般用在段落中强制换行。

3.1.4 水平线标签

一般用来分隔内容

3.1.5 范围标签

一般在大段内容中，为了突出部分内容的时候使用的标签；很少独立使用，一般嵌套在其他的标签中使 用。

PS：不是因为有了范围标签，局部内容的样式才有变化；是为了改变局部内容样子，我们才通过范围标 签包裹，然后修改它的样式。

3.2 图片标签

3.2.1 基本属性

=

3.3 列表标签

一般用在导航上

3.3.1 无序列表

3.3.2 有序列表

3.4 定义描述标签

一般用在图文混编的场景中

3.5 布局标签层 div

一般就是做容器，盛放其他标签的，将其他标签组合在一起用来布局。

3.6 标签分类

html标签可以分为块状元素和行级元素两类。
块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；
行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。
PS:区分的简单方法：是否独占一行。
块状元素和行内元素的区别：1、 块级元素会独占一行，其宽度自动填满其父元素宽度；
行内元素会排列到同一行里，其宽度随元素的内容变化而变化。2、块级元素可以设置宽高；行内元素设置宽高无效。3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖
直方向的padding没有效果。（此处的属性稍后介绍）
我们上面已经讲过的标签中归类一下：
属于块状元素的：
标题标签 h1-h6,
段落标签 p ,
水平线标签 hr,
有序列表标签 ol--li，
无序列表标签 ul--li，
定义描述标签 dl-dt-dd，
容器标签 div：
属于行级元素的：
范围标签：span
图像标签：img
同学们已经了解了块状元素和行级元素的概念以及特征，后面再学的标签可以尝试自己分类。

4 超链接

超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能

4.1 页面间的跳转

4.2 锚链接

当一个页面长度超过一屏的时候，想迅速跳转到指定位置，例如大家经常浏览网页的时候，滑动超过一 屏，右下角经常会出现返回顶部连接，这个就是锚链接实现的。这个定位可以实现本页面间的锚链接也 可以实现不同页面间的锚链接。

4.2.1 本页面的锚链接

4.2.2 页面间的锚链接

可在当前页面中，对页面中某内容进行跳转

5、表格标签

5.1、规则表格

5.2、不规则表格–跨行和跨列

5.3 表格的高级标签–标题标签和逻辑分区标签

6 表单–非常重要

概念：用于采集用户输入的数据。用于和服务器进行交互

接下来就是常用的表单项元素

表单项元素中的一些属性：

id:元素的唯一表示，不重复
name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称
value:表单项元素的值，服务器获取数据通过name获取到的就是value
type:表示表单项元素的呈现形式
class:表示样式名称
readonly:表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改而且背景是灰色

6.1 文本框

6.2 密码框

6.3 单选按钮

6.4 复选框

6.5 文件域

6.6 日期-h5中的新特性

6.7 隐藏域

6.8 下拉列表框

6.9 文本域

6.10 按钮

6.10.1 提交按钮

6.10.2 图片按钮

6.10.3 重置按钮

6.10.4 普通按钮

button标签可以与input实现的按钮相互替换

6.11 标签

地址栏内容

dest.html?
userId=1001&
userName=lina&
password=12312&
gender=女&
statu=1&
hobby=swim&hobby=movie&
headImg=a.png&
birthday=2020-10-24T20%3A19&
month=3&x=25&y=46

7 框架

7.1 框架概念

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

例如大家可以观察一下自己的京东个人中心页面，点击左侧内容的时候，只有右边页面在变动。

7.2 框架语法

8 常用的布局组合标签

div-ul-li/div-ol-li：常用于导航布局
div-dl-dt-dd:常用于图文混编布局
div-form:常用于表单布局
div-table:常用于局部规则数据展示布局

9 HTML4和HTML5的区别

9.1 概念

HTML4和HTML5分别是超文本标记语言的第四次和第五次修改，他们分别是html语言第4和第5版本.HTML4是为了适应pc时代产生的，HTML5是为了适应移动互联网时代,为了在移动设备上支持多媒体。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。HTML5技术在未来主要发展的市场还是在移动端互联网领域，现阶段移动浏览器有应用体验不佳、网页标准不统一的劣势，这两个方面是移动端网页发展的障碍，而HTML5技术能够解决这两个问题，并且将劣势转化为优势，整体推动整个移动端网页方面的发展。

9.2 一些主要标记区别

9.2.1 DOCTYPE 不同

9.2.2 指定字符编码语法不同

HTML4:使用meta元素的形式指定文件中的字符编码(通过 content元素的属性来指定)
HTML5:使用对元素直接追加charset属性的方式来指定字符编码。
参考上面的两张图中的写法
注意：两种方法都有效，但是不能同时混合使用两种方式，从H5开始，对于文件的字符编码推荐使用
UTF-8。

9.3 HTML5中新增的语义标签-了解

9.4 HTML5表单

9.4.1 HTML5新的表单属性

9.4.1.1 form新属性

autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

注意: autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

<form action="" autocomplete="on">
姓名:<input type="text" name="name"><br>
电话: <input type="text" name="phone"><br>
邮箱: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
测试的时候需要先输入一遍，然后再刷新页面再次输入看到效果。
有些浏览器可能不自动支持，需要自己启用。

9.4.1.1 input 新属性

list属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

<input list="companys">
<datalist id="companys">
<option value="alibaba">
<option value="baidu">
<option value="tencent">
<option value="zijie">
<option value="didi">
</datalist>

multiple

multiple 属性是一个 boolean 属性.

multiple 属性规定 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 标签：email 和 file

上传多个文件: <input type="file" name="img" multiple>

placeholder
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及
password。

<input type="text" name="userName" placeholder="请输入用户名">

required
required 属性是一个 boolean 属性.
required 属性规定必须在提交之前填写输入域（不能为空）。
注意:required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password,
date pickers, number, checkbox, radio 以及 file。

用户名: <input type="text" name="username" required>

9.4.2 HTML5新的表单元素–了解

9.4.3 HTML5新的表单元素–了解

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

9.5 HTML5中新增的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。大多数音频是通过插件（比如 Flash）来播放 的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准用

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
PS：control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用
第一个支持的音频文件

目前,

audio元素支持三种音频格式文件: MP3, Wav, 和 Ogg:
音频格式的MIME类型

9.6 HTML5中新增的视频

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的
视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时
保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

video 元素支持三种视频格式： MP4, WebM, 和 Ogg:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频音频</title>
</head>
<body>
<h1>音频</h1>
<audio controls>
<source src="audio/wgs.ogg" type="audio/ogg">
<source src="audio/zjl.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<h1>视频</h1>
<video width="1320" height="640" controls>
<source src="audio/ruhai.mp4" type="video/mp4">
<source src="audio/wgs.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
</body>
</html>

9.6 HTML5中已经移除的元素

frame

frameset

noframes

10、补充–HTML中的转义符号 bn N7

第二章、CSS课堂笔记

1、CSS的概念

层叠样式表(英文全称：Cascading Style Sheets)
*层叠：多个样式可以作用在同一个html的元素上，同时生效

是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

• 样式定义如何显示 HTML 元素
• 样式通常存储在样式表中
• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
• 外部样式表可以极大提高工作效率
• 外部样式表通常存储在 CSS 文件中
• 多个样式定义可层叠为一个

CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果。

所以，前端程序员相互表白的时候可以说：you are the CSS to my HTML.

这是不是CSS是对HTML进行美化和布局作用的最好总结？

2、CSS的优势

1. 功能强大
2. 将内容展示和样式控制分离

• 降低耦合度。解耦
• 让分工协作更容易
• 提高开发效率

3、CSS的使用：CSS与html结合使用

根据定义CSS的位置不同，分为行内样式、内部样式和外部样式

3.1 行内样式

也称为内联样式

直接在标签中编写样式，通过使用标签内部的style属性；

一般在测试的时候使用居多：
语法：
<html标签 style="样式1：值1;样式2：值2;....样式N：值N;">hello my css</html标签>
案例：
<div style="color: red;">hello my css</div>

弊端：只能对当前的标签生效，没有做到内容和样式相分离，耦合度太高。

3.2 内部样式

定义在head标签内，通过style标签，该标签内容就是CSS代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>内部样式</title><style>div{color: red;}</style></head><body><div>hello my css</div></body>
</html>

3.3 外部样式

1、提前定义css资源文件

2、在head标签内，定义link标签引入外部样式文件。

lina.css文件，放在与html页面同级的css文件夹中：
div {color: red;
}html页面中的引入
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>外部样式</title><link rel="stylesheet" href="css/lina.css" /></head><body><div>hello my css</div></body>
</html>

作用域的范围:外部样式表>内部样式表>行内样式表

优先级：外部样式表<内部样式表<行内样式表;

同样的样式作用在同一个标签身上：就近原则；不同样式作用在同一个标签身上:叠加生效。

4、CSS语法

基本格式：由两个主要的部分构成：选择器，以及一条或多条声明:

选择器 {属性1:值1;属性2:值2;...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割，不同的属性之间用分号隔开。

例如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e4JJ1sxD-1615712356513)(D:\JAVA课程\笔记\前端\css.png)]

5、CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */ 结束

/*这是CSS的注释*/
div {color: red;  /*文字颜色是红色*/
}

6、基本选择器：筛选具有相似特征的元素

6.1 id选择器

选择具有相同id属性值的元素，建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

PS： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

虽然多个元素可以使用同一个id选择器控制样式，但是不推荐。如果需要同样的样式对多个标签生效，使用class选择器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hWjsloim-1615712356514)(D:\JAVA课程\笔记\前端\id.png)]

6.2 class选择器

选择具有相同的class属性值的元素。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

PS：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

6.3 元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法：标签名称{}；PS：标签名称必须是html提供好的标签。

使用标签选择器：自动使用在所有的同名的标签上

7 优先级

7.1 选择器的优先级

ID选择器 > 类选择器 > 标签选择器

当多个选择器作用在同一个标签上的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

7.2 样式表的优先级

行内样式 > 内部样式 >外部样式

同样，三个样式表中都有内容作用在同一个html标签的时候，如果属性冲突，看优先级；如果不冲突，样式叠加生效。

8 CSS常用样式

8.1 color :字体颜色

跟颜色相关的取值分3种：

1、颜色的单词 red blue…

2、rgb(红，绿，蓝)三色的取值范围是0-255 rgb(255,0,0)

rgba（红，绿，蓝,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)

3、#值1值2值3 ：值的范式是00-FF 十六进制数字组成的 例如：#FF0000

8.2 width height:宽高

PS：只有块状元素可以设置宽高，行级元素设置不生效。

取值方式有2种：

 1：数值  绝对数字  单位是像素PX  2：百分比：占据父元素的比例

8.3 背景样式

8.4 文本样式

8.5 列表样式

8.6 边框样式

10 HTML&CSS调试利器

以谷歌浏览器为例说明。

快捷键F12或者工具条中的开发者工具调出以下内容。

在elements中可以看到当前页面的所有标签，在styles中可以看到html元素对应的样式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxZYTL80-1615712356536)(D:\JAVA课程\笔记\前端\debug.png)]

11 盒子模型

11.1 概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型说明图：

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

11.2 盒子的宽度和高度

元素的实际宽度和高度：

当我们计算一个元素实际在页面占有的总宽度计算公式是这样的：

总元素宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

11.3 如果想要设置的宽度直接就是元素的实际宽度，通过box-sizing属性

12 补充常用样式

12.1 float 浮动

12.1.1 什么是浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

12.1.2 元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

12.1.3 彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

12.1.4 clear–清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>浮动</title><style>div{width: 400px;height: 200px;margin-bottom: 10px;}</style></head><body><!--没有浮动属性的元素都属于常规文档流：从上往下从左往右依次显示浮动的元素都脱离了常规文档流；为了好理解：大家可以认为浮动元素属于一层，非浮动元素属于一层如果想要非浮动元素不受浮动元素的影响，需要使用clear属性--><div style="background: rgba(255,0,0,0.5); float: left;">div1-左浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动</div><div style="background: lawngreen; width: 600px; height: 350px; ">div2-未浮动，常规文档流,<br/>PS:此时div1在div2的上方显示，因为div1和div2是不同文档流中的元素，显示互不影响如果不想让div2被浮动元素影响，需要添加clear属性。添加clear: left;之后div2就会忽略div1浮动的影响，在div1层后面显示，不会重叠了，大家可以自己试验一下</div><div style="background: lightblue; float: right; width: 1800px;">div3-右浮动，脱离常规文档流，紧贴父元素或者上一个同方向浮动</div><div style="background: lightcoral; width: 600px; height: 350px; ">div4-未浮动，常规文档流,<br/>PS:此时div3在div4的上方显示，因为div3和div4是不同文档流中的元素，显示互不影响如果不想让div4被浮动元素影响，需要添加clear属性。添加clear: right;之后div4就会忽略div3浮动的影响，在div3层后面显示，不会重叠了，大家可以自己试验一下clear属性有三个取值：left、right、both;分别是取出左浮动、有浮动和所有浮动元素的影响</div><div style="background: lavender;">div5-未浮动，常规文档流,</div></body>
</html>

12.2 overflow

控制内容溢出元素框时显示的方式。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

**注意:**overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

12.3 Display(显示) 与 Visibility（可见性）

12.3.1 两者的区别

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

12.3.2 display 改变元素的类型

CSS样式有以下三个：

• display:block – 显示为块级元素
• display:inline – 显示为内联元素
• display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

13 复合选择器

由两个或多个基础选择器，通过不同方式组合而成的。

可以更准确更精细的选择目标元素标签。

13.1 全局选择器

语法：* {} 一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，一般将 * 替换为常用标签的名称，并用逗号分隔，其实就是使用并集选择器。

13.2 并集选择器

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

语法：选择器1，选择器2，…选择器N{}

意思是多个选择器都是通用的样式。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

13.3 交集选择器

条件：交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法：h3.class{ color:red; }

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，例如div.list。

交集选择器是并且的意思。 即…又…的意思

例如：   table.bg   选择的是： 类名为 .bg  的 表格标签，但用的相对来说比较少。

13.4 后代选择器

概念：后代选择器又称为包含选择器。

作用：用来选择元素或元素组的子孙后代。

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

  格式：父级 子级{属性:属性值;属性:属性值;}

语法：.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

13.5 子元素选择器

作用：子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。

其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。

语法：.class>h3{color:red;font-size:14px;}

 比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

13.6 实现代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>复合选择器</title><style>/*全局选择器：一般去掉标签的一些默认效果的时候使用，或者整站通用效果时使用。但是不推荐，*/*{color: #333;/*定义全局文字颜色，统一色彩基调*/}/*并集选择器：通常用于集体声明替换全局选择器；*/div,p,dldt,dd{/*去掉浏览器的默认样式*/margin: 0;padding: 0;color: #333;/*定义全局文字颜色，统一色彩基调*/}/*交集选择器*/li.myli{color: red;}/*后代选择器*/ul li{font-size: 28px;}.myUL li{font-family: "微软雅黑";}.myUL li a{text-decoration: line-through;}/*子元素选择器*/.demo>h3{color: red;}          </style></head><body><ul><li>li11111111111</li><li class="myli">li22222222222</li><li>li33333333333</li><li>li44444444444<a href="">点击我试试</a></li><li class="myUL"><ul><li>li11111111111</li><li class="myli">li22222222222</li><li>li33333333333</li><li>li44444444444<a href="">点击我试试</a></li></ul></li></ul><ol><li>li11111111111</li><li>li22222222222</li><li>li33333333333</li><li>li44444444444</li></ol><div class="demo">div1<h3>静夜思</h3>    <ul><li><h3>静夜思----li</h3></li></ul></div></body>
</html>

13.6 伪类选择器

伪类选择器：和类选择器相区别类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 。

作用：用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

• a:link /* 未访问的链接 */
• a:visited /* 已访问的链接 */
• a:hover /* 鼠标移动到链接上 */
• a:active /* 选定的链接 */

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>伪类选择器</title><style>            /*伪类选择器*/           a:link{color: red;/*默认颜色是红色*/   }a:visited{color: blue;/*访问过的页面是蓝色*/    }a:hover{color: green;/*鼠标悬浮是绿色*/   font-size: 28px;}a:active{color: gold;/*按下鼠标不放手是金色*/    font-family: "微软雅黑";}</style></head><body><a href="03-常用样式.html" target="_blank">常用样式</a><a href="04-盒子模型1.html" target="_blank">盒子模型</a><a href="05-综合练习.html" target="_blank">综合练习</a></body>
</html>

注意**

• 写的时候，他们的顺序尽量不要颠倒 按照 lvha(四类的首字母) 的顺序。否则可能引起错误。
• 因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
• 因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
• 实际开发中，我们很少写全四个状态，一般我们写法如下：

a {   /* a是标签选择器  所有的链接 */font-weight: 700;font-size: 16px;color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

13.7 复合选择器比对

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是空格 p .one
子代选择器	选择 最近一级元素	只选亲儿子	较少	符号是**>** .nav>p
交集选择器	选择两个标签交集的部分	既是 又是	较少	没有符号 p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

 <li><label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input type="password" id="password" name="password" placeholder="请输入密码" required/></li><li>性&nbsp;&nbsp;&nbsp;&nbsp;别：<input type="radio" name="sex" checked="1" />男<input type="radio" name="sex" checked="2" />女</li><li><label for="schoolname">学&nbsp;&nbsp;&nbsp;&nbsp校：</label ><input type="text" id="schoolname" name="school" placeholder="请输入学校" required/><br /></li><li><label for="subject">专&nbsp;&nbsp;&nbsp;&nbsp业：</label><input type="text" id="subject" name="subjectname" placeholder="请输入专业" required/></li><li><label for="phone">联系电话：</label><input type="phone" id="phone" name="phone" placeholder="请输入联系电话" required/></li><li><label for="email">邮&nbsp;&nbsp;&nbsp;&nbsp箱：</label><input type="email" id="email" name="email" placeholder="请输入邮箱"/ required><br /></li><li><label for="brithday">生&nbsp;&nbsp;&nbsp;&nbsp日：</label><input type="date" id="brithday"/ name="brithday"><br /></li><li><textarea rows="12" cols="30" readonly="readonly" disabled="disabled">比赛规则：1、要求选手提供的信息必须都是真实的2、禁止将转载，抄袭的作品投递参赛3、要求作品有搞原创度，其借鉴占比不得超过百分之三十</textarea></li><li><button type="submit">报名</button></li><li><button type="reset">重置</button></li>

第三章、JavaScript课堂笔记

1、概述

1.1、什么是JavaScripts

1.1.1、概念

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译）

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易入门。

1.1.2、作用

1、为网页添加各式各样的动态功能,

2、为用户提供更流畅美观的浏览效果。

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.2、 JavaScript历史-了解

1.3、JavaScripts的用法

avaScript通常简称为js,或者js脚本。

1.3.1、HTML页面中的JavaScripts

在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以， 放在最后也可以，对位置要求不严格。

我们可以在 HTML 文档中放入不限数量的script标签，通常的做法是把内容统一放入head或者页 面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

PS:有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了，JavaScript已 经 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript的用法</title>
<script>
alert("hello JavaScript1-1");
</script>
<script>
alert("hello JavaScript1-2");
</script>
</head>
<body>
<script>
alert("hello JavaScript2-1");
</script>
<script>
alert("hello JavaScript2-2");
</script>
</body>
</html>
<script>
alert("hello JavaScript3-1");
</script>
<script>
alert("hello JavaScript3-2");
</script>

1.3.2、 外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件 扩展名是 .js。

当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件：

myScript.js文件 //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可
function fun1(){
alert("hello JavaScript");
}
<!DOCTYPE html>
<html>
<head>
<script src="js/myScript.js"/>
</head>
<body>
<script>
fun1();//调用脚本中的内容s
</script>
</body>
</html>
外部文件引入一次即可，在head或者body中都可以。

PS:外部脚本不能包含 script 标签。

1.3.3 、标签属性中的JavaScrip

直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的偏少。

<a href="javascript:alert('ok')">登录</a>

1.4、 JavaScript显示数据

1.4.1、使用window.alert()弹出框

PS：这里的window可以省略，等价于alert(“hello world”);

1.4.2、使用document.write()将内容写入到html文档

1.4.3、 使用innerHTML写入到html元素

这里大家还没有学习到document和getElementById等内容，稍后介绍

1.4.4 使用console.log写入到浏览器控制台

2、JavaScript的注释

avaScript注释与java的单行和多行注释相同。

单行注释以 // 开头。

多行注释以 /* 开始，以 */ 结尾。

3、JavaScript基本语法

JavaScript 是一个脚本语言。它是一个轻量级，但功能强大的编程语言。

JavaScript语法跟Java很相似，但是也有区别。JavaScript是弱语言类型，即有些时候有些错误不影响运 行，但是依然推荐大家按照规范去编写代码，语言弱，程序员不能弱。

3.1 、JavaScript变量

声明变量的关键字：var

语法：var 变量名称；

var myCompany; //声明变量
myCompany='开课吧'; //赋值
var x=5;//声明的同时赋值
var y=6;
var z=x+y;//变量也可以存储表达式

变量的命名规则：

变量必须以字母开头

变量也能以 $ 和 _ 符号开头

变量名称对大小写敏感（y 和 Y 是不同的变量）

不能使用关键字保留字

变量的命名规范： 见名知意 。

例如：breadPirce,userService等，避免无意义的a,b,c等

推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName

3.2、JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执 行前对所有代码进行编译。

JavaScript中也有分支结构和循环结构，语法与java类似，此处就不再深入讲解。细节上的内容等我们 后面使用过的时候再给大家单独指出。

PS：一般一行只写一条语句，每句结尾编写分号结束。

3.3、 JavaScript的数据类型

3.3.1、值类型(基本类型)

字符串是存储字符的变量。字符串可以是引号中的任意文本。必须使用单引号或双引号；

var gameName="英雄联盟";
var hairstylist='tony';
//PS：注意引号嵌套
var message1='我的发型师是"tony"老师';
var message2="我的发型师是'tony'老师";

3.3.1.2、数字Number

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var breadPrice=15.9;
var gameLevel=66;
//极大或极小的数字可以通过科学计数法来书写：
var myMoney1=666e5; //66600000
var myMoney2=-666e-5; //-0.00666

3.3.1.3、布尔Boolean

只能有两个值：true 或 false。

var isUnderstand=true;
var isSingle=false;

3.3.1.4、空Null

var email=null;

3.3.1.5、未定义Undefined

表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

共有4中情况会出现undefined的值（有些知识语法还未学习，但是不影响理解，大家根据学过的java知 识对比理解）

1、变量声明且没有赋值；

var obj;
alert(obj);//obj值为undefined

2、获取对象中不存在的属性时；

var obj;
alert(obj.name);//报错信息： "Uncaught TypeError: Cannot read property 'name' of
undefined"

3、函数需要实参，但是调用时没有传值，形参是undefined；

4、函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined。

function printNum(num){
alert(num);
}
var result=printNum();//调用函数未传递参数，执行函数的时候num的值是undefined
alert(result);//result的值也是undefined，因为printNum()没有返回值

3.3.1.6 Symbol

3.3.2 引用数据类型：

对象(Object)、数组(Array)、函数(Function)。稍后详细介绍。

3.3.3 JavaScript拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var param; // param类型为 undefined
param = 5; // 现在 param 为数字
param = "John"; // 现在 param 为字符串
PS:虽然JavaScript支持这种写法，但是我不推荐这种写法。大家尽量开始声明变量的时候就确定好将要
盛放什么类型的值，以后尽量不随意改变。

3.4、 JavaScript中的运算符

算数运算符：+ - * / % 、 ++ 、 --
赋值运算符：= 、 +=、 -= 、*= 、 /= 、 %=
字符串的连接符：+
逻辑运算符： && || ！
条件运算符：？:
比较运算符： == 、！= 、 > 、<、 >= 、 <=

以上运算符的运算规则与java一样，在这里不再赘述。接下来强调两个新的比较运算符：

var x=5;
var res=(x===5); // true
res=(x==='5');// false
res=(x!==5); // false
res=(x!=='5');// true

4、javaScripts对象

4.1 JavaScript的String对象

4.1.1 String对象属性–长度属性

var str="我喜欢看NBA,最喜欢的球员是\'小学生\'库里";
//注意：字符串中出现的\'是一个字符，转义为一个单引号
console.log(str);
//获取字符串的长度：，切记：所有转移符号的长度都算一个，即\'长度为1
console.log("字符串的长度="+str.length);//22

4.1.2、 String对象方法

JavaScript中的String对象方法与java的String方法很多都类似甚至一样，这里不再一一赘述。提供大家 一个参考表格，需要的自行查阅。点击这里查看

4.2、 JavaScript的Array对象

Array 对象用于在变量中存储多个值，也就是数组。

4.2.1 声明数组

4.2.2、数组的长度 length属性

PS：大家需要注意的length是数组的属性，不是方法，所以调用的时候没有括号。

var nameArr=["宝玉","黛玉","湘云"];
var len=nameArr.length; //获取数组的长度

4.2.2 Array对象的方法

Array对象方法参考表格

4.3、JavaScript的Date对象

4.3.1 、创建日期对象

var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

4.3.2、 日期对象的常用方法

日期对象方法的参考表格

4.4、JavaScripts的Math对象

与java中的Math相似，跟数学相关的内容都这里。有很多方法属性与java中的也类似。

4.4.1、Math常用属性

var pi=Math.PI;//返回圆周率

4.4.2 Math常用方法

var num=Math.random();// 返回 0 ~ 1 之间的随机数。
var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。
var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。

Math参考文档

5、JavaScript调试

我们以谷歌浏览器中的开发者工具为例，其余浏览器大同小异。

6、JavaScript的函数

6.1 JavaScript的常用全局函数

JavaScript中有个常用的全局属性NaN,即非数值（Not a Number），NaN 属性用于引用特殊的非数字 值，该属性指定的并不是不合法的数字。

6.1.1、isNaN(param)

用于检查其参数是否是非数字值。

是数值的返回false，不是数值返回true。

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

6.1.2、parseFloat(String)

可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字 符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

console.log(parseFloat("66"));//66
console.log(parseFloat("199.99"));//199.99
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 128 "));//128
console.log(parseFloat("10年"));//10
console.log(parseFloat("今天是8号"));//NaN

字符串中只返回第一个数字。

开头和结尾的空格是允许的。

如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

6.1.3、 parseInt(string,radix)

可解析一个字符串，并返回一个整数

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。 当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。

如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进 制或十六进制的数字。

如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

console.log(parseInt("66"));//66
console.log(parseInt("199.99"));//199
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt(" 128 "));//128
console.log(parseInt("10年"));//10
console.log(parseInt("今天是8号"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16
PS:旧浏览器由于使用旧版本的ECMAScript（ECMAScript版本小于ECMAScript 5，当字符串以"0"开
头时默认使用八进制，ECMAScript 5使用的是十进制），所以在解析("010") 将输出8。

只有字符串中的第一个数字会被返回。

开头和结尾的空格是允许的。 如

果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。

在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制 的基数。

6.2 JavaScript的自定义函数

6.2.1 自定义函数语法

使用function关键字定义函数。

function 自定义函数名称(参数列表){
//函数体
}

6.2.2 自定义函数实例

注意：1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.

2、函数的返回取决于函数体中是否有return关键字。

6.3 JavaScript

7、JavaScript变量的作用域

7.1 局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问。 在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。

7.2 全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

<script>
var userId = 1001; //全局变量：整个script脚本中都可用,要注意先后顺序
function printMessage() {
var userName = "李白";//局部变量：只在当前函数中生效
document.write(userId);//使用全局变量的时候，保证使用（方法被调用）之前定义并赋
值
document.write(userName);//使用局部变量
}
printMessage();
</script>
<script>
function printMessage2() {
var userName2 = "李白2";
document.write(userId);//这里也可以使用userId
//document.write(userName1);//错误：调用不到printMessage函数中的局部变量
document.write(userName2);//正确：可以使用自己函数中的局部变量
}
</script>

7.3 变量的生命周期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

8 JavaScript自定义对象

对象也是一个变量，但对象可以包含多个值（多个变量）。

8.1 定义对象

对象中可以有属性，也可以有方法

8.2 对象的属性

可以说 “JavaScript 对象是变量的容器”。

但是，我们通常认为 “JavaScript 对象是键值对的容器”。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

8.3 访问对象的属性

8.4 访问对象的方法

9 JavaScript Window–浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

BOM：Browser Object Model，中文浏览器对象模型。

虽然现在BOM尚无正式标准，但是由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同 方法和属性，因此window常被认为是 BOM 的方法和属性。

9.1 window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。（ 没有应用于 window 对象的公开标准，不过 所有浏览器都支持该对象）。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

Window 对象表示浏览器中打开的窗口。

9.2 window对象属性

[参考手册](D:\JAVA课程\第六章\6-5\课件与笔记\参考手册\Window 对象属性与方法参考手册.md)

9.2.1 打开和关闭浏览器案例

<a href="javascript:window.open('https://www.baidu.com')">打开百度</a>
<a href="javascript:window.open('index.html')">打开-index</a>
<a href="javascript:window.close()">关闭当前页面</a>

9.2.2 弹框案例

<script>
//window对象常用的弹框方法
//1、基本弹框
window.alert("只有一个确定按钮的对话框");
//2、对话框：有确定和取消两个看你，点击确定返回true，点击取消返回false
var res=window.confirm("确认要关闭吗？");
if(res){
alert("点击了确定按钮");
}else{
alert("点击取消按钮");
}
//3、输入框：prompt(提示信息，默认值)
var age=prompt("请输入年龄：",19);
alert("输入的年龄信息是："+age);
</script>

9.3.3 定时器案例

<div id="today1">
div--显示时间1
</div>
<a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>
<div id="today2">
div--显示时间2
</div>
<a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a>
<script>
function showTime1(){var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth();
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日
"+h+":"+m+":"+s;
}
//定时器setInterval(定时调用的函数,时间间隔毫秒)
var flag1=window.setInterval("showTime1()",1000);
</script>
<script>
function showTime2(){var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth();
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日
"+h+":"+m+":"+s;
flag2=window.setTimeout("showTime2()",1000);
}
//在指定的毫秒数后调用函数或计算表达式。
var flag2=window.setTimeout("showTime2()",1000);
</script>

10 JavaScript之事件

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触 发这些事件。

10.1 HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为。

例如页面加载完成、你点击个按钮、文本框输入了文字等等，都是HTML事件的案例。

通过当事件发生时，我们希望可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之 后验证有效性等，那么这些要做的事情我们就可以通过JavaScript实现。

10.2 常用的HTML事件

HTML事件表

<script>
function fun1(){alert('选择的内容发生了变化');
}
function fun2(){alert("触发了单击事件");
}
function fun3() {document.getElementById("btn").innerHTML="鼠标移动到按钮上了";
}
function fun4() {document.getElementById("btn").innerHTML="点击我试试";
}
function fun5() {alert("键盘按下了");
}
function fun6() {alert("获取到了焦点");
}
function fun7() {alert("input失去了焦点");
}
function myLoad(){alert("页面加载完毕");
}
</script>
<body onload="myLoad()">
<input id="userName" onkeydown="fun5()" onfocus="fun6()"
onblur="fun7()"/>
<input id="password" type="password" />
<button id="btn" type="button" onclick="fun2()"
onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
<select id="month" onchange="fun1()">
<option>1月份</option>
<option>2月份</option>
</select>
</body>

11 JavaScript之DOM模型

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 DOM:Document Object Model,文档对象模型。 当网页被加载时，浏览器会创建页面的文档对象模型。 HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

11.1 document对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

11.2 document对象常用方法

11.2.1 查找 HTML 元素常用方法

<script>
function myLoad(){//页面加载完毕之后再去获取页面上的元素，否则获取不到
//根据ID 获取元素，只能获取到唯一元素（如果有重名的ID元素，获取到的是第一个元素）
var div=document.getElementById("myDiv");
console.log(div);
//根据指定的类样式的名称获取元素，返回集合
var list=document.getElementsByClassName("demo");
console.log("根据类样式的名称获取到的元素的集合长度是："+list.length);
for(var i=0;i<list.length;i++){console.log(list[i]);
}
//根据指定HTML标签名称获取元素，返回集合
var list2=document.getElementsByTagName("li");
console.log("根据标签的名称获取到的元素的集合长度是："+list2.length);
for(var i=0;i<list2.length;i++){console.log(list2[i]);
}
//根据指定HTML元素的name属性获取元素，返回集合
var list3=document.getElementsByName("myli");
console.log("根据标签的名称属性获取到的元素的集合长度是："+list3.length);
for(var i=0;i<list3.length;i++){console.log(list3[i]);
}
}
</script>
<body onload="myLoad()">
<p class="demo"></p>
<div id="myDiv" class="demo">
div
</div>
<ul class="demo">
<li>li11111111111</li>
<li name="myli">li11111111111</li>
<li>li11111111111</li>
<li name="myli">li11111111111</li>
</ul>
</body>

11.2.2 修改 HTML 内容和属性

修改内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
修改 HTML 元素的内容的语法：
document.getElementById(id).innerHTML=新的 HTML。
PS： 绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
修改 HTML 属性
修改 HTML 元素属性的语法：
方式1：document.getElementById(id).attribute=新属性值
方式2：document.getElementById(id).setAttribute(属性名，属性值)

<div id="mydiv">div</div>
var mydiv=document.getElementById("mydiv");
mydiv.innerHTML="新的div内容";
document.getElementById("myimg").src="x1.jpg";
<h1 style="color: green;" id="myh1">hello world</h1>
var h1=document.getElementById("myh1");
h1.setAttribute("class","bg");//设置属性
console.log(h1.getAttribute("class"));//获取属性class
console.log(h1.getAttribute("style"));//获取属性style

11.2.3 修改 HTML 元素的css

修改 HTML 元素css的语法： document.getElementById(id).style.property=新样式

document.getElementById("myli").style.color="blue";
document.getElementById("myli").style.fontFamily="微软雅黑";
document.getElementById("myli").style.fontSize="24px";

11.3 HTML DOM 元素 (节点)

11.3.1 创建新的 HTML 元素

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

<button type="button" onclick="createNewP()">动态添加一个元素--
appendChild</button>
<button type="button" onclick="createNewP2()">动态添加一个元素--
insertBefore</button>
<div id="div1">
<p id="p1">这是段落1</p>
<p id="p2">这是段落2</p>
</div>
<script>
function createNewP(){var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取一个页面已经存在的元素
var div=document.getElementById("div1");
//添加新创建的元素p到已经存在的元素div中
div.appendChild(newElementP);
}
function createNewP2(){var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取一个页面已经存在的元素
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面
div.insertBefore(newElementP,p1);
}
</script>

11.3.2 替换 HTML 元素 -replaceChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="changeElemnt()">替换p1</button>
<script>
function changeElemnt(){var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取要被替换的元素p1及其父元素div
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//将div中的元素p1替换为新创建的元素
div.replaceChild(newElementP,p1);
}
</script>

11.3.3 删除元素 -removeChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="deleteElement()">删除p1-方式1</button>
<button type="button" onclick="deleteElement()">删除p1-方式2</button>
<script>
function deleteElement(){var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//从父元素div中删除子元素p1
div.removeChild(p1);
}
function deleteElement2(){var p1=document.getElementById("p1");
//p1.parentNode：作用就是获取要删除元素p1的父元素div
p1.parentNode.removeChild(p1);
}
</script>

12 表单验证

12.1表单验证意义与场景

1.降低服务器压力

拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销

2.提升用户体验

早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体 字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会 有一种很难受的粘滞感。

12.2 表单验证常用事件与属性

表单经常需要做一些非空验证、长度验证、合法性验证等。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
function validateName(){//所有的表单项元素都value属性
var name=document.getElementById("userName").value;
var msg=document.getElementById("nameMsg");
if(name==null || name ==""){msg.innerHTML="用户名不能为空！";
msg.style.color="red";
return false;
} else if(name.length<6){msg.innerHTML="用户名长度必须为大于6的！";
msg.style.color="red";
return false;
}
msg.innerHTML="用户名可用";
msg.style.color="green";
return true;
}
function validatePwd(){var password1=document.getElementById("password1").value;
var msg=document.getElementById("pwdMsg1");
if(password1==null || password1 ==""){msg.innerHTML="密码不能为空！";
msg.style.color="red";
return false;
} else if(password1.length<8){msg.innerHTML="密码的长度必须为大于8的！";
msg.style.color="red";
return false;
}
msg.innerHTML="密码合法";
msg.style.color="green";
return true;
}
function confirmPwd(){var pwd1=document.getElementById("password1").value;
var pwd2=document.getElementById("password2").value;
var msg=document.getElementById("pwdMsg2");
if(pwd1!=pwd2){msg.innerHTML="两次输入的密码不一致！";
msg.style.color="red";
return false;
}
msg.innerHTML="两次输入的密码一致";
msg.style.color="green";
return true;
}
function validateGender(){var gender=document.getElementById("gender").value;
if(gender==-1){alert("性别为必选项！");
return false;
}
return true;
}
function register(){return
validateName()&&validatePwd()&&confirmPwd()&&validateGender();
}
</script>
</head>
<body>
<h1>英雄会注册</h1>
<form action="提交.html" method="get" onsubmit="return register()">
*用户名:<input type="text" id="userName" placeholder="请输入用户名"
onblur="validateName()" />
<span id="nameMsg">用户名长度至少6位</span><br />
*密码：<input type="password" id="password1" placeholder="请输入密码"
onblur="validatePwd()"/>
<span id="pwdMsg1">密码长度至少8位</span><br />
*确认密码：<input type="password" id="password2" placeholder="请确认密
码" onblur="confirmPwd()" />
<span id="pwdMsg2">确认密码与密码一致</span><br />
*性别：<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br /><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>

13 JavaScript的 RegExp 对象-正则表达式

13.1 概念

RegExp：是正则表达式（regular expression）的简写。 正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来 描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。

13.2 语法

语法：
var reg=new RegExp(/正则表达式主体/,修饰符(可选));
或更简单的方法
var reg=/正则表达式主体/修饰符(可选);
案例：
var reg=new RegExp(/kaikeba/i);
var reg = /kaikeba/i; //此处定义了一个一个正则表达式。
kaikeba 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

13.2.1 修饰符

可以在全局搜索中不区分大小写[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dBZlBjWP-1615712356565)(D:\JAVA课程\笔记\前端\image-20210310154445387.png)]

13.2.2 正则表达式模式

方括号用于查找某个范围内的字符：

元字符是拥有特殊含义的字符：

量词:

13.2.3 正则表达式的方法test(str)

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则 返回 false。

var reg = /kaikeba/i;
var res=reg.test("开课吧的汉语拼音为kaikeba");
console.log(res);//true
var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/;
var str="a公司拼音为9";
var res=reg.test(str);
console.log(res);//true
console.log(reg.test("a你好239"));//false

正则表达式参考手册

正则表达式特殊字符

13.3 常用的正则表达式校验案例

• ```html

14 JavaScript案例

14.1 全选/全不选

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<script>
function myAll(){var all=document.getElementById("all");
var oneList=document.getElementsByName("one");
for(var i=0;i<oneList.length;i++){oneList[i].checked=all.checked;
}
}
function myOne(){var all=document.getElementById("all");
var oneList=document.getElementsByName("one");
for(var i=0;i<oneList.length;i++){if(oneList[i].checked==false){all.checked=false;
return;
}
}
all.checked=true;
}
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0"
width="90%" height="180px">
<tr>
<th>全选<input id="all" type="checkbox" onclick="myAll()"/></th>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>1</td>
<td>小熊饼干1</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox"/></td>
<td>2</td>
<td>小熊饼干2</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox"/></td>
<td>3</td>
<td>小熊饼干3</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
</table>
</body>
</html>

14.2 动态时间

代码在本文结尾

14.3 动态表格

补充知识点：

遍历表格中的内容，动态添加行、删除行。

代码在本文结尾

第四章、jQuery

1、概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

提示： 除此之外，jQuery还提供了大量的插件。

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

2、 javaScripts安装

2.1、 jQuery的版本

jQuery版本有很多，分为1.x 2.x 3.x
1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
国内多数网站还在使用1.x的版本

3、jQuery语法结构

说明：美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

3.1、 基础语法： $(selector).action()

说明：美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

3.2、文档就绪事件

文档就绪事件，实际就是文件加载事件。
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM
进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。
所以我们尽可能将所有的操作都在文档加载完毕之后实现。

写法1：

$(document).ready(function(){
// 开始写 jQuery 代码...
});

写法2：简介写法-推荐

$(function(){
// 开始写 jQuery 代码...
});

Query的ready方法与JavaScript中的onload相似，但是也有区别：

4、jQuery选择器:

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经 存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

4.1 元素/标签选择器

jQuery 元素选择器基于元素/标签名选取元素。

语法：$(“标签名称”)

<div>div1</div>
<div>div2</div>
<div>div3</div>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//文档就绪事件：
$(document).ready(function(){//编写jQuery
});
$(function(){//1、标签选择器：
//获取所有的div元素（集合）
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++){console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
}
});
</script>

4.2 #id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。 通过 id 选取元素语法如下：

$("#p1")

4.3 .class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

$(".mydiv")

4.4 全局选择器

匹配所有元素

$("*")

4.5 并集选择器

将每一个选择器匹配到的元素合并后一起返回。

$("div,ul,li,.mydiv")

4.6 后代选择器

在给定的祖先元素下匹配所有的后代元素

$("form input")

4.7 子选择器

在给定的父元素下匹配所有的子元素

$("form > input")

4.9 同辈选择器

匹配 prev 元素之后的所有 siblings 元素

$("form ~ input")

4.10 属性选择器

匹配包含给定属性的元素

$("div[id]");//获取所有有id属性的div的元素集合
$("div[class]");//获取所有有class属性的div的元素集合
$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
$("input[id][name^='user']");

4.11 可见性选择器

匹配所有的可见或不可见的元素

$("div:visible");
$("input:hidden");

其余更多选择器参考jQuery选择器参考手册。

4.12 所以选择器的案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//1、标签选择器：
function htmlSelector(){//获取所有的div元素（集合）
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++){console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
}
}
//2、id选择器
function idSelector(){//根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个
var p=$("#p1");
console.log(p.html());
}
//3、.class选择器
function classSelector(){var list=$(".mydiv");
console.log(list.length);
}
//4、 全局选择器
function allSelector(){var list=$("*");//包括了html、head、title.....所有标签
console.log(list.length);
for(var i=0;i<list.length;i++){console.log(list[i]);//js的对象
}
}
//5、并集选择器
function andSelector(){var list=$(".mydiv,p,li");
printList(list);
}
//6、后代选择器:包括所有的后代，儿子和孙子辈都有
function subSelector(){var list=$("form input");
printList(list);
}
//7、子选择器：只有子元素
function sunSelector(){var list=$("form>input");
printList(list);
}
//8、相邻选择器
function nextSelector(){var list=$("label + input");
printList(list);
}
//9、同辈选择器
function sublingsSelector(){var list=$("form ~ div");
printList(list);
}
//10、属性选择器
function attrSelector(){var list=$("div[id]");//获取所有有id属性的div的元素集合
list=$("div[class]");//获取所有有class属性的div的元素集合
list=$("input[name='userName']");//获取所有input标签中name属性是
userName元素的集合
list=$("input[name^='user']");//获取所有input标签中name属性是user开
头的元素的集合
list=$("input[name$='user']");//获取所有input标签中name属性是user结
尾的元素的集合
list=$("input[name*='user']");//获取所有input标签中name属性包含了
user的元素的集合
list=$("input[id][name^='user']");//获取所有input标签中既有id属性又
有name属性以user开头的元素的集合
printList(list);
}
//11、可见性选择器
function seeSelector(){//匹配所有的可见div元素
var list=$("div:visible");
//匹配所有的不可见div元素
var list=$("div:hidden");
//匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元
素
list=$("input:hidden");
printList(list);
}
//文档就绪事件：页面加载完毕之后执行：
$(function(){seeSelector();
});
//打印集合
function printList(list){for(var i=0;i<list.length;i++){console.log(list[i]);
console.log(list[i].innerHTML);//非表单项元素使用该种方式输出
console.log(list[i].value);//只有表单项元素才有value
}
}
</script>
</head>
<body>
<form>
<label>用户名：</label>
<input type="hidden" name="userId" value="1001" />
<input style="display: none;" value="隐藏的input" />
<input id="userName" name="userName" value="jiaobaoyu" /><br />
<label>密码：</label>
<input name="userPass" type="password" value="1234567"/><br />
<fieldset>
电话：<input id="phone" name="phoneuser" value="13712345789"/><br
/>
邮箱：<input name="emailuser" type="email" value="lina@sina.com"
/>
</fieldset>
</form>
地址：<input name="addressuser1" value="北京" /><br />
<ul>
<li>li111111</li>
<li>li111111</li>
<li>li111111</li>
</ul>
<p id="p1">p111111111111</p>
<div id="div1" class="mydiv" style="display: none;" >div1</div>
<div class="mydiv">div2</div>
<div id="div3">div3</div>
</body>
</html>

5、jQuery常用函数

5.1 与标签内容相关函数

5.2 与标签属性相关函数

5.3 与标签样式相关函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<style>
.redBg{background-color: red;
}
.fontColor{color: gold;
}
</style>
<script>
//1、与内容相关的函数
function textFun(){var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的所有内
容，包括了嵌套在内部的标签
console.log(str1);
var str2=$("div").text();//获取的是第一个匹配元素的围堵标签中的所有文
本，不包含标签的内容
console.log(str2);
var str3=$("div").val();//val()只能用在表单项元素中，div不是表单元
素，所以val()获取不到任何内容
var str4=$("input").val();//input是表单项元素，val()可以获取到
console.log(str3);
console.log(str4);
}
//2、与属性相关的函数
function attrFun(){var img=$("img");
//设置属性
img.attr("src","img/cat.jpg");
img.attr("title","不服！");
//移除属性
img.removeAttr("title");
//获取属性
var src=img.attr("src");
var title=img.attr("title");
console.log(src+"===="+title);
//获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中
var list=$("input[type='radio']");
for(var i=0;i<list.length;i++){var flag=$(list[i]).prop("checked");
console.log("checked="+flag);
}
}
//3、与css相关的函数
function cssFun(){//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义
好的
$("div").addClass("redBg");
$("div").addClass("redBg fontColor");
$("div").removeClass("fontColor");
$("div").removeClass();//没有参数的时候直接移除所有的样式
//$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删
除，如果没有就添加
//给所有的元素添加样式，样式直接添加，无需提前定义
$("input").css("border-color","blue");
$("input").css({"color":"red","border-color":"green"});
}
function changeCss(){$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，
如果没有就添加
}
$(function(){cssFun();
});
</script>
</head>
<body>
<button type="button" onclick="changeCss()">切换div样式</button>
性别：<input type="radio" value="0" name="gender" checked="checked"/>女
<input type="radio" value="1" name="gender"/>男
<img src="img/a.png" title="服不服" />
<div>div1<button type="button">普通按钮1</button></div>
<div>div2<button type="button">普通按钮2</button></div>
<input name="userName" value="贾宝玉" />
<input name="password" value="123456" />
</body>
</html>

6、jQuery与js对象的转换

jQuery与js对象的转换

7、jQuery中的事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

7.1 常用DOM事件列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FxkjzJuo-1615712356569)(D:\JAVA课程\笔记\前端\image-20210312100602394.png)]

7.2常用的 jQuery 事件方法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//页面加载事件
$(function(){//给所有的button绑定单击事件
$("button").click(function(){//alert(this);//this是当前对象，哪个按钮触发的单击事件this就是那个
按钮，this此时是JS对象
$(this).css("color","red");//给当前的触发对象添加一个css
});
//给所有的超链接绑定鼠标移上事件
$("a").mouseover(function(){var str=$(this).html();
$(this).html("鼠标移上-"+str);
});
//给所有的超链接绑定鼠标移出事件
$("a").mouseout(function(){var str=$(this).html();
$(this).html(str.substr(5));
});
$("a").hover(function(){$(this).css("color","red");
});
});
</script>
</head>
<body>
<a href="#">首页</a> &nbsp;
<a href="#">零食</a> &nbsp;
<a href="#">鲜花</a> &nbsp;
<button type="button">普通按钮1</button>
<button type="button">普通按钮2</button>
<button type="button">普通按钮3</button>
</body>
</html>

更多事件方法参考jQuery的事件方法

8、jQuery操作DOM

8.1 元素的增加

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理</title>
<style>
div{background: lavenderblush;
padding: 20px;
}
p{background: lemonchiffon;
padding: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){// append() - 在被选元素的结尾插入内容
$("#btn1").click(function(){$("div").append("<br/>新添加的文本<br/>");
$("div").append("<p>新添加的段落</p>");
});
//prepend() - 在被选元素的开头插入内容
$("#btn2").click(function(){$("div").prepend("<br/>新添加的文本<br/>");
$("div").prepend("<p>新添加的段落</p>");
});
//after() - 在被选元素之后插入内容
$("#btn3").click(function(){$("div").after("<br/>新添加的文本<br/>");
$("div").after("<p>新添加的段落</p>");
});
//before() - 在被选元素之前插入内容
$("#btn4").click(function(){$("div").before("<br/>新添加的文本<br/>");
$("div").before("<p>新添加的段落</p>");
});
});
</script>
</head>
<body>
<button id="btn1">append</button>
<button id="btn2">prepend</button>
<button id="btn3">after</button>
<button id="btn4">before</button>
<div>
div1
</div>
<p>p1</p>
</body>
</html>

8.2 元素的克隆

clone(boolean)-克隆匹配的DOM元素并且选中这些克隆的副本

语法：$(selector).clone(includeEvents)；

参数：可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文档处理</title><style>div{background: lavenderblush;padding: 20px;}p{border:solid 1px red;background: lemonchiffon;padding: 20px;}</style><script type="text/javascript" src="js/jquery-1.11.1.js" >             </script><script>$(function(){$("#btn3").click(function(){alert("试试就试试！");});// clone(true)$("#btn1").click(function(){$("p").clone(true).appendTo("div");});//clone(false)$("#btn2").click(function(){$("p").clone(false).appendTo("div");});});</script></head><body><button id="btn1">克隆元素-true</button><button id="btn2">克隆元素-false</button><p>要被克隆的段落<button id="btn3" >点击我试试</button></p><div>div1</div></body>
</html>

8.3 元素的替换

replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理--元素替换</title>
<style>
div{background: lavenderblush;
padding: 20px;
}
p{background: lemonchiffon;
padding: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){//replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
$("#btn1").click(function(){//$("div").replaceWith("<br/>新替换的文本<br/>");
$("div").replaceWith("<p>新替换的段落</p>");//所有的div被后面的
参数替换掉
});
//replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
$("#btn2").click(function(){$("<div>新的div</div>").replaceAll("p");//用前面的内容替换掉所有
的段落p
});
});
</script>
</head>
<body><button id="btn1">replaceWith</button>
<button id="btn2">replaceWithAll</button>
<div>
div1
</div>
<br />
<div>
div2
</div>
<p>p1</p>
<p>p2</p>
</body>
</html>

8.4 元素的删除

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理--元素删除</title>
<style>
div{background: lavenderblush;
padding: 20px;
}
p{background: lemonchiffon;
padding: 20px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){//remove() - 删除被选元素（及其子元素）
$("#btn1").click(function(){$("div").remove();//所有的div元素及其子元素被删除
});
//remove(筛选条件) - 删除符合筛选条件的元素
$("#btn2").click(function(){$("div").remove(".test");//所有的div元素中引用了class="test"的
div被删除
});
//empty() - 从被选元素中删除子元素
$("#btn3").click(function(){$("div").empty();//删除div中的所有子元素
});
});
</script>
</head>
<body><button id="btn1">remove()</button>
<button id="btn2">remove(筛选条件)</button>
<button id="btn3">empty()</button>
<div>
div1
<p>div1中的段落1</p>
<p>div1中的段落2</p>
<span style="background: lightblue; padding: 10px;">div1中的
span</span>
</div>
<br/>
<div class="test">
div2
</div>
<p>p1</p>
</body>
</html>

9、jQuery效果

9.1 隐藏和显示

语法：

$(selector).hide([speed,callback]);

$(selector).show([speed,callback]);

$(selector).toggle([speed,callback]);

参数说明：

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<style>
div{background: lightblue;
padding: 20px;
}
p{background: lavenderblush;
padding: 20px;
}
</style>
<script>
$(function(){$("#btnHide").click(function(){//$("div").hide();
//$("div").hide(2000);
$("div").hide(2000,function(){alert("隐藏完成！");
});
});
$("#btnShow").click(function(){//$("div").show();
//$("div").show(2000);
$("div").show(2000,function(){alert("显示完成！");
});
});
$("#btnToggle").click(function(){//$("p").toggle();
//$("p").toggle(2000);
$("p").toggle(2000,function(){alert("切换完成！");
});
});
});
</script>
</head>
<body>
<button id="btnHide">隐藏-div</button>
<button id="btnShow">显示-div</button>
<button id="btnToggle">切换显示和隐藏-p</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>

9.2 淡入和淡出

语法：

$(selector).fadeIn([speed,callback]);

$(selector).fadeOut([speed,callback]);

$(selector).fadeToggle([speed,callback]);

参数说明：

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>效果</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<style>
div{background: lightblue;
padding: 20px;
}
p{background: lavenderblush;
padding: 20px;
}
</style>
<script>
$(function(){$("#btnIn").click(function(){//$("div").fadeIn();
//$("div").fadeIn(2000);
$("div").fadeIn(2000,function(){alert("淡入完成！");
});
});
$("#btnOut").click(function(){//$("div").fadeOut();
//$("div").fadeOut(2000);
$("div").fadeOut(2000,function(){alert("淡出完成！");
});
});
$("#btnToggle").click(function(){//$("p").fadeToggle();
//$("p").fadeToggle(2000);
$("p").fadeToggle(2000,function(){alert("切换完成！");
});
});
});
</script>
</head>
<body>
<button id="btnIn">淡入-div</button>
<button id="btnOut">淡出-div</button>
<button id="btnToggle">切换淡入淡出-P</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>

其余效果请大家参考帮主文档自行查阅。

10、基于jQuery实现表单验证

表单验证

英雄会注册

*用户名: 用户名长度至少6位,只能包含数字、字母、下划线，必 须以字母开头
*密码： 密码长度至少8位
*确认密码： 确认密码与密码一致
*性别： 请选择性别 女 男
*电话号码：
*邮箱：
注册 重置

11、 jQuery案例

11.1 全选/全不选

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
$(function(){$("#all").click(function(){var flag=$(this).prop("checked");
var oneList=$("input[name='one']");
for(var i=0;i<oneList.length;i++){$(oneList[i]).prop("checked",flag);
}
});
$("input[name='one']").click(function(){var oneList=$("input[name='one']");
for(var i=0;i<oneList.length;i++){if(!$(oneList[i]).prop("checked")){$("#all").prop("checked",false);
return;
}
}
$("#all").prop("checked",true);
});
});
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0"
width="90%" height="160px">
<tr>
<th>全选<input id="all" type="checkbox" /></th>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>1</td>
<td>小熊饼干1</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>2</td>
<td>小熊饼干2</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>3</td><td>小熊饼干3</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
</table>
</body>
</html>

11.2 动态时间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时间</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
function showTime(){var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth()+1;//0-11
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
$("#myTime").html(y+"年"+mon+"月"+d+"日 "+h+":"+m+":"+s);
}
function showTime2(){var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth()+1;//0-11
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
$("#myTime2").html(y+"年"+mon+"月"+d+"日 "+h+":"+m+":"+s);
clock2=window.setTimeout("showTime2()",1000);
}
//变量定义的位置：两个函数中都调用了，所以需要定义成全局变量
var clock2=window.setTimeout("showTime2()",1000);
//页面加载事件
$(function(){//定时器
var clock1=window.setInterval("showTime()",1000);
$("#btn1").click(function(){window.clearInterval(clock1);
});
$("#btn2").click(function(){window.clearTimeout(clock2);
});
});
</script>
</head>
<body>
<button id="btn1">停止</button>
<div id="myTime">
</div>
<button id="btn2">停止2</button>
<div id="myTime2">
</div>
</body>
</html>

11.3 动态表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<style>
td,th{padding: 10px;
}
</style>
<script>
$(function(){$("#blBtn").click(function(){var tab=$("#myTable");//获取到了表格的jQuery对象
//获取表格的所有行
var trArr=tab.children().children();
//遍历行
for(var i=0;i<trArr.length;i++){var trObj=$(trArr[i]);
//获取每行的单元格的集合
var tdArr=$(trObj.children());
//遍历每个单元格
var str="";
for(var j=0;j<tdArr.length;j++){var tdObj=$(tdArr[j]);
var html=tdObj.html();//获取每个单元格中的内容str+=html;
}
console.log(str);
}
});
$("#addBtn").click(function(){var tab=$("#myTable");//获取到了表格的jQuery对象
var num=parseInt(Math.random()*10)+1;
var tr='<tr>'+
'<td>'+num+'</td>'+
'<td>小熊饼干'+num+'</td>'+
'<td>￥125</td>'+
'<td>1</td>'+
'<td><button name="delBtn">删除</button></td>'+
'</tr>';
tab.append(tr);
});
//此种绑定事件的方式对动态添加的元素不生效
/*$("button[name='delBtn']").click(function(){
alert("aaaa");
});*/
$(document).on("click","button[name='delBtn']",function(){$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<button type="button" id="blBtn">遍历表格</button>
<button type="button" id="addBtn">添加</button>
<table id="myTable" border="1" cellpadding="0" cellspacing="0"
width="90%" style="text-align: center;">
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td>1</td>
<td>小熊饼干1</td>
<td>￥125</td>
<td>1</td>
<td><button name="delBtn">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>小熊饼干2</td>
<td>￥125</td>
<td>1</td>
<td><button name="delBtn">删除</button></td>
</tr></table>
</body>
</html>

11.4 省市级联

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
</head>
<body>
<select id="province">
<option>--请选择省份--</option>
<option value="0">北京</option>
<option value="1">浙江省</option>
<option value="2">河北省</option>
<option value="3">广东省</option>
</select>
<select id="city">
</select>
</body>
</html>
<script>
$(function(){//创建二维数组存储省份和对应的城市
var cityList=new Array();
cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
$("#province").change(function(){//获取到城市的下拉列表框
var city=$("#city");
//先去清空原有的列表内容
city.html("");
var arr=cityList[$(this).val()];
var str="";
for(var i=0;i<arr.length;i++){str+='<option value='+arr[i]+'>'+arr[i]+'</option>';
}
city.html(str);
});
});
</script>

注：Bootstrap可以让使用者更方便的去美化页面，可以根据Bootstrap参考手册，具体查看学习

JavaScripts相关推荐

1. JavaScripts基础

   JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...

2. WEB前端网页设计 HTML CSS 网页设计参数 - JavaScripts

   JavaScripts注释:单行注释以//开头,在其后添加注释. 多行注释以/*开头,以*/结尾,在中间添加注释. JavaScripts输出 方式1:通过alert()函数弹出对话框 调用windo ...

3. 前端JavaScripts基础知识点轮播图

   1.index.html <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...

4. 前端JavaScripts基础知识点

   1放大镜 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...

5. 前端JavaScripts

   <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

6. 前端javascripts基础知识点猴子吃桃

   <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

7. 前端JavaScripts基础知识点讲义代码

   js day01 数据类型 基本数据类型 引用数据类型 数据类型转换 其他类型 ->数值类型 string boolean null undefined --->number #1: 转换 ...

8. 有的日期输入框，可直接调用javascripts

   转载于:https://www.cnblogs.com/rf-bear/p/5549126.html

9. 【黑马JS比较】用JavaScripts的DOM对象实现动态表格

   案例: 在表格上可以实现添加和删除操作 思路: 代码: html: <!DOCTYPE html> <html><head><title>动态表格< ...

最新文章

1. 畸变的单目摄像机标定
2. oracle学习第一天
3. 如何用ASPxGridView绑定多表关联的查询结果
4. 极光推送服务端API（定时推送任务，推送到指定设备，推送到所有设备）
5. 国内首家！腾讯云密钥管理系统通过密码应用验证，积极探索行业标准边界
6. Echarts 地理信息可视化：基于地图显示坐标点信息
7. android 打包问题,Android离线打包常见问题
8. H2080刷卡门禁一体机使用说明书 誉诚AD281A-T楼宇主机说明书
9. asrc调试_求助winavr编译的固件超出flash大小
10. ESP32|基于ESP32制作的低成本、可拓展性高的NES游戏机(1)(开源ESP32 NES模拟器)-效果演示及介绍
11. UT2016学习笔记
12. 点赞封面未发送已删除_微信表白新功能：有种喜欢，是给你朋友圈封面点赞
13. 关于Maxon上位机EPOS Studio的配置
14. 错误模块名称: KERNELBASE.dll 问题记录
15. python可以自动运行m文件吗_如何运行m文件而不启动matlab
16. 【kimol君的无聊小发明】—用python写论文下载器
17. 做网赚如何引流，这些方法你都试了么
18. VC6插件开发应用实例
19. 苹果怎么分享无线密码_怎么更改无线路由器密码
20. Systemverilog里面include的使用

热门文章

1. 崇州 鸡冠山 白塔湖 九龙沟 罨画池 陆游祠{组图及介绍}
2. c语言———定积分计算
3. 华为 mac地址防护
4. 线性表存储空间长度和线性表长度区别？
5. application reload
6. 一个C语言源程序是如何到一个可执行程序的
7. 关于磁场与磁能的一些总结
8. 闲谈5个改变未来的人工智能技术（CV方向）
9. 阿里云大学考试Java初级题目及解析-java初级
10. tomcat 性能优化