HTML-表单项标签

- 特点： - div标签： - 一行只显示一个（独占一行） - 宽度默认是父元素的宽度，高度默认由内容撑开 - 可以设置宽高（width、height） - span标签： - 一行可以显示多个 - 宽度和高度默认由内容撑开 - 不可以设置宽高（width、height） box-sizing: border-box，此时指定width height为盒子的高宽，而不是content的高宽 ### 表格标签 - table> : 用于定义整个表格, 可以包裹多个 <tr>，常用属性如下： - border：规定表格边框的宽度 - width：规定表格的宽度 - cellspacing: 规定单元之间的空间 - <tr> : 表格的行，可以包裹多个 <td> - <td> : 表格单元格(普通)，可以包裹内容 , 如果是表头单元格，可以替换为 <th> ,th具有加粗居中展示的效果 ### 表单标签 - 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。 - 表单标签: <form> - 表单属性: - action: 规定表单提交时，向何处发送表单数据，表单提交的URL。 - method: 规定用于发送表单数据的方式，常见为： GET、POST。 - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。 - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。 - 表单项标签: 不同类型的input元素、下拉列表、文本域等。 - input: 定义表单项，通过type属性控制输入形式 | type取值 | **描述** | | ------------------------ | ------------------------------------ | | text | 默认值，定义单行的输入字段 | | password | 定义密码字段 | | radio | 定义单选按钮 | | checkbox | 定义复选框 | | file | 定义文件上传按钮 | | date/time/datetime-local | 定义日期/时间/日期时间 | | number | 定义数字输入框 | | email | 定义邮件输入框 | | hidden | 定义隐藏域 | | submit / reset / button | 定义提交按钮 / 重置按钮 / 可点击按钮 | - select: 定义下拉列表 - textarea: 定义文本域 ``` HTML-表单项标签 ``` - `name="gender"`：这个属性定义了单选按钮组的名称，它们被分为同一个组，因此只能选择其中的一个按钮。在这种情况下，所有具有相同 `name` 属性值的单选按钮都被视为同一组。 - `value="1"` 和 `value="2"`：这些是单选按钮的值。当用户选择某个单选按钮时，该单选按钮的值将被提交到服务器。在这种情况下，`value="1"` 表示选择男性，而 `value="2"` 表示选择女性。 - 用户在浏览器中看到的文本内容是 "男" 和 "女"。女这里的label意味着用户不仅可以点击单选按钮本身来选择选项，当用户单击 "女" 这个标签文本时，与之关联的单选按钮也会被选中。 ## JavaScript ### JS引入方式 **第一种方式：**内部脚本，将JS代码定义在HTML页面中 - JavaScript代码必须位于<script></script>标签之间 - 在HTML文档中，可以在任意地方，放置任意数量的<script> - 一般会把脚本置于<body>元素的底部，可改善显示速度例子： ~~~html ~~~ **第二种方式：**外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中 - 外部JS文件中，只包含JS代码，不包含 ~~~ 注意：demo.js中只有js代码，没有<script>标签 ### JS基础语法 #### 书写语法 - 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的 - 每行结尾的分号可有可无 - 大括号表示代码块 - 注释： - 单行注释：// 注释内容 - 多行注释：/* 注释内容 */ 输出的三种形式： | api | 描述 | | ---------------- | ---------------- | | window.alert() | 警告框 | | document.write() | 在HTML 输出内容 | | console.log() | 写入浏览器控制台 | #### 变量 | 关键字 | 解释 | | ------ | ------------------------------------------------------------ | | var | 早期ECMAScript5中用于变量声明的关键字 | | let | ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效（大括号） | | const | 声明常量的，常量一旦声明，不能修改 | var:作用域比较大，全局的；可以重复定义，后面的覆盖前面的 let：局部变量(代码块内生效{})，不可重复定义。 const: const pi=3.14 #### 数据类型和运算符 | 数据类型 | 描述 | | --------- | -------------------------------------------------- | | number | 数字（整数、小数、NaN(Not a Number)） | | string | 字符串，单双引皆可 | | boolean | 布尔。true，false | | null | 对象为空 | | undefined | 当声明的变量未初始化时，该变量的默认值是 undefined | | 运算规则 | 运算符 | | ---------- | ------------------------------------------------------------ | | 算术运算符 | + , - , * , / , % , ++ , -- | | 赋值运算符 | = , += , -= , *= , /= , %= | | 比较运算符 | > , < , >= , <= , != , == , === **注意 == 会进行类型转换，=== 不会进行类型转换** | | 逻辑运算符 | && , \|\| , ! | | 三元运算符 | 条件表达式 ? true_value: false_value | ![image-20240228122315690](D:/folder/study/md_files/output/12a6770d-da36-43ad-a335-c3e65460c2e1.png) parseint() ,将其他类型转化为数字 #### 函数第一种： ~~~js function 函数名(参数1,参数2..){ 要执行的代码 } ~~~ 因为JavaScript是**弱数据类型**的语言，所以有如下几点需要注意： - 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。 - 返回值也不需要声明类型，直接return即可如下示例： ``` function add(a, b){ return a + b; } ``` var result=add(10,20)可以接收返回值第二种可以通过var去定义函数的名字，具体格式如下： ``` var functionName = function (参数1,参数2..){ //要执行的代码 } ``` 如下示例： ``` var add = function(a,b){ return a + b; } ``` var result = add(10,20); 函数的调用不变 ### JS对象 #### Array对象方式1： ~~~js var 变量名 = new Array(元素列表); ~~~ 例如： ~~~js var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素） ~~~ 方式2： ~~~js var 变量名 = [ 元素列表 ]; ~~~ 例如： ~~~js var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素） ~~~ 长度可变=》可以直接arr[10]=100，不会报错类型可变=》arr[1]="hello"，可以既存数字又存字符串属性： | 属性 | 描述 | | :----- | :--------------------------- | | length | 设置或返回数组中元素的数量。 | 方法： | 方法方法 | 描述 | | :-------- | :--------------------------------------------------- | | forEach() | 遍历数组中的每个**有值的**元素，并调用一次传入的函数 | | push() | 将新元素添加到数组的**末尾**，并返回新的长度 | | splice() | 从数组中删除元素 | 普通for循环：会遍历每个数组元素，无论是否有值 ``` var arr = [1,2,3,4]; arr[10] = 50; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } ``` foreach： ``` arr.forEach(function(e){ console.log(e); }) ``` 在ES6中，引入箭头函数的写法，语法类似java中lambda表达式，修改上述代码如下： ``` arr.forEach((e) => { console.log(e); }) ``` push: arr.push(7,8,9) 可以一次添加多个元素 splice: arr.splice（start，cnt），从start开始，删cnt个元素 #### String字符串 String对象也提供了一些常用的属性和方法，如下表格所示：属性： | 属性 | 描述 | | ------ | -------------- | | length | 字符串的长度。 | 方法： | 方法 | 描述 | | ----------- | ---------------------------------------- | | charAt() | 返回在指定位置的字符。 | | indexOf() | 检索字符串。 | | trim() | 去除字符串两边的空格 | | substring() | 提取字符串中两个指定的索引号之间的字符。 | - length属性： length属性可以用于返回字符串的长度，添加如下代码： ~~~js //length console.log(str.length); ~~~ - charAt()函数： charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。添加如下代码： ~~~js console.log(str.charAt(4)); ~~~ - indexOf()函数 indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容。添加如下代码： ~~~js console.log(str.indexOf("lo")); ~~~ - trim()函数 trim()函数用于去除字符串两边的空格的。添加如下代码： ~~~js var s = str.trim(); console.log(s.length); ~~~ - substring()函数 substring()函数用于截取字符串的，函数有2个参数。参数1：表示从那个索引位置开始截取。包含参数2：表示到那个索引位置结束。不包含 ~~~js console.log(s.substring(0,5)); ~~~ #### JSON对象 ##### 自定义对象 ``` var 对象名 = { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, 函数名称: function(形参列表){} }; ``` 我们可以通过如下语法调用属性： ~~~js 对象名.属性名 ~~~ 通过如下语法调用函数： ~~~js 对象名.函数名() ~~~ ##### json对象 JSON对象：**J**ava**S**cript **O**bject **N**otation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下： ~~~js { "key":value, "key":value, "key":value } ~~~ 其中，**key必须使用引号并且是双引号标记，value可以是任意数据类型。** JSON字符串示例： ``` var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'; alert(jsonstr.name); ``` 注意外层的单引号不要忘记！ JSON字符串=》JS对象 ``` var obj = JSON.parse(jsonstr); ``` **对象.属性就可以获得key对应的值** JS对象=》JS字符串 ``` var jsonstr=JSON.stringify(obj) ``` ##### JSON格式数据 `{"name":"666"}` 是一个 JSON 对象，`[{"name":"666"},{"name":"li"}]` 是一个 JSON 数组，它们都是 JSON 格式的数据。 #### BOM对象重点学习的是Window对象、Location（地址栏）对象 ##### window对象常用方法：通过可简写，window.alert()->alert() | 函数 | 描述 | | ------------- | -------------------------------------------------- | | alert() | 显示带有一段消息和一个确认按钮的警告框。 | | comfirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 | | setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 | | setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 | **setInterval**(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是**循环执行**。该函数需要传递2个参数： fn:函数，需要周期性执行的功能代码毫秒值：间隔时间 ``` //定时器 - setInterval -- 周期性的执行某一个函数 var i = 0; setInterval(function(){ i++; console.log("定时器执行了"+i+"次"); },2000); ``` **setTimeout**(fn,毫秒值) ：定时器，只会在一段时间后**执行一次功能**。参数和上述setInterval一致注释掉之前的代码，添加代码如下： ~~~js //定时器 - setTimeout -- 延迟指定时间执行一次 setTimeout(function(){ alert("JS"); },3000); ~~~ 浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。 ##### Location对象 location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href**属性**，用于获取或者设置浏览器的地址信息，添加如下代码： ``` //获取浏览器地址栏信息 alert(location.href); //设置浏览器地址栏信息 location.href = "https://www.itcast.cn"; ``` 设置后会自动跳转到该地址。 #### DOM对象 ##### DOM介绍 DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。封装的对象分为 - Document：整个文档对象 - Element：元素对象 - Attribute：属性对象 - Text：文本对象 - Comment：注释对象 ![1668796698067](D:/folder/study/md_files/output/5cf21ff8-65ca-4e1a-9bee-1829949aafc4.png) 那么我们学习DOM技术有什么用呢？主要作用如下： - 改变 HTML 元素的内容 - 改变 HTML 元素的样式（CSS） - 对 HTML DOM 事件作出反应 - 添加和删除 HTML 元素从而达到**动态改变页面效果**目的。 ##### DOM获取 | 函数 | 描述 | | --------------------------------- | -------------------------------------------- | | document.getElementById() | 根据id属性值获取，返回单个Element**对象** | | document.getElementsByTagName() | 根据标签名称获取，返回Element对象**数组** | | document.getElementsByName() | 根据name属性值获取，返回Element对象**数组** | | document.getElementsByClassName() | 根据class属性值获取，返回Element对象**数组** | 示例代码： ```

传智教育

黑马程序员

电影旅游游戏 ``` - document.getElementById()：根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象。 ``` ``` - document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。重点！ ``` var divs = document.getElementsByTagName('div'); for (let i = 0; i < divs.length; i++) { alert(divs[i]); } ``` ##### DOM修改同上面的例子：你想要如何操作获取到的DOM元素，你需要查阅手册，看它支持的属性 ![image-20240228185708363](D:/folder/study/md_files/output/e5a08825-08c9-4c38-8b20-e411b6bf7072.png) ``` var divs = document.getElementsByClassName('cls'); var div1 = divs[0]; div1.innerHTML = "传智教育666"; ``` ### JS事件 JavaScript对于事件的绑定提供了2种方式： - 方式1：通过html标签中的事件属性进行绑定 ``` ``` - 方式2：通过DOM中Element元素的事件属性进行绑定 ``` ``` 常见事件： | 事件属性名 | 说明 | | ----------- | ------------------------ | | onclick | 鼠标单击事件 | | onblur | 元素失去焦点 | | onfocus | 元素获得焦点 | | onload | 某个页面或图像被完成加载 | | onsubmit | 当表单提交时触发该事件 | | onmouseover | 鼠标被移到某元素之上 | | onmouseout | 鼠标从某元素移开 | ## VUE ### VUE简介我们引入了一种叫做**MVVM(Model-View-ViewModel)的前端开发思想**，即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？ MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下： - Model: 数据模型，特指前端中通过请求从后台获取的数据 - View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据 - ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上 ![image-20240228194959643](D:/folder/study/md_files/output/2a9bf144-bba9-42c0-aae6-089470ada845.png) 基于上述的MVVM思想，其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分，我们将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，让数据展示到视图的代码开发变得更加的简单。 ### VUE快速上手第一步：在VS Code中创建名为12. Vue-快速入门.html的文件，并且在html文件同级创建js目录，将**资料/vue.js文件**目录下得vue.js拷贝到js目录第二步：然后编写<script>标签来引入vue.js文件，代码如下： ``` ``` 第三步：在js代码区域定义vue对象,代码如下： ``` ``` 在创建vue对象时，有几个常用的属性： - el: 用来指定哪儿些标签受 Vue 管理。该属性取值 `#app` 中的 `app` 需要是受管理的标签的id属性值 - data: 用来定义数据模型 - methods: 用来定义函数。这个我们在后面就会用到第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的 ~~~html

~~~ ### Vue指令 **指令：**HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。 | **指令** | **作用** | | --------- | --------------------------------------------------- | | v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 | | v-model | 在表单元素上创建双向数据绑定 | | v-on | 为HTML标签绑定事件 | | v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 | | v-else | | | v-else-if | | | v-show | 根据条件展示某元素，区别在于切换的是display属性的值 | | v-for | 列表渲染，遍历容器的元素或者对象的属性 | #### V-bind和v-model - v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。**单向**绑定！ - v-model：在表单元素上创建**双向**数据绑定。什么是双向？ - vue对象的data属性中的数据变化，视图展示会一起变化 - 视图数据发生变化，vue对象的data属性中的数据也会随着变化。 data属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？**只有表单项标签！所以双向绑定一定是使用在表单项标签上的**。 ```

链接1 链接2

``` #### v-on v-on: 用来给html标签绑定事件的 ``` ``` 简写： ``` ``` script： ``` ``` #### v-if和v-show ``` 年龄经判定,为: 年轻人(35及以下) 中年人(35-60) 老年人(60及以上) ``` ``` 年龄经判定,为: 年轻人(35及以下) 中年人(35-60) 老年人(60及以上) ``` v-show和v-if的作用效果是一样的，只是原理不一样。v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。 #### vue-for v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下： ```

{{index}} : {{addr}}

``` ``` ``` index从0开始 ### Vue生命周期 | 状态 | 阶段周期 | | ------------- | -------- | | beforeCreate | 创建前 | | created | 创建后 | | beforeMount | 挂载前 | | mounted | 挂载完成 | | beforeUpdate | 更新前 | | updated | 更新后 | | beforeDestroy | 销毁前 | | destroyed | 销毁后 | 其中我们需要重点关注的是**mounted,**其他的我们了解即可。与methods平级 mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。**以后我们一般用于页面初始化自动的ajax请求后台数据** ## Ajax-Axios Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点： - 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。 - 异步交互：可以在**不重新加载整个页面**的情况下，与服务器交换数据并**更新部分网页**的技术，如：搜索联想、用户名是否可用的校验等等。现在Ajax已经淘汰，用Axios了，是对Ajax的封装 ### Axios快速上手 Axios的使用比较简单，主要分为2步： - 引入Axios文件 ~~~html ~~~ - 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下 - 发送 get 请求 ~~~js axios({ method:"get", url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" }).then(function (resp){ alert(resp.data); }) ~~~ - 发送 post 请求 ```js axios({ method:"post", url:"http://localhost:8080/ajax-demo1/aJAXDemo1", data:"username=zhangsan" }).then(function (resp){ alert(resp.data); }); ``` 推荐以下方法！ | 方法 | 描述 | | ---------------------------------- | -------------- | | axios.get(url [, config]) | 发送get请求 | | axios.delete(url [, config]) | 发送delete请求 | | axios.post(url [, data[, config]]) | 发送post请求 | | axios.put(url [, data[, config]]) | 发送put请求 | ``` axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => { console.log(result.data); }) ``` ``` axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => { console.log(result.data); }) ``` ### axios使用步骤：步骤： 1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入 2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据 3. 拿到数据，数据需要绑定给vue的data属性 4. 在<tr>标签上通过v-for指令遍历数据，展示数据，这里同Vue中的步骤。 ``` ``` Vue中先定义emps空数组，再axios将数据取到里面 this.emps=xxxx

焦点访谈：中国底气 新思想夯实大国粮仓

焦点访谈：中国底气新思想夯实大国粮仓