javaweb(AI)-----前端
// 1.自定义对象name : '张三',age : 18,sex : '男',sing(){console.log('我会唱歌');// 2.调用对象属性
前端代码通过 浏览器对代码渲染（浏览器内核） 转化成网页
HTML
<h1> </h1>
<h1 style="color:red;"> </h1>
CSS
引入方式：1.行内； 2.内部； 3.外部；
get与post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="/save" method="get">
姓名：<input type="text" name="name">
年龄：<input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
get方法会把表单数据附加在 URL 后面，这在提交敏感信息时存在安全风险，因为 URL 可能会被记录在浏览器历史记录、服务器日志里。action = “提交的url地址”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="/save" method="post">
姓名：<input type="text" name="name">
年龄：<input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
表单提交
注意：表单必须有name属性才能提交
name属性
- 数据提交：
name属性主要用于在表单提交时标识表单元素，以键值对的形式将表单数据发送到服务器。例如，在一个登录表单中有用户名和密码输入框，<input type="text" name="username">和<input type="password" name="password">，当用户提交表单时，服务器接收到的数据会类似于username=JohnDoe&password=secret123，通过name来区分不同的数据项。- 表单元素分组：在
radio（单选框）和checkbox（复选框） 元素中，具有相同name值的元素会被归为一组，例如，<input type="radio" name="gender" value="male">和<input type="radio" name="gender" value="female">，用户只能从这一组中选择一个选项。id属性
- 唯一标识：
id属性用于在整个 HTML 文档中唯一标识一个元素，就像每个人的身份证号一样，同一个页面中的id不能重复。它常被用于 CSS 选择器和 JavaScript 中定位特定的元素。例如，使用 CSS 为特定元素设置样式#myForm { border: 1px solid black; }，或者在 JavaScript 中获取元素并进行操作，document.getElementById('myForm');。- 建立关联：可以通过
id来建立表单元素和其他元素（如<label>标签）之间的关联。例如，<label for="username">用户名:</label> <input type="text" id="username">，当用户点击label文本时，浏览器会自动将焦点切换到id为username的输入框上，提升用户体验。
表单
<body>
<!--只有用form围起来的内容才能提交，交到action指定位置-->
<form action="http://" method="get">
用户名：<input type="text" name="username"
placeholder="请输入用户名·" value="admin"><br><br>
<!-- value表示单选或多选时，表单选项提交的值-->
密码：<input type="password" name="pwd"
placeholder=""><br><br>
性别：<input type="radio" value="f" name="sex">女
<input type="radio" value="m" name="sex">男<br><br>
爱好：<input type="checkbox" value="ball" name="hobby">篮球
<input type="checkbox" value="swim" name="hobby">游泳
<input type="checkbox" value="draw" name="hobby">画画
<input type="checkbox" value="sing" name="hobby">唱歌
<br><br>
学校：<select>
<!-- value是提交到后台的值-->
<option value="1">学校a</option>
<option value="2">学校b</option>
<option value="3" selected>学校c</option>
<option value="4">学校d</option>
</select>
<br><br>
<textarea >文本域</textarea><br>
<br>
<input type="button" value="普通按钮" onclick="alert('hello')">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
</form>
</body>value表示单选或多选时，表单选项提交的值
type = "button" 是普通按钮，需要搭配js实现交互效果
type = "submit" 可以直接提交
label元素能提高表单的可访问性，用户点击label文本时，对应的输入框会获得焦点。用label标签进行包裹，可以提高用户体验
<label for="name">姓名：</label>
<input type="text" id="name" name="name">label 要与 id = name 的表单进行绑定
点击一下“姓名”，光标就会聚焦于姓名输入框
HTML CSS 总结
JavaScript
js是一门脚本语言（不用编译直接运行），控制网页行为
组成： ECMAScript; BOM; DOM
核心语法
1.引入
2.
自定义对象
<script>
// 1.自定义对象
let user = {
name : '张三',
age : 18,
sex : '男',
sing(){
console.log('我会唱歌');
}
}
// 2.调用对象属性
console.log(user.name);
console.log(user.age);
console.log(user.sex);
user.sing();
</script>
注意在箭头函数中，this指向当前对象的父级（Window）
所以在js中自定义函数时不要使用箭头函数
JSON
js对象标记法。即js对象标记书写法的文本。
作为数据载体，文本字符串格式。
前端给服务器发送请求，服务器给前端响应结果。
json和自定义对象的区别：所有的key都用“”
注意：仅仅是看起来像，本质不一样
如果是用自定义对象，alert结果如下图：
要想显示字符，就用 alert(JSON.stringify(person));
若要 json字符串-> js对象:
let personJson = '{"name":"zero", "age":18}';
alert(JSON.parse(personJson).age);
DOM
<body>
<h1 id="title1">11111</h1>
<h1>22222</h1>
<h1>33333</h1>
<script>
// 1.修改第一个h1
// 1.1 获取DOM对象
let h1 = document.querySelector('#title1');
// 1.2 调用方法
h1.innerHTML = '修改后的内容，不再是111';
</script>
</body>
事件监听
<body>
<input type="button" id="btn1" value="点我一下1">
<input type="button" id="btn2" value="点我一下22">
<input type="button" id="btn3" value="点我一下3">
<script>
//绑定 事件监听
document.querySelector('#btn1').addEventListener('click',function() {
console.log('是啦');
});
document.querySelector('#btn2').addEventListener('click',() => {
console.log('是啦lalala');
});
document.querySelector('#btn3').onclick = () => {
console.log('3333333333');
}
</script>
</body>
addEventListener 可以多次绑定同一事件
onclick 后面的会被覆盖
// 1.获取所有数据行
let trs = document.querySelectorAll('tbody tr');
// 2.循环遍历数据行
for (let i = 0; i < trs.length; i++) {
// 为当前数据行添加鼠标进入事件监听
trs[i].addEventListener('mouseenter',function() {
// 鼠标进入后，当前数据行背景色变为淡蓝色
this.style.backgroundColor = '#ADD8E6';
});
// 为当前数据行添加鼠标离开事件监听
trs[i].addEventListener('mouseleave',function() {
// 鼠标离开后，当前数据行背景色恢复为白色
this.style.backgroundColor = '#f0f0f0';
});
}优化JS:
1. 模块化
2. import
3. export
JQuery
是JS库，为提供Ajax交互
下载jquery-min.js，在项目中引入
基础用法
$('#d').css('background','blue');
$(function () {
alert($("#d").html())
});
function change() {
$("#d").html("<span style='color: #e54d4d'>这是span</span>")
} <script>
$(function (){
$('#btn').click(function (){
$("*").css("color","red");
$("#e").css({
"background-color":"pink",
"font-size":"20px"
})
$("p").hide()
})
})
</script>
<div id="d"> div1 </div>
<div id="e"> div2 </div>
<div id="f"> div3 </div>
<p>这是标签</p>
<span>
这是span
</span>
<button id="btn">点击</button>
表单元素
$(function (){
$("#btn").click(function (){
console.log($("#username").val());
})
})最外层function是在解析文档
里面层在给id=btn的按钮绑定点击事件
$(item).val()：将item用$()先包裹成JQuery对象，再用.val()获取值
Vue3
用于构建用户界面的渐进式的JavaScript框架
构建用户界面：将Json格式转化为用户可见形式（数据渲染）
渐进式：Vue核心包，功能组件，形成生态
框架
<div id="app">
<h1>{{message}}</h1>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
message: 'Hello Vue'
}
}
}).mount('#app')
</script>
v-for
v-bind
插值表达式不能在标签内使用
v-if v-show
v-model
v-on
Ajax
异步的 js 和 XML
XML:可扩展标记语言，本质是一种数据格式，存储复杂数据结构
异步交互：在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页
同步与异步
Axios技术
对原生的Ajax进行封装，简化书写
混淆
name
value
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
25
0- 0
已为社区贡献2条内容
所有评论(0)