HTML5+CSS3+JS前端核心（初学者必须要掌握的基础知识）

最新推荐文章于 2024-05-23 16:52:46 发布

牙上有菜叶

最新推荐文章于 2024-05-23 16:52:46 发布

阅读量4.2k

点赞数 3

分类专栏： Javaweb 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/pengyu1112/article/details/126560094

版权

Javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端开发核心技术

HTML
CSS
JavaScript

HTML5

简介

HTML，全称“Hyper Text Markup Language（超文本标记语言）”。

基本标签

HTML标签

整个网页是从<html>标签开始的，到</html>结束

head标签

该标签代表页面的头部，定义一部分比较特殊的内容，往往是“不可见内容（相对于浏览器）”

`<head>`标签	含义
`<title>`	用于定义网页标题
`<meta>`	用于定义网页的基本信息
`<style>`	用于定义CSS样式
`<link>`	链接外部的CSS文件
`<script>`	链接外部的JS文件
`<base>`	用于定义页面的所有链接的基础定义

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
		</style>
        <link rel="stylesheet" href="style.css">
		<script src="../js/Xxx.js"></script>
	</head>
	<body>
	</body>
</html>

body标签

body的意思是身体，也就是咱们页面的内容部分，进行展示，为可见内容

段落与文字

标签名	含义
`<h1>~<h6>`	标签
`<p>`	段落
`<br>`	换行
`<hr>`	水平线
`<div>`	分割（块元素）
`<span>`	区域（行内元素）

标签划分

html按照结构功能来分，分为单标签和双标签。

单标签(自闭合标签, 空标签): 只有一个<>组成，例如<br ／>。

<base /> base标签
<meta /> 元信息
<link /> 引入标签
<br /> 换行标签
<hr /> 水平线
<img /> 图片标签
<input /> 输入框

双标签(一般标签, 体标签): 由<></>组成，有始有终，<>表示标签开始，</>表示标签结束，例如<div>...</div>。


<html>页面标签</html>
<head>头部标签</head>
<body>可视标签</body>
<title>页面标题</title>
<div>盒子标签</div>
<p>段落标签</p>
<h1>标题标签</h1>
<span>空元素</span>
<em>斜体字体</em>
<strong>加粗字体</strong>
<ul><li>无序列表</li></ul>
<ol><li>有序列表</li></ol>
<a href=””>超链接</a>
<iframe>内联框架</iframe>

块元素和行内元素

HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
块元素特点：
1. 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
2. 块元素内部可以容纳其他块元素或行元素；
行内元素特点：
1. 可以与其他行内元素位于同一行；
2. 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

列表

有序列表

语法

<ol>
    <li>1</li>
    <li>2</li>
</ol>

属性

type属性	解释
1	数字1，2，3
a	小写英文字母a、b、c
A	大写英文字母A、B、C
i	小写罗马数字i、ii、iii
I	大写罗马数字I、II、III

无序列表

语法

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

属性

type属性值	列表项的序号类型
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

定义列表

语法

<dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
</dl>

表格

标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格

<!-- border-collapse 默认值为separate，
		即每个td单元格都有独立的边框；
		collapse表示相邻单元格共用一个边框，
		此时 border-spacing 将不起作用，
		设置为collapse单元格间距将消失。 -->
		<table border="1" style="border-collapse: collapse;">
			<tr>
				<td><input type="checkbox" onclick="qf()"></td>
				<td>姓名</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>涵涵</td>
				<td>18</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>依依</td>
				<td>20</td>
			</tr>
		</table>

合并行和合并列

合并行

语法

<td rowspan="跨度的行数">

合并列

语法

<td colspan="跨度的列数">

图像标签

语法

<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）" alt="当 图片无法显示时，将显示这句话">

属性	说明
src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

链接标签

语法

<a href="链接地址" target="目标窗口的打开方式">

target属性值	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

表单标签

语法

<input type="类型">

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.d1{
				width: 50%;
				height: 50%;
				position: relative;
				top: 50px;
				left: 30%;
				font-size: 20px;
			}
			#s1{
				color: red;
			}
			#s2{
				color: burlywood;
			}
			.d2{
				position: relative;
				left: 100px;
				width: 900px;
				height: 40px;
			}
			.d3{
				position: relative;
				left: 200px;
				width: 500px;
				height: 40px;
			}
			.d4{
				position: relative;
				left: 200px;
			}
			#i1{
				width: 200px;
				height: 25px;
			}
			#select{
				width: 100px;
				height: 25px;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<form>
				<div class="d2">
					<span id="s1">&nbsp;*</span>
					<span>用&nbsp;户&nbsp;名:</span>
					<input id="i1" type="text" placeholder="用户名设置成功后不可修改">
					<span id="s2">6-30位字母、数字或"_",字母开头</span>
				</div>
				<div class="d2">
					<span id="s1">*</span>
					<span>登录密码:</span>
					<input id="i1" type="password" placeholder="6-20位字母、数字或符号">
				</div>
				<div class="d2">
					<span id="s1">*</span>
					<span>确认密码:</span>
					<input id="i1" type="text" placeholder="再次输入您的登录密码">
				</div>
				<div class="d2">
					<span id="s1">&nbsp;&nbsp;&nbsp;*</span>
					<span>&nbsp;姓&nbsp;&nbsp;&nbsp;名:</span>
					<input id="i1" type="text" placeholder="请输入姓名">
					<span><a href="http://" style="color: burlywood;">姓名填写规则</a></span>
				</div>
				<div class="d2">
					<span id="s1">*</span>
					<span>证件类型:</span>
					<select id="select" name="">
						<option value="">二代身份证</option>
						<option value="">港澳台身份证</option>
						<option value="">户口簿</option>
					</select>
				</div>
				<div class="d2">
					<span id="s1">*</span>
					<span>证件号码:</span>
					<input id="i1" type="text" placeholder="请输入您的证件号码">
				</div>
				<div class="d2">
					<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
					<span>邮&nbsp;&nbsp;&nbsp;箱:</span>
					<input id="i1" type="text" placeholder="请正确填写邮箱地址">
				</div>
				<div class="d2">
					<span id="s1">*</span>
					<span>手机号码:</span>
					<input id="i1" type="text" placeholder="请输入您的手机号码">
					<span id="s2">请正确填写手机号码,稍后将向手机号码发送短信验证码</span>
				</div>
				<div class="d2">
					<span id="s1">*</span>
					<span>旅客类型:</span>
					<select id="select" name="">
						<option value="">成人</option>
						<option value="">儿童</option>
						<option value="">学生</option>
					</select>
				</div>
				<div class="d4">
					<input type="checkbox" name="" id="">
					<span>我已阅读并同意遵守<a href="http://" style="text-decoration: none;">《中国铁路客户服务中心网站服务条款》</a></span>
				</div>
				<div class="d3">
					<input type="submit" value="注册">
				</div>
			</form>
		</div>
	</body>
</html>

初学者常用

标签名	语义
div	分割(块元素)
span	区域(行内元素)
p	段落
ol	有序列表
ul	无序列表
dl	定义列表
li	列表项
dt	定义术语
dd	dd定义描述
h1~h6	标题
br	换行
hr	水平线
a	超链接
img	图片标签
table	表格
tr	表格行
td	单元格

更多学习请前往w3school官网：https://www.w3school.com.cn/html/html5_intro.asp

CSS3

简介

CSS，全称“（层叠样式表）”。CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。

HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。

CSS的引入方式

三种方式：1.外部样式表、2.内部样式表、3.内联样式表

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 外部样式表 -->
	<link rel="stylesheet" href="style.css">
	
	<!-- 内部样式表 -->
	<style type="text/css">
		p{
			color: red;
		}
	</style>
	<body>
		<!-- 内联样式表 -->
		<p style="color: red;">这是一段文字</p>
	</body>
</html>

选择器

用一种方式把你想要的那一个标签选中。

标签选择器

语法

标签名{
}

示例

p{
    color: red;
}

id选择器

语法

#id名{
}

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p1{
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 内联样式表 -->
		<p id="p1">这是一段文字</p>
	</body>
</html>

类选择器

语法

.类名{
}

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.p1{
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 内联样式表 -->
		<p class="p1">这是一段文字</p>
	</body>
</html>

文字样式

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
font-style	字体斜体
color	颜色

段落属性

属性	说明
text-decoration	下划线、删除线、顶划线
text-transform	文本大小写
font-varient	将英文文本转换为“小型”大写字母
text-indent	段落首行缩进
text-align	文本水平对齐方式
line-height	行高
letter-spacing	字距
word-spacing	词距

边框样式

属性	说明
border-width	边框的宽度
border-style	边框的外观
border-color	边框的颜色

背景样式

属性	说明
background-image	定义背景图像的路径，这样图片才能显示嘛
background-repeat	定义背景图像显示方式，例如纵向平铺、横向平铺
background-position	定义背景图像在元素哪个位置
background-attachment	定义背景图像是否随内容而滚动

超链接样式

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

背景色：background-color 属性可用于指定链接的背景色。

属性	说明
a:link	定义a元素未访问时的样式
a:visited	定义a元素访问后的样式
a:hover	定义鼠标经过显示的样式
a:active	定义鼠标单击激活时的样式

表格样式

表格边框合并

border-collapse属性值	说明
separate	默认值，边框分开，不合并
collapse	边框合并，如果相邻，则共用一个边框

盒子模型

属性	说明
border	（边框）元素边框
margin	（外边距）用于定义页面中元素与元素之间的距离
padding	（内边距）用于定义内容与边框之间的距离
content	（内容）可以是文字或图片

浮动

float属性值	说明
left	元素向左浮动
right	元素向右浮动

清除浮动

clear属性值	说明
left	清除左浮动
right	清除右浮动
both	左右浮动一起清除

定位布局

绝对定位：position: absolute;

相对定位：position: relative;

固定定位：position: fixed;

更多学习请前往w3school官网：https://www.w3school.com.cn/css/index.asp

JavaScript

简介

JavaScript是一门脚本语言。HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。

引入方式

外部引入
内部引入
元素事件引入

入门基础

数据结构

JavaScript的数据结构包括：标识符、关键字、常量、变量等。

数据类型

基本数据类型：

数字型：Number(整数和浮点数)
字符串型：String（字符串）
布尔型：Boolean（true和false）

特殊数据类型：

空值（null）
未定义值（undefined）
转义字符（\n、\'、\"）

JS语法

JavaScript 使用 var 关键词来声明变量。

= 号用于为变量赋值。

作用域

全局作用域和局部作用域

全局（在函数之外）声明的变量拥有全局作用域。
局部（函数内）声明的变量拥有函数作用域。

在 ES2015 之前，JavaScript 是没有块作用域的。

可以使用 let 关键词声明拥有块作用域的变量。

常量

通过 const 定义的变量与 let 变量类似，但不能重新赋值。因此我们使用const来定义常量

运算符

JavaScript的运算符按运算符类型可以分为以下5种：

算术运算符；
比较运算符；
赋值运算符；
逻辑运算符；
条件运算符；

算术运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
–	递减

赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

typeof方法

该方法可以查看某个值的类型

typeof "Bill"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof NaN                    // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'Bill', age:19}  // 返回 "object"
typeof new Date()             // 返回 "object"
typeof function () {}         // 返回 "function"
typeof myCar                  // 返回 "undefined" *
typeof null                   // 返回 "object"

显示数据

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

表达式

表达式是一个语句的集合，计算结果是个单一值。

在JavaScript中，常见的表达式有4种：

赋值表达式；
算术表达式；
布尔表达式；
字符串表达式；

类型转换

字符串转换为数值型

parseInt()  //将字符串型转换为整型

parseFloat()  //将字符串型转换为浮点型

数值型转换为字符串型

toString()

执行顺序

瀑布式加载，某些模块是通过被调用才会执行

严格区分大小写

为了提高代码的可读性，建议添加空格和;

注释

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

//单行注释内容

/*多行注释内容*/

流程控制

选择结构
循环结构

选择结构

if语句
if…else语句
if…else if…语句

switch语句

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
}

循环语句

while循环
do…while循环
for循环

函数

如何定义函数

使用function关键字来定义

无参无返回值

function(){
    //函数体语句
}

有参无返回值

function(参数1,参数2,….,参数n){
    //函数体语句
}

无参有返回值

function 函数名(){
    //函数体语句
    return 表达式;

}

有参有返回值

function 函数名(参数1,参数2,….,参数n){
    //函数体语句
    return 表达式;
}

对象

对象也是变量。但是其可以包含很多值

值以名称：值对的方式来书写

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

属性

属性	属性值
firstName	Bill
lastName	Gates
age	62
eyeColor	blue

方法

方法是在对象上执行的动作。

方法以函数定义被存储在属性中。

属性	属性值
firstName	Bill
lastName	Gates
age	62
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

this关键字

在函数定义中，this 引用该函数的“拥有者”。

在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。

换言之，this.firstName 的意思是 this 对象的 firstName 属性。

常见事件

常见的HTML事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

字符串

JavaScript 字符串是引号中的零个或多个字符。你可以使用单引号或者多引号

var carname = "Porsche 911";
var carname = 'Porsche 911';

字符串方法

方法名	语义
length	属性返回字符串的长度
indexOf()	返回字符串中指定文本首次出现的索引（位置）
lastIndexOf()	返回指定文本在字符串中最后一次出现的索引
search()	搜索特定值的字符串，并返回匹配的位置
slice()	提取字符串的某个部分并在新字符串中返回被提取的部分
substring()	类似于 `slice()`
substr()	类似于 `slice()`
replace()	另一个值替换在字符串中指定的值
toUpperCase()	把字符串转换为大写
toLowerCase()	把字符串转换为小写
concat()	连接两个或多个字符串
trim()	删除字符串两端的空白符
charAt()	返回字符串中指定下标（位置）的字符串
charCodeAt()	返回字符串中指定索引的字符 unicode 编码
split()	将字符串转换为数组

数字方法

方法名	语义
toString()	以字符串返回数值
toExponential()	返回字符串值，它包含已被四舍五入并使用指数计数法的数字
toFixed()	返回字符串值，它包含了指定位数小数的数字
toPrecision()	返回字符串值，它包含了指定长度的数字
valueOf()	以数值返回数值

全局方法

方法	描述
Number()	返回数字，由其参数转换而来。
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

数组

数组是一种特殊的变量，它能够一次存放一个以上的值。

创建数组

//第一种
var array-name = [item1, item2, ...];

//第二种
var cars = new Array("Saab", "Volvo", "BMW");

我们可以通过下标来取值

数组方法

方法名	语义
toString()	把数组转换为数组值（逗号分隔）的字符串
join()	可将所有数组元素结合为一个字符串
pop()	从数组中删除最后一个元素
push()	（在数组结尾处）向数组添加一个新的元素；返回新数组的长度
shift()	会删除首个数组元素，并把所有其他元素“位移”到更低的索引；返回被“位移出”的字符串
unshift()	（在开头）向数组添加新元素，并“反向位移”旧元素；返回新数组的长度
splice()	可用于向数组添加新项；返回一个包含已删除项的数组
concat()	通过合并（连接）现有数组来创建一个新数组；返回一个新数组
slice()	用数组的某个片段切出新数组

日期

默认情况下，JavaScript 将使用浏览器的时区并将日期显示为全文本字符串

Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间)

创建Date对象

Date 对象由新的 Date() 构造函数创建。

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

new Date()

new Date() 用当前日期和时间创建新的日期对象：

日期获取方法

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

日期设置方法

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

数学

Math.round()：的返回值是 x 四舍五入为最接近的整数

Math.pow(x, y) 的返回值是 x 的 y 次幂

Math.sqrt(x) 返回 x 的平方根

Math.abs(x) 返回 x 的绝对（正）值

Math.ceil(x) 的返回值是 x 上舍入最接近的整数

Math.floor(x) 的返回值是 x 下舍入最接近的整数

Math.sin(x) 返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）

Math.cos(x) 返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值

Math.random() 返回介于 0（包括）与 1（不包括）之间的随机数

for循环

for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}

for in循环

for (key in object) {
  // code block to be executed
}

for of循环

for (variable of iterable) {
  // code block to be executed
}

while循环

while (条件) {
    要执行的代码块
}

break和continue关键字

break 语句“跳出”循环。

continue 语句“跳过”循环中的一个迭代。

正则表达式（熟悉即可）

var rel = /pattern/;

使用test()方法进行校验

修饰符

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性	描述
global	RegExp 对象是否具有标志 g。
ignoreCase	RegExp 对象是否具有标志 i。
lastIndex	一个整数，标示开始下一次匹配的字符位置。
multiline	RegExp 对象是否具有标志 m。
source	正则表达式的源文本。

RegExp 对象方法

方法	描述
compile	编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。

我们在使用正则表达式时在网上寻找后进行修改，适合自己即可

BOM

Browser Object Model 浏览器对象模型,将浏览器当做对象,可以与浏览器进行交互.

location对象

我们可以通过location对象来获取相应信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="getWindowLocation()">获取信息</button>
	</body>
	<script type="text/javascript">
		function getWindowLocation(){
			alert(window.location.hostname);
			console.log(window.location.href);
		}
	</script>
</html>

history对象

记录当前浏览器的历史记录,实现页面的前进后退.

属性

属性	说明
current	当前窗口的URL
next	历史列表中的下一个URL
previous	历史列表中的前一个URL
length	历史列表的长度，用于判断列表中的入口数目

方法

方法	说明
go()	进入指定的网页
back()	返回上一页
forward()	进入下一页

1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="a.html">a</a>
		<a href="b.html">b</a>
	</body>
</html>

a.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
			div{
				width: 500px;
				height: 500px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div>
			<marquee behavior="" direction="left">滚动</marquee>
			<a href="b.html">进入b网页</a>
			<button onclick="forword()">前进</button>
			<button onclick="back()">后退</button>
		</div>
	</body>
	<script type="text/javascript">
		function forword() {
			window.history.forward();
		}
		function back() {
			window.history.back();
		}
	</script>
</html>

b.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 500px;
				height: 500px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div>
			<button onclick="forword()">前进</button>
			<button onclick="back()">后退</button>
		</div>
	</body>
	<script type="text/javascript">
		function forword() {
			window.history.forward();
		}
		function back() {
			window.history.back();
		}
	</script>
</html>

我们可以通过点击a界面或者b界面的按钮来实现返回上一页或者进入下一页

定时器

实现轮播图会使用到定时器，一定要会使用

方法

setTimeout()和clearTimeout()：可以使用setTimeout()方法来设置“一次性”调用的函数。其中clearTimeout()可以用来取消执行setTimeout()方法。

setInterval()和clearInterval()：可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。

案例：点名程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				position: relative;
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				left: 40%;
				top: 100px;
			}
			#d2{
				position: relative;
				width: 150px;
				height: 60px;
				background-color: pink;
				top: 50px;
				left: 75px;
				font-size: 40px;
				text-align: center;
			}
			#d3{
				position: relative;
				width: 240px;
				height: 30px;
				top: 170px;
				left: 25px;
			}
			#b1{
				margin-left: 55px;
			}
			#b2{
				margin-left: 60px;
			}
			
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				选人
			</div>
			<div id="d3">
				<button id="b1" onclick="start()">开始</button>

				<button id="b2" onclick="end()">停止</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var arr = ["彭宇","全福缘","李钰昌","马浩然","莫尚泉","刘涛","刘小双","李政铭","梁铸"];
		var name;
		function start(){
			name = setInterval(function(){
				var text = parseInt(Math.random() * arr.length);
				document.getElementById("d2").innerText = arr[text];
			},100);
		}
		function end(){
			clearInterval(name);
		}
	</script>
</html>

对话框

alert()：警告框。仅有提示文字，没有返回值；
confirm()：确认框。具有提示文字，返回“布尔值”（true或false）；
prompt()：输入框。具有提示文字，返回“字符串”；

文档对象

document对象简介

document对象是window对象中的子对象

document对象属性

属性	说明
title	文档标题，即title标签内容
URL	文档地址
fileCreateDate	文档创建日期
fileModifiedDate	文档修改时间（精确到天）
lastModified	文档修改时间（精确到秒）
fileSize	文档大小
fgColor	定义文档的前景色
bgColor	定义文档的背景色
linkColor	定义“未访问”的超链接颜色
alinkColor	定义“被激活”的超链接颜色
vlinkColor	定义“访问过”的超链接颜色

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="a1" href="https://www.baidu.com/?tn=88093251_87_hao_pg">点击进入百度</a>
	</body>
	<script type="text/javascript">
		document.linkColor="blue";      //设置未单击时的超链接颜色
		document.alinkColor="#000000";  //设置当超链接被单击时显示的颜色
		document.vlinkColor="#00CCFF";  //设置单击过的超链接的颜色
	</script>
</html>

document对象方法

方法	说明
document.write()	输入文本到当前打开的文档
document.writeIn()	输入文本到当前打开的文档，并添加换行符“\n”
document.getElementById()	获取某个id值的元素
document.getElementsByName()	获取某个name值的元素，用于表单元素

DOM（重点）

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。

DOM节点属性

属性	说明
parentNode	获取当前节点的父节点
childNodes	获取当前节点的子节点集合
firstChild	获取当前节点的第一个子节点
lastChild	获取当前节点的最后一个子节点
previousSibling	获取当前节点的前一个兄弟节点
nextSibling	获取当前节点的后一个兄弟节点
attributes	元素的属性列表

DOM节点操作

document.getElementById("元素id");


document.getElementsByName("表单元素name值");

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

创建节点

在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。

var e = document.createElement("元素名");
var txt = document.createTextNode("元素内容");
e.appendChild(t);    //把元素内容插入元素中去

插入节点

在JavaScript中，插入节点有2种方法：appendChild()和insertBefore()。

删除节点

在JavaScript中，我们可以使用removeChild()方法来删除当前节点下的某个子节点。

案例：实现图书的增删

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="in1" type="text">
		<button onclick="btn1()">添加</button>
		<button onclick="btn2()">删除</button>
		<div id="d1">
			<ul id="ul1">
				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//添加事件
		function btn1(){
			//获取输入框内容
			var in1 = document.getElementById("in1");
			
			//创建节点
			var pb = document.createElement("li");
			var text = document.createTextNode(in1.value);
			pb.appendChild(text);
			
			var ul1 = document.getElementById("ul1");
			ul1.appendChild(pb);
			
			in1.value = "";
		}
		
		//删除事件
		function btn2(){
			
			
			//获取输入框内容
			var in1 = document.getElementById("in1");
			var in11 = in1.value;
			console.log(in11);
			
			
			var p1 = document.getElementsByTagName('li');
			
			var ul1 = document.getElementById("ul1");
			for (var i = p1.length - 1; i >= 0; i--) {
				console.log(p1[i].innerText);
				if((in11 == p1[i].innerText)){
					ul1.removeChild(p1[i]);
				}
			}
		}
 	</script>
</html>

事件

鼠标事件

事件	说明
onclick	鼠标单击事件
ondbclick	鼠标双击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件

键盘事件

方法	说明
onkeydown	按下键事件（包括数字键、功能键）
onkeypress	按下键事件（只包含数字键）
onkeyup	放开键事件（包括数字键、功能键）

表单事件

事件	说明
onfocus	获取焦点事件
onblur	失去焦点事件
onchange	状态改变事件
onselect	选中文本事件

页面相关事件

方法	说明
onload	页面加载事件
onresize	页面大小事件
onerror	页面或图片加载出错事件

script">
//添加事件
function btn1(){
//获取输入框内容
var in1 = document.getElementById(“in1”);

		//创建节点
		var pb = document.createElement("li");
		var text = document.createTextNode(in1.value);
		pb.appendChild(text);
		
		var ul1 = document.getElementById("ul1");
		ul1.appendChild(pb);
		
		in1.value = "";
	}
	
	//删除事件
	function btn2(){
		
		
		//获取输入框内容
		var in1 = document.getElementById("in1");
		var in11 = in1.value;
		console.log(in11);
		
		
		var p1 = document.getElementsByTagName('li');
		
		var ul1 = document.getElementById("ul1");
		for (var i = p1.length - 1; i >= 0; i--) {
			console.log(p1[i].innerText);
			if((in11 == p1[i].innerText)){
				ul1.removeChild(p1[i]);
			}
		}
	}
</script>

```

事件

鼠标事件

事件	说明
onclick	鼠标单击事件
ondbclick	鼠标双击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousemove	鼠标移动事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件

键盘事件

方法	说明
onkeydown	按下键事件（包括数字键、功能键）
onkeypress	按下键事件（只包含数字键）
onkeyup	放开键事件（包括数字键、功能键）