jQuery之案例

其他 2018-08-08 17:32:26 阅读次数: 0

下拉列表 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(imgs/bg.jpg);
        }

        .wrap li {
            background-image: url(imgs/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
        //加载页面
        $(function () {
            $(".wrap>ul>li").mouseenter(function () {
                //从当前li中所有的子元素中找到ul
                //$(this).children("ul").show();//把里面的内容显示出来
                //传入参数可以实现渐变效果
                //$(this).children("ul").show(1000);

                //防止出现堵塞
                $(this).children("ul").stop().show(1000);
            });
            $(".wrap>ul>li").mouseleave(function () {
                $(this).children("ul").hide();//把里面的内容隐藏起来
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul class="ul">
                <li><a href="javascript:void(0);">二级菜单11</a></li>
                <li><a href="javascript:void(0);">二级菜单12</a></li>
                <li><a href="javascript:void(0);">二级菜单13</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单2</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单21</a></li>
                <li><a href="javascript:void(0);">二级菜单22</a></li>
                <li><a href="javascript:void(0);">二级菜单23</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单3</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单31</a></li>
                <li><a href="javascript:void(0);">二级菜单32</a></li>
                <li><a href="javascript:void(0);">二级菜单33</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

 高亮显示

<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        //鼠标进入事件
        $("#uu>li").mouseenter(function () {
            $(this).css("backgroundColor","red");
        });
        //鼠标离开事件
        $("#uu>li").mouseleave(function () {
            $(this).css("backgroundColor","");
        });
        //修改字体
        $("#uu>li").click(function () {
            $(this).css("fontColor","#ffffff");
            $(this).css("fontSize","30px");
            $(this).css("fontFamily","楷体");
        });
    });
</script>
<ul id="uu">
    <li>倩女幽魂</li>
    <li>丑八怪</li>
    <li>爱情转移</li>
    <li>爱情码头</li>
    <li>体面</li>
    <li>说散就散</li>
    <li>纸短情长</li>
    <li>因为爱情</li>
    <li>有点甜</li>
</ul>
</body>

高光显示的链式编程 

<script src="jquery-1.12.4.js"></script>
<script>
    //链式编程
    $(function () {
        //鼠标进入事件
        $("#uu>li").mouseenter(function () {
            $(this).css("backgroundColor","red");
        }).mouseleave(function () {
            $(this).css("backgroundColor","");
        }).click(function () {
            $(this).css("fontColor","#ffffff").css("fontSize","30px").css("fontFamily","楷体");
        });
    });
</script>

表单验证：验证表单是否为汉字姓名

<body>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
       $("#txt").keyup(function () {
           if(/^[\u4e00-\u9fa5]{2,6}$/.test($(this).val())){
               $(this).css("backgroundColor","green");
           }else {
               $(this).css("backgroundColor","red");
           }
       });
    });
</script>
<input type="text" value="" id="txt">
</body>

鼠标经过，更改div内的图片内容

 <script src="jquery-1.12.4.js"></script>
    //链式编程
    <script>
        $(function () {
            $(function () {
                $("#left>li").mouseenter(function () {
                    $("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
                });
                $("#right>li").mouseenter(function () {
                    $("#center>li").eq($(this).index() + 9).show().siblings().hide();
                });
            })
        });
    </script>



    //非链式编程
    <script>
        $(function () {
            $("#left>li").mouseenter(function () {
                //.index()----->当前这个元素的索引
                var index=$(this).index();
                //先隐藏，再显示
                $("#center>li").hide();
                //:eq(索引值)---->是一个选择器，获取的是对应元素的索引
                $("#center>li:eq("+index+")").show();
            });
            $("#right>li").mouseenter(function () {
                //索引需要+9
                var index=$(this).index()+9;
                $("#center>li").hide();
                $("#center>li:eq("+index+")").show();
            });
        });
    </script>

该案例html部分的代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left, #center, #right {
            float: left;
        }

        #left li, #right li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a, #right 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, #right li a:hover {
            background-image: url(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
</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>
    <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>

    </ul>
    <ul id="right">
        <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>
</body>
</html>

tab切换案例

<script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //获取li标签，鼠标进入事件
            $(".tab>li").mouseenter(function () {
                //保存索引值
                var index=$(this).index();
                //给鼠标进入的li添加样式，移除li的兄弟元素中的样式
                $(this).addClass("active").siblings().removeClass("active");
                //根据鼠标进入的li的索引值添加div的类样式，移除其兄弟元素的类样式
                // $(".products>div:eq("+index+")").addClass("selected").siblings().removeClass("selected");
                $(".products>div").eq(index).addClass("selected").siblings().removeClass("selected");
            });
        });
    </script>

该案例html部分的代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

    </style>
   
</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="imgs/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>

</body>
</html>

动态创建列表并高亮显示


    <script src="jquery-1.12.4.js"></script>
    <script>
        var arr=[
        {"name":"传智播客","href":"http://www.itcas.com"},
        {"name":"百度","href":"http://www.itcas.com"},
        {"name":"哔哩哔哩","href":"http://www.itcas.com"},
        {"name":"快播","href":"http://www.itcas.com"},
        {"name":"腾讯视频","href":"http://www.itcas.com"},
        {"name":"爱奇艺","href":"http://www.itcas.com"},
        {"name":"网易云课堂","href":"http://www.itcas.com"},
        {"name":"开眼","href":"http://www.itcas.com"}
    ];
        $(function () {
            $("#btn").click(function () {
                //创建表格
                var table=$("<table border='1' cellpadding='0' cellspacing='0'></table>");
                //把表格添加进div中
                $("#dv").append(table);
                for (var i=0;i<arr.length;i++){
                    var dt=arr[i];
                    //创建行
                    var tr=$("<tr></tr>");
                    //把行添加进表格中
                    tr.appendTo(table).mouseenter(function () {
                        $(this).css("backgroundColor","green");
                    }).mouseleave(function () {
                        $(this).css("backgroundColor","");

                    });
                    //创建td并加入到行中
                    var td01=$("<td>"+dt.name+"</td>");
                    tr.append(td01);
                    var td02=$("<td><a href='"+dt.href+"'>"+dt.name+"</a></td>");
                    tr.append(td02);
                }
            });
           
        });
    </script>

固定导航栏案例

jQuery代码

<script src="jquery-1.12.4.js"></script>
<script>
   $(function () {
       //为window注册卷曲事件
       $(window).scroll(function () {
           //向上卷曲的距离大于顶部的高
           if($(this).scrollTop()>=$(".top").height()){
               //固定.nav
               $(".nav").css("position","fixed");
               $(".nav").css("top",0);
               $(".main").css("marginTop",$(".nav").height());
           }else {
               //恢复原样
               $(".nav").css("position","static");
               $(".main").css("marginTop",0);
           }

       });
   })
</script>

Html代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        img {
            vertical-align: top;
        }

        .main {
            margin: 0 auto;
            width: 1000px;
            margin-top: 10px;

        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="top" id="topPart">
    <img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
    <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
    <img src="images/main.png" alt=""/>
</div>


</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41320857/article/details/81412131
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
NEFU 117 素数个数的位数
Closest Common Ancestors (Lca,tarjan)
ELK部署
【转载】Hive笔记整理（三）
SQL语句（一）基本表的定义
关于Java web开发中的MySQL的事务语句
MFC创建自定义窗体
如何用一句话激怒程序员？
《逆袭大学》文摘——9.4 基础和应用的平衡中找到大学的节奏
【spring源码分析】@Value注解原理
每日归档
更多
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022