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

最新推荐文章于 2023-05-28 13:53:34 发布

枫的可以

最新推荐文章于 2023-05-28 13:53:34 发布

阅读量332

点赞数 2

分类专栏：个人学习笔记 Java Web 文章标签： html5 javascript css

本文链接：https://blog.csdn.net/burgerh/article/details/118341821

版权

个人学习笔记同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

Java Web

3 篇文章 0 订阅

订阅专栏

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 expression

        alert(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，表示获取/设置起始标签和结束标签中的文本

枫的可以

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Java Web--HTML、CSS、JavaScript详细学习笔记（内含丰富示例代码）

**Java Web–HTML、CSS、JavaScript学习笔记**HTML（Hyper Text Markup Language超文本标记语言）：控制的是页面的内容，是由标签组成的语言，能够展示超文本的效果。CSS：控制的是页面的布局，视觉效果等C/S结构：Client—Server 客户端到服务器B/S结构：Browser—Server 浏览器到服务器页面由三部分组成：内容（结构）、表现、行为。内容（结构）：是我们在页面中可以看到的数据。我们称之为内容。一般内容，我们是使用htm
复制链接

扫一扫