JQuery实现小项目

矫情吗；* 2024-03-17 11:14 54阅读 0赞

##  ##

![b49aa471d8034ae99292a6720ef403f3.gif][]

>  *  **博主简介：想进大厂的打工人**
>  *  **博主主页：**[@xyk:][xyk]
>  *  **所属专栏: [JavaEE初阶][JavaEE]**

--------------------

**目录**

文章目录

一、JQuery是什么

二、JQuery项目

2.1 猜数字

2.2 表白墙

2.3 聚合搜索

2.4 计算器

--------------------

**一、JQuery是什么**

> jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由\[John Resig\](https://baike.baidu.com/item/John Resig/6336344?fromModule=lemma\_inlink)发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
> 
> jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

总的来说，它就是一个工具js，是一个很好的外部资源，它提供了很多简洁高效的API

*  **怎么引入呢？**

1.  使用jquery的网络地址访问：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js

2.下载jquery的js文件

想下载的看下我的码云~~[xyk (ABC18045315897) - Gitee.com][xyk _ABC18045315897_ - Gitee.com]

## 二、JQuery项目 ##

### 2.1 猜数字 ###

*  API需要通过jQuery这个对象去调用，有一个别名“$”，但是不建议使用，因为其他的一些js框架，也会使用到这个别名，所以会冲突~

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>WebAPI Test</title>
            <script src="jquery.min.js"></script>
        </head>
        <body id="body">
            <div>
                <h3>猜数字游戏</h3>
                玩家请输入一个 1 - 10 的数字： 
                <input type="text" id="input_number"><br>
                <input type="button" value="查看结果" onclick="selectResultJq()">
                <div id="result">
    
                </div>
            </div>
                <script>
                    // jquery猜数字游戏
                    function selectResultJq(){
                    // 产生随机数 1-10
                    var randomNum = 1+Math.floor(Math.random()*10);
                    // document.getElementById("input_num").value
                    var userInputNum = jQuery("#input_number").val();
                    var msg;
                    if(randomNum==userInputNum){
                        msg="<h4>恭喜：猜对了</h4>";
                    }else{
                        msg="<h4>抱歉：猜错了，正确的数字是："+randomNum+"</h4>";
                    }
                    // document.getElementById("result_div").innerHTML = msg;
                    jQuery("#result").html(msg);
                }
                </script>
    
    
        </body>
    </html>

![16cbc6981b0f4181baf690f44a01e01f.png][]

### 2.2 表白墙 ###

![9a3afec875934549b6d1f0d8256826e1.png][]

### 2.3 聚合搜索 ###

*  聚合搜索就是一个页面，上面有一栏按钮，按一下就跳转到对应的网址，栏下的页面转换为对应的网址，但是选择栏还在
 *  主要是为了提高体验感~

**html：**

*  嵌入页面用iframe标签
 *  我们只需要点击按钮的时候，改变iframe的src属性即可
    
     *  **用到attr方法，左边为属性名，右边为替换后的值**

![f5c051f8670a4861bf847f4b2f4d2f5a.png][]

### 2.4 计算器 ###

cal.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="jquery.min.js"></script>
        <link rel="stylesheet" href="cal.css">
    </head>
    <body>
        <div class="calculator">
            <div class="cal">
                <form action="#">
                    <h2>计算器</h2>
                    <div class="row">
                        数字一：<input type="text" id="c1">
                    </div>                
                    <div class="row">
                        数字二：<input type="text" id="c2">
                    </div>
                    <div class="option">
                        <input type="button" value="相加" onclick="add()" id="a">
                        
                        <input type="button" value="相减" onclick="sub()" id="s">
                        <input type="button" value="相乘" onclick="mul()" id="m">
                        <input type="button" value="相除" onclick="div()" id="d">
                    </div>
                    <div class="clear">
                        <div class="reset">
                            <input type="reset" value="清空" id="up" onclick="update()">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <script>
            function add() {
                var numb1 = jQuery("#c1").val();
                var numb2 = jQuery("#c2").val();
                var sum = parseInt(numb1) + parseInt(numb2);
                jQuery("#a").val(sum);
            }
            function sub() {
                var numb1 = jQuery("#c1").val();
                var numb2 = jQuery("#c2").val();
                var sum = parseInt(numb1) - parseInt(numb2);
                jQuery("#s").val(sum);
            }
            function mul() {
                var numb1 = jQuery("#c1").val();
                var numb2 = jQuery("#c2").val();
                var sum = parseInt(numb1) * parseInt(numb2);
                jQuery("#m").val(sum);
            }
            function div() {
                var numb1 = jQuery("#c1").val();
                var numb2 = jQuery("#c2").val();
                var sum = parseFloat(numb1) / parseInt(numb2);
                jQuery("#d").val(sum);
            }
            function update() {
                jQuery("#a").val("相加");
                jQuery("#s").val("相减");
                jQuery("#m").val("相乘");
                jQuery("#d").val("相除");
            }
        
        </script>
        
    </body>
    </html>

cal.css:

html {
        width: 100%;
        height: 100%;
    }
    body {
        width: 100%;
        height: 100%;
        background-image: url("https://wallpaperm.cmcm.com/fedea52c7f796c3eeeb8598d4a09a3e7.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      
    }
    
    .calculator {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .cal {
        width: 600px;
        height: 400px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 20px;
    }
    .cal h2 {
        font-size: 24px;
        text-align: center;
        margin-top: 60px;
        margin-bottom: 40px;
    }
    
    .cal .row {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-around;/*设置flex的原因就是要用这个*/
        align-items: center;
        font-size: 25px;
        font-weight: 900;
        margin: 10px;
    }
    #c1 {
        width: 400px;
        height: 45px;
        font-size: 23px;
        text-indent: 10px;
        border-radius: 10px;
    }
    #c2 {
        width: 400px;
        height: 45px;
        font-size: 23px;
        text-indent: 10px;
        border-radius: 10px;
    }
    
    .option input {
        display: block;
        font-weight: 900;
        font-size: 20px;
        width: 100px;
        height: 70px;
        color: rgba(255, 255, 255, 0.618);
        border-radius: 20px;
        background-color: rgba(255,13,58, 0.5);
    }
    .option {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
    }
    .clear {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .reset #up {
        width: 200px;
        height: 30px;
        background-color:rgba(255, 0, 0, 0.4);
        color: white;
        font-weight: 900;
        line-height: 30px;
        text-align: center;
        border-radius: 2010px;
        border:none;
        margin-top: 20px;
        transition: all 0.618s;
    }
    #up:hover{
        background-color: rgba(251,255,153, 0.7);
    }

效果：

![7d09d5846ff34253bfac7ddaf1e63c6b.png][]

[b49aa471d8034ae99292a6720ef403f3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/782d6395318f489486dc47fb19974fd3.png
[xyk]: https://blog.csdn.net/asad21654864?spm=1000.2115.3001.5343
[JavaEE]: https://blog.csdn.net/asad21654864/category_12243955.html?spm=1001.2014.3001.5482
[xyk _ABC18045315897_ - Gitee.com]: https://gitee.com/ABC18045315897
[16cbc6981b0f4181baf690f44a01e01f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/c5f77d0736b949a2911dfd889e121c5e.png
[9a3afec875934549b6d1f0d8256826e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/c06aa27032fd47b38fab3e2882a0b065.png
[f5c051f8670a4861bf847f4b2f4d2f5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/48b54cc39586486797aa9798cc40335a.png
[7d09d5846ff34253bfac7ddaf1e63c6b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/74bd82ec594d41ed840196986eec342f.png