jquery DOM&事件

库和框架的区别？

  • 库（library）：将代码集合成一个产品，供开发者调用。面向对象的代码组织而成的是类库，面向过程组织而成的是函数库
  • 框架（framework）：为了解决一个（一类）问题而开发的产品，开发者只需要使用框架提供的类或函数就可以实现全部功能
  • 区别：库和框架比较类似，都是代码的集合，不过框架更具有针对性，可以说框架是库的升级版，提供一套完整的代码，不需要自己重组。

jquery能做什么？

  1. 动态操作CSS样式
  2. 用css()方法直接设置样式
  3. 用添加删除class更改样式
  4. 选择器快捷获取DOM
  5. 操作DOM
  6. 动态改变DOM内容
  7. 接受并响应事件
  8. 实现动画效果
  9. 操作动画队列
  10. 统一Ajax操作
  11. 简化JavaScript代码
  • 用css()方法直接设置样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <p>这是一个段落</p>
    <script>
        $('p').css('color', 'yellow');
    </script>
</body>
</html>
  • 用添加、删除class更改样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
    <style>
        .test {
            color: red;
        }
        .zero {
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <p class="test">这是一个段落</p>
    <script>
        $('p').addClass('zero');
    </script>
</body>
</html>
  • 动态改变DOM内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <p class="test">这是一个段落</p>
    <script>
        $('p').text('miss you!')
    </script>
</body>
</html>
  • 接受并响应事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <p class="test">这是一个段落</p>
    <button type='button'>switch</button>
    <script>
        $('button').on('click', function(){
            $('p').text('Forever');
        });
    </script>
</body>
</html>

jquery 对象和 DOM 原生对象有什么区别？如何转化？

  • DOM对象：DOM是Document object model的缩写，即文档对象模型，是W3C标准的用于操作文档的API
  • jQuery对象：是通过jQuery包装DOM对象后所产生的对象。
  • 区别：
    1.两者的原理截然不同，并不是同一类的对象；
    2.两者拥有不同的方法，不能够混用，否则会出错；
  • 转换：
    1.DOM对象转换成jQuery对象：在DOM对象外包装$()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <p class="test">这是一个段落</p>
    <button type='button'>switch</button>
    <script>
        var test = document.getElementsByClassName('test');
        var $test = $('test');
        console.log($test)
    </script>
</body>
</html>

2.Query对象转换成DOM对象：[index]或get(index)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <p class="test">这是一个段落</p>
    <button type='button'>switch</button>
    <script>
        var $test = $('.test');
        // console.log($test[0]);
        console.log($test.get(0));
    </script>
</body>
</html>

jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

  • bind：为一个元素一个或多个事件，绑定一个事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <p class="test">这是一个段落</p>
    <button type='button'>switch</button>
    <script>
        $('button').bind('click', function(){
            $('p').text('更改内容');
        });
    </script>
</body>
</html>
  • unbind：从元素上删除一个以前附加的事件处理程序
  • delegate：delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数；适用于当前或未来的元素（比如由脚本创建的新元素）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <p class="test">这是一个段落</p>
    <button type='button'>switch</button>
    <script>
        $('body').delegate('p', 'click', function(){
            $(this).after('<p>这是要展示的内容</p>');
        });
    </script>
</body>
</html>
  • live：附加一个事件处理器到匹配目前选择器的所有元素，现在和未来，1.7以后弃用
  • on：在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能
    推荐使用：1.7版本以后，推荐on方法，可以替代之前所有方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button type='button'>Add</button>
    <script>
        $('button').on('click', function(){
            $('ul').append('<li>新增内容</li>');
        });
        $('ul').on('mouseenter', 'li', function(){
            $(this).css('background-color', 'yellow');
        });
    </script>
</body>
</html>
  • off：移除一个事件处理函数

jquery 如何展示/隐藏元素？

  • 使用hide()和show()方法实现展示隐藏元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <p>Paragraph</p>
    <button class='show' type='button'>Show</button>
    <button class="hide" type='button'>Hide</button>
    <script>
        $(document).ready(function(){ //DOM准备就绪后执行函数
            $('.show').on('click', function(){
                $('p').show();
            });
            $('.hide').on('click', function(){
                $('p').hide();
            });
        });
    </script>
</body>
</html>

jQuery动画如何使用？

  • jQuery animate() 方法用于创建自定义动画
    语法：$(selector).animate({params},speed,callback);
    {params}：设置动画效果
    speed：设置动画速度
    callback：设置回调函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
    <style>
        #ct {
            border: 1px solid white;
            background-color: pink;
            width: 100px;
            height: 100px;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="ct">jQuery Anime</div>
    <button type='button'>动画</button>
    <script>
        var clickable = true; //一开始可以点击
        $('button').on('click', function(){
            if(!clickable){ //如果不能点击
                return; //直接return什么都不做
            };
            clickable = false; //当点击后变成不能点击,避免多次点击动画重复执行
            $('#ct').animate({left: '100px'}, 1000);
            $('#ct').animate({top: '100px'}, 1500);
            $('#ct').animate({left: '0'}, 2000);
            $('#ct').animate({top: '0'}, 2500);
        });
    </script>
</body>
</html>

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

  • 设置和获取元素内部HTML内容：用html()方法可以获取，如果在()中写入文本，可以设置HTML内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <div id='ct'><i>jQuery</i></div>
    <button type='button'>Change</button>
    <script>
        console.log($('ct').html());
        $('button').on('click', function(){
            $('#ct').html('<b>黑色五叶草</b>');
        });
    </script>
</body>
</html>
  • 设置和获取元素内部文本：用text()方法就可以设置和获取元素内部文本内容，用法和html()一样
    text()与html()区别在于，html()会获取到内部的标签，text()获取的均是文本内容

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

  • 设置和获取表单用户输入内容
    通过val()方法，就可以设置和获取表单用户输入内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js'></script>
</head>
<body>
    <input type='text' value='123'>
    <script>
        console.log($('input').val());
        $('input').val(456);
    </script>
</body>
</html>

导航条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导航条</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        body,
        ul,
        li {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .nav {
            box-sizing: border-box;
        }

        .nav-aside {
            background-color: #c7171e;
            width: 150px;
            /* padding: 0 10px; */
        }

        .nav-aside .category {
            position: relative;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px dotted #de272e;
        }

        .nav-aside .cate-title {
            display: bolck;
            color: #fff;
            font-size: 14px;
            margin: 0 10px;
            padding: 10px;
        }

        .nav-aside .five {
            border-bottom: none;
        }

        .nav-aside .icon-goto {
            color: #fff;
            font-size: 16px;
            float: right;
            margin-right: 25px;
        }

        .nav-aside .category:after {
            display: block;
            content: "";
            clear: both;
        }

        .nav-aside .child-panel {
            position: absolute;
            top: 0;
            left: 150px;
            background: #fff;
            border: 1px solid #ccc;
            width: 200px;
            font-size: 12px;
            display: none;
        }

        .nav-aside .category.hover .child-panel {
            display: block;
        }

        .child-panel li {
            width: 96px;
            float: left;
            padding: 15px 2px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul class="nav-aside">
            <li class="category">
                <a href="#" class="cate-title">连载新番</a>
                <span class="icon-goto">></span>
                <ul class="child-panel">
                    <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>
            </li>
            <li class="category">
                <a href="#" class="cate-title">季度完结</a>
                <span class="icon-goto">></span>
                <ul class="child-panel">
                    <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>
            </li>
            <li class="category">
                <a href="#" class="cate-title">新番时间表</a>
                <span class="icon-goto">></span>
                <ul class="child-panel">
                    <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>
            </li>
            <li class="category">
                <a href="#" class="cate-title">资讯</a>
                <span class="icon-goto">></span>
                <ul class="child-panel">
                    <li>
                        <a href="#">剧场启动计划</a>
                    </li>
                    <li>
                        <a href="#">特报</a>
                    </li>
                    <li>
                        <a href="#">pv</a>
                    </li>
                    <li>
                        <a href="#">告知映像</a>
                    </li>
                </ul>
            </li>
            <li class="category five">
                <a href="#" class="cate-title">官方延伸</a>
                <span class="icon-goto">></span>
                <ul class="child-panel">
                    <li>
                        <a href="#">ED官方演唱会</a>
                    </li>
                    <li>
                        <a href="#">OP官方演唱会</a>
                    </li>
                    <li>
                        <a href="#">新番发布会</a>
                    </li>
                    <li>
                        <a href="#">声优采访</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $('.nav-aside .category').on('mouseenter', function () {
                $(this).addClass('hover');
                // 或者
                // $(this).find('.child-panel').show();
                // 或者
                // $(this).find('.child-panel').css('display', 'block');
            });
            $('.nav-aside .category').on('mouseleave', function () {
                $(this).removeClass('hover');
                // 或者
                // $(this).find('.child-panel').hide();
                // 或者
                // $(this).find('.child-panel').css('display', 'none');
            });
        });
    </script>
</body>

</html>

tab切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab切换</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }

        /*告诉浏览器去理解你设置的边框和内边距的值是包含在width内的*/

        body,
        ul,
        li,
        p {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        body {
            font: 12px/150% Arial, Verdana, "\5b8b\4f53";
            color: #666;
        }

        a {
            color: #666;
            text-decoration: none;
        }


        .clearfix:after {
            display: block;
            content: '';
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        /*是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。*/

        /*对外部容器设置定位*/

        .mod-tab {
            position: relative;
            margin: 10px;
        }


        .mod-tab .tabs {
            float: left;
            border: 1px solid #ccc;
            border-bottom: none;
            border-radius: 3px 3px 0 0;
        }

        .mod-tab .tabs li {
            float: left;
            padding: 8px 0;
        }

        .mod-tab .tabs li a {
            padding: 0 10px;
            border-right: 1px solid #ccc;
            line-height: 1;
        }

        .mod-tab .tabs li:last-child a {
            border: none;
        }

        .mod-tab .tabs li.active {
            background: #ccc;
        }

        .mod-tab .tabs li.active a {
            color: #c81623;
        }

        /*702=width:700 + border:2*/

        .mod-tab .panel-ct {
            border: 1px solid #ccc;
            width: 702px;
        }

        /*将容器水平向左平移20px*/

        .mod-tab .prod-ct {
            margin-left: -20px;
            margin-top: -20px;
        }

        .mod-tab .panel {
            display: none;
        }

        .mod-tab .panel.active {
            display: block;
        }

        /*对li设置左外边距20px，所以一排中三个li的总体witdth是220*3+20*3-20=700。减去20因为父容器设置了-20px，使内部浮动的六个li横向向左移动20px*/

        /*重点：父元素的负外边距 = 第一个浮动子元素的外边距，可以将子元素整体水平方向移动*/

        /*因为内部a .btn标签应用了绝对定位，所以对此父容器设置了定位*/

        .mod-tab .prod {
            position: relative;
            float: left;
            width: 220px;
            padding: 10px 20px;
            margin-left: 20px;
            margin-top: 20px;
            text-align: center;
            border: 1px solid #eee;
            background: #fff;
        }

        .mod-tab .cover {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.3);
            transition: all 0.3;
            opacity: 0;
        }

        /*利用绝对定位调整a连接-立即抢购的位置*/

        .mod-tab .cover .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #c81623;
            color: #c81623;
            padding: 10px 15px;
            border-radius: 3px;
            text-align: center;
            background: #fff;
            cursor: pointer;
            /*
            margin-top: -20px;
            margin-left: -50px;
            */
        }

        .mod-tab .prod.hover .cover {
            opacity: 1;
        }

        .mod-tab .prod-name {
            height: 36px;
            text-align: center;
            font-weight: normal;
            font-size: 12px;
            color: #666;
        }

        .mod-tab .prod-price {
            text-align: center;
            color: #c81623;
        }
    </style>
</head>

<body>
    <div class="mod-tab">
        <div class="tabs-ct clearfix">
            <ul class="tabs">
                <li class="active">
                    <a href="javascript:void(0)">新款发布</a>
                </li>
                <li>
                    <a href="javascript:void(0)">珠宝首饰</a>
                </li>
                <li>
                    <a href="javascript:void(0)">奢侈品</a>
                </li>
            </ul>
        </div>

        <ul class="panel-ct clearfix">
            <li class="panel active">
                <ul class="prod-ct">
                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列一</div>
                            <div class="prod-price">￥1001</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列二</div>
                            <div class="prod-price">￥1002</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列三</div>
                            <div class="prod-price">￥1003</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列四</div>
                            <div class="prod-price">￥1004</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列五</div>
                            <div class="prod-price">￥1005</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列六</div>
                            <div class="prod-price">￥1006</div>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="panel">
                <ul class="prod-ct">
                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列七</div>
                            <div class="prod-price">￥1008</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列八</div>
                            <div class="prod-price">￥1008</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列九</div>
                            <div class="prod-price">￥1009</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列十</div>
                            <div class="prod-price">￥1010</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列十一</div>
                            <div class="prod-price">￥1011</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列十二</div>
                            <div class="prod-price">￥1012</div>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="panel">
                <ul class="prod-ct">
                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列十三</div>
                            <div class="prod-price">￥1013</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列十四</div>
                            <div class="prod-price">￥1014</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列十五</div>
                            <div class="prod-price">￥1015</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列十六</div>
                            <div class="prod-price">￥1016</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列十七</div>
                            <div class="prod-price">￥1017</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                            <div class="prod-name">系列十八</div>
                            <div class="prod-price">￥1018</div>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>




    <div class="mod-tab">
        <div class="tabs-ct clearfix">
            <ul class="tabs">
                <li class="active">
                    <a href="javascript:void(0)">新款发布</a>
                </li>
                <li>
                    <a href="javascript:void(0)">珠宝首饰</a>
                </li>
                <li>
                    <a href="javascript:void(0)">奢侈品</a>
                </li>
            </ul>
        </div>

        <ul class="panel-ct clearfix">
            <li class="panel active">
                <ul class="prod-ct">
                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列一</div>
                            <div class="prod-price">￥1001</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列二</div>
                            <div class="prod-price">￥1002</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列三</div>
                            <div class="prod-price">￥1003</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列四</div>
                            <div class="prod-price">￥1004</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列五</div>
                            <div class="prod-price">￥1005</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列六</div>
                            <div class="prod-price">￥1006</div>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="panel">
                <ul class="prod-ct">
                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列七</div>
                            <div class="prod-price">￥1008</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列八</div>
                            <div class="prod-price">￥1008</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列九</div>
                            <div class="prod-price">￥1009</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列十</div>
                            <div class="prod-price">￥1010</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列十一</div>
                            <div class="prod-price">￥1011</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列十二</div>
                            <div class="prod-price">￥1012</div>
                        </a>
                    </li>
                </ul>
            </li>

            <li class="panel">
                <ul class="prod-ct">
                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列十三</div>
                            <div class="prod-price">￥1013</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列十四</div>
                            <div class="prod-price">￥1014</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列十五</div>
                            <div class="prod-price">￥1015</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列十六</div>
                            <div class="prod-price">￥1016</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列十七</div>
                            <div class="prod-price">￥1017</div>
                        </a>
                    </li>

                    <li class="prod">
                        <div class="cover">
                            <a href="" class="btn">立即抢购</a>
                        </div>
                        <a href="#">
                            <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="">
                            <div class="prod-name">系列十八</div>
                            <div class="prod-price">￥1018</div>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        $('.mod-tab .tabs li').on('click', function () {
            var $cur = $(this);
            console.log($cur);
            var index = $cur.index();
            console.log(index);

            $cur.siblings().removeClass('active');
            $cur.addClass('active');

            $cur.parents('.mod-tab').find('.panel').removeClass('active');
            $cur.parents('.mod-tab').find('.panel').eq(index).addClass('active');
        });

        $('.mod-tab .prod').on('mouseenter', function () {
            $(this).addClass('hover');
        });
        $('.mod-tab .prod').on('mouseleave', function () {
            $(this).removeClass('hover');
        });


    </script>
</body>

</html>

代理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>代理</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }

        body,
        ul,
        li,
        p {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        body {
            font: 12px/150% Arial, Verdana, "\5b8b\4f53";
            color: #666;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        .layout {
            width: 702px;
            margin: 10px auto;
        }

        .btn {
            display: inline-block;
            /*设置行内块元素宽度不会像块级元素一样auto占满父容器宽度*/
            border: 1px solid #c81623;
            color: #c81623;
            padding: 10px 15px;
            border-radius: 3px;
            text-align: center;
            background: #fff;
            cursor: pointer;
        }

        /*蒙层*/

        .cover {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            transition: all 0.3s;
            opacity: 0;
        }

        /*蒙层按钮*/

        .cover .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .prod.hover .cover {
            opacity: 1;
        }

        .prod-ct:after {
            display: block;
            content: '';
            clear: both;
        }

        .prod-ct {
            margin-left: -20px;
            margin-top: -20px;
        }

        .prod {
            position: relative;
            float: left;
            width: 220px;
            padding: 10px 20px;
            margin-left: 20px;
            margin-top: 20px;
            text-align: center;
            border: 1px solid #eee;
            background: #fff;
        }

        .prod-name {
            height: 36px;
            text-align: center;
            font-weight: normal;
            font-size: 12px;
            color: #666;
        }

        .prod-price {
            text-align: center;
            color: #c81623;
        }

        .btn-add {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="layout">
        <h1>珠宝首饰</h1>
        <ul class="prod-ct">
            <li class="prod">
                <div class="cover">
                    <a href="" class="btn">立即抢购</a>
                </div>
                <a href="#">
                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                    <div class="prod-name">千足金和田玉</div>
                    <div class="prod-price">￥998</div>
                </a>
            </li>

            <li class="prod">
                <div class="cover">
                    <a href="" class="btn">立即抢购</a>
                </div>
                <a href="#">
                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                    <div class="prod-name">千足金和田玉</div>
                    <div class="prod-price">￥998</div>
                </a>
            </li>

            <li class="prod">
                <div class="cover">
                    <a href="" class="btn">立即抢购</a>
                </div>
                <a href="#">
                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                    <div class="prod-name">千足金和田玉</div>
                    <div class="prod-price">￥998</div>
                </a>
            </li>

            <li class="prod">
                <div class="cover">
                    <a href="" class="btn">立即抢购</a>
                </div>
                <a href="#">
                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                    <div class="prod-name">千足金和田玉</div>
                    <div class="prod-price">￥998</div>
                </a>
            </li>

            <li class="prod">
                <div class="cover">
                    <a href="" class="btn">立即抢购</a>
                </div>
                <a href="#">
                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                    <div class="prod-name">千足金和田玉</div>
                    <div class="prod-price">￥998</div>
                </a>
            </li>

            <li class="prod">
                <div class="cover">
                    <a href="" class="btn">立即抢购</a>
                </div>
                <a href="#">
                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="">
                    <div class="prod-name">千足金和田玉</div>
                    <div class="prod-price">￥998</div>
                </a>
            </li>
        </ul>

        <a href="#" class="btn btn-add">Add</a>
    </div>


    <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 getProdHtml(prod) {
            var html = '';
            html += '<li class="prod">';
            html +=     '<div class="cover"><a class="btn" href="">立即抢购</a></div>';
            html +=         '<a href=#>';
            html +=            '<img src="'+prod.img+'" alt="">';
            html +=                 '<div class="prod-name">'+prod.name+'</div>';
            html +=                 '<div class="prod-price">'+prod.price+'</div>';
            html +=         '</a>';
            html += '</li>';
            return html;
        };

        $('.btn-add').on('click', function(event) {
            event.preventDefault();  //默认事件行为将不再触发
            $.each(products, function(index, prod){
                var html = getProdHtml(prod);
                $('.prod-ct').append(html);
            });
        });

        $('.prod-ct').on('mouseenter', '.prod', function(event){
            $(this).addClass('hover');
        });
        $('.prod-ct').on('mouseleave', '.prod', function(event){
            $(this).removeClass('hover');
        });
    </script>
</body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25赞 707
  • jquery DOM&事件
    Q&A 1. 库和框架的区别？ 库（library）：将代码集合成一个产品，供开发者调用，面向对象的代码组织而成的...
    进击的阿群阅读 231评论 0赞 0
  • jquery DOM&事件
    问答 说说库和框架的区别？ 库为 Library ( 简写 Lib )，框架为 Framework。 库是将代码集...
    coolheadedY阅读 216评论 0赞 1
  • 日夜谈——JQuery DOM&事件
    1.说说库和框架的区别？ 什么是库 库的英语为 Library ( 简写 Lib ) 库是将代码集合成的一个产品，...
    Sheldon_Yee阅读 246评论 0赞 2
  • 每个人都是摆渡人
    每个人都有自己的荒原 小说《摆渡人》中的“荒原”是指：人死后到彼岸之间的路途。 但其实在活着的生命旅途中，我们又何...
    大胡子逸舟阅读 526评论 0赞 3