01-jQ小案例

最新推荐文章于 2021-05-26 11:07:45 发布

沈川希

最新推荐文章于 2021-05-26 11:07:45 发布

阅读量489

点赞数 1

分类专栏： jQery基础文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45344023/article/details/107883327

版权

这篇博客分享了8个使用jQuery实现的小案例，包括灯泡效果、简单动画、在线客服、tab选项卡、小星星评价、下拉菜单、同级别元素插入和修改元素值。每个案例都包含代码实现和运行效果展示，适合初学者理解和实践jQuery的基本用法。

摘要由CSDN通过智能技术生成

jQ小案例

案例01：实现灯泡效果

简述：选中的图片有蓝色的边框

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./images/19/1.jpg" alt="">
    <img src="./images/19/2.jpg" alt="">
    <img src="./images/19/3.jpg" alt="">
    <img src="./images/19/4.jpg" alt="">
    <img src="./images/19/5.jpg" alt="">
    
</body>
<script src="./js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        $("img").click(function (){
            $(this).css("border","4px solid skyblue").siblings().css("border","0")
            $(this).siblings().css("border","0").end().css("border","4px solid skyblue")

            
            // $(this).siblings().css("border","0").css("border","4px solid skyblue")   //出错  只有选中的没有加边框，其他均加边框
        })
    })
</script>
</html>

运行效果

在这里插入图片描述

案例02：简单动画

简述：鼠标放在其中一张图片上，图片会显示亮色，其他图片变暗，鼠标点击图片进行向上滑动后，向下滑动；鼠标移除，全部图片变亮。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0}
        body{
            background-color: #000;
        }
        .fader{
            width: 630px;
            height: 392px;
            border: 1px solid #fff;
            margin:100px auto 0;
            padding:10px 0 0 10px;
        }
        .fader li{
            width: 200px;
            height: 186px;
            margin:0 10px 10px 0;
            float: left;
            list-style:none;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <ul class="fader">
        <li><img src="images/29/01.jpg" width="200" height="186" alt=""></li>
        <li><img src="images/29/02.jpg" width="200" height="186" alt=""></li>
        <li><img src="images/29/03.jpg" width="200" height="186" alt=""></li>
        <li><img src="images/29/04.jpg" width="200" height="186" alt=""></li>
        <li><img src="images/29/05.jpg" width="200" height="186" alt=""></li>
        <li><img src="images/29/06.jpg" width="200" height="186" alt=""></li>
    </ul>
    
</body>

<script src="./js/jquery-1.11.3.min.js"></script>

<script>
    $(function(){
        $(".fader li").mouseover(function(){
            $(this).siblings().stop(true).fadeTo(500,.5);
        })
        $(".fader li").mouseout(function(){
            $(".fader li").stop(true).fadeTo(500,1);
        })
        $(".fader li").click(function(){
            $(this).children().stop(true).slideUp().slideDown();
            //children指的是img进