JQuery基本使用一

作者: 书中有凉气 | 来源:发表于2016-12-17 12:55 被阅读0次

前端基础入门五（掌握jQuery的常用api，实现动态效果）
JQuery基本使用一
jQuery基本使用
JQuery基本使用
jQuery 的基本使用
jQuery笔记
07-JQuery插件应用
jQuery的基本使用一
jQuery的基本使用
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>

前端基础入门五（掌握jQuery的常用api，实现动态效果）
jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常...
JQuery基本使用一
1.类似下面的菜单栏，用JQuery实现菜单选择缩略图：添加节点：
jQuery基本使用
一. jQuery的基础知识源文件jQuery文件min是压缩过的版本。区别：在开发过程中，我们使用未压缩的版...
JQuery基本使用
一. 基本使用 jquery的入口函数实例：通过使用入口函数的方式，将div在页面加载完毕后隐藏。 2.jque...
jQuery 的基本使用
1.2. jQuery 的基本使用 1.2.1 jQuery 的下载 jQuery的官网地址： https...
jQuery笔记
1. jQuery 介绍 2. jQuery 的基本使用 3. jQuery 选择器 4. jQuery 样式操...
07-JQuery插件应用
本教程主要以Jquery UI为例，简单介绍Jquery插件的使用。使用JQuery UI提供的基本功能，需要如...
jQuery的基本使用一
1 jQuery 的下载 jQuery的官网地址： https://jquery.com/，官网即可下载最新版...
jQuery的基本使用
1. js的新选择器 document.querySelector() 查找单个document.querySel...
jQuery的基本使用
1. js的新选择器 document.querySelector() 查找单个 document.query...

JQuery基本使用一

相关文章

前端基础入门五（掌握jQuery的常用api，实现动态效果）

JQuery基本使用一

jQuery基本使用

JQuery基本使用

jQuery 的基本使用

jQuery笔记

07-JQuery插件应用

jQuery的基本使用一

jQuery的基本使用

jQuery的基本使用

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读