JavaScript-jQuery的使用 + JS的案例_jsjquery案例-优快云博客

本文链接：https://blog.youkuaiyun.com/niceffking/article/details/130631335

文章展示了如何使用HTML和JavaScript实现图片更换、猜数字游戏、搜索页面展示以及创建表白墙。通过DOM操作改变图片源，生成随机数进行游戏，使用jQuery切换iframe页面内容，以及处理表白墙的用户输入提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击更换图片

我们先看下面这个例子:

使用input里面的button按钮, 并且利用函数, 将一个搜狗logo转换为百度logo:

<!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>JSDemo-Test</title>
    <script src="toos.js"></script>
</head>
<body>
    <img src="https://www.sogou.com/web/img/logo115_50.png?v=5" id = "sougou" width="200px" height="100px">
    <br>
    <input type="button" onclick="op()" value="更换图片">
    <script>
        function op() {
            var path = "https://www.baidu.com/img/flexible/logo/pc/result.png";
            document.getElementById("sougou").src = path;
        }
    </script>            
</body>
</html>

我们来看看效果:

这里面是偶先使用img标签, 导入一个网络图片, 也就是搜狗的logo图片, 然后给这个img标签设置好id, 然后在后面的input标签设置一个内置式的js语句, 也就是onclick, 然后onclick执行的操作为函数op(), 这个函数里面可以将sougou这个id所对应的标签里面的src属性更改为百度的logo地址.

使用document对象的getElementById(id)来获取到这个标签对象, 然后通过点号"."的方式来获取src地址, 然后更改这个地址为百度的logo网络地址.

猜数字

<!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>JSDemo-Test</title>
    <script src="toos.js"></script>
</head>
<body>
    <div>
        <h3>猜数字游戏</h3>
        玩家输入一个1~100的数字: <input type="text" id = "input_num"> <p></p>
        <input type="button" value="查看结果" onclick="selectResult()">
        <div id="result_div">

        </div>
    </div>
    <script>
        function selectResult() {
            // 产生随机数 1~10
            var randomNum = 1+Math.floor(Math.random()*10);
            var userInputNum = document.getElementById("input_num").value
            var msg;
            if (randomNum == userInputNum) {
                msg ="<h4>恭喜:猜