java-JQuery的使用

最新推荐文章于 2024-06-24 16:41:03 发布

超分辨菜鸟

最新推荐文章于 2024-06-24 16:41:03 发布

阅读量544

点赞数 1

分类专栏： JAVA Web 文章标签： js java jquery

本文链接：https://blog.csdn.net/weixin_44712669/article/details/118307161

版权

JAVA 同时被 2 个专栏收录

97 篇文章 0 订阅

订阅专栏

Web

15 篇文章 0 订阅

订阅专栏

jQuery的使用--实现一个计算器

1.jQuery的作用
2.使用jQuery：
- 2.1 获取变量和设置变量
3.完整Html代码

1.jQuery的作用

js功能分为两类：1.使用js操作页面元素 2.使用js实现逻辑判断
jquery用来实现元素的获取和设置的

2.使用jQuery：

在这里插入图片描述
将jquery放在工程项目中：
再编写前端页面时：

2.1 获取变量和设置变量

设置函数：
在中使用jQuery
此处的函数myck对应上述的myck
在这里插入图片描述

如何使用jQuery获取参数和设置参数：
在这里插入图片描述

var num1 = jQuery("#num1");
通过变量的id获取变量；
num1.val("");
设置变量的值；

在这里插入图片描述

3.完整Html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "jquery-1.9.1.min.js"></script>
    <script>
        function myck(type) {
            var num1 = jQuery("#num1");
            var num2 = jQuery("#num2");
            var resultDiv = jQuery("#resultDiv");
            if (type==5){
                num1.val("");
                num2.val("");
                resultDiv.html("");
                return false;
            }
            if (num1.val()==""){
                alert("请先输入数字1");

                num1.focus();
                return false;
            }else if(num2.val()==""){
                alert("请输入数字2");
                num2.focus()
            }
            var total = 0;
            if (type==1){
                    total = parseInt(num1.val())+parseInt(num2.val());
                }else if (type==2){
                total = parseInt(num1.val())-parseInt(num2.val());
                }else if (type==3){
                total = parseInt(num1.val())*parseInt(num2.val());
                }else if (type==4){
                total = parseInt(num1.val()) / parseInt(num2.val());
                }
            resultDiv.html("<h1>最终计算结果："+total+"</h1>");
        }
    </script>
</head>
<body>
    <div style="text-align: center;">
        <h1>计算器</h1>
        数字1：<input id = "num1" name="number1" type="number"><p></p>
        数字2：<input id = "num2" name = "number2" type="number"><p></p>
        <input type="button" value="相加" onclick="myck(1)">
        <input type="button" value = "相减" οnclick="myck(2)">
        <input type="button" value="相乘"  onclick="myck(3)">
        <input type="button" value="相除" onclick="myck(4)">
        <input type="button" value = "清空" οnclick="myck(5)">
        <p></p>
        <div id = "resultDiv">
        </div>
    </div>

</body>
</html>