JQuery基本使用一

1.类似下面的菜单栏，用JQuery实现


Paste_Image.png
    <li class="ct_li">
    珠宝玉器
        <ul class='mt'>
            <li>翡翠</li>
            <li>玉石</li>
            <li>宝石</li>
            <li>水晶</li>
            <li>玛瑙</li>
            <li>珍珠</li>
        </ul>
    </li>
<script>
    var $li=$('.ct_li');
    $li.on('mouseenter', function(){
        $(this).find('.mt').show();
        // 或者
        // $(this).find('.child-panel').css('display', 'block');
        //或者
        //$(this).addClass('hover');

    })
    $li.on('mouseleave', function(){
        $(this).find('.mt').hide();
        // 或者
        // $(this).find('.child-panel').css('display', 'none');
        //或者
        //$(this).removeClass('hover');
    })
</script>

菜单选择缩略图：

Paste_Image.png
<script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
</script>
<style>
    *{margin:0;padding:0;}
    .ul li{
            list-style-type:none;
        }
    .ul li{
            padding:5px;
            float:left;
            border:1px solid #ccc;
        }
    .ul{
            display:block;
            margin:0px;
            padding:0xp;
        }
    .clearfix:before{
        content:'';
        display: block;
        clear: both;
        }
    .clearfix:after{
        content:'';
        display: block;
        clear: both;
        }
    .displaynone{
            display:none;
        }
    .displayblock{
            display:block;
        }
    .backgroundcolor{
            opacity: 0.5;
        }
    .frame .wrap{
            width:730px;
            border:1px solid #ccc;
        }
    .square_red{
            width:200px;
            height:200px;
            border:1px solid #ccc;
            margin:20px;
            float:left;
            background-color:red;
        }
    .square_yellow{
            width:200px;
            height:200px;
            border:1px solid #ccc;
            margin:20px;
            float:left;
            background-color:yellow;
        }
    .square_blue{
            width:200px;
            height:200px;
            border:1px solid #ccc;
            margin:20px;
            float:left;
            background-color:blue;
        }
    .frame .button{
            display:none;
            width:70px;
            height:25px;
            line-height:25px;
            padding-left:5px;
            margin:85px auto;
            border:1px solid #ccc;
            border-radius:10px;
            text-decoration:none;
            color:#66ffcc;
        }
</style>    
<body>
<ul class='ul clearfix'>
    <li>红色</li>
    <li>黄色</li>
    <li>蓝色</li>
</ul>
<div class='frame clearfix'>
    <div class='wrap clearfix'>
        <div class='square_red'>
            <a href='#' class='button' >立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>      
    </div>
    <div class='wrap displaynone clearfix'>
        <div class='square_yellow'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_yellow'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_yellow'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_yellow'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_yellow'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_yellow'>
            <a href='#' class='button'>立即抢购</a>
            </div>
    </div>
    <div class='wrap displaynone clearfix'>
        <div class='square_blue'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_blue'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_blue'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_blue'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_blue'>
            <a href='#' class='button'>立即抢购</a>
            </div>
        <div class='square_blue'>
            <a href='#' class='button'>立即抢购</a>
            </div>
    </div>
</div>
<script >
    var $ul=$('.ul'),
            $wrap=$('.frame .wrap'),
            $div=$('.wrap div');
    $ul.on('click', 'li', function(){
            $wrap.eq($li.index(this)).siblings().addClass('displaynone');
            $wrap.eq($li.index(this)).removeClass('displaynone');
        })
    $div.on('mouseenter', function(){
            $(this).addClass('backgroundcolor');
            $(this).find('.button').css('display','block'); 
        })
    $div.on('mouseleave', function(){       
            $(this).removeClass('backgroundcolor');
            $(this).find('.button').css('display','none'); 
        })
</script>

添加节点：

Paste_Image.png
<script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'>
</script>
<style>
    *{margin:0;padding:0;}
    .clearfix:before{
        content:'';
        display: block;
        clear: both;
        }
    .clearfix:after{
        content:'';
        display: block;
        clear: both;
        }
    .displaynone{
            display:none;
        }
    .displayblock{
            display:block;
        }
    .backgroundcolor{
            opacity: 0.5;
        }
    .frame .wrap{
            width:730px;
        }
    .square_red{
            width:200px;
            height:200px;
            border:1px solid #ccc;
            margin:20px;
            float:left;
            background-color:red;
        }
    .square_yellow{
            width:200px;
            height:200px;
            border:1px solid #ccc;
            margin:20px;
            float:left;
            background-color:yellow;
        }
    .square_blue{
            width:200px;
            height:200px;
            border:1px solid #ccc;
            margin:20px;
            float:left;
            background-color:blue;
        }
    .frame .button{
            display:none;
            width:70px;
            height:25px;
            line-height:25px;
            padding-left:5px;
            margin:85px auto;
            border:1px solid #ccc;
            border-radius:10px;
            text-decoration:none;
            color:#66ffcc;
        }
    .add{
        border:1px solid #ccc;
        border-radius:10px;
        text-decoration:none;
        padding: 10px;
        margin-left: 20px;
        margin-top: 30px;
        float: left;
    }
</style>    
<body>
<div class='frame clearfix'>
    <div class='wrap clearfix'>
        <div class='square_red'>
            <a href='#' class='button' >立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>
        <div class='square_red'>
            <a href='#' class='button'>立即抢购</a>
        </div>      
    </div>
</div>
<a href='#' class='add' >立即抢购</a>
<script >
    var products = [
        {
            img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
            name: '珂兰 黄金手 猴哥款',
            price: '￥405.00'
        },{
            img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
            name: '珂兰 黄金转运珠 猴哥款',
            price: '￥100.00'
        },{
            img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
            name: '珂兰 黄金手链 3D猴哥款',
            price: '￥45.00'
        }
    ];

    function addnode(prod){
        var node='';
        node="<div class='square_red'>"+prod.name+"<a href='#' class='button' >立即抢购</a>"+prod.price+"</div>";
        return node
    }

    var $wrap=$('.wrap'),
        $add=$('.add');
    $wrap.on('mouseenter','div' , function(){
            $(this).addClass('backgroundcolor');
            $(this).find('.button').css('display','block'); 
        })
    $wrap.on('mouseleave','div' , function(){       
            $(this).removeClass('backgroundcolor');
            $(this).find('.button').css('display','none'); 
        })
    $add.on('click', function(){
        $.each(products, function(i, prod){
            var addhtml=addnode(prod);
            $wrap.append(addhtml);
        })
    })
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,863评论 0赞 44
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,276评论 0赞 2
  • 08-jQuery学习与使用
    为甚嚒要学习jQuery？ 因为JS中有很多痛点： window.onload事件只能出现一次，如果出现多次，后面...
    magic_pill阅读 4,282评论 0赞 13
  • 对别人的好，忘了吧
    我们经常对别人做了一些好事，自己也感到非常高兴，因为有能力帮助别人，这是一件非常愉快的举动。 这些也对我们的心理状...
    万书合一阅读 4,019评论 3赞 5
  • 星耀小学亲子共成长——亲子日记，一年二班梁雨琦
    宝贝主动说妈我把这些天背的诗，都在背一遍吧，要都忘了，呵呵还挺有心。
    雪tx阅读 1,522评论 0赞 0

友情链接更多精彩内容