javaweb(AI)-----前端

发布于：2025-09-05 ⋅ 阅读:(24) ⋅ 点赞:(0)

前端代码通过   浏览器对代码渲染（浏览器内核）   转化成网页

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 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布