前言：

本文内容：表单提交验证及前端密码MD5加密、初始jQuery及公式、jQuery选择器

推荐免费JavaScript基础讲解视频：【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili

表单提交验证及前端密码MD5加密

MD5加密及表单验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
    表单绑定提交事件
    onsubmit 绑定一个提交检测函数 true false
    将这个结果返回给表单，使用onsubmit接受
    onsubmit='return check()'
-->
<form method="post" action="https://baidu.com" onsubmit="return check()">
    <p>
        <span>账号</span>
        <input type="text" name="user" id="user" required>
    </p>
    <p>
        <span>密码</span>
        <input type="password"  id="pwd">
    </p>
    <p>
        <!--通过onClick绑定按钮点击事件-->
        <input type="submit"  value="登录" id="login" >
    </p>
    <!--隐藏的加密密码-->
    <input type="hidden" id="md5-pwd" name="pwd">
</form>
<script>
    function check(){
        var username = document.getElementById('user');
        var pwd = document.getElementById('pwd');
        var MD5pwd = document.getElementById('md5-pwd');
        // MD5算法 加密密码
        MD5pwd.value = md5(pwd.value);
        // 可以校验判断表单内容，true提交 false阻止 提交
        return true;
    }
</script>
</body>
</html>

初识jQuery及公式

jQuery

  • 是一个 JavaScript 库。

  • 极大地简化了 JavaScript 编程。

  • 很容易学习。

获取jQuery

jQuery官网下载

jQuery3.6.0在线版

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

公式：$(selector).action()

练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jQuery-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<!--
    公式：$(selector).action()
-->
<a href="" id="baidu">百度一下</a>
<script>
    // js获取Dom
    var baidu = document.getElementById('baidu');
    // jQuery实现点击事件
    $('#baidu').click(function(){
        alert("百度一下");
    });
</script>
</body>
</html>

jQuery选择器

jQuery选择器

  • 元素选择器
    $("p")
  • #id 选择器
    $("#test")
  • .class 选择器
    $(".test")

更多选择器

元素 元素
选择器 用法
$(“*”) 选取所有元素
$(this) 选取当前 HTML 元素
$(“p.intro”) 选取 class 为 intro 的

元素
$(“p:first”) 选取第一个

元素
$(“ul li:first”) 选取第一个
    元素的第一个
  • 元素
$(“ul li:first-child”) 选取每个
    元素的第一个
  • 元素
$(“[href]”) 选取带有 href 属性的元素
$(“a[target=‘_blank’]”) 选取所有 target 属性值等于 “_blank” 的 元素
$(“a[target!=‘_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 元素
$(“:button”) 选取所有 type=“button” 的 元素 和
$(“tr:even”) 选取偶数位置的
$(“tr:odd”) 选取奇数位置的

练习

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    // 原生js选择器
    // 标签选择器
    document.getElementsByTagName();
    // id选择器
    document.getElementById();
    // 类选择器
    document.getElementsByClassName();
    // jQuery选择器
    // 元素选择器
    $("p")
    // #id 选择器
    $("#test")
    // .class 选择器
    $(".test")
</script>