jQuery学习(1)猜数字游戏

简介:   jQuery是一个快捷、小型且特征丰富的JavaScript库。它使得HTML文档遍历及操作,事件处理,动画,Ajax等更简洁方便。

  jQuery是一个快捷、小型且特征丰富的JavaScript库。它使得HTML文档遍历及操作,事件处理,动画,Ajax等更简洁方便。它通过调用一个简单易用的API,就能在各种浏览器中使用。由于jQuery本身很好的兼容性和延展性,它的出现改变了千百万使用者书写JavaScript的习惯。
  本次分享将会对jQuery的学习做一个简单的应用,那就是猜数字游戏。
  开始页面如下:


开始页面

  我们有必要对该游戏的处理逻辑做一些简单的分析。首先,后台会随机产生一个1-100之间的整数。然后,用户在输入框中进行输入操作,当输入不是数字时,则弹出对话框并提示;如果输入的数字<1或者>100,则则弹出对话框并提示;如果输入的数字等于产生的随机数,则提出输入正确;若如果输入的数字小于产生的随机数,则提出输入的数字过小;若如果输入的数字小于产生的随机数,则提出输入的数字过小。
  完整的jQuery代码如下:

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function(){
            var correctNumber = Math.floor(Math.random()*100)+1;
            var result = "";

            $("button").click(function(){

                var text = Number($("#enter").val());
                if(isNaN(text)){
                    alert('Input is not a number!');
                }
                else{
                    if(text > 100 || text < 1){
                        alert('Input number is not in range(1,100)!');
                    }
                    else{
                        if(text < correctNumber){
                            result += String(text)+' is too low!<br/>';
                            $('#res').html(result);
                        }
                        else{
                            if(text > correctNumber){
                                result += String(text)+' is too high!<br/>';
                                $('#res').html(result);
                            }
                            else{
                                result += 'Congratulations! You are right!<br/>';
                                $('#res').html(result);
                            }
                        }   
                    }
                }

            }); 
        });
    </script>
</head>
<body>
<h2>Guess Number</h2>
<h3>Enter a integer between 1 and 100:</h3>
<input type='text' id='enter'/>
<button>Show</button>
<p id='res'></p>
</body>
</html>

需要提醒的是,在上述代码中的<script src="jquery-3.2.1.js"></script>,表示加载jQuery库,加载的方式可以是先从网上下载jQuery库到本地,然后在标签中加载其本地地址;也可是直接通过CDN加载,不需要加载到本地,版本3.2.1的CDN地址如下:
版本3.2.1的CDN地址
加载完jQuery库后,就能在JavaScript中使用jQuery语法了。具体的语法可以参考jQuery API中文文档:https://www.jquery123.com/ .
  猜数字游戏的示例操作如下:


输入非数字
输入数字范围不对
正确的输入过程

  本次分享到此结束,欢迎大家交流~~

目录
相关文章
|
JavaScript 前端开发
jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)—jQuery中对象的查找方法总结
|
18天前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
47 22
|
16天前
|
JavaScript
jQuery仿Key社游戏风格右键菜单特效源码
jQuery二次元风格右键菜单插件HTML源码,该插件将原生的浏览器右键菜单转换为一个动画的圆形菜单,并且带音效,效果非常的炫酷。 本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
42 18
|
16天前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
33 14
|
17天前
|
JavaScript
jQuery仿方块人物头像消除游戏源码
jQuery人物头像迷阵消除游戏代码是一款类似《宝石迷阵》类的方块消除类型的小游戏源码。
36 13
|
4月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
7月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
60 0
|
7月前
切方块游戏 HTML5+jQuery【附源码】
切方块游戏 HTML5+jQuery【附源码】
49 0
|
8月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
8月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
94 0