JavaWeb_06_JQuery基础

最新推荐文章于 2024-07-29 11:53:27 发布

柳絮，曾轻语

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量51

点赞数

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/weixin_42788897/article/details/131209276

版权

《JQuery基础》

一、JQuery简介

JQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化了HTML文档操作、事件处理、动画设计和Ajax交互等。

下载

访问官网https://jquery.com/，点击Download进入下载界面；

请添加图片描述

点击下载文件；

请添加图片描述

鼠标右键另存文件。

请添加图片描述

执行结果

请添加图片描述

二、导航案例

head标签

<script src="./jquery-3.6.0.min.js"></script>

html

<ul class="nav">
    <!-- 阻止超链接默认事件 -->
    <li><a href="javascript:void(0)">首页</a></li>
    <li><a href="javascript:void(0)">软件技术</a>
        <ul>
            <li><a href="javascript:void(0)">JavaSE</a></li>
            <li><a href="javascript:void(0)">JavaWeb</a></li>
            <li><a href="javascript:void(0)">JavaEE</a></li>
        </ul>
    </li>
    <li><a href="javascript:void(0)">人工智能</a>
        <ul>
            <li><a href="javascript:void(0)">人脸识别</a></li>
            <li><a href="javascript:void(0)">声音识别</a></li>
            <li><a href="javascript:void(0)">行为识别</a></li>
        </ul>
    </li>
    <li><a href="javascript:void(0)">大数据</a></li>
    <li><a href="javascript:void(0)">信息安全</a></li>
</ul>

.nav {
    width: 900px;
    margin: 100px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

ul {
    padding: 0;
    list-style: none;
}

.nav a {
    /* 框样式 */
    display: block;
    width: 120px;
    height: 40px;
    border-radius: 5px;
    background-color: orange;
    margin-top: 5px;
    /* 文字处理 */
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    color: white;
    text-decoration-line: none;
}

/* 鼠标悬停样式 */
.nav a:hover {
    background-color: greenyellow;
    color: black;
}

/* 默认隐藏二级菜单 */
.nav ul {
    display: none;
}

// 文档准备函数
$(document).ready(function () {
    //鼠标移入一级菜单，二级菜单显示
    $(".nav>li").mouseover(function () {
        $(this).children("ul").css("display", "block");
    });
    //鼠标移出一级菜单，二级菜单隐藏
    $(".nav>li").mouseout(function () {
        $(this).children("ul").css("display", "none");
    });
});

三、表单校验

head标签

<script src="./jquery-3.6.0.min.js"></script>

html

<!-- 请求方式：
     get：参数会拼接到url后面
     post：相对安全，参数在请求体中（F12可看到）
-->
<form action="http://www.baidu.com" method="get">
    <!-- id用于前端，name用于后端 -->
    <div><span>账号：</span><input id="userId" name="userId" type="text"></div>
    <div><span>密码：</span><input id="password" name="password" type="password"></div>
    <div>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </div>
</form>

form {
    width: 800px;
    margin: 200px auto;
    text-align: center;
}

form>div {
    margin-top: 20px;
}

$(document).ready(function () {
    $("form").submit(function () {
        var userId = $("#userId").val();
        var password = $("#password").val();

        var regex1 = /^\d{4,6}$/;
        var regex2 = /^.{6,12}$/;

        if (!regex1.test(userId)) {
            alert("请输入4-6位的数字账号！");
            return false;
        }
        if (!regex2.test(password)) {
            alert("请输入6-12位密码！");
            return false;
        }
    });
});