Java Web--HTML、CSS、JavaScript详细学习笔记（内含丰富示例代码）

Java Web–HTML、CSS、JavaScript学习笔记

**
HTML（Hyper Text Markup Language超文本标记语言）：控制的是页面的内容，是由标签组成的语言，能够展示超文本的效果。

CSS：控制的是页面的布局，视觉效果等

C/S结构：Client—Server 客户端到服务器
B/S结构：Browser—Server 浏览器到服务器

页面由三部分组成：内容（结构）、表现、行为。
内容（结构）：是我们在页面中可以看到的数据。我们称之为内容。一般内容，我们是使用html技术来展示。
表现：指的是这些内容在页面上的展示形式。比如说，布局，颜色，大小等等。一般使用CSS技术实现。
行为：指的是页面中元素与输入设备交互的响应。一般使用javaScript技术实现。

html一些标准格式：

<html><head><title> 放入标题 </title></head>
<body><font color = “red”> 今天的天气真好哇 </font>
</body>
</html>

标签就相当于java类大括号中存放的是网页的说明性内容，例如标题。中存放的是展示给用户看的信息。

HTML文件中注意事项：
HTML文件的拓展名为html或者htm。htm是老的命名规范，html是新的命名规范。
HTML文件由浏览器直接解析执行，无需编译，直接由上倒下一次执行。
HTML标签通常由开始标签和结束标签组成。例如：<html> </html> <font> </font>
开始标签和结束标签之间的内容叫做内容体。

HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如：<br/> 自关闭
HTML标签不区分大小写，为了方便阅读，建议使用小写。

HTML标签是有属性的，格式为：属性名 = “属性值”，属性值用引号引起，引号包括单引号和双引号。
HTML标签建议包裹嵌套，不建议交叉嵌套。

<!DOCTYPE html>   <!--约束，声明-->
<html lang="zh_CN">  <!--html标签表示html的开始，lang="en":表示的是支持英语，lang="zh_CN"表示中文--><!--html标签中一般分为两部分，分别是head和body-->
<head>               <!--表示头部信息，一般包含三部分，title标签，css样式，js代码-->  <meta charset="UTF-8">      <!--表示当前页面使用的UTF-8字符集--><title>标题</title>           <!--表示标题-->
</head>
<body>              <!--表示的html页面显示的主体内容-->hello
</body>
</html>

标签分为基本属性和事件属性：
1.基本属性
bgcolor：表示背景颜色属性

2.事件属性
onclick：表示单机（点击）事件
alert()：是JavaScript语言提供的一个警告框函数，它可以接收任意参数，参数就是警告框的函数信息。

常用的特殊字符：

< 对应 &lt;
> 对应 &gt;
空格 对应 &nbsp;

标题标签：
<h*></h*> *为1到6
如：<h1></h1> <h2></h2> 其中h1最大，h6最小
标签还能调节属性

超链接：
在网页中点击之后可以跳转的内容都是超链接。
<a></a>表示超链接，
href属性设置链接的地址。
target属性设置哪个目标进行跳转。
_self 表示当前页面
_blank 表示打开新页面来进行跳转

列表标签：
分为：无序列表，有序列表
<ul></ul>无序别表
<li></li>表示列表元素
例如：

<ul><li>赵四</li><li>赵五</li><li>赵六</li><li>赵七</li>
</ul>

<ol></ol>有序列表
例如：

<ol><li>赵四</li><li>赵五</li><li>赵六</li><li>赵七</li>
</ol>

Img标签
作用是显示图片
img标签是图片标签，用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置边框大小
alt属性当指定路径找不到图片时，用来代替显示的文本内容

在javaSE中路径也分为相对路径和绝对路径
相对路径：
从工程名开始算起

绝对路径：
盘符/目录/文件名

在web中路径分为相对路径和绝对路径两种
相对路径：
. 表示当前目录
… 表示上一级目录
文件名表示当前文件所在目录的文件，相当于./文件名(只是./可以省略)

绝对路径：
正确格式是：http://ip:port/工程名/资源路径
错误格式是：盘符/目录/文件名

table标签是表格标签
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置边框大小
cellspacing设置单元格间距
tr是行标签
b标签是加粗标签
th是表头标签
td是单元格标签
align设置单元格对齐方式
colspan属性设置跨列
rowspan属性设置跨行

iframe标签可以在页面上开辟一个小区域显示一个单独页面
iframe标签和a标签组合使用的步骤：
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name属性值

表单标签：
什么是表单？
表单是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
form标签就是表示表单
<input type="text"/> 表示生成一个文本输入框
value属性设置输入框内的默认初始内容
<input type="password"> 表示密码输入框
<input type="radio"/> 表示的是单选框
性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
可以用name属性来达到分组的效果，同一只组内的单选只能选一个
checked=“checked” 还可以用这个标签来达到一上来的默认选项，表示默认选中

<input type="checkbox"/> 表示的复选框
<select></select>这个对标签表示的是下拉文本选择框
<option></option>这对标签是下拉列表中的选项
selected = “selected” 文本框中的默认选项

<textarea></textarea>表示多行文本输入框（起始标签和结束标签中的内容是默认值）
rows属性设置可以显示几行的高度
cols属性设置每行可以显示几个字符宽度

<input type="reset"/> 表示的是重置按钮 value属性修改按钮上的文字
<input type="submit" value="点我就是提交啊"/> 表示的是提交按钮
<input type="button" value="俺就是一个普普通通的小按钮"/> 表示的是创建一个按钮
<input type=”file”/> 表示的是文件上传域
<input type=”hidden”/> 表示的是隐藏域（应用场景，当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域，提交的同时发送给服务器）

<form></form>是表单标签
action属性设置的是提交的服务器地址
method属性设置的是提交的方式 GET或POST

1.表单在提交的时候，数据没有发送给服务器的三种情况：
1）表单项没有name属性值
2）单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3）表单项不在提交的form标签中

2.GET请求的特点是：
1）浏览器地址中的地址是：action属性[+?+请求参数]
请求参数的格式是：name=value&name=value
例如：password=abc&sex=girl&hobby=java
2）不安全（例如提交的密码等会显示出来）
3）它有数据长度的限制
method=”get”：此方法可传送UPL中的表单内容：UPL?name=value&name=value。
注释：如果表单值包含非ASCII字符或者超过100个字符，则必须使用method=”post”。
method=”post”：此方法可传送request主体中的表单内容

3.POST请求的特点是：
1）浏览器地址栏中只有action属性值
2）相对于GET请求要更加的安全
3）理论上没有数据长度的限制

其他的标签：
div标签：默认独占一行
span标签：它的长度是封装数据的长度
p段落标签：默认会在段落的上方或下方各空出一行来（如果已有就不再空）

CSS技术介绍
CSS是【层叠样式表单】，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
语法规则：

选择器p{
font-size: 80px;
}

选择器：浏览器根据“选择器”决定CSS样式影响的元素（标签）。
属性（property）：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p{color:blue;}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号（但是尽量在每条声明的末尾都加上分号）

CSS和HTML的结合方式
第一种：
在标签的style属性上设置”key:value value;”，修改标签的样式。
这样使用的缺点：
1）如果标签多了。样式多了。代码量会非常的庞大。
2）可读性很差
3）CSS代码没什么复用性可言

第二种：
在head标签中，使用style标签来定义各种自己需要的CSS样式。
格式如下：
xxx {
key : value value;
}
这样使用的缺点：
1）只能在同一页面复用代码，不能在多个页面中复用CSS代码。
2）维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修稿，工作量太大。

第三种：
把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用
使用html的标签，导入CSS样式文件。

CSS选择器
标签名选择器：
标签名选择器的格式是：
标签名{
属性：值；
}
标签名选择器的作用是，可以决定哪些标签被动地使用这个样式。

id选择器
#id属性值{
属性：值；
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id选择器</title><style type="text/css">#id001{color: blue;font-size: 30px;border: 1px yellow solid;}#id002{color: red;font-size: 5px;border: 2px aquamarine dotted;}</style>
</head>
<body><div id="id001">div标签1</div><div id="id002">div标签2</div>
</body>
</html>

class选择器（类型选择器）
class类型选择器的格式是：
.class属性值{
属性：值；
}
class类型选择器，可以通过class属性有效地去使用这个样式。

组合选择器：
组合选择器的格式是：
选择器1，选择器2，选择器n{
属性：值；
}
组合选择器的作用是，可以让多个选择器共用同一个CSS样式代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器</title><style type="text/css">.class01, #id002{color: beige;font-size: 2px;border: #ff2d91 solid 2px;}</style>
</head>
<body><div class="class01">div标签class01</div><div class="class02">div标签</div><div id="id002">div标签3</div><span class="class01">span标签class01</span><span>span标签2</span>
</body>
</html>

JavaScript语言入门
JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要进行浏览器来解析执行JavaScript代码。JS是Netscape网景公司的产品，最早取名为LiveScript；为了吸引更多java程序员。更名为JavaScript。
JS是弱类型，Java是强类型。
弱类型，就是定义变量的时候。类型已经确定，而且不可变。

特点：
1）交互性（它可以做的就是信息的动态交互）
2）安全性（不允许直接访问本地硬盘）
3）跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

JavaScript和html代码的结合方式
第一种方式：
只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//alert是JavaScript语言提供的一个警告框函数alert("hello JavaScript");</script>
</head>
<body></body>
</html>

第二种方式：
使用script标签引入单独的JavaScript代码文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--现在需要使用script引入外部的js文件来执行src属性专门用来引入js文件，可以相对路径也可以是绝对路径script标签可以用来定义js代码，也可以用来引入js文件但是，两个功能只能是二选一使用，不能同时使用两个功能--><script type="text/javascript" src="01_js.js"></script><script type="text/javascript">alert("真是不错啊")</script>
</head>
<body></body>
</html>

也就是在一个script标签下只能干一件事。

Js中的变量：
什么是变量？变量是可以存放某些值的内存的名字。

JavaScript的变量类型：
数值类型； number int , double等等
字符串类型；string
对象类型； object
布尔类型； boolean
函数类型； function

JavaScript里特殊的值：
undefined 未定义，所有js变量为赋予初始值的时候，默认值都是undefined
null 空值
NAN 全称是Not a Number，非数字，非数值

js中定义变量格式：
var 变量名;
var 变量名 = 值;

关系（比较）运算
< >= > =
以上关系运算符使用的时候和java类似
等于：== 等于是简单地做字面值的比较
全等于：=== 除了做字面值的比较之外，还会比较两个变量的数据类型

逻辑运算：
且运算：&&
或运算：||
取反运算：!

在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用。
0、null、undefined、””(空串)都认为是false

&&与运算和||或运算有短路
短路的意思是，当这个&&或||运算有结果之后。后面的表达式不再执行。

数组：
Js中数组的定义：
格式：
var 数组名 = []; //空数组
var 数组名 = [1, ‘abc’, true] //定义数组的同时赋值元素
JavaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动地给数组做扩容操作。

函数：
函数的两种定义方式
第一种：可以使用function关键字来定义函数
使用的格式如下：
function 函数名（形参列表） {
函数体
}
在JavaScript中如何定义带有返回值的函数？
只需要在函数体内直接使用return语句返回即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>function</title><script type="text/javascript">//定义一个无参函数function fun(){alert("无参函数被调用了");}fun();//定义一个带参函数function fun2(a, b) {alert("有参函数fun2()被调用了 a => " + a + "b =>" + b);}fun2(2, 3);//定义一个有返回值的函数
//注函数的参数不能够指定类型function fun3(num1, num2) {var result = num1 + num2;return result;}alert(fun3(3, "adgfsd"));</script>
</head>
<body></body>
</html>

函数的第二种定义方式，格式如下：
使用格式如下：
var 函数名 = function(形参列表) {
函数体;
}
示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>function2</title><script type="text/javascript">var fun = function() {alert("无参函数");}fun();var fun2 = function(a, b) {alert("有参函数a = " + a + " b = " + b);}fun2(3, 4);var fun3 = function(num1, num2) {return num1 + num2;}fun3(4, 5);</script>
</head>
<body></body>
</html>

注意：在Java中函数允许重载，但是在JS中函数重载会直接覆盖掉上一次的定义，也就是说不允许重载。

函数的arguments隐性参数（只在function函数内）
就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量，这就叫做隐性参数。
隐性参数特别像java基础中的可变成参数
public void fun(Object …args);
可变长参数其实是一个数组

JS中的隐性参数也和java中可变长参数一样，操作类似数组。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>arguments</title><script type="text/javascript">function fun() {//alert(arguments.length); 可查看参数个数alert(arguments[0]);alert(arguments[1]);alert(arguments[2]);alert(arguments[3]);for (var i = 0; i < arguments.length; i++) {alert(arguments[i]);}alert("无参函数fun()");}fun(1, 2, 3, "abf");</script>
</head>
<body></body>
</html>

JS中的自定义对象（扩展内容）
Object形式的自定义对象
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性名 = 值; //定义一个属性
变量名.函数名 = function //定义一个函数

对象的访问：
变量名.属性/函数名称

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义对象</title><script type="text/javascript">var obj = new Object();obj.name = "华仔";obj.age = 18;obj.fun = function() {alert("姓名：" + this.name + " , 年龄" + this.age);}alert(obj.age);alert(obj.fun);</script>
</head>
<body></body>
</html>

{}花括号形式的自定义对象
var 变量名 = {}; //空对象
var 变量名 = {
属性名：值； //定义一个属性
属性值：值 //定义最后一个属性的时候后面不能够加分号
函数名：function() {}
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CustomObject</title><script type="text/javascript">var obj = {name: "国哥";age: 18;fun: function() {alert("姓名： " + this.name + " , 年龄" + this.age);}};alert(obj.name);obj.fun();</script>
</head>
<body></body>
</html>

js中的事件
什么是事件？
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：
onload加载完成事件；页面加载完成之后，常用于做页面js代码初始化操作
onclick单击事件；常用于按钮的点击响应操作
onblur失去焦点事件；常用于输入框失去焦点后验证其输入内容是否合法
onchange内容发生改变事件；常用于下拉列表和输入框内容发生改变后操作
onsubmit表单提交事件；常用于表单提交前，验证所有表单是否合法

事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册事件：
通过html标签的事件属性直接赋予事件响应后的代码，这种方式叫做静态注册。

<body onload="alert('静态注册onload事件')">
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onload</title><script type="text/javascript">//onload事件的方法function onloadFun() {alert("静态注册onload事件，所有代码");}</script>
</head><!--静态注册onload事件onload事件是浏览器解析完页面之后就会自动触发的事件-->
<body onload="onloadFun();"></body>
</html>

动态注册事件：
是指先通过js代码得到标签的dom对象，然后通过dom对象.事件名 = function(){} 这种赋予事件响应后的代码，叫动态注册。

动态注册的基本步骤：
1.获取标签对象
2.标签对象.事件名 = function() {}

onload事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onload</title><script type="text/javascript">//onload事件的方法function onloadFun() {alert("静态注册onload事件，所有代码");}//onload事件动态注册，是固定写法window.alert("动态注册的onload事件");</script>
</head>
<body onload="onloadFun();"></body>
</html>

onclick事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onclick</title><script type="text/javascript">function onclickFun() {alert("静态注册onclick事件");}function onclickFun2() {alert("还挺不错的哈");}</script>
</head>
<body><!--静态注册onclick事件--><button onclick="onclickFun();">按钮1</button><button onclick="onclickFun2();">按钮2</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onclick</title><script type="text/javascript">function onclickFun() {alert("静态注册onclick事件");}//动态注册onclick事件window.onload = function() {//1.获取标签对象/**document是JavaScript语言提供的一个对象(文档)* document就是表示整个页面** getElementById()** get          获取* Element      元素（也就是标签）* By           通过。。 由。。经。。* Id           id属性* getElementById()     通过Id属性获取标签对象*/var btnobj = document.getElementById("btn01");alert(btnobj);//2.通过标签对象.事件名 = function() {}btnobj.onclick = function() {alert("动态注册的onclick事件");}}</script>
</head>
<body><button onclick="onclickFun();">按钮1</button><button onload="onclickFun()">按钮2</button>
</body>
</html>

onblur事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onblur</title><script type="text/javascript">//静态注册失去焦点事件function onblurFun() {//console是控制台对象，是由JavaScrip语言提供，专门用于来向浏览器的控制器打印输出，用于测试使用//log() 是打印的方法console.log("静态注册失去焦点事件");}//动态注册失去焦点事件window.onload = function() {//1.获取标签对象let passwordobj = document.getElementById("password");alert(passwordobj);//2.通过便签对象.事件名 = function() {};passwordobj.onblur = function() {console.log("动态失去焦点事件");}}</script>
</head>
<body>用户名：<input type="text" onblur="onblurFun();"><br/>密码：<input id="password" type="text"><br/>
</body>
</html>

onchange事件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onchange</title><script type="text/javascript">function onchangeFun() {alert("女神已经改变了");}window.onload = function() {let selectobj = document.getElementById("select01");alert(selectobj);selectobj.onchange = function() {alert("男神已改变");}}</script>
</head>
<body>请选择你心中的女神：<!--静态注册onchange事件--><select onchange="onchangeFun();"><option>----女神----</option><option>----女神1----</option><option>----女神2----</option><option>----女神3----</option><option>----女神4----</option><option>----女神5----</option></select>请选择你心中的男神：<!--静态注册onchange事件--><select id="select01"><option>----男神----</option><option>----男神1----</option><option>----男神2----</option><option>----男神3----</option><option>----男神4----</option><option>----男神5----</option></select>
</body>
</html>

onsubmit表单提交事件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onsubmit</title><script type="text/javascript">//静态注册表单提交事件function onsubmitFun() {//要验证表单项是否合法，如果，有一个不合法就阻止表单提交alert("静态注册表单提交事件");return false;}window.onload = function() {let formobj = document.getElementById("form001");formobj.onsubmit = function() {alert("动态注册表单提交事件----发现不合法");return false;}}</script>
</head>
<body><!--return false可以阻止表单提交--><form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();"><input type="submit" value="静态注册"/></form><form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();"><input id="form001" type="submit" value="动态注册"/></form>
</body>
</html>

DOM模型
DOM全称是Document Object Model文档对象模型
简单理解就是，把文档中的标签，属性，文本转换成对象来管理
模拟对象化，相当于：
class Dom {
private String id; //id属性
private String tagName; //表示标签名
private Dom parentNode; //父亲
private List children; //孩子结点
private String innerHTML; //起始标签和结束标签中间的内容
}

Document对象的理解：
1.Document它管理了所有的HTML文档内容
2.document它是一个树结构的文档。有层级关系
3.它让我们把所有的标签都对象化（用一个类去记录标签的信息）
4.我们可以通过document访问所有的标签对象

document对象中的方法介绍
document.getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值

document.getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName标签的name属性值

document.getElementsByTagName(tagName)
通过标签名直接查找标签对象。tagName是标签名

document.createElement(tagname)
方法，通过给定的标签名，创建一个标签对象。tagName是要创建的标签名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementById</title><script type="text/javascript">function onclickFun() {var usernameObj = document.getElementById("username");alert(usernameObj);  //[object HTMLInputElement]就是dom对象alert(usernameObj.id);alert(usernameObj.type);alert(usernameObj.value);var usernameText = usernameObj.value;//如何验证字符串符合某个规则，需要使用正则表达式技术var patt = /^\w{5, 12}$/;/**test()方法用于测试某个字符串，是不是匹配我的规则* 匹配就返回true，不匹配就返回false*/if (patt.test(usernameText)) {alert("用户名合法！");}else {alert("用户名不合法");}}</script>
</head>
<body>用户名：<input type="text" id="username" value="kkkoke"><button onclick="onclickFun()">校验</button>
</body>
</html>

正则表达式对象（regularExpression）
什么是regular expression？
ReExp是正则表达式的缩写
当你检索某个文本时，可以使用一种模式来描述要检索的内容。ReExp就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符，并可以用于解析，格式检索，替换等等。
你可以规定字符串的检索位置，以及要检索的字符类型等等。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>regularExpression</title><script type="text/javascript">//表示要求字符串中，是否包含字母e//var patt = new RegExp("e");var patt = /e/;   //同样是regular expressionalert(patt);var str = "abecd";alert(patt.test(str));</script>
</head>
<body></body>
</html>

getElementsByName()方法
返回带有指定名称的对象集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementByName</title><script type="text/javascript">function checkAll() {//document.getElementByName()是根据指定的name属性查询返回多个标签对象集合//这个集合的操作和数组是一样的，集合中就是标签对象//集合中每个元素都是dom对象//这个集合中的元素顺序是他们在html页面中从上到下的顺序var hobbies = document.getElementsByName("hobby");//checked表示复选框的选中状态。如果选中是true，不选中是false//这个属性可读，可写for (var i = 0; i < hobbies.length; i++) {hobbies[i].checked = true;}}function checkNo() {var hobbies = document.getElementsByName("hobby");for (var i = 0; i < hobbies.length; i++) {hobbies[i].checked = false;}}function checkReverse() {var hobbies = document.getElementsByName("hobby");for (var i = 0; i < hobbies.length; i++) {if (hobbies[i].checked == false) {hobbies[i].checked = true;}else {hobbies[i].checked = false;}//也可以直接hobbies[i].checked = !hobbies[i].checked;}}</script>
</head>
<body>兴趣爱好：<input type="checkbox" name="hobby" value="cpp"> C++<input type="checkbox" name="hobby" value="java"> java<input type="checkbox" name="hobby" value="js"> JavaScript<br/><button onclick="checkAll();">全选</button><button onclick="checkNo();">全不选</button><button onclick="checkReverse();">反选</button>
</body>
</html>

getElementsByTagName()方法
返回带有指定标签名的对象集合。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementsByTagName</title><script type="text/javascript">//全选function checkAll() {var hobbies = document.getElementsByTagName("input");for (var i = 0; i < hobbies.length; i++) {hobbies[i].checked = true;}}</script>
</head>
<body>兴趣爱好：<input type="checkbox" value="cpp"> C++<input type="checkbox" value="java"> java<input type="checkbox" value="js"> JavaScript<br/><button onclick="checkAll();">全选</button>
</body>
</html>

注：document对象的三个查询方法，如果有id属性，优先使用getElementById()方法来进行查询。如果没有id属性，则优先使用getElementsByName()方法来进行查询。如果id属性和Name属性都没有再按标签查getElementsByTagName()方法;

以上三个方法，代码一定要在页面加载完成之后执行，才能查询到标签对象。

createElement()方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>creatElement</title><script type="text/javascript">window.onload = function() {var divObj = document.createElement("div");  //在内存中<div></div>divObj.innerHTML = "我真是帅啊";  //标签<div>我真是帅啊</div>已经创建，但还是只在内存中。//添加子元素document.body.appendChild(divObj);}</script>
</head>
<body></body>
</html>

节点的常用属性和方法
什么是节点？
节点就是标签对象。

常用的方法：
getElementsByTagName()方法，获取当前节点的指定标签名孩子节点。
appendChild(oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点。

属性：
childNodes，获取当前节点的所有子节点
firstChild，获取当前节点的第一个子节点
lastChild，获取当前节点的最后一个子节点
parentChild，获取当前节点的父节点
nextSibling，获取当前节点的下一个节点
previousSibling，获取当前节点的上一个节点
className，用于获取或设置标签的class属性值
innerHTML，表示获取/设置起始标签和结束标签中的内容
innerText，表示获取/设置起始标签和结束标签中的文本

Java Web--HTML、CSS、JavaScript详细学习笔记（内含丰富示例代码）相关推荐

python通信信号处理_python学习笔记——信号模块signal(示例代码)
基于python学习笔记--多进程间通信--Linux信号基础的学习基础,进一步学习Python标准库中的signal模块. 尽管signal是python中的模块,但是主要针对UNIX平台(比如Li ...
java web 文件上传_Javaweb学习笔记10—文件上传与下载
今天来讲javaweb的第10阶段学习.文件的上传与下载,今天主要说的是这个功能的实现,不用说了,听名字就是外行人也知道肯定很重要啦. 老规矩,首先先用一张思维导图来展现今天的博客内容. ps:我的思 ...
java web开发周志_javaweb学习笔记及周报告
第三周: 1.html(HyperText Markup Language:超文本标记语言 ):网页语言. (1)解释名词 a.超文本:超出文本的范畴,使用html可以轻松实现类似使文字带颜色的操作: ...
Pandas学习笔记（包括示例代码、运算结果及详细注释）
1.Series 2.DataFrame的简单运用 3.pandas选择数据 3.1 实战筛选 3.2 筛选总结 4.Pandas设置值 4.1 创建数据 4.2 根据位置设置loc和iloc 4.3 ...
【超全必看】Redis基础入门学习笔记（附示例代码）
Redis简介许多网站在海量用户访问的高并发情况下出现崩溃问题,根本原因是关系型数据库. 关系型数据库的缺点性能瓶颈:磁盘IO性能低下扩展瓶颈:数据关系复杂,扩展性差,不便于大规模集群解决思路 ...
Java数据库部分（MySQL+JDBC）（一、MySQL超详细学习笔记）
所有示例使用的数据表均为Oracle提供的SQL基础数据表(t_employees.sql dept.sql emp.sql salgrade.sql) 熟练掌握多多练习即可达到完成后端开发所需具备的 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
Effective Java（第三版）学习笔记 - 第四章类和接口 Rule20~Rule25
Effective Java(第三版) 学习笔记 - 第四章类和接口 Rule20~Rule25 目录 Rule20 接口优于抽象类 Rule21 为后代设计接口 Rule22 接口只用于定义类型 ...
重要性采样(Importance Sampling)详细学习笔记
重要性采样(Importance Sampling)详细学习笔记文章目录重要性采样(Importance Sampling)详细学习笔记前言: 参考主体: on-policy 和 off-pol ...

Java Web--HTML、CSS、JavaScript详细学习笔记（内含丰富示例代码）

Java Web–HTML、CSS、JavaScript学习笔记

Java Web--HTML、CSS、JavaScript详细学习笔记（内含丰富示例代码）相关推荐

最新文章

热门文章