JavaScript网页设计案例：（jquery.js）10例

最新推荐文章于 2025-07-29 13:04:21 发布
原创 最新推荐文章于 2025-07-29 13:04:21 发布 · 876 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #jquery #html

jquery是一个javascript函数库,它封装了javascript常用的功能代码,提供一种简便的javascript设计模式,优化html文档操作、事件处理、动画设计和ajax交互。

1.下拉框3级联动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        var data = [
            {
                name: 'AAAAAAA',
                child: [
                    {
                        name: 'a1a1a1a1',
                        grandCd: [
                            { name: '111111111' },
                            { name: '222222222' }
                        ]
                    },
                    {
                        name: 'a2a2a2a2',
                        grandCd: [
                            { name: '3333333333' },
                            { name: '4444444444' }
                        ]
                    }
                ]
            },
            {
                name: 'BBBBBBBB',
                child: [
                    {
                        name: 'b1b1b1b1',
                        grandCd: [
                            { name: '666666666' },
                            { name: '777777777' }
                        ]
                    },
                    {
                        name: 'b2b2b2bb2',
                        grandCd: [
                            { name: '888888888' },
                            { name: '999999999' }
                        ]
                    }
                ]
            },
        ];
        //
        $(function () {
            bindlv1();
        });
        function bindlv1() {
            $("#lv1").append("<option value=''>--请选择--</option>");
            for (var i in data) {
                $("#lv1").append("<option value='" + data[i].name +"'>"+data[i].name+"</option>");
            }
            lv1change();
        }
        function lv1change() {
            $("#lv2").html("");
            $("#lv3").html("");
            var v1 = $("#lv1").val();
            if (v1) {
                var chids = data.find(c => c.name == v1).child
                $("#lv2").append("<option value=''>--请选择--</option>");
                for (var i in chids) {
                    $("#lv2").append("<option value='" + chids[i].name + "'>" + chids[i].name + "</option>");
                }
                lv2change();
            }
        }
        function lv2change() {
            $("#lv3").html("");
            var v1 = $("#lv1").val();
            var v2 = $("#lv2").val();
            if (v1 && v2) {
                var chids = data.find(c => c.name == v1).child
                var grands = chids.find(c => c.name == v2).grandCd
                $("#lv3").append("<option value=''>--请选择--</option>");
                for (var i in grands) {
                    $("#lv3").append("<option value='" + grands[i].name + "'>" + grands[i].name + "</option>");
                }
            }
        }
    </script>
</head>
<body>
    <select id="lv1" onchange="lv1change()" style="width:140px"></select>
    <select id="lv2" onchange="lv2change()" style="width:140px"></select>
    <select id="lv3" style="width:140px"></select>
</body>
</html>

2.table表隔行变色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            setcolor()
        })
        function setcolor() {
            $("#mytable").find("tr").each(function (i) {
                if (i % 2 == 0) {
                    $(this).css("background", "#ddf");
                } else {
                    $(this).css("background", "#dfd");
                }
            });
        }
    </script>
</head>
<body>
    <table id="mytable" rules="all" style="width:800px;border-spacing:0">
        <tr><td>aaaaaaaa</td><td>aaaaaaaaaa</td><td>aaaaaa</td><td>aaaaaaaaaa</td></tr>
        <tr><td>bbbbbb</td><td>bbbbb</td><td>bbbb</td><td>bbbbbb</td></tr>
        <tr><td>ccccccccc</td><td>ccc</td><td>cccccccccc</td><td>ccccccccc</td></tr>
        <tr><td>dddd</td><td>dddddddddd</td><td>dddddd</td><td>dddddddddd</td></tr>
    </table>
</body>
</html>

3.全选、全不选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        function chekallchange() {
            if ($("#all").is(":checked")) {
                $(".all").prop("checked", true);
            } else {
                $(".all").prop("checked", false);
            }
        }
    </script>
</head>
<body>
    <input id="all" type="checkbox" onchange="chekallchange()" /><label for="all" style="font-weight:700">全选</label> <br />
    <input id="AAAAA" type="checkbox" class="all" /><label for="AAAAA">AAAAA</label> <br />
    <input id="BBBBB" type="checkbox" class="all" /><label for="BBBBB">BBBBB</label> <br />
    <input id="CCCCC" type="checkbox" class="all" /><label for="CCCCC">CCCCC</label> <br />
</body>
</html>

4.鼠标拖动进度条滑块

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        body {background:#fafafa;
        }
        .sbidLineBox {
            width:500px;
            height:400px;
            margin:100px auto;
            background:#fff;
            box-shadow:0 0 10px 0 #ccc;
            position:absolute;
            top:20px;
            left:20px;
            border:solid 10px #fff;
        }
        .sbidLine_L {
            width: 400px;
            height: 10px;
            background: #ecebeb;
            border: solid 1px #3ac15e;
            border-radius: 10px;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 0;
            overflow: hidden;
            box-shadow: 0 0 10px 0 #ccc;
        }
        .sbidLine_Ct {
            width: 400px;
            height: 10px;
            background: #3ac15e;
            position: absolute;
            left: -400px;
            top: 0px;
        }
        .sbidLine_Dt {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            line-height: 48px;
            position: absolute;
            left: 0;
            top: 0;
            background: #3ac15e;
            box-shadow: 0 0 5px 0 #ccc;
            text-align:center;
            color:#fff;
            cursor:pointer;
        }
            .sbidLine_Dt:hover {
                box-shadow: 0 0 8px 0 #3ac15e;
            }
    </style>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script>
        $(function () {
            initsbid();
            sbidTo(85);
        });
        function sbidTo(v) {
            var w = $(".sbidLine_Ct").width();
            var tw = w * 85 / 100;
            var lw = -(w - tw) + 20;
            $(".sbidLine_Dt").html("«"+v+"»");
            $(".sbidLine_Ct").animate({ left: lw + "px" }, 600);
            $(".sbidLine_Dt").animate({ left: tw + "px" }, 600);
        }
        function initsbid() {
            var canMove = false;
            var ox, oy;
            $(".sbidLine_Dt").mousedown(function (e)//e鼠标事件
            {
                canMove = true;
                //$(this).css("cursor", "move");//改变鼠标指针的形状
                var offset = $(this).offset();//DIV在页面的位置
                ox = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
                oy = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离

            });
            $(document).mousemove(function (ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
            {
                var w = $(".sbidLine_Ct").width();
                if (canMove) {
                    $(".sbidLine_Dt").stop();//加上这个之后

                    var _x = ev.pageX - ox;//获得X轴方向移动的值
                    var _y = ev.pageY - oy;//获得Y轴方向移动的值
                    if (_x < 20) { _x = 20; }
                    if (_x > 20 + w) { _x = 20 + w;}
                    var ctl = w - (_x - 20);
                    if (_x != 0) {
                        $(".sbidLine_Dt").animate({ left: (_x - 20) + "px" }, 10);
                        $(".sbidLine_Ct").css("left", -ctl + "px");
                    }
                    var v = parseInt((_x - 20) * 100 / w);
                    $(".sbidLine_Dt").html("«" + v + "»");
                }
            }).mouseup(function () {
                canMove = false;
                //$(".sbidLine_Dt").css("cursor", "default");
            });
        }
    </script>
</head>
<body>
    <div class="sbidLineBox">
        <div class="sbidLine_L">
            <div class="sbidLine_Ct"></div>
        </div>
        <div class="sbidLine_Dt">«0»</div>
    </div>
</body>
</html>

5.图片轮播

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>       
        * {margin:0;padding:0;
        }
        #slidCt img {display:block;width:400px;height:250px;float:left;
        }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            setInterval(function () {slidfuc()},2000);
        });
        function slidfuc() {
            var l = -parseInt($("#slidCt").css("margin-left").replace("px", ""));
            if (l / 400 > 1) { l = 0 }
            else { l += 400; }
            $("#slidCt").animate({marginLeft:-l+'px'},600);
        }
    </script>
</head>
<body>
    <div style="width: 400px; height: 250px; overflow: hidden; margin: 20px 0 0 20px;">
        <div id="slidCt" style="height: 250px; width: 1200px">
            <img src="https://www.uchuanbo.com/ueditor/php/upload/image/20210623/1624415469570968.jpeg" />
            <img src="https://img2.baidu.com/it/u=3129675182,215518988&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313"  />
            <img src="https://bpic.588ku.com/back_list_pic/22/12/16/3c5a45337fb53059789a4f19bfbd6f41.jpg%21/fh/300/quality/90/unsharp/true/compress/true"  />
        </div>
    </div>
</body>
</html>

6.回到顶部

<script src="js/jquery-3.5.1.min.js"></script>
    <script>
        function toTop() {
            $('body').animate({ scrollTop: 0 }, 50);
        }
    </script>

7.dialog弹窗

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        function showDialog(tit) {
            $("#mDialog").css("display","block");
        }
        function closeDialog() {
            $("#mDialog").css("display", "none");
        }
    </script>
</head>
<body>
    <input type="button" value="弹窗" onclick="showDialog('标题')" />

    <div id="mDialog" style="width:800px;height:400px;border:solid 1px #ddd;border-radius:10px;margin:100px auto;background:#fff;display:none;">
        <div id="mDialogTit" style="width:100%;height:40px;background:#25aaf3;color:#f0f0f0;"></div>
        <div id="mDialogCot" style="text-align:center;">
            <br />
            <br />
            <br />
            <input type="button" value="关闭弹窗" onclick="closeDialog();" />
        </div>
    </div>
</body>
</html>

8.表单验证

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        function checkdata() {
            var tel = $.trim($("#tel").val());
            if (ismobile(tel)) {
                alert("验证成功");
            } else {
                alert("验证失败");
            }
        }

        function ismobile(v) {//手机号
            if (/^1[3-9]\d{9}$/.test(v)) {
                return true;
            } else { return false; }
        }
    </script>
</head>
<body>
    <input id="tel" type="text" style="width:200px;padding:4px;" />
    <input type="button" value="提交" onclick="checkdata();" />
</body>
</html>

9.ajax请求

$.ajax({
            type: "GET",
            url: "https://*******.com/api/***",
            data: {},
            dataType: "json",
            //beforeSend: function (xhr) {
            //    xhr.setRequestHeader('Authorization', $.cookie("SZTtoken"));
            //},
            success: function (d) {
                console.log(d);
            },
            error: function (xhr, status, error) {
                console.log(xhr)
            }
        })

10.表单数据绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () { binddata() });

        function binddata() {
            $("#tel").val("测试测试测试测试");
            $("#ckTst").prop("checked", true);
            $("#msg").html("清风道长测试");
            $("#sTst").append("<option value='清风道长'>清风道长<option>");
            $("#sTst").append("<option value='白云道长'>白云道长<option>");
        }
    </script>
</head>
<body>
    <input id="tel" type="text" value="" style="width:200px;padding:4px" /><br />
    <input id="ckTst" type="checkbox" value="aaaa" /><label for="ckTst">测试</label><br />
    <span id="msg"></span><br />
    <select id="sTst"></select><br />
</body>
</html>

JavaScript网页设计案例：打造动态交互的个性化主页
运维人生
10-17 1109
我们的目标是创建一个简洁而富有互动性的个人主页，用户可以自定义主页的布局和内容。动态背景：根据时间变化显示不同的背景图片。可拖拽模块：用户可以自由调整主页上的模块位置。个性化设置：允许用户通过输入框修改个人信息，如姓名、简介等。通过上述步骤，我们成功创建了一个具有动态背景、可拖拽模块和个性化设置的个性化主页。这个案例展示了JavaScript在网页设计中的强大功能，尤其是与jQueryUI结合使用时，能够极大地简化拖拽功能的实现。此外，通过CSS的过渡效果，我们还为网页增添了一些视觉上的享受。
基于Jquery的网站设计
12-27
该部分内容是本作者基于Jquery和Bootstrap制作的课程设计，内容包括五个页面和相关的JS代码。
很好的Jquery网页模板
06-17
很不错的Jquery模板。界面非常清爽的一套网站管理
快速上手：jQuery EasyUI演示项目
最新发布
weixin_35414260的博客
07-29 692
在前端技术日益丰富的今天，jQuery EasyUI作为一款轻量级的前端框架，其易用性和灵活性得到了众多开发者的青睐。EasyUI基于jQuery，提供了一套丰富的UI组件，能够帮助开发者快速构建出美观、响应式的用户界面。jQuery EasyUI结合了jQuery库的核心优势，以实现高效、简洁的JavaScript编程。它将常见的UI元素转换成了可定制、可扩展的组件，并将它们打包在一个易于使用的框架中。
使用jQuery高效制作网页
12-04
使用jQuery高效制作网页特效ACCP8.0全部素材。每章都有。
鼠标拖动功能_徐川江的博客_新浪博客
qq_15076569的博客
12-18 126
//div移动 $("#dialog").mousedown(function (e) { //e鼠标事件 $(this).css("cursor", "move"); //改变鼠标指针的形状 var offset = $(this).offset(); //DIV在页面的位置 var x = e.pageX - offset...
18个使用 jQuery 制作的创意网站欣赏
weixin_34301307的博客
06-04 708
　　jQuery 是一个非常优秀的 Javascript 框架，在现在的 Web 开发项目中扮演着重要角色，借助 jQuery 可以让网站有更好的可用性和用户体验，让访问者对网站留下非常好的印象。今天这篇文章与大家分享18个使用 jQuery 制作的创意网站，一起欣赏。 imagemechanics.com wineshop.hunters.co.nz duchyoriginals....
jquery.redirect.js:jQuery 表单重定向
06-29
《jQuery redirect.js：实现表单重定向的JavaScript插件解析》 在Web开发中，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。"jquery.redirect.js"是jQuery的一个插件，专为实现...
JavaScript网页设计300例.rar
08-22
"JavaScript网页设计300例.rar" 是一个针对初学者的资源包，包含了丰富的实例，帮助学习者通过实践掌握JavaScript的核心概念和技术。这个压缩包分为21个子内容，涵盖了多个JavaScript应用领域，如密码管理、鼠标特效...
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
jquery.fullPage.min.rar
02-25
全屏滚动插件jQuery.fullPage.min.js是网页设计师在构建现代、引人入胜的网站时常用的一款工具。它以其高效、易用和强大的功能深受开发者喜爱。在本篇文章中，我们将深入探讨jQuery.fullPage.min.js的核心特性、使用...
使用jQuery实现一个网页.zip
06-10
一、实验目的 a.熟悉jQuery 的运用； b.熟悉html布局； c.熟悉css和css3样式的编写 二、实验内容 制作一个网页（1-2个页面即可），本次实验可基于实验四或者实验一进行改进： 1.需要使用jQuery里的至少两种方法，并请注释，例如jQuery事件，添加元素，删除元素等等。 2. 建立一个Txt文档，文档中请你标注下参考了哪些网站。 3. 如果你会vue，react，AngularJs等基于js的技术，可以用这些技术替换jQuery。 三、实验报告要求 报告在课程学习平台上提交，内容以源代码形式上交。
制作一个简单的JQuery页面
12-30
制作一个简单的JQuery页面，制作一个简单的JQuery页面
jQuery购物网页经典制作案例
11-26
本文实例为大家分享了jQuery购物网页经典案例，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>今日团购模块</title> <style type="text/css" rel="stylesheet"> *{ margin:0px ; padding:0px; font-size: 12px ; } #pruduce{ width:948px ; background-col
Jquery和html5结合制作的网页案例
05-03
该网页是初次学习JQuery后练手制作的，页面使用jquery和Html5的技术
jQuery前端网页制作
m0_64346512的博客
07-27 1243
1、语法2、参数params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。案例 ：手风琴案例。
jQuery 响应式 Web 设计（一）
龙哥盟
07-15 1388
在本章中，我们回顾了响应式网页设计的概念。我们还学习了什么是移动优先。我们学习了媒体查询以及它们在我们网站实现中的不同之处。我们还创建了一个展示我们网站的线框。这将把我们连接到下一章，该章将对这个线框进行编码。现在，通过学习如何使用三种不同的响应式网格系统：流体基准网格，1140 网格和我最喜欢的 Foundation4 网格，我们继续进行项目。同时，我们也会探讨如何通过使用 JavaScript 来调整网站的行为。所有这些主题将在下一章中进行解释。
06 jQuery网页开发案例
maiblog
08-12 567
jquery简介，常用api， 操作DOM api，购物车综合案例，本地存储加强，todolist本地存储综合案例，常见jquery插件，瀑布流，懒加载，全屏滚动，bootstrap JS插件使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风道长白云外

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值