Java入门（五）HTML网络基础

最新推荐文章于 2021-09-07 09:29:49 发布

不愿放下技术的小赵

最新推荐文章于 2021-09-07 09:29:49 发布

阅读量1.2k

点赞数

分类专栏： # Java入门文章标签： java

本文链接：https://blog.csdn.net/qq_33204709/article/details/110238580

版权

Java入门专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、Web概述、HTML概述、文本、图像、超链接、表格、表单操作

客户端和服务端：

在这里插入图片描述

Javaweb项目运行流程

1.客户端(浏览器)发送http求,讷求到达服务端；
2.服务端接受请求,解析并处理请求,返回响应数据；
3.客户端接受响应数据,解析,显示页面。

注意：

1.htm1网页文档保存在服务端
2.由浏览器下载了文档后,解析并且显示

HTML文档的基本结构：

<html>
	<head></head>
	<body ></body>
</html>

什么是HTML

HTML( Hyper Text Markup Language)：超文本标记语言,一种纯文本类型的语言。
- 用来设计网页的标记语言；
- 用该语言编写的文件，以 .html 或者 .htm 为后缀；
- 由浏览器解释执行；
- HTML页面上，可以嵌套用脚本语言编写的程序段，如：JavaScript

（可以理解为标签固定的XML）

注释：

添加注释的语法如下
- 
- 注释不可以嵌套

<!DOCTYPE>声明：

HTML有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确地显示出HTML页面。这就是<! DOCTYPE>的用处
<!DOCTYPE>不是HTML标签。它为浏览器提供一项信息(声明)，即HTML是用什么版本编写的。

（<!DOCTYPE> 声明帮助浏览器正确地显示网页。）

标记：

HTML 标记通常也被称为HTML标签( HTML tag)。
- HTML标签是由尖括号包国的关键词，比如<html>
- HTML标签通常是成对出现的，比如<p>和</p>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签

HTML版本：

从Web诞生早期至今,已经发展出多个HTML版本：

版本年份
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

版本	年份
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

常用的声明：

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 5
```
<!DOCTYPE html>
```

<head>元素的作用：

<head> 元素是所有头部元素的容器，
<head> 内的元素可声明元信息，指示浏览器在何处可以找到样式表，包含的脚本，等等。
以下标签都可以添加到 head 部分：
- <title>、<meta>、<link>、<style>、<script> 等

<title>元素

<title> 元素定义文档的标题，能够:
- 定义浏览器工具栏中的标题；
- 提供页面被添加到收藏夹时显示的标题；
- 显示在搜索引擎结果中的页面标题。
```
<!DOCTYPE html>
<html>
	<head>
		<title>我的HTML</title>
    </head>
    <body>
    </body>
</html>
```

<meta>元素

<meta> 元素提供关于HTML文档的元数据。
元数据不会显示在页面上，但是对于机器是可读的。
用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
常用属性有：content、http-equiv、charset

<head>
    <title>我的HTML</title>
    <!-- 设置文档编码，要和文档保存时的编码一致 -->
    <!-- <meta http-equiv="content-type" content="text/html;charset=utf-8"/> -->
    <meta charset="utf-8"/>
</head>

HTML常见的标签：

块级标记（一个标签占用一行）

h1~h6

p
行级标记（多个标签可以共用一行输出）

i / s / strong / u / span / a …

网页中图片路径的写法：

绝对路径

http://www.tmooc.cn/images/logo.png

file:///D:/images/a.jpg

file:home/soft01/images/a.jpg
相对路径

不以 http:// file/// 盘符 / 开头的路径。

图片标签的常用属性：

<img
	src=""	图片的目标路径
	alt="" tit1e="" 图片的描述文本
	width="308px" 图片宽度:单位px
	height="30X"  图片高度:单位px
/>
<!-- width和 height-般只设置一个,另一个将会自适应 -->

alt—IE有效
title–Google有效

注意：

Windows系统文件名不区分大小写，Linux系统文件名严格区分大小写

常用的图片格式：jpg,png,gif

只写宽度，高度不写会自适应

img标签支持的图片格式

img标签支持的图片格式：

1.jpg不支持透明色
2.png支持透明色
3.gif支持动态图

补充：

gif会有一些不支持的颜色

png和gif都支持透明色

超链接：

用于跳转页面
<a href=“链接目标路径”>链接文本</a>

在这里插入图片描述

超链接a标签的其他属性：

alt=""
title=""
target="" 可选两个值： _self _blank

补充：

alt、title—鼠标放上后会显示的文字。
target： self–在当前页面跳转；blank–新打开一个页面进行跳转。

超链接锚点的用法：

<a href="#computer">跳转到别处</a>

网页中的表格标签：

表格是一个有行有列的控件，它的基本结构是：

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

表格table标签常见属性：

width：定义表格宽度；
height：定义表格高度；
border：定义边框；
align：定义对齐方式，left | center | right；
cellpadding：单元格内边距；
cellspacing：单元格外边距。

表格单元格的合并：

使用td的2个属性实现：

rowspan 行合井(合并多行单元格)
colspan 列合井(合并多列单元格)

例如：

在这里插入图片描述

二、CSS概述、CSS语法、CSS选择器、CSS声明

实体引用	字符	说明
<	<	小于
>	>	大于
&	&	与字符（和字符）
'	’	单引号
"	"	双引号

表格标签的第二套标准：

<table>
    <thead></thead>
    <tbody>
        <tr>
            <td></td> <td></td> <td></td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

表格的作用：

在网页中呈现二维数据表格。(行列)
早期网页中常用表格来实现页面布局。

列表元素

列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列：

在这里插入图片描述

所有的列表都由列表类型和列表项组成：
- 列表类型：有序列表 <ol> 和无序列表 <ul>；
- 列表项：<li>，用于指示具体的列表内容。

有序列表：

<ol> 元素编写有序列表，用于列出页面上有特定次序的一些项目；
<ol> 元素中也只能包含列表项元素 <li>

在这里插入图片描述

无序列表：

<ul> 元素表示无序列表，用于列出页面上没有特定次序的一些项目；
<ul> 元素中只能包含具体的列表项元素 <li>
- 列表中包含的每一项都必须包含在起始标记 <li> 和结果标记 </li> 之间。

列表嵌套：

将列表元素嵌套使用，可以创建多层列表；
- 常用于创建文档大纲，导航菜单等

在这里插入图片描述

html之表单相关标签：

表单标签是用于在页面中显示一个可以收集用户填写的数据的控件。

<form>
	<input type="text" />
	<input type="password" />
	…
</form>

表单相关常用控件：

input表单控件

文本框：	 <input type="text" />
密码框：	 <input type="password" />
单选按钮：	<input type="radio" />
多选框：	 <input type="checkbox" />
提交按钮：	<input type="submit" value="按钮文字"/>
普通按钮：	<input type="button" value="按钮文字" />
重置按钮：	<input type="reset" value="按钮文字" />

非input表单控件

<!-- 下拉列表框 -->
<select>
	<option>北京市</option>
	<option>河北省</option>
	<option>黑龙江省</option>
</select>
<!-- 多行文本域 -->
<textarea rows="5" cols="30"></textarea>

当提交form表单后：

有name属性的组员值才会被传递
如果是GET请求的链接，链接格式类似如下：
https://www.baidu.com?key=java

注意：

1.只有含有name属性的表单控件才可以提交数据
2.单选按钮与多选框需要设 value属性,才可以提交数据

表单控件默认值的设置：

1.文本框直接设匱 value属性设显示的默认文本
2.单选按钮设 checked属性默认选中
3.多选框设置 selected属性默认选中

CSS级联样式表

什么是CSS：

CSS 指层叠样式表( Cascading Style Sheets)
样式定义如何显示HTML元素
样式通常存储在样式表中

如何使用CSS：

内联方式
- 样式定义在单个的HTML元素中
内部样式表
- 样式定义在HTML页的头元素中
外部样式表
- 将样式定义在一个外部的 CSS 文件中(.css文件)
- 由HTML页面引用样式表文件

内联样式：

样式定义在HTML元素的属性 style 里
CSS 语法
- 只需要将分号隔开的一个或者多个属性/值对作为元素的 style 属性的值
- 属性和属性值之间用 : 连接
- 多对属性之间用 ; 隔开

<h1 styler"color blue;">CSS的使用</h1>

内部样式：

样式定义在HTML文档头部的 <style> 元素内
- 在文档的<head>元素内添加<style>元素
- 在<style>元素中添加样式规则

HIML代码

<h2>CSS有3种用法</h2>

CSS代码

<style type="text/css">
    h2 {
        color: red;
    }
</style>
<!-- 可以在当前页面范围内重用 -->

外部样式：

样式定义在独立的css文件中
- 一个纯文本文件，文件后缀为.css
- 该文件中只能包含样式规则
使用步骤
- 创建外部样式文件
- 引用该样式文件

外部样式（续1）：

HTML代码

<p>1.内联方式。</p>
<p>2.内部样式表。</p>
<p>3.外部样式表。</p>

CSS代码（c1.css）

p {
    background-color: silver;
}

引用CSS代码

<link rel="stylesheet" type="text/css" href="../css/c1.css" />

CSS代码的语法结构

p { color: red; }

p称为选择器，color: red 称为样式属性。
选择器的作用是为了选出当前页面中符合要求的一个或多个标签。
样式属性的作用是为了给选出来的标签设置属性

CSS的选择器：

1.标签选择器：

/* 选出当前页面中标签名称符合要求的所有标签 */
h1 { color: red; }

2.id选择器：（#开头）

HTML代码

<h3 id="a"></h3>

CSS代码

/* 选出当前页面中标签的id属性符合要求的一个标签 */
#a { color: blue; }

3.class选择器（类选择器）（.开头）

HTML代码

<!-- 如果编写html标签时需要让某些标签应用这一类样式 -->
<!-- 则设置标签的class属性为"类名"。 -->
<li class="red"></li>
<li class="red"></li>
<p class="red width200"></p>

CSS代码

/* 
 * 定义几类样式
 */
.red { background-color: red; }
.width200 { width: 200px; }

4.派生选择器：

HTML代码

<li>
    <a href="">链接</a>
</li>
<a href="">链接</a>

CSS代码

/* 派生选择器可以通过父标签找到符合要求的子标签 */
ul li a { color: red; }

派生选择器（续）：后代选择器（子选择器）

HTML代码

<p>
    北京市<u>海淀区<strong>北三环</strong>西路</u>甲18号<strong>中鼎</strong>大厦B座7层
</p>

CSS代码

p strong {
    color: red;
}

5.分组选择器：（用逗号分隔）

CSS代码

h1,h2,h3,h4,h5,h6,ul,ol,li,body,img {
    margin: 0px;
    padding: 0px;
}
/* 把上述选择器所选出的标签当成一组，统一加样式。 */
/* 使用分组选择器，把内外边距都清空，防止浏览器显示效果不一致 */

CSS常用属性：

1.布局相关属性
2.背景属性
3.字体属性
4.文本属性
5.边框属性
6.复杂属性

布局相关属性：

width：内容宽度
height：内容高度
margin：设置外边距（该边框和另一个边框之间的距离）
margin:10px; 同时四个方向的外边距
margin:10px 20px; 上下为10px，左右为20px
margin:0px auto; 块级标记居中的写法
margin:10px 20px 30px 40px; 上右下左
margin-top:上外边距
margin-left:左外边距
margin-right:右外边距
margin-bottom:下外边距
padding：设置内边距（该边框和其内容之间的距离）与margin的设置方式一致

CSS 渲染页面时使用的盒子模型：

一个div占用页面的宽度由外边距/边框/内边距/内容区域共同组成。

三、背景、字体、行高、边框、复杂属性（display、float、position）

背景相关属性：（background）

background-color 背景颜色

颜色的值可以如下设置方式:
1. red 类似于red的英文单词
2. #ffffff 6位16进制字符串
3. #abc 相当于 #aabbcc
4. rgb(255,255,255)
5. rgba(255,255,255, 0~1)

背景图片：

background- image 背景图片

一旦为div设置了背景图片，div内部的元素将会在背景图片之上显示，

1.设置方式

background- image: url(“背景图片的路径”);

背景图片的平铺方式：

background- repeat 背景图片的平铺方式
- 设置方式：
  1. background-repeat: repeat;
  2. background-repeat: repeat-x; 橫向平铺
  3. background-repeat: repeat-y; 纵向平铺
  4. background-repeat;no- repeat; 不平铺

背景图片的定位：

background- position 背景图片的定位设置方式：

center I top I bottom I left I right；
1. background-position: left center;
2. background-position: right bottom
3. background-position: center center
4. background-position: 50px 100px
  
  （x轴偏移量为50px，y轴偏移量为10）

背景图片的大小：

background-size 背景图片的大小

设置方式：
- background-size: 100px 120px; 设置图片的宽和高

字体属性（font）：

font-size: 字体大小

设置方式：
- font-size: 30px; 像素为单位
- font-size: 30cm; 厘米为单位
- font-size:1.5em; 默认字体的1.5倍大小

字体：

font-family: 字体

设置方式：
- font-family: 微软雅黑;

字体的粗细（磅值）：

font- weight: 字体的粗细(磅值)

设置方式：
- font-weight: 100~900pt;
- font- weight: 英文单词
  1. lighter 细一些
  2. normal 普通粗细
  3. bold 加粗
  4. bolder 比粗更粗

字体样式：

font-style: 字体样式

设置方式:
- font-style: normal 普通样式
- font-style: italic 斜体字

文本属性（text）：

color: 文本颜色

设置方式:
- color: #aaa; #aaaaaa; rgb(0, 0, 0)
text-align: 文本的对齐方式

设置方式
- text-align: left 左对齐
- text-align: right 右对齐
- text-align: center 居中

行高：

line- height: 行高
- div中的文本默认情况下垂直居行高的中，
- 如果希望文本在div中垂居中,只需要把行高属性设置为与 height属性一致即可。
- line-height: 200px;

文本装饰：

text- decoration: 文本装饰

设置方式
- text- decoration: none; 啥也没有
- text- decoration: underline; 下划线
- text-decoration: overline; 上划线
- text-decoration: line-through; 删除线

边框属性：

border: 10px solid black;
- border-width: 边框宽度
- border-color: 边框颜色
- border-style: 边框样式 solid
border-top: 10px solid black; 上边框
- border-top-width: 上边框宽度
- border-top-color: 上边框颜色
- border-top-style: 上边框样式

设置圆角边框：

border-radius: 3px; 圆角半径为3像素

溢出属性：

overflow: 溢出
1. visiable 溢出部分可见
2. hidden 溢出部分隐藏
3. scroll 溢出部分显示滚动条

常见复杂属性：

display
float
position

display控制元素的显示方式：

设置方式:
- display: inline; 按照行级标签进行显示；
- display: block; 按照块级标签进行显示。
- display: none; 隐藏标签

补充：

行级标签一行中可以有有多个，从左到右一次摆放；
块级标签一个占用一行。

注意：

只有块级标签可以设置width和height。

float浮动：

设置方式
- foat: left; 元素浮动起来后往左放
- foat: right; 元秦浮动起来后往右放
一旦元秦设置了浮动属性，当前元素特会脱离默认文档流，在默认文档流之上进行渲染绘制，那么元素先前的位置将会被其他元占用；
float 最常见的用法：把块级标记横向排列。

清除浮动：

设置方式：
- clear: both; 当前元素将不会被浮动的元素所覆盖。

四、定位（position）

定位属性 position：

定位元素在页面中的位置；
设置方式：
- position: absolute; 绝对定位
- position: relative; 相对定位

补充：z-index: 设置元素的堆叠顺序（一般设置header为z-index:999;用于置顶显示）

绝对定位：

设置方式：
- position: absolute; 绝对定位
如果设置一个div的 position为 absolute，那么当前div会脱离赋认文档流，

成为一个单独的层，我们可以使用 z-index 属性设置层的编号，编号越大，越靠上层，

上层元素将会把下层元素覆盖。
如果需要改变元素的位置,可以使用以下几个属性：
- top: 离上边界的距离 px
- left: 离左边界的距离 px
- right: 离右边界的距离 px
- bottom: 离下边界的距离 px

相对定位：

设置方式：
- position: fixed; 相对浏览器窗口定位
默认情况下,标签在通过这些属性定位时，需要寻找参照物的定位点，

先找到当前标签的父标签，看一下父标签是否含有属性position: relative:
- 1.如果有,则该父标签就是参照物,将会参照父标签的左上角顶点进行定位；
- 2.如果没有,继续寻找祖先标签,直到找到body,那么就以body左上角质点为参照物的定位点。

五、JavaScript概述、组成、基本语法

什么是JavaScript：

一款在浏览器端运行的弱类型脚本语言。
JavaScript 是嵌入HML中在浏览器中的脚本语言，具有与 Java 和 C语言类似的语法；
一种网页编程技术，用来向HTML页面添加交互行为直接嵌入HTML页面；
由浏览器解释执行代码,不进行预编译。

JavaScript的特点：

可以使用任何文本编辑工具编写；
由浏览器内雷的 JavaScript引攣执行代码；
解释执行：事先不编译,逐行执行；
基于对象：内置大量现成对象。

JavaScript能做什么：

客户端数据计算；
客户端表单合法性验证；
浏览器事件的触发；
网页特殊显示效果制作；
服务器的异步数据提交。

JavaScript的组成：

ECMAScript规范（Js语法部分）
DOM( Document object Model文档对象模型）
BOM( Browser object Model浏览器对象模型)

ECMAScript规范-js基础语法：

JS数据类型：

在这里插入图片描述

String类型

由 Unicode字符、数字、标点符号组成的字符序列；
直接量首尾由一对单引号或双引号括起,其作用一样；
没有字符类型,字符就是长度为1的字符串；
特殊字符需要转义符

转义符，如：\n，\\，\’，\"

单引号和双引号嵌套时无需转义

var str='你好!\n欢迎来到"javaScript世界"';
alert(str);

Number类型

不区分整型数值和浮点型数值；
所有数字都采用64位浮点格式存储,类似于 double格式。

整数直接量

默认的整数直接量是10进制的；
16进制整数直接量前面加上0x，八进制前面加0

浮点数直接量

默认的小数直接量使用小数点记录数据，如 3.4，5.6
也可以使用指数记录数据，如 4.3e23 = 4.3 * 10的23次方

Boolean类型

仅有两个值：true 和 false；
可以自动转型作为数值参与运算，运算时true=1，false=0

数据类型的隐式转换：

JavaScript属于松散类型的程序语言
- 变量在声明时不需要指定数据类型
- 变量所引用的数据有类型
不同类型数据在计算过程中会自动进行转换

数字+字符串 => 数字转换为字符串

数字+布尔值 => true转换为1, false转换为0

字符串+布尔值 => 布尔值转换为字符串true或 false

布尔值+布尔值 => 布尔值转换为数值1或0

数据类型转换函数：

toString()
- 所有数据类型均可转换为 String类型。
parseInt()
- 强制转换成整数，如果不能转换，则返回NaN。( not a number )
- 例如：
  - parseInt(“5.5”) 返回 5
  - parseInt(6.12) 返回 6，可以作为取整函数。
parseFloat()
- 强制转换成浮点数，如果不能转换，则返回NaN；
- 例如: parse Float(“6.12”) 返回 6.12。

数据类型转换函数（续1）：

typeof
- 查询当前类型，返回 string / number / boolean / object / function / undefined
- 例如：typeof(“test” + 3)，返回 “string”
isNaN（is not a number ？）
- 判断被检测表达式经过转换后是否不是一个数，
- 如果被检测表达式不是数则返回 true，否则返回 false。
```
isNaN(56); // false
isNaN("56"); // false
isNaN("a56"); // false
isNaN(""); // false
isNaN(parseInt("")); // true
```

特殊数据类型：

null
- null 在程序中代表"无值" 或者 “无对象”；
- 可以通过给一个变量赋值 null 来清除变量的内容。
undefined
- 声明了变量但从未赋值；
- 对象属性不存在。

在这里插入图片描述

算术运算：

加(+)、减(-)、乘(*)、除(/)、余数(%)
- + 可以表示加法，也可以用于字符串的连接；
- - 可以表示减号，也可以表示负号，如：x = -y
递增(++)、递减(–)
- i++ 相当于 i=i+1，i-- 相当于 i=i-1

**补充：**Java中，5/2结果是2；JS中，5/2结果2.5。

关系运算：

关系运算用于判断数据之间的大小关系
- “>”（大于），"<"（小于），">="（大于等于），"<="（小于等于），"=="（等于），"！="（不等于）
关系表达式的值为 boolean 类型（ “true” 或 “false” ）

关系运算（续1）：

全等：===
- 类型相同，并且数值相同
不全等：!==

**注意：**当变量值为空字符串、0、null、undefined、false的时候，相当于false

js引擎对boolean类型的解释规则：

1.非空字符串解释为true，""字符串为 false
2.非0数字解释为true，0为 false,
3.undefined 和 null 都为 false。

练习：

验证13位条形码

42682926218 2

求出前12位奇数位数字之和。62061=19
求出前12位偶数位数字之和。209228=23
把前12位奇数位数字之和与偶数位数字之和的3倍相加。19+69=88
取结果的个位数。8
用18减去这个个位数。2
再取结果的个位数。2

六、js常用API、面向对象编程

JS常用API（查文档）

String
Number

Javascript中的数组：

JS数组的特点:
1. JS的 Array 对象中可以存放不同类型的元素；
2. JS的 Array 对象长度可变。

案例：

验证18位身份证号是否合法:最后一位是前17位算出来的

34052419800101001 X

算法：

把前17位分别乘以不同的系数，对应的系数分别是:

7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2
把得到的结果累加求和；
把得到的结果除以11，看余数是多少；

余数只可能是:0,1,2,3,4,5,6,7,8,9,10这11个数；

分别对应的最后一位身份证号为：1,0,X,9,8,7,6,5,4,3,2

**注意：**js数字类型的有效位数只有16位（整数+小数），超过16位就会丢失精度

声明函数井提供参数列表：

我们可以使用 arguments 数组获取函数的参数列表；

arguments 数组封装了调用者传递过来的参数列表。

function doClick(a, b) {
    return arguments[0] + arguments[1];
}

补充：

在js调用函数过程中，只检测函数名，不检测参数列表，

如果参数名称匹配则商接调用在目标函数中,可以使用arguments访问传递过来的参数列表。

**注意：**js 中没有函数S的重载，如果出现相同函数名的两个函数，后一个有效。

JavaScript的面向对象编程简介：

JS 是一款支持基于面向对象编程的弱类型脚本语言。

js中创建对象的方式：

function Persion() {
    this.name="zh";
    this.age=15;
    this.hobby=["吃","喝","玩","乐"];
}

Javascript中的DOM操作：

浏览器当把页面加载完毕后，将会把整篇html文档解析为DOM树，
我们可以使用js的DOM相关的API方法，通过一定的方式获取这篇文档中的一个或多个标签对象，
然后再使用API操作这些标签。

常见API：

通过id获取标签对象：
```
var p = document.getElementById("p");
```
p就相当于：<p id=“p”></p> 整体。

如何访问以及修改p标签的内容文本呢？

var text=p.innerHTML;
p.innerHTML="修改成的目标文本";

如果获取了 input 文本框对象，我们可以访问文本框中填写的内容：

var input=document.getElementById("xxx");
var v=input.value;
input.value=""; // 修改文本框中的内容

七、JS相关DOM操作常见API、DOM中节点的相关操作

JS相关DOM操作：

常见API：

1.查找页面中的标签：
- var e = document.getElementById(“id属性值”);
- var ary = document.getElementsByTagName(“标签名”);
- var ary = document. getElementsByName (“name”);
- 父标签 = e.parentNode;
- 子标签数组 = e.childNodes;
2.操作标签的内容文本：
- e.innerHTML
- e.innerText
3.操作文本框中的内容：
- e.value
4.操作标签的css样式属性：
- e.style.color=“red”;
- e.style.fontSize=“18px”;
- e.style.backgroundColor=“blue”;
- e.style.backgroundImage=“url(‘img/a.jpg’)”;
  
  ···
- e.className=“样式类名”;

节点属性：

getAttribute()方法：根据属性名称获取属性的值；

setAttribute()、removeAttribute();

<a href="Default.aspx" title="this is a link" id="a1">Click Me</a>

<script type="text/javascript">
    var a1 = document.getElementById("a1");
    var href = a1.getAttribute("href");
    alert(href);
    alert(a1.innerHTML);
</script>

在这里插入图片描述

元素节点的样式：

style 属性
- node.style.color
- node.style.fontSize

className 属性

<p id="p1">一周畅销榜</p>

<script type="text/javascript">
	var o = document.getElementById("p1");
	o.style.color = "red";
	o.style.fontSize = 20;
	// 或者
	o.className = "样式类名称"
</script>

在这里插入图片描述

查询节点：

如果需要操作 HTML 元素，必须首先找到该元素。
查询节点的方式：
- 通过 id 查询；
- 通过层次（节点关系）查询；
- 通过标签名称查询；
- 通过 name 属性查询。

根据元素id查询节点：

document.getElementById()
- 通过指定的 ID 来返回元素节点，忽略文档的结构；
- 查找整个 HTML 文档中的任何 HTML 元素；
- 如果 ID 值错误，则返回null。
```
<p id="p1">一周畅销<span>榜</span></p>

<script type="text/javascript">
	var o = document.getElementById("p1");
	alert(o.innerHTML);
</script>
```

在这里插入图片描述

根据层次查询节点：

parentNode
- 遵循文档的上下层次结构，查找单个父节点。
childNodes
- 遵循文档的上下层次结构，查找多个子节点。

根据标签名查询节点：

getElementsByTagName()
- 根据指定的标签名称返回所有的元素；
- 忽略文档的结构；
- 查找整个 HTML 文档中的所有元素；
- 如果标签名称错误，则返回长度为 0 的节点列表。
返回一个节点列表（数组）
- 使用节点列表的 length 属性获取个数；
- {index}：定位具体的元素。

**注意：**getElementsByTagName 方法忽略文档的结构，对 document 进行查询，即：在整个树上查询。

根据name属性查询节点：

document.getElementsByName()

根据标签的 name 属性的值进行查询

<input type="radio" name="sex" value="0" />male
<input type="redio" name="sex" value="1" />female
<br/><br/>
<input type="radio" name="state" value="0" />开通
<input type="radio" name="state" value="1" />暂停
<input type="radio" name="state" value="2" />删除

<script type="text/javascript">
	var nodes = document.getElementsByName("sex");
    alert(nodes.length); // 2
    nodes = document.getElementsByName("state");
    alert(nodes.length); // 3
</script>

创建新节点：

document.createElement(elementName)

elementName：要创建的元素标签名称；
返回新创建的节点。

// 创建新节点
var newNode = document.createElement("input");

// 设置节点的信息
newNode.type = "text";
newNode.value = "mary";
newNode.style.color = "red";

添加新节点：

parentNode.appendChild(newNode)
- 追加：新节点作为父节点的最后一个子节点添加。
parentNode.insertBefore(newNode, refNode)
- refNode：参考节点，新节点位于此节点之前添加。

在这里插入图片描述

注意：一般用 E.parentNode.insertBefore(noewNode,E);在E之前插入新节点

在这里插入图片描述

案例：

实现级联下拉列表框；
onchange事件（更改下拉项选项时触发）；
selectObj.selectedIndex 返回当前选中项的下标。

实现逻辑：

1.当用户选择了某个省份选项时，获取用户选中项的值，
2.根据用户选中的省份,查询该省份包含的城市列表，

[“北京市”,“河北省”,“山东省”,“陕西省”]

[

[“海淀区”,“海淀区”,“海淀区”,“海淀区”],

[“保定”,“保定”,“保定”,"保定”,“保定”],

……

]
3.遥历所有城市,创建 option标签，把 option标签追加到select标签中

八、事件、定时器、event、BOM、window、screen、history、location、navigate对象

常见事件：

1.onclick 单击
2.onsubmit 表单提交
3.onblur 焦点失去事件
4.onload 标签加载完毕事件
5.onchange 下拉列表框更改下拉项事件

事件属性：

通过一个事件属性，可以再某个事件发生时对某个元素进行某种操作。

在这里插入图片描述

event对象：

任何事件触发后将会产生一个 event 对象；
event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息。
- 获得 event对象
- 使用 event对象获得相关信息,如单击位置、触发对象等。
常用属性: clientX / clientY / cancelBubble 等

使用event对象：

对于 event 对象，经常需要获得事件源；
- 事件源，即触发事件的元素（事件的目标节点）
IE 浏览器：event.srcElement

Firefox 浏览器：event.target

<div onclick="func(event);">div test</div>
<script type="text/javascript">
// IE 浏览器
function func(e) {
    alert(e.srcElement.nodeName);   // DIV
}
// Firefox 浏览器
function func(e) {
    alert(e.target.nodeName);		// DIV
}
</script>

使用event对象(续1)：

<div onclick="func(event);">div test</div>
<script type="text/javascript">
// 考虑浏览器兼容问题
function func(e) {
    var obj = e.srcElement || e.target;
    alert(obj.nodeName);   // DIV
}
</script>

事件处理机制：

冒泡机制

在这里插入图片描述

事件处理机制（取消向上冒泡）：

可以取消事件的冒泡

event.stopPropagation();
event.cancelBubble = true;

<div style="border: 1px solid black; height: 100px" onclick="alert('div');">
    <p style="border: 1px solid red; height: 50px" onclick="alert('p');">
        pText
        <input type="button" value="button1" onclick="event.cancelBubble=true; alert('button');" />
    </p>
</div>

JavaScript主要分为三部分：

ECMA基础语法部分；
DOM操作；
BOM。

什么是BOM？

Browser Object Model：浏览器对象模型，用来访问和操纵浏览器窗口，使 JavaScript有能力与浏览器“对话。
- 通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作；
- 没有相关标准，但被广泛支持。

window对象：

window表示浏览器窗口，
- 所有 JavaScript全局对象、函数以及变量均自动成为window对象的成员。
常用属性
- document：窗口中显示的HTML文档对象；
- history：浏览过窗口的历史记录对象；
- location：窗口文件地址对象；
- screen：当前屏幕对象；
- navigator：浏览器相关信息。

window对象的方法：

弹窗警告
- alert("")
弹确认对话框：
- confirm("")
输入框：
- prompt("")

window对象——常用方法：

alert()，confirm()
setTimeout()，clearTimeout()
setInterval(), clearInterval()

定时器：

多用于网页动态时钟、制作倒计时、跑马灯效果等
周期性时钟
- 以一定的间隔执行代码，循环往复
一次性时钟
- 在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

周期性定时器：

setInterval(exp, time)：周期性触发代码exp。
- exp：执行语句；
- time：时间周期，单位为毫秒；
- 返回已经启动的定时器对象。

clearInterval(tID)：停止启动的定时器：

tID：启动的定时器对象。

window.setInterval("alert('hello');", 3000);
// 或者
window.setInterval(func, 3000);

function func() {
    alert("hello");
}

一次性定时器：

setTimeout(exp, time)：一次性触发代码exp。
- exp：执行语句；
- time：间隔时间,单位为毫秒；
- 返回已经启动的定时器

clearTimeout(tID)：停止启动的定时器

tID：启动的定时器对象

window.setTimeout( "alert(hello);", 3000);
// 或者
window.setTimeout(func, 3000);

function func() {
    alert("hello");
}

screen对象：

screen 对象包含有关客户端显示屏幕的信息；
常用子获取屏幕的分辨率和色彩；
常用属性：
- width/height
- availWidth/availHeight

history对象：

history对象包含用户（在浏览器窗口中）访问过的URL；
- length属性：浏览器历史列表中的URL数量。

方法

back(); // 后退
forward(); // 前进
go(num); // 跳到

alert(history.length);
history.forward(); // 等同于单击前进”按钮
history.back(); // 等同于单击“后退”按钮
history.go(-2); // 同于单击两次“后退”按钮

location 对象：

location 对象包含有关当前URL的信息，
- 常用于获取和改变当前浏览的网址。
href 属性：当前窗口正在浏菀的网页地址。
方法
- reload()：重新载入当前网址,同按下刷新按钮
```
location.href="http://www.baidu.com";
```

navigator 对象：

navigator 对象包含有关浏览器的信息，
- 常用于获取客户端浏览器和操作系统信息。
```
navigator.userAgent;
```

九、JQuery框架

JQuery框架：

jQuery是一个 Javascript 库；
jQuery极大地简化了 Javascript 編程；

jQuery很容易学习。

function $(id) {
    return document.getElementById(id);
}

JQuery的HelloWorld：

<script type="" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // 当document加载完毕之后，执行下列代码
    alert(1);
})
</script>

<a id="a"></a>

JQuery的基础写法：

$(function() {});

JQuery的常用选择器：

jQuery选择器准确地选取希望应用效果的元素；
jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元秦进行选择；
选择器允许您对HTML元秦组或单个元秦进行操作。

常见选择器的种类：

jQuery 元素选择器
- $(“p”) 选取 <p> 元素；
- $(“p. intro”) 选取所有 class=" intro" 的<p>元素；
- $(“p#demo”) 选取所有 id=“demo” 的<p>元素；
- $(“div a”) 选出div标签下的a标签。(多个)
jQuery 属性选择器
jQuery css选择器

jQuery 属性选择器：

JQuery 使用 XPath 表达式来选择带有给定属性的元素；
$("[href]") 选取两有带有href属性的元素；
$("[href=’#’]") 选取所有带有href值等于"#"的元素；
$("[href!=’#’]") 选取所有带有href值不等于"#"的元素；
$("[href$=’.jpg’]") 选取所有href值以".jpg" 结尾的元素。

jQuery 淡入淡出：

$(selector).fadeOut(speed, callback);
$(selector).fadeIn(speed, callback);

jQuery 滑动：

$(selector).slideDown(speed, callback);
$(selector).slideUp(speed, callback);

jQuery的html DOM操作：

$(selector).text() 文本
$(selector).html()
$(selector).val() 表单控件值
$(selector).attr() 属性
$(selector).css() css样式
$(selector).addClass() 增加css样式
$(selector).removeClass() 移除css样式

不愿放下技术的小赵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Java入门（五）HTML网络基础

目录

一、Web概述 、HTML概述 、文本 、图像、超链接 、表格 、表单操作

二、CSS概述、CSS语法、CSS选择器、CSS声明

三、背景、字体、行高、边框、复杂属性（display、float、position）

四、定位（position）

五、JavaScript概述、组成、基本语法

六、js常用API、面向对象编程

七、JS相关DOM操作常见API、DOM中节点的相关操作

八、事件、定时器、event、BOM、window、screen、history、location、navigate对象

九、JQuery框架

一、Web概述、HTML概述、文本、图像、超链接、表格、表单操作