报名学习开课吧Java商业项目实战就业班

最新推荐文章于 2024-07-17 09:43:10 发布

一个正在努力的好孩子

最新推荐文章于 2024-07-17 09:43:10 发布

阅读量235

点赞数 2

文章标签： html html5 css jquery

本文链接：https://blog.csdn.net/qq_48189799/article/details/120758046

版权

一、HTML

1. HTML的注释

2. HTML常用标签

（1）标题标签<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

h1到h6字体逐渐缩小

（2）段落标签<p></p>

(3)换行标签<br/>

(4)水平线标签 <hr/>

(5)范围标签<span></span>

(6)图片标签及其基本属性、热点区域的设置

(7)列表标签

（8）定义描述标签

（9）布局标签<div></div>

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

3. 标签的分类

html标签可以分为块状元素和行级元素两类。

块状元素：一般都是新起一行，可以容纳行内元素和其他块级元素；

行级元素：一般都是语义级别的基本元素，一般只能容纳文本或者其他行内元素。

块状元素和行内元素的区别： 1、块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素会排列到同一行里，其宽度随元素的内容变化而变化。 2、块级元素可以设置宽高；行内元素设置宽高无效。 3、块级元素可以设置margin，padding属性；行内元素的水平方向的padding会有边距效果，但是竖直方向的padding没有效果。

属于块状元素的：标题标签 h1-h6, 段落标签 p , 水平线标签 hr, 有序列表标签 ol--li，无序列表标签 ul--li，定义描述标签 dl-dt-dd，容器标签 div：

属于行级元素的：范围标签：span 图像标签：img

4. 超链接标签

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

实现页面的跳转功能：

实现锚链接功能：

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

实现本页面的锚链接

实现页面间的锚链接

5. 表格标签

规则表格：

不规则表格--跨行和跨列

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

6.表单

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

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

id:元素的唯一表示，不重复

name:表单项元素的名称，很重要--提交数据到服务器之后，服务器获取数据通过该名称

value:表单项元素的值，服务器获取数据通过name获取到的就是value

type:表示表单项元素的呈现形式

class:表示样式名称

readonly:表示只读，用户只能看不能改

disabled：表示禁用，该元素不能改而且背景是灰色

（1）文本框

（2）密码框

（3）单选框

（4）复选框

（5）文件域

（6）日期

（7）隐藏域

（8）下拉列表框

（9）文本域

（10）按钮

7. 标签

8.框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。例如大家可以观察一下自己的京东个人中心页面，点击左侧内容的时候，只有右边页面在变动。

9.框架集

10. HTML5中新增的语义标签

11. HTML5新的表单属性

form新属性：autocomplete 属性

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

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

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

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

input 新属性:list,multiple,placeholder,required

multiple 属性是一个 boolean 属性. multiple 属性规定元素中可选择多个值。

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

placeholder 属性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的<input>标签：text, search, url, telephone, email 以及 password。

required 属性是一个 boolean 属性. required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的<input>标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

12.HTML5新的表单元素

13.HTML5中新增的音频

14.HTML5中新增的视频

15.HTML中的转义符号

二、CSS

1.CSS的分类

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

行内样式：

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

内部样式：

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

外部样式：

1、提前定义css资源文件 2、在head标签内，定义link标签引入外部样式文件。

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

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

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

2.CSS语法

3.CSS注释

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

4.基本选择器

（1）id选择器

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

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

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

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

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

案例：

（2）class选择器

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

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

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

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

案例：

（3）元素选择器/标签选择器

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

定义选择器语法：标签名称{}；

注意：标签名称必须是html提供好的标签。使用标签选择器：自动使用在所有的同名的标签上

案例：

优先级：ID选择器 > 类选择器 > 标签选择器

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

3.CSS常用样式

（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

（2）width height:宽高

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

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

（3）背景样式

（4）文本样式

（5）列表样式

（6）边框样式

4.盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

如图所示：

盒子的宽度和高度计算：

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

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

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

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

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

5.float 浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用

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

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

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

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

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。

案例如下：

6.overflow

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

其属性有：

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

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

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

两者的区别：

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

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

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

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

display 改变元素的类型

display:block -- 显示为块级元素

display:inline -- 显示为内联元素

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

8.复合选择器

（1）全局选择器

（2）并集选择器

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

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

（3）交集选择器

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

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

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

（4）后代选择器

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

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

(5)子元素选择器

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

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

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

(6)伪类选择器

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

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

案例：

注意：

写的时候，他们的顺序尽量不要颠倒按照 lvha(四类的首字母) 的顺序。否则可能引起错误。

因为叫链接伪类，所以都是利用交集选择器 a:link a:hover

因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

实际开发中，我们很少写全四个状态，一般我们写法如下：

复合选择器的对比：

三、JavaScript

1.什么是JavaScript

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

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

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

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

作用：1、为网页添加各式各样的动态功能, 2、为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

外部的JavaScript

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

标签属性中的JavaScript

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

2.JavaScript显示数据

3.JavaScript变量

声明变量的关键字：var

语法：var 变量名称；

变量的命名规则：变量必须以字母开头

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

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

不能使用关键字保留字

变量的命名规范：见名知意。例如：breadPirce,userService等，避免无意义的a,b,c等

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

4.JavaScript的数据类型

（1）字符串String

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

String的属性及方法可以参阅其他资料，这里就不详细介绍

（2）数字Number

（3）布尔Boolean

var isUnderstand=true;

var isSingle=false;

（4）空Null

var email=null;

（5）未定义Undefined

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

共有4中情况会出现undefined的值

（6）Symbol

（7）引用数据类型：对象(Object)、数组(Array)、函数(Function)。

数组的属性及方法可以参阅其他资料，这里就不详细介绍

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

5.JavaScript中的运算符

JavaScript中的运算符基本上与java中的相同，除了以下两个：

6.JavaScript的Date对象

创建日期对象：

常用方法：

更多的方法可以通过查阅手册

7.JavaScript的Math对象

常用属性

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

常用方法

var num=Math.random();// 返回 0 ~ 1 之间的随机数。

var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。

var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。

更多的方法可以通过查阅手册

8.JavaScript的函数

常用全局函数

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

（1）isNaN(param)

用于检查其参数是否是非数字值。是数值的返回false，不是数值返回true。

console.log(isNaN(666));//false

console.log(isNaN(1+2));//false

console.log(isNaN("hello"));//true

（2）parseFloat(String)

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

（3）parseInt(string,radix)

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

9.JavaScript的自定义函数

使用function关键字定义函数。

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

注意：1、函数的形参直接写参数名称，不需要声明类型，即不需要写var. 2、函数的返回取决于函数体中是否有return关键字。

案例如下：

10.JavaScript的匿名函数

11.、JavaScript变量的作用域

（1）局部 JavaScript 变量

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

（2）全局 JavaScript 变量

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

（3）变量的生命周期

JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

12.JavaScript自定义对象

（1）定义对象

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

（2）对象的属性

可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为对象属性。

（3）访问对象的属性

（4）访问对象的方法

13.JavaScript Window--浏览器对象模型

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

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

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

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

window对象属性：

history对象：

window.history 对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。

常用方法：

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同

history.go(1/-1)-- 参数为1：等同于history.forward()，参数为-1，等同于history.back()

location对象：

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

window.location 对象在编写时可不使用 window 这个前缀。

href 当前窗口正在浏览的网页地址

replace(url) 转向到url网页地址

reload() 重新载入当前网址，如同按下刷新按钮

window对象方法：

打开和关闭浏览器案例：

弹框案例：

定时器案例：

14.JavaScript之事件

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

常用的HTML事件

更多事件参考HTML事件列表。

案例：

15.JavaScript之DOM模型

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

HTML DOM 模型被构造为对象的树：

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

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

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

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

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

document对象常用方法：

（1）查找 HTML 元素常用方法

案例：

（2）修改 HTML 内容和属性

修改内容修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

修改 HTML 元素的内容的语法： document.getElementById(id).innerHTML=新的 HTML。

注意：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

修改 HTML 元素属性的语法：

方式1：document.getElementById(id).attribute=新属性值

方式2：document.getElementById(id).setAttribute(属性名，属性值);

案例：

修改 HTML 元素的css

语法：document.getElementById(id).style.property=新样式

案例：

HTML DOM 元素 (节点)

（1）创建新的 HTML 元素

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

案例：

（2）替换 HTML 元素 -replaceChild()

（3）删除元素 -removeChild()

16.表单验证及正则表达式

这里提供一个我写的案例：

....

<form action="dest.html" method="get" enctype="multipart/form-data" class="form" οnsubmit="return isAll()">
           姓名：<input type="text" id="name" name="name" placeholder="请输入您的真实姓名" /><br /> 性别：
           <input type="radio" name="gender" value="男" checked="checked" />男
           <input type="radio" name="gender" value="女" />女<br /> 出生日期：
           <input type="date" name="birth" id="birth"/><br /> 证件照片：
           <input type="file" name="certificate" multiple="multiple" id="certificate"/><br /> 院校：
           <input list="school" name="school" id="schoolName"/><br />
           <datalist id="school">
               <option value="清华大学">
               <option value="北京大学">
               <option value="浙江大学">
               <option value="复旦大学">
               <option value="上海交通大学">
               <option value="杭州电子科技大学">
               <option value="北京林业大学">
               <option value="浙江师范大学">
               <option value="浙江农林大学">
               <option value="浙江工业大学">
               <option value="厦门大学">
               <option value="西安交通大学">
           </datalist> 专业：
           <input list="major" name="major" id="majorName" /><br />
           <datalist id="major">
               <option value="物理学">
               <option value="汉语言文学">
               <option value="广告学">
               <option value="计算机科学与技术">
               <option value="软件工程">
               <option value="机械自动化">
               <option value="电子信息工程">
               <option value="会计">
               <option value="金融工程">
           </datalist> 擅长的编程语言：
           <input type="checkbox" name="programming language" value="Java" />Java
           <input type="checkbox" name="programming language" value="C" />C
           <input type="checkbox" name="programming language" value="C++" />C++
           <input type="checkbox" name="programming language" value="C#" />C#
           <input type="checkbox" name="programming language" value="Python" />Python
           <input type="checkbox" name="programming language" value="Kotlin" />Kotlin
           <input type="checkbox" name="programming language" value="SQL" />SQL<br /> 联系电话：
           <input type="tel" id="telephone" name="telephone" οnblur="isPhoneNum()"/><span id="phonemsg"></span><br /> 邮箱地址：
           <input type="email" id="email" name="email" οnblur="isEmail()"/><span id="emailmsg"></span><br />
           <span class="protocol">用户需知：</span><br /><textarea readonly="readonly" disabled="disabled">1、本次大会秉着公平诚信的原则，所有都必须遵守
2、本次大会主要目的为各程序员之间交流学习，必须遵守友谊第一，比赛第二的原则
3、......</textarea><br />
           <button type="submit" id="reset" class="button">注册</button>
           <button type="reset" id="register" class="button">重置</button>
       </form>

注意：以上代码有省略，只截取了关键部分

正则表达式的常用知识点：

修饰符：

正则表达式模式

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

量词:

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

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

案例：

更多关于正则表达式的内容，参考正则表达式参考手册，正则表达式中的特殊字符。

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

17.JavaScript案例

（1）全选/全不选

效果展示

案例代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>全选</title>
       <script>
           function myAll(){
               var all=document.getElementById("all");
               var flag=all.checked;
               var oneList=document.getElementsByName("one");
               for(var i=0;i<oneList.length;i++){
                   oneList[i].checked=flag;
               }
           }
           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 false;
                   }
               }
               all.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" οnclick="myAll()" /></th>
               <th>序号</th>
               <th>名称</th>
               <th>单价</th>
               <th>数量</th>
               <th>总计</th>
           </tr>
           <tr>
               <td><input name="one" type="checkbox" οnclick="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" οnclick="myOne()" /></td>
               <td>2</td>
               <td>小熊饼干2</td>
               <td>￥125</td>
               <td>1</td>
               <td>￥125</td>
           </tr>
           <tr>
               <td><input name="one" type="checkbox" οnclick="myOne()" /></td>
               <td>3</td>
               <td>小熊饼干3</td>
               <td>￥125</td>
               <td>1</td>
               <td>￥125</td>
           </tr>
       </table>
   </body>
</html>

（2）动态时间

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>定时器</title>
       <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;
           }
           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);
           }
           //定时器setInterval(定时调用的函数,时间间隔毫秒)
           var flag1=window.setInterval("showTime1()",1000);

           //setTimeout(调用的函数,延迟时间调用指定函数的时间)在指定的毫秒数后调用函数或计算表达式。
           var flag2=window.setTimeout("showTime2()",1000);
       </script>
   </head>
   <body>
       <div id="today1">
           div1--显示时间1
       </div>
       <div id="today2">
           div2--显示时间2
       </div>
       <a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>
       <a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a>
   </body>
</html>

（3）动态表格

效果展示：

案例代码：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>动态表格</title>
       <style>
           td,th{
               padding: 10px;
           }
       </style>
       <script>
           function bianli(){
               var tab=document.getElementById("myTable");//获取到了表格的js对象
               //获取表格的所有行
               var trArr=tab.rows;
               //遍历行
               for(var i=0;i<trArr.length;i++){
                   var trObj=trArr[i];
                   //alert("行的下标索引："+trObj.rowIndex);
                   //获取每行的单元格的集合
                   var tdArr=trObj.cells;
                   //遍历每个单元格
                   var str="";
                   for(var j=0;j<tdArr.length;j++){
                       var tdObj=tdArr[j];
                       var html=tdObj.innerHTML;//获取每个单元格中的内容
                       var index=tdObj.cellIndex;//获取每个单元格的下标索引
                       str+=index+"-"+html+"=====";
                   }
                   console.log("行的下标索引："+trObj.rowIndex+":"+str);
               }
           }

           function addRow(){
               //获取到表格的对象
               var tab=document.getElementById("myTable");
               //给表格添加一行
               var newTr=tab.insertRow();//创建了一个空行，在页面上看不出来
               //给新创建的行添加列
               var newTd1=newTr.insertCell();//给新的行创建了一个新的单元格
               var newTd2=newTr.insertCell();
               var newTd3=newTr.insertCell();
               var newTd4=newTr.insertCell();
               var newTd5=newTr.insertCell();
               //给每一个单元格中添加内容
               var num=parseInt(Math.random()*10)+1;
               newTd1.innerHTML=num;
               newTd2.innerHTML="小熊饼干"+num;
               newTd3.innerHTML="$125";
               newTd4.innerHTML="1";
               newTd5.innerHTML='<button name="delBtn" οnclick="delRow(this)">删除</button>';
           }

           function delRow(btn){
               var tab=document.getElementById("myTable");
               //btn:表示点击的当前的删除按钮，
               //btn.parentNode获取的按钮的父元素td,btn.parentNode.parentNode获取的按钮的父元素td的父元素tr
               var trIndex=btn.parentNode.parentNode.rowIndex;
               //根据行的下标索引删除行
               tab.deleteRow(trIndex);
           }
       </script>
   </head>

   <body>
       <button type="button" οnclick="bianli()">遍历表格</button>
       <button type="button" οnclick="addRow()">添加-请在外部浏览器测试</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" οnclick="delRow(this)">删除</button></td>
           </tr>
           <tr>
               <td>2</td>
               <td>小熊饼干2</td>
               <td>￥125</td>
               <td>1</td>
               <td><button name="delBtn" οnclick="delRow(this)">删除</button></td>
           </tr>
       </table>
   </body>

</html>

（4）省市级联特效

效果展示：

案例代码：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>省市级联</title>
   </head>
   <body>
       <select οnchange="changeCity(this.value)">
           <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>

四、jQuery

1.jQuery概况

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

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

jQuery的使用：

jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的外部JavaScript脚本文件一样的语法。

文档就绪事件，实际就是文件加载事件。

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

所以我们尽可能将所有的操作都在文档加载完毕之后实现。

（1）写法1

（2）写法2

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

2.jQuery选择器

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

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

（1）元素/标签选择器

（2） #id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：$("#p1")

（3）.class 选择器

语法：$(".mydiv")

（4）全局选择器

y语法：$("*")

（5）并集选择器

语法：$("div,ul,li,.mydiv")

（6）后代选择器

语法：$("form input")

（7）子选择器

语法：$("form > input"）

（8）相邻选择器

匹配所有紧接在 prev 元素后的 next 元素

语法：$("label + input")

（9）同辈选择器

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

语法：$("form ~ input")

（10）属性选择器

匹配包含给定属性的元素

（11）可见性选择器

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

语法：$("div:visible");

$("input:hidden");

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

3.jQuery常用函数

与标签内容、标签属性、标签样式相关函数常用函数使用案例：

4.jQuery与js对象的转换

5.jQuery中的事件

（1）常用DOM事件列表

（2）常用的 jQuery 事件方法

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

6.jQuery操作DOM

元素的增加

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

元素的克隆

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

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

元素的替换

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

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

7.jQuery效果

（1）隐藏和显示

语法：

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

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

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

参数说明：可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

（2）淡入和淡出

语法：

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

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

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

参数说明：可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

8.基于jQuery实现表单验证

案例：

   <body>
       <div>程序创新大会用户注册</div>
       <iframe name="大会流程" src="Conference_process.html" frameborder="no"></iframe>
       <form action="dest.html" method="get" enctype="multipart/form-data" >
           姓名：<input type="text" id="name" name="name" placeholder="请输入您的真实姓名" required/><br /> 性别：
           <input type="radio" name="gender" value="男" checked="checked" />男
           <input type="radio" name="gender" value="女" />女<br /> 出生日期：
           <input type="date" name="birth" id="birth" required/><br /> 证件照片：
           <input type="file" name="certificate" multiple="multiple" id="certificate" required/><br /> 院校：
           <input list="school" name="school" id="schoolName" required/><br />
           <datalist id="school">
               <option value="清华大学">
               <option value="北京大学">
               <option value="浙江大学">
               <option value="复旦大学">
               <option value="上海交通大学">
               <option value="杭州电子科技大学">
               <option value="北京林业大学">
               <option value="浙江师范大学">
               <option value="浙江农林大学">
               <option value="浙江工业大学">
               <option value="厦门大学">
               <option value="西安交通大学">
           </datalist> 专业：
           <input list="major" name="major" id="majorName" required/><br />
           <datalist id="major">
               <option value="物理学">
               <option value="汉语言文学">
               <option value="广告学">
               <option value="计算机科学与技术">
               <option value="软件工程">
               <option value="机械自动化">
               <option value="电子信息工程">
               <option value="会计">
               <option value="金融工程">
           </datalist> 擅长的编程语言：
           <input type="checkbox" name="programming language" value="Java" />Java
           <input type="checkbox" name="programming language" value="C" />C
           <input type="checkbox" name="programming language" value="C++" />C++
           <input type="checkbox" name="programming language" value="C#" />C#
           <input type="checkbox" name="programming language" value="Python" />Python
           <input type="checkbox" name="programming language" value="Kotlin" />Kotlin
           <input type="checkbox" name="programming language" value="SQL" />SQL<br /> 联系电话：
           <input type="tel" id="telephone" name="telephone"/><span id="phonemsg"></span><br /> 邮箱地址：
           <input type="email" id="email" name="email" /><span id="emailmsg"></span><br />
           <span class="protocol">用户需知：</span><br /><textarea readonly="readonly" disabled="disabled">1、本次大会秉着公平诚信的原则，所有都必须遵守
2、本次大会主要目的为各程序员之间交流学习，必须遵守友谊第一，比赛第二的原则
3、......</textarea><br />
           <button type="submit" id="reset">注册</button>
           <button type="reset" id="register">重置</button>
       </form>

9.jQuery案例

（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 all=$("#all");
                   var oneList=$("input[name='one']");
                   for(var i=0;i<oneList.length;i++){
                       if($(oneList[i]).prop("checked")==false){
                           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>

（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>

（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(){
                   //获取表格的jQuery对象
                   var tab=$("#myTable");
                   //获取表格的所有行
                   //浏览器默认将所有的行tr放在tbody标签中，所以tab.children()获取到的是他body，
                   //tab.children().children()获取的才是tbody中的所有的tr
                   var trArr=tab.children().children();
                   for(var i=0;i<trArr.length;i++){
                       var str="";
                       var trObj=$(trArr[i]);//将每一行的js对象转换为jQuery的对象
                       //获取当前行中的所有的单元格
                       var tdArr=$(trObj.children());
                       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");
                   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(){
                   $(this).parent().parent().remove();
               });*/

               //动态添加的元素绑定事件的方式
               $(document).on("click","button[name='delBtn']",function(){
                   $(this).parent().parent().remove();
               });
           });

       </script>
   </head>

</html>

(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>

五、bootstrap

提供bootstrap的一个案例代码：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>程序创新大会用户注册</title>
       <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
       <script type="text/javascript" src="js/bootstrap.js"></script>
       <script>
           $(function() {
               addAllClass();
               $("#telephone").blur(function() {
                   isPhoneNum();
               });
               $("#email").blur(function() {
                   isEmail();
               });
               $("form").submit(function() {
                   return isAll() && isPhoneNum() && isEmail();
               });
               $("#myCarousel").carousel({
                   interval: 1500
               });
           });

   <body>
       <div id="head">
           <h1><span class="label label-default label-info" >程序创新大会用户注册</span></h1>
       </div>
       <div>
           <iframe name="大会流程" src="Conference_process.html" frameborder="no" class="col-lg-4 pull-left"></iframe>
           <form role="form" class="form-horizontal clearfix col-lg-8" method="get" enctype="multipart/form-data" action="dest.html">
               <div class="form-group">
                   <label for="name" class="control-label col-lg-2">姓名</label>
                   <div class="col-lg-6">
                       <input class="form-control" type="text" id="name" name="name" placeholder="请输入您的真实姓名" required/>
                   </div>
               </div>
               <div class="form-group">
                   <label for="gender" class="control-label col-lg-2">性别</label>
                   <div class="col-lg-6">
                       <label class="radio-inline"><input type="radio" name="gender" value="男" checked="checked" />男</label>
                       <label class="radio-inline"><input type="radio" name="gender" value="女" />女</label>
                   </div>
               </div>
               <div class="form-group">
                   <label for="birth" class="control-label col-lg-2">出生日期</label>
                   <div class="col-lg-6">
                       <input type="date" name="birth" id="birth" class="form-control" required/>
                   </div>
               </div>
               <div class="form-group">
                   <label for="birth" class="control-label col-lg-2">证件照片</label>
                   <div class="col-lg-6">
                       <input type="file" name="certificate" multiple="multiple" id="certificate" class="form-control" required/>
                   </div>
               </div>
               <div class="form-group">
                   <label for="school" class="col-lg-2 control-label">院校</label>
                   <div class="col-lg-6">
                       <select class="form-control" name="school" id="schoolName" required>
                           <option value="无">请选择</option>
                           <option value="清华大学">清华大学</option>
                           <option value="北京大学">北京大学</option>
                           <option value="浙江大学">浙江大学</option>
                           <option value="复旦大学">复旦大学</option>
                           <option value="上海交通大学">上海交通大学</option>
                           <option value="杭州电子科技大学">杭州电子科技大学</option>
                           <option value="北京林业大学">北京林业大学</option>
                           <option value="浙江师范大学">浙江师范大学</option>
                           <option value="浙江农林大学">浙江农林大学</option>
                           <option value="浙江工业大学">浙江工业大学</option>
                           <option value="厦门大学">厦门大学</option>
                           <option value="西安交通大学">西安交通大学</option>
                       </select>
                   </div>
               </div>
               <div class="form-group">
                   <label for="major" class="col-lg-2 control-label">专业</label>
                   <div class="col-lg-6">
                       <select class="form-control" name="major" id="majorName" required>
                           <option value="无">请选择</option>
                           <option value="物理学">物理学</option>
                           <option value="汉语言文学">汉语言文学</option>
                           <option value="广告学">广告学</option>
                           <option value="计算机科学与技术">计算机科学与技术</option>
                           <option value="软件工程">软件工程</option>
                           <option value="机械自动化">机械自动化</option>
                           <option value="电子信息工程">电子信息工程</option>
                           <option value="会计">会计</option>
                           <option value="金融工程">金融工程</option>
                       </select>
                   </div>
               </div>
               <div class="form-group">
                   <label for="programming language" class="control-label col-lg-2">擅长语言</label>
                   <div class="col-lg-10">
                       <label class="checkbox-inline"><input type="checkbox" name="programming language" value="Java" />Java</label>
                       <label class="checkbox-inline"><input type="checkbox" name="programming language" value="C" />C</label>
                       <label class="checkbox-inline"><input type="checkbox" name="programming language" value="C++" />C++</label>
                       <label class="checkbox-inline"><input type="checkbox" name="programming language" value="SQL" />SQL</label>
                       <label class="checkbox-inline"><input type="checkbox" name="programming language" value="Kotlin" />Kotlin</label>
                       <label class="checkbox-inline"><input type="checkbox" name="programming language" value="C#" />C#</label>
                       <label class="checkbox-inline"><input type="checkbox" name="programming language" value="Python" />Python</label>
                   </div>
               </div>
               <div class="form-group">
                   <label for="telephone" class="control-label col-lg-2">手机号码</label>
                   <div class="col-lg-10">
                       <input type="tel" id="telephone" name="telephone" class="form-control" /><span id="phonemsg"></span>
                   </div>
               </div>
               <div class="form-group">
                   <label for="email" class="control-label col-lg-2">手机号码</label>
                   <div class="col-lg-10">
                       <input type="email" id="email" name="email" class="form-control" /><span id="emailmsg"></span>
                   </div>
               </div>
               <div class="form-group">
                   <label for="name" class="col-lg-2 control-label">用户需知</label>
                   <div class="col-lg-6">
                       <textarea readonly="readonly" disabled="disabled">1、本次大会秉着公平诚信的原则，所有都必须遵守
2、本次大会主要目的为各程序员之间交流学习，必须遵守友谊第一，比赛第二的原则
3、......</textarea>
                   </div>
               </div>
               <div class="form-group">
                   <div class="col-sm-offset-2 col-sm-10">
                       <button type="submit" id="reset" class="btn btn-default btn-success btn-lg">注册</button>
                       <button type="reset" id="register" class="btn btn-default btn-warning btn-lg">重置</button>
                   </div>
               </div>
           </form>
       </div>
       <div id="myCarousel" class="carousel slide">
           <div class="carousel-inner">
               <div class="item active">
                   <img src="img/1.png">

               </div>
               <div class="item">
                   <img src="img/2.png">

               </div>
               <div class="item">
                   <img src="img/3.png">

               </div>
               <div class="item">
                   <img src="img/4.png">

               </div>
               <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
               <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
           </div>
       </div>
   </body>

</html>

项目结构：

一个正在努力的好孩子

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
报名学习开课吧Java商业项目实战就业班

一、HTML1. HTML的注释2. HTML常用标签（1）标题标签<h1></h1><h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>h1到h6字体逐渐缩小（2）段落标签<p></p>(3)换行标签<br/>(4).
复制链接

扫一扫