B站尚硅谷JavaWeb教程中前端三件套部分本人学习笔记

最新推荐文章于 2024-09-04 23:27:20 发布

禾火.

最新推荐文章于 2024-09-04 23:27:20 发布

阅读量466

点赞数

文章标签：前端学习 html

本文链接：https://blog.csdn.net/c3209/article/details/125780646

版权

HTML

1:

<html>							表示整个html页面的开始
    <head>						头信息
		<title>标题</title>	   标题
    </head>
    <body>						body是页面的主体内容
        页面主体内容
    </body>
</html>							表示整个html页面的结束

html注释：

2:

1.标签的格式：<标签名>封装的数据</标签名>

2.标签名大小写不敏感

3.标签拥有自己的属性

（1）基本属性：bgcolor = “red” 可以修改简单的样式效果

（2）事件属性：onclick = “alert(‘你好’)” 可以直接设置事件响应后的代码

<html lang="zh_CN">
<head> 
    <meta charset="UTF-8">
    <title>标题</title>
</head>

<!--bgcolor是背景颜色属性
	onclick表示单击（点击）事件
	
	alert（）是JavaScript语言提供的一个警告框函数。
	它可以接收任意参数，参数就是警告框的函数信息
-->
<body bgcolor="red" onclick="alert('你好')"><!--背景颜色改为红色-->
    hello
</body>
</html>

4.标签又分为，单标签和双标签

（1）单标签格式：<标签名/>

（2）双标签格式：<标签名> </标签名>

标签的语法

1.标签不能交叉嵌套：

正确：

错误：语法上是错误的，但浏览器会对其进行修复，该错误和正确显示是一样的

2.标签必须正确关闭：

正确：

错误：语法上是错误的，但浏览器依旧会进行修复

3.单标签：

正确：

错误：语法上是错误的，但浏览器依旧会进行修复

4.属性必须有值，属性值必须加引号：

正确：

错误：这种会和正确的一样显示，同理

没有值则会使用默认值，语法上是错的

5.注释不能嵌套

3:

基本标签：

1.标题标签：h1到h6

h1最大，h6最小

align属性是对齐属性，left是左对齐（默认），center（居中），right（右对齐）

<body >  <!--body标签是整个html页面显示的主体内容-->
<h1 align="left">标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>

2.超链接标题：在网页中所有点击后可以跳转的内容都是超链接

<body >  <!--body标签是整个html页面显示的主体内容-->
<a href="http://www.baidu.com">百度</a>	<!--当前标签页打开-->
<a href="http://www.baidu.com" target="_self">百度</a>	<!--当前标签页打开（默认）-->
<a href="http://www.baidu.com" target="_blank">百度</a>	<!--新标签页打开-->
</body>

3.img标签：显示图片

<body >  <!--body标签是整个html页面显示的主体内容-->
<img src="1.jpg",width="",height="",border="1">	<!-- width,height图片宽度和高度
	border边框属性，1为边框像素-->
</body>

Javase：

相对路径：从工程名开始算

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

web：

相对路径：. 表示当前文件所在的目录

… 表示当前文件所在的上一级目录

文件名表示当前文件所在目录的文件，相当于 ./文件名 ./ 可以省略

绝对路径：格式：http://ip:port/工程名/资源路径

4.表格标签

<body >  <!--body标签是整个html页面显示的主体内容-->
    <table border="1" width="300" height="300">
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>4.3</td>
        </tr>
    </table>
</body>

table 表格标签

border 设置表格边框 width 设置表格宽度 height 设置表格高度

align 设置表格相对于页面的对齐方式 cellspacing 设置单元格间距

tr 行标签

th 表头标签

td 单元格标签

align 设置单元格文本对齐方式

b 加粗标签

跨行跨列表格

colspan=“” 属性设置跨列

rowspan=“” 属性设置跨行

ifarme框架标签

ifarme标签它可以在一个html页面上，打开一个小窗口，去加载一个单独的页面

<body >  <!--body标签是整个html页面显示的主体内容-->
    早上好<br/><br/>
<iframe src="1.jpg" width="500" height="500" name="abc"></iframe>
<br/>
<br/>
<ul>
    <li><a href="hello.html" target="abc">百度</a></li>
</ul>
</body>

在当前窗口设置了一个宽度为500，高度为500，窗口名为abc，内容为1.jpg的小窗口

超链接标签中target的对象为iframe设置的小窗口，所以点击超链接后会在小窗口中显示超链接的内容

表单标签（重要)

表单就是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

<body >  <!--body标签是整个html页面显示的主体内容-->
        <!-- form标签就是表单
             input type="text" 是文件输入框   value设置默认显示内容
             input type="password" 是密码输入框   values设置默认显示内容
             input type="radio" 是单选框    name属性可以对其进行分组
             checked="checked"表示默认选项
             input type="checkbox"  是复选框  也能有默认选项 同上
             input type="reset" 是重置按钮   values属性修改按钮上的文本
             input type="submit" 是提交按钮  修改按钮文本同上
             input type="button" 是按钮    修改按钮文本同上
             input type="file"  是文件上传域
             input type="hidden 是隐藏域，当我们要发送某些信息，而这些信息，不需要用户参与
             ，就可以使用隐藏域（提交的时候同时发送给服务器）

             select 标签是下拉列表框
             option 标签是下拉列表框中的选项  selected="selected"设置默认选中

             textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值)
                rows 属性设置可以显示几行的高度
                cols 属性设置每行可以显示几个字符宽度
         -->
    <form>
        用户名称:<input type="text" value="默认值"/><br/>
        用户密码:<input type="password"><br/>
        性别:<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>
        兴趣爱好:<input type="checkbox"/>Java<input type="checkbox"/>Python<input type="checkbox"/>C++<br/>
        国籍:<select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>俄罗斯</option>
            </select><br/>
        自我评价:<textarea rows="10" cols="20"></textarea><br/>
        <input type="reset"/><br/>
        <input type="submit"/><br/>
        <input type="file"/><br/>
        <input type="hidden"/><br/>
    </form>

</body>



<!-- 使表单格式更规整-->

<form>
    <table align="center">
        <tr>
            <td>用户名称:</td>
            <td><input type="text"/></td>
       </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password"/></td>
       </tr>
        <tr>
            <td>性别:</td>
            <td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女</td>        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td><input type="checkbox"/>Java<input type="checkbox"/>Python<input type="checkbox"/>C++</td>
       </tr>
        <tr>
            <td>国籍:</td><td><select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>俄罗斯</option>
            </select></td>
       </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea rows="10" cols="20"></textarea></td>
       </tr>
        <tr>
            <td><input type="reset"/></td>
            <td><input type="submit"/></td>
       </tr>
    </table>
</form>


<!--
        form标签是表单标签
            action属性设置提交的服务器地址
            method属性设置提交的方式GET（默认值）或POST

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

        GET请求的特点是:
            1.浏览器地址栏中的地址是：action属性【+？+请求参数】
                请求参数的格式是：name=value&name=value
            2.不安全（密码会直接被看到）
            3.它有数据长度的限制

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

-->
<form action="http://localhost:8080" method="POST">
    <input type="hidden" name="action" value="login">
    <table align="center">
        <tr>
            <td>用户名称:</td>
            <td><input type="text" name="username"/></td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td><input type="radio" name="sex" checked="checked" value="boy"/>男
                <input type="radio" name="sex" value="girl"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td><input type="checkbox" name="hobby" value="java"/>Java
                <input type="checkbox" name="hobby" value="python"/>Python
                <input type="checkbox" name="hobby" value="cpp"/>C++
            </td>
        </tr>
        <tr>
            <td>国籍:</td><td><select name="country">
                <option value="none">--请选择国籍--</option>
                <option selected="selected" value="China">中国</option>
                <option value="American">美国</option>
                <option value="els">俄罗斯</option>
            </select></td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea rows="10" cols="20" name="desc"></textarea></td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td><input type="submit"/></td>
        </tr>
    </table>
</form>

其他标签

div，span，p标签

<body>
    <!-- div标签   默认独占一行
         span标签  它的长度是封装数据的长度
         p段落标签  默认会在段落的上方或下方各空出一行来（如果有则不再空）
    -->

    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
    <p>p标签1</p>
    <p>p标签2</p>
</body>

CSS

css是【层叠样式表单】。是用于（增强）控制网页央视并允许将样式信息与网页内容分离的一种标记性语言。

选择器：

浏览器根据选择器，决定受CSS样式影响的HTML元素(标签)

属性：

你要修改的样式名，并且每个属性都有一个值。属性和值用冒号分开，用大括号包围，这样就组成了一个完整的样式声明，例如(p{color:blue})

多个声明：

如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号）

例如：

color:red;

font-size:30px;

}

一般每行只描述一个属性

CSS注释: /* 注释内容 */

CSS与HTML的结合方式

1：在标签的style属性上设置"key:value value;"，修改标签样式。

<body>		<!-- 1像素红色实线边框 -->
    <div style="border: 1px solid red">div标签1</div>
    <div style="border: 1px solid red">div标签2</div>
    <span style="border: 1px solid red">span标签1</span>
    <span style="border: 1px solid red">span标签2</span>
</body>

缺点：1.如果标签多了，样式多了，代码量非常大

2.可读性非常差

3.CSS代码没什么复用性

2：在head标签中，使用style标签来定义各种自己需要的CSS样式

格式：

xxx{

key:value value;

}

style内是CSS代码

该功能实现的和上面一样

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <!-- style标签专门用来定义CSS样式代码 -->
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

缺点：1.只能在统一页面内复用代码，不能在多个页面中复用CSS代码

2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面去修改，工作量太大。

3.把CSS样式写成一个单独的CSS文件，再通过link标签引入即可

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <!-- link标签专门用来引入CSS样式代码 -->
    <link rel="stylesheet" type="text/css" href="css_1.css"/>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

div{
    border: 1px solid red;
}
span{
    border: 1px solid red;
}

CSS选择器

1.标签名选择器：

标签名选择器的格式是：

标签名{

属性：值；

}

标签名选择器，可以决定哪些标签被动的使用这个样式

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        div{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        span{
            color: yellow;
            font-size: 20px;
            border: 5px dashed blue;
        }
    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>
</body>

2.id选择器

格式是：

#id 属性值{

属性：值

}

id选择器，可以让我们通过id属性选择性的去使用这个样式

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        #id001{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px dotted blue;
        }
    </style>
</head>
<body>
    <div id="id001">div标签1</div>
    <div id="id002">div标签2</div>
</body>

id唯一，class不唯一

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

格式：

.class 属性值{

属性：值；

}

class类型选择器，可以通过class属性有效的选择去使用这个样式。

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .class001{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        .class002{
            color: grey;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="class001">div标签1</div>
    <div class="class002">div标签2</div>
    <span class="class002">span标签1</span>
</body>

4.组合选择器

格式：

选择器1，选择器2，选择器n{

属性：值；

}

组合选择器可以让多个选择器公用同一个CSS样式代码

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .class001,#id001{
            color: blue;
            font-size: 20px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <div class="class001">div标签1</div>
    <span id="id001">span标签1</span>
</body>

5.常用样式

1.字体颜色 2.宽度

3.高度 4.背景颜色

5.div居中 6.超链接去下划线

7.表格细线 8.列表去除修饰

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        div{
            color: red;
            font-size: 20px;
            border: 1px solid yellow;
            width: 300px;
            height: 300px;
            background-color: green;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        a{
            text-decoration: none;
        }
        table{
            border: 1px red solid;
            border-collapse: collapse;
        }
        td{
            border: 1px red solid;
        }
        ul{
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
</ul>

<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
</table>

<a href="http://www.baidu.com">百度</a>
<div>div标签1</div>
</body>

JavaScript

介绍：

JavaScript语言诞生主要是完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码

JS是弱类型，JAVA是强类型

弱类型就是类型可变

强类型，就是定义变量的时候，类型已确定，而且不可变

特点：

1.交互性（它可以做的就是信息的动态交互）

2.安全性（不允许直接访问本地磁盘）

3.跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

JavaScript和HTML代码结合

1

只需要在head标签中，或者在body标签中，使用script标签来书写JavaScript代码

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script type="text/javascript">
        //alert()是JavaScript语言提供的一个警告框函数
        //它可以接收任意类型的参数，这个参数就是警告框的提示信息
        alert("hello javascript");
    </script>
</head>
<body>

</body>

2

使用script标签引入，单独的JavaScript代码文件（复用）

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <!--
        使用script引入外部的js文件来执行
        src属性专门用来引入js文件路径（相对和绝对都行）
        script标签可以用来定义js代码，也可以引入js文件
        但是，两个功能二选一使用，不能同时使用两个功能
    -->
    <script type="text/javascript" src="js_1.js">

    </script>
</head>

alert("hello javascript");

变量

变量是可以存放某些值的内存的命名

JavaScript的变量类型：

数值类型： number

字符串类型： string

对象类型： object

布尔类型： boolean

函数类型： function

JavaScript里特殊的值：

undefined 未定义，所有js变量未赋予初始值的时候，默认值都是undefined

null 空值

NAN 全称是：not a number。非数字，非数值。

js中的定义变量格式：

var 变量名；

var 变量名 = 值；

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    var i;
    alert(i);
    i = 12;
    // typeof是js语言提供的一个函数
    // 它可以取变量的数据类型返回
    alert(typeof (i));

    i="abc"
    alert(typeof (i));

    var a = 12;
    var b = "abc";
    alert(a*b);// 结果会是NAN，非数字，非数值。
</script>
</head>

关系（比较）运算

等于： == 等于是简单的做字面值的比较

全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型

其余与java一样

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    var a = "12";
    var b = 12;
    alert(a==b);    //true
    alert(a===b);   //false
</script>
</head>

逻辑运算

在JavaScript语言中，所有的变量都可以作为一个Boolean类型的变量去使用

0，null,undefined,“”(空串)都认为是false；

&&且运算：有两种情况

一：当表达式全为真的时候，返回最后一个表达式的值

二：当表达式中，有一个为假的时候，返回第一个为假的表达式的值

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    var a = "abc";
    var b = true;
    var c = false;
    var d = null;
    alert( a && b );//"abc"
    alert( b && a );//true

    alert( a && d );//null
    alert( a && c );//false;

    alert( a && c && d);//false
</script>
</head>

||或运算：有两种情况

一：当表达式全为假时，返回最后一个表达式的值

二：只要有一个表达式为真，就会返回第一个为真的表达式的值

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    var a = "abc";
    var b = true;
    var c = false;
    var d = null;
    alert(a || b ); //"abc"
    alert(d || c );  //false
    alert(c || b ); //true
</script>
</head>

数组（重点）

js中数组的定义：

var 数组名 = []; //空数组

var 数组名 = [1,‘abc’,true]; //定义数组同时赋值元素

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    var arr = [];   //定义一个空数组
    alert(arr.length);  //0

    arr [0] = 12;
    alert(arr[0]);  //12
    alert(arr.length);  //1

    //JavaScript语言中的数组，只要我们通过数组下标复制，那么最大的下标值
    //就会自动的给数组做扩容操作
    arr[2] = "abc";
    alert(arr[2]);  //abc
    alert(arr.length);  //3
    alert(arr[1]);  //undefined
    //数组遍历
    for(var i =0;i<arr.length;i++){ //注意用var
        alert(arr[i]);
    }
</script>
</head>

函数（重点）

有两种定义方式：

1.使用function关键字来定义函数。

格式：

function 函数名(形参列表){

函数体

}

传入参数不用定义类型

JavaScript语言中，定义一个有返回值的函数，只需要在函数体内直接使用return语句返回值即可（不用表明返回什么类型）

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    //定义一个无参函数
    function fun() {
        alert("无参函数调用");
    }
    fun();//调用函数
    //定义一个有参函数
    function fun1(a,b){
        alert("有参函数调用"+a+"和"+b);
    }
    fun1(12,"abc");
    //带有返回值的函数
    function fun2(a,b) {
        var result = a+b;
        return result;
    }
    alert(fun2(100,20));//120
</script>
</head>

2.

格式：

var 函数名 = function(形参列表){函数体}

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
var fun = function () {
    alert("无参函数");
}
fun();

var fun1 = function (a,b) {
    alert("有参函数\na="+a+"\nb="+b);
}
fun1(123,'asd');

var fun2 = function (a,b) {
    var result = a+b;
    return result;
}
alert(fun2(100,200));

</script>
</head>

3.注：

在java中函数允许重载，但在JS中函数的重载会直接覆盖掉上一次的定义

<script type="text/javascript">
function fun() {
alert("无参函数fun()")
}

function fun(a,b) {
alert("有参函数fun(a,b)");
}
fun();//显示:有参函数fun(a,b)
</script>

<script type="text/javascript">
    function fun(a,b) {
        alert("有参函数fun(a,b)");
    }
    function fun() {
        alert("无参函数fun()")
    }
    fun();//显示:无参函数fun()
</script>

函数的arguments 隐形参数（只在function函数内）

在function函数中不需要定义，，但却可以直接用来获取所有参数的变量，我们把它叫做隐形参数。（看不见但可以用）

隐形参数特别像java基础的可变长参数一样。

public void fun(object…args);

可变长参数其实是一个数组,那么JS中的隐形参数也跟java的可变长参数一样，操作类似数组。

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    function fun() {
        alert(arguments);//arguments相当于一个数组
        alert(arguments.length);//参数个数
        alert(arguments[0]);    //1
        alert(arguments[1]);    //abc
        alert("无参函数");
    }
    fun(1,"abc");


    //要求 计算所有参数相加的和并返回
    function sum(num1,num2) {
        var result = 0;
        for(var i = 0; i < arguments.length; i++){
            result += arguments[i];
        }
        return result;
    }
    alert(sum(1,2,3,4,2,1,));   //13


</script>
</head>

JS中的自定义对象

1.object形式的自定义对象

对象的定义：

var 变量名 = new Object(); //对象实例(空对象)

变量名.属性名 = 值; //定义一个属性

变量名.函数行 = function(){} //定义一个函数

对象的访问:

变量名.属性/函数名();

<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); //18
    obj.fun();  //姓名:李华年龄:18
</script>
</head>

2.{}花括号形式得自定义对象

定义：

var 变量名 = { //空对象

属性名: 值， //定义一个属性

函数名: function(){} //定义一个函数

};

访问：

变量名.属性/函数名();

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    //定义对象
    var obj = {
        name:"李华",
        age:18,
        fun:function () {
            alert("姓名:"+this.name+"\n年龄:"+this.age);
        }
    };

    //访问
    alert(obj.name);    //李华
    obj.fun();      //姓名:李华（\n)年龄:18
    alert(typeof (obj));    //object

</script>
</head>

JS中的事件

事件是电脑输入设备与页面进行交互的相应，我们称之为事件。

常用的事件：

onload 加载完成事件: 页面加载完成之后，常用于做页面js代码初始化操作

onclick 单击事件: 常用于按钮的点击响应操作

onblur 失去焦点事件: 常用于输入框失去焦点后验证其输入内容是否合法

onchange 内容发生改变的事件: 常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件: 常用于表单提交前，验证所有表单是否合法

事件的注册：（静态和动态）

什么是事件的注册（绑定）？

告诉浏览器，当事件响应后要执行哪些操作代码，叫事件的注册或事件的绑定

静态注册：

通过html标签的事件属性直接赋予事件响应后的代码，这种方式叫做静态注册

动态注册：

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

动态注册基本步骤：

1.获取标签对象

2.标签对象.事件名 = function(){}

onload事件

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    //onload事件的方法
    function onloadFun() {
        alert('静态注册onload事件')
    }

    //onload事件动态注册，是固定写法
    window.onload = function () {
        alert('动态注册onload事件')
    }
</script>
</head>
<!-- 静态注册
        onload事件是浏览器解析完页面之后就会自动触发的事件
-->
<body onload="onloadFun()">	<!--动态注册时不用加后面的部分-->

</body>

onclick事件

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    //静态
    function onclickFun() {
        alert("静态注册onclick事件");
    }

    //动态
    window.onclick = function () {
        //1.获取标签对象
        //document时JavaScript语言提供的一个对象（文档）
        /*get               获取
        * Element           元素（就是标签）
        * By                通过。。
        * Id                id属性
        * 通过id属性获取标签对象
        * */
        var btnobj = document.getElementById("bt001");
        alert(btnobj);
        //2.通过标签对象.事件名 = function(){}
        btnobj.onclick = function () {
            alert("动态注册onclick事件");
        }
    }
</script>
</head>

<body>
    <!--静态注册-->
    <button onclick="onclickFun()">按钮1</button>
    <!--动态注册-->
    <button id = "bt001">按钮2</button>
</body>

onblur事件

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    //静态注册
    function onblurFun() {
        //console时控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制台打印输出，用于测试使用
        //log()是打印的方法
        console.log("静态注册失去焦点事件");
    }

    //动态注册
    window.onblur = function () {
        //1.获取标签对象
        var password = document.getElementById("psd001");
        // alert(password);
        //2.通过标签对象.事件名= function(){}
        password.onblur = function () {
            console.log("动态注册失去焦点事件")
        }
    }

</script>
</head>

<body>
    <!--静态注册-->
    用户名:<input type="text" onblur="onblurFun()"><br/>
    <!--动态注册-->
    密码:<input type="password" id="psd001"><br/>

</body>

onchange事件

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    //静态注册
    function onchangeFun() {
        alert("选择成功!(静态)");
    }

    //动态注册
    window.onchange = function () {

        //1.获取标签对象
        var selobj = document.getElementById("sel001");
        //2.通过标签对象.事件名= function(){}
        selobj.onchange = function () {
            alert("选择成功!(动态)")
        }
    }

</script>
</head>

<body>
    <!--静态注册-->
    兴趣1:
    <select onchange="onchangeFun()">
        <option>--爱好--</option>
        <option>唱歌</option>
        <option>跳舞</option>
        <option>打篮球</option>
    </select>
    <br/>
    <br/>
    <br/>
    <!--动态注册-->
    兴趣2:
    <select id="sel001">
        <option>--爱好--</option>
        <option>唱歌</option>
        <option>跳舞</option>
        <option>打篮球</option>
    </select>
</body>

onsubmit事件

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    //静态注册
    function onsubmitFun() {
        alert("静态注册表单提交事件------发现不合法");
        return false;
    }
    //动态注册
    window.onload = function () {
        //1.获取标签对象
        var formobj = document.getElementById("form001");
        //2.通过标签对象.事件名= function(){}
        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>
    <br/>
    <br/>

    <!--动态注册-->
    <form id="form001" action="http://localhost:8080">
        <input type="submit" value="动态注册">
    </form>

</body>

DOM模型

dom全称是document object model文档对象模型

就是把文档中的标签，属性，文本，转换成为对象来管理

1.document对象概念（重点）

理解：1.document它管理了所有的HTML文档内容

2.document它是一种树结构的文档，有层级关系

3.它让我们把所有的标签都对象化

4.我们可以通过document访问所有的标签对象

2.验证用户名是否有效

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">

    function onclickFun() {
        //获取标签对象
        var usernameobj = document.getElementById("username");
        // alert(usernameobj);// [object HTMLInputElement] 它就是dom对象
        var usernameText = usernameobj.value;//value即输入框中输入的内容
        //正则表达式:字母，数字，下划线组成，长度5到12位
        var patt = /^\w{5,12}$/

        /*
        * test()方法用于测试某个字符串，是不是匹配我的规则
        * 匹配成功就返回true，失败就放回false
        * */

        if(patt.test(usernameText)){
            alert("用户名合法!")
        }else{
            alert("用户名不合法!")
        }
    }

</script>
</head>
<body>
    用户名:<input type="text" id="username" value=""/>
    <button onclick="onclickFun()">提交</button>
</body>

正则表达式

正则表达式是描述字符模式的对象

正则表达式用于字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具

<script type="text/javascript">
    //表示要求字符串中，是否包含字母e
    var patt = new RegExp("e");
    var patt = /e/;
    //表示要求字符串中，是否包含字母a或b或c
    var patt = /[abc]/;
    //表示要求字符串中，是否包含小写字母
    var patt = /[a-z]/;
    //表示要求字符串中，是否包含任意大写字母
    var patt = /[A-Z]/;
    //表示要求字符串中，是否包含任意数字
    var patt = /[0-9]/;
    //表示要求字符串中，是否包含字母，数字，下划线
    var patt = /\w/;
    //表示要求字符串中，是否至少包含一个a
    var patt = /a+/;
    //表示要求字符转中，是否包含零个或多个a
    var patt = /a*/;
    //表示要求字符串中，是否包含一个或零个a
    var patt = /a?/;
    //表示要求字符串中，是否包含连续三个a
    var patt = /a{3}/;
    //表示要求字符串中，是否包含至少3个连续的a，最多包含5个连续的a
    //当有三个连续的a时就会返回true，即使3个连续的a后面会出现多余5个连续的a
    var patt = /a{3,5}/;
    //表示要求字符串中，至少包含3个连续的a
    var patt = /a{3,}/;
    //表示要求字符串中，必须以a结尾
    var patt = /a$/;
    //表示要求字符串中，必须以a开始
    var patt = /^a/;


    //要求字符串，从头到位都必须匹配
    //字符串必须严格符合至少3个连续的a，最多5个连续的a
    var patt = /^a{3,5}$/;

</script>

验证提示效果

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    function onclickFun() {
        var usernameobj = document.getElementById("username");
        var usernametext = usernameobj.value;
        var patt = /^\w{5,12}$/;
        var userspanobj = document.getElementById("usernameSpan");
		//innerHTML	表示起始标签和结束标签中的内容
        //innerHTML	这个属性可读，可写
        if(patt.test(usernametext)){
            userspanobj.innerHTML="用户名合法!";
        }else{
            userspanobj.innerHTML="用户名不合法!";
        }
    }
</script>
</head>
<body>
    用户名:<input type="text" id="username" value=""/>
    <span id="usernameSpan" style="color: red";></span>
    <button onclick="onclickFun()">提交</button>
</body>

<script type="text/javascript">
    if(patt.test(usernametext)){	<--在innerHTML后加图片路径-->
        userspanobj.innerHTML="";	<-- <img src=""   >-->
    }else{
        userspanobj.innerHTML="";
    }
    </script>

getElementsByName

document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合

这个集合的操作和数组一样

集合中每个元素都是dom对象

这个集合中的元素顺序是他们在html页面中从上到下的顺序

checked表示复选框的选中状态，如果选中是true，不选中是false

checked这个属性可读，可写，所以可以修改状态

<head>
    <meta charset="UTF-8">
    <title>标题</title>
<script type="text/javascript">
    function onclickFun() {
        var habbies = document.getElementsByName("hobby");
        for(var i = 0;i<habbies.length;i++){
            habbies[i].checked=true;
        }
    }
    function onclickFun1() {
        var habbies = document.getElementsByName("hobby");
        for(var i = 0;i<habbies.length;i++){
            habbies[i].checked=false;
        }
    }
    function onclickFun2() {
        var habbies = document.getElementsByName("hobby");
        for(var i = 0;i<habbies.length;i++){
            habbies[i].checked = !habbies[i].checked;
        }
    }
</script>
</head>
<body>
    兴趣:
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="cpp">c++
    <input type="checkbox" name="hobby" value="javascript">javascript
    <br/>
    <button onclick="onclickFun()">全选</button>
    <button onclick="onclickFun1()">全不选</button>
    <button onclick="onclickFun2()">反选</button>
</body>