jQuery案例

已于 2022-05-06 15:17:21 修改
阅读量2.7k 收藏 32
点赞数 1
分类专栏： jQuery 文章标签： jquery javascript css3
于 2022-05-06 14:54:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangZhang_521/article/details/124610142
版权
本文通过四个案例——精品展示、高亮显示、手风琴效果和购物车全选，详细介绍了jQuery在网页交互中的实际运用，包括对应的HTML、JS和CSS文件，帮助读者深入理解并掌握jQuery的实用技巧。
摘要由CSDN通过智能技术生成

01-精品展示案例

<!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>
    <style type="text/css">
        * {
     
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
     
            list-style: none;
        }
        
        a {
     
            text-decoration: none;
        }
        
        .wrapper {
     
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
     
            float: left;
        }
        
        #left li {
     
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
     
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
     
            background-image: url(images/abg.gif);
        }
        
        #content {
     
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <!-- 核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子显示相对应图片,其余的图片隐藏 -->
    <!-- 需要得到当前小li的索引号,就可以显示对应索引号的图片 -->
    <!-- jQuery得到当前元素的索引号 $(this).index()-->
    <!-- 中间对应的图片,可以通过eq(index) 方法去选择-->
    <script>
        $(function() {
     
            // 1.鼠标经过左侧的小li
            $('#left li').mouseover(function() {
     
                // 2.得到当前小li的索引号
                var index = $(this).index()
                    // 3.右侧相应的图片显示出来
                    // $('#content div').eq(index).show()
                    // 4.让其余的图片隐藏
                    //  $('#content div').eq(index).siblings().hide()
                    // 链式编程写法
                $('#content div').eq(index).show().siblings().hide()

            })
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <div id="content">
            <div>
                <a href=""><img src="images/女靴.jpg" width="200px" height="200px"></a>
            </div>
            <div>
                <a href=""><img src="images/雪地靴.jpg" width="200px" height="200px"></a>
            </div>
            <div>
                <a href=""><img src="images/冬裙.jpg" width="200px" height="200px"></a>
            </div>
            <div>
                <a href=""><img src="images/呢大衣.jpg" width="200px" height="200px"></a>
            </div>
            <div>
                <a href=""><img src="images/毛衣.jpg" width="200px" height="200px"></a>
            </div>
            <div>
                <a href=""><img src="images/棉服.jpg" width="200px" height="200px"></a>
            </div>
            <div>
                <a href=""><img src="images/女裤.jpg" width="200px" height="200px"></a>
            </div>
            <div>
                <a href=""><img src="images/羽绒服.jpg" width="200px" height="200px"></a>
            </div>
            <div>
                <a href=""><img src="images/牛仔裤.jpg" width="200px" height="200px"></a>
            </div>
        </div>
    </div>
</body>

</html>

效果展示

在这里插入图片描述

02-高亮显示案例

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
     
            margin: 0;
            padding: 0;
        }
        
        ul {
     
            list-style: none;
        }
        
        body {
     
            background: #000;
        }
        
        .wrap {
     
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }
        
        .wrap li {
     
            float: left;
            margin: 0 10px 10px 0;
        }
        
        .wrap img {
     
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
     
            // 鼠标进入的时候,其他的小li透明度是0.5
            $(".wrap li").hover(function() {
     
                $(this).siblings().stop().fadeTo(400, 0.5)
            }, function() {
     
                // 鼠标离开,其他小li透明度是1
                $(this).siblings().stop().fadeTo(400, 1)
            })
        })
    </script>
</head>

<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="images/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
</body>

</html>

效果展示

在这里插入图片描述

03-手风琴案例

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>

    <style type="text/css">
        * {
     
            margin: 0;
            padding: 0;
        }
        
        img {
     
            display: block;
        }
        
        ul {
     
            list-style: none;
        }
        
        .king {
     
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
     
            overflow: hidden;
        }
        
        .king li {
     
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
     
            width: 224px;
        }
        
        .king li.current .big {
     
            display: block;
        }
        
        .king li.current .small {
     
            display: none;
        }
        
        .big {
     
            width: 224px;
            display: none;
        }
        
        .small {
     
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>

</head>

<body>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
     
            // 鼠标经过小li,有两步操作
            $(".king li").mouseenter(function() {
     
                // 1.鼠标经过,当前小li宽度变为224px ,同时小图片淡出,大图片淡入
                $(this).stop().animate({
     
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟宽度变为69px ,同时小图片淡入,大图片淡出
                $(this).siblings("li").stop().animate({
     
                    width: 69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })


        })
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a
最低0.47元/天 解锁文章
WangZhang_521
关注
专栏目录
精品展示案例（使用jQuery）
qq_64182180的博客
11-19 2444
在电商网站首页设计中，通常都包括精品展示功能。精品展示功能通常用来推送目前热卖的商品，并支持快速切换商品。本案例就是一个使用jQuery代码实现一个精品展示的案例。这里我们会学习到排他思想和链式编程。
jQuery入门（六）jQuery实现瀑布流分页案例
最新发布
kong7906928的博客
09-01 464
瀑布流分页,jquery实现瀑布流分页
jQuery设计思想
weixin_34309543的博客
09-23 367
译文出自：阮一峰的网络日志 jQuery设计思想 一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $...
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
JQuery 案例
南淮北安的博客
04-06 778
文章目录一、广告的自动显示与隐藏二、抽奖 一、广告的自动显示与隐藏 需求： * 当页面加载完，3秒后。自动显示广告 * 广告显示5秒后，自动消失。 分析： * 使用定时器来完成。setTimeout (执行一次定时器) * 分析发现JQuery的显示和隐藏动画效果其实就是控制display * 使用 show/hide方法来完成广告的显示 代码 <!--引入jquery--&g...
JQuery案例
08-06
在这个jQuery案例中，我们将探讨如何使用jQuery来创建一个交互式的导航栏，提升用户体验。下面将详细介绍这个“导航栏demo”的实现过程及其相关知识点。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档...
jQuery经典小案例
热门推荐
娃娃的博客
03-29 1万+
目录 下拉菜单案例 突出展示案例 淘宝精品案例 京东呼吸灯案例 tab栏切换案例 手风琴案例 城市选择案例 微博发布案例 弹幕效果案例 固定导航栏案例 小火箭返回顶部案例 音乐导航栏案例 下拉菜单案例 效果图： 源代码： 鼠标进入事件mouseenter 鼠标离开事件mouseleave 下拉动画slideDown /slid...
jquery案例
m0_57732255的博客
01-25 1037
jquery案例 1：开关灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>开光灯</title> <style> </style> </head> <body> <button id="btn1">开灯</button> <bu.
jQuery小案例
weixin_49756484的博客
05-18 881
jQuery小案例 这篇文章我们主要是讲如何改变网页的背景颜色和改变背景图片以及计算器这三个小案例，我们将用到jQuery的方式去实现效果 我们先开始如何该表网页的背景颜色： 第一步：还是老规矩，先把页面新建好，在开始写我们的代码 第二步：开始写我们的html和css样式。这里我就把html和css样式的代码省略了，（图表1 则是我写的最终效果） 图表 1 样式写出来了，可是不我想要的一个效果，我想要的是点击一下红色方块整个网页的背景就变成了红色，点击绿色方块整个网页又变成了绿色，这个效果该
jquery 小例子
03-21
NULL 博文链接：https://hb-keepmoving.iteye.com/blog/937908
jQuery简单小案例
2401_83641098的博客
03-29 852
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料.zip
08-04
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料，学习资料 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素....
jQuery常用实例代码
程序员的天堂
10-06 529
1、全选或者全不选form的Checkbox控件    function checkAll(objChkAll){          //找到表示全选/全不选的Checkbox控件所在的form元素         var frm = jQuery(objChkAll).parents().filter("form,:first");         if(frm != null){     ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值