jquery DOM&事件

庫和框架的區(qū)別?

  • 庫(library):將代碼集合成一個(gè)產(chǎn)品,供開發(fā)者調(diào)用。面向?qū)ο蟮拇a組織而成的是類庫怒竿,面向過程組織而成的是函數(shù)庫
  • 框架(framework):為了解決一個(gè)(一類)問題而開發(fā)的產(chǎn)品,開發(fā)者只需要使用框架提供的類或函數(shù)就可以實(shí)現(xiàn)全部功能
  • 區(qū)別:庫和框架比較類似扩氢,都是代碼的集合耕驰,不過框架更具有針對(duì)性,可以說框架是庫的升級(jí)版录豺,提供一套完整的代碼朦肘,不需要自己重組。

jquery能做什么双饥?

  1. 動(dòng)態(tài)操作CSS樣式
  2. 用css()方法直接設(shè)置樣式
  3. 用添加刪除class更改樣式
  4. 選擇器快捷獲取DOM
  5. 操作DOM
  6. 動(dòng)態(tài)改變DOM內(nèi)容
  7. 接受并響應(yīng)事件
  8. 實(shí)現(xiàn)動(dòng)畫效果
  9. 操作動(dòng)畫隊(duì)列
  10. 統(tǒng)一Ajax操作
  11. 簡化JavaScript代碼
  • 用css()方法直接設(shè)置樣式
<!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>這是一個(gè)段落</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">這是一個(gè)段落</p>
    <script>
        $('p').addClass('zero');
    </script>
</body>
</html>
  • 動(dòng)態(tài)改變DOM內(nèi)容
<!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">這是一個(gè)段落</p>
    <script>
        $('p').text('miss you!')
    </script>
</body>
</html>
  • 接受并響應(yīng)事件
<!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">這是一個(gè)段落</p>
    <button type='button'>switch</button>
    <script>
        $('button').on('click', function(){
            $('p').text('Forever');
        });
    </script>
</body>
</html>

jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別?如何轉(zhuǎn)化咏花?

  • DOM對(duì)象:DOM是Document object model的縮寫趴生,即文檔對(duì)象模型,是W3C標(biāo)準(zhǔn)的用于操作文檔的API
  • jQuery對(duì)象:是通過jQuery包裝DOM對(duì)象后所產(chǎn)生的對(duì)象。
  • 區(qū)別
    1.兩者的原理截然不同苍匆,并不是同一類的對(duì)象刘急;
    2.兩者擁有不同的方法,不能夠混用浸踩,否則會(huì)出錯(cuò)叔汁;
  • 轉(zhuǎn)換
    1.DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象:在DOM對(duì)象外包裝$()
<!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">這是一個(gè)段落</p>
    <button type='button'>switch</button>
    <script>
        var test = document.getElementsByClassName('test');
        var $test = $('test');
        console.log($test)
    </script>
</body>
</html>

2.Query對(duì)象轉(zhuǎn)換成DOM對(duì)象:[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">這是一個(gè)段落</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:為一個(gè)元素一個(gè)或多個(gè)事件害驹,綁定一個(gè)事件處理程序
<!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">這是一個(gè)段落</p>
    <button type='button'>switch</button>
    <script>
        $('button').bind('click', function(){
            $('p').text('更改內(nèi)容');
        });
    </script>
</body>
</html>
  • unbind:從元素上刪除一個(gè)以前附加的事件處理程序
  • delegate:delegate() 方法為指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序因苹,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)苟耻;適用于當(dāng)前或未來的元素(比如由腳本創(chuàng)建的新元素)
<!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">這是一個(gè)段落</p>
    <button type='button'>switch</button>
    <script>
        $('body').delegate('p', 'click', function(){
            $(this).after('<p>這是要展示的內(nèi)容</p>');
        });
    </script>
</body>
</html>
  • live:附加一個(gè)事件處理器到匹配目前選擇器的所有元素,現(xiàn)在和未來扶檐,1.7以后棄用
  • on:在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)凶杖,提供綁定事件處理的所有功能
    推薦使用: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>新增內(nèi)容</li>');
        });
        $('ul').on('mouseenter', 'li', function(){
            $(this).css('background-color', 'yellow');
        });
    </script>
</body>
</html>
  • off:移除一個(gè)事件處理函數(shù)

jquery 如何展示/隱藏元素智蝠?

  • 使用hide()和show()方法實(shí)現(xiàn)展示隱藏元素
<!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準(zhǔn)備就緒后執(zhí)行函數(shù)
            $('.show').on('click', function(){
                $('p').show();
            });
            $('.hide').on('click', function(){
                $('p').hide();
            });
        });
    </script>
</body>
</html>

jQuery動(dòng)畫如何使用?

  • jQuery animate() 方法用于創(chuàng)建自定義動(dòng)畫
    語法:$(selector).animate({params},speed,callback);
    {params}:設(shè)置動(dòng)畫效果
    speed:設(shè)置動(dòng)畫速度
    callback:設(shè)置回調(diào)函數(shù)
<!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'>動(dòng)畫</button>
    <script>
        var clickable = true; //一開始可以點(diǎn)擊
        $('button').on('click', function(){
            if(!clickable){ //如果不能點(diǎn)擊
                return; //直接return什么都不做
            };
            clickable = false; //當(dāng)點(diǎn)擊后變成不能點(diǎn)擊,避免多次點(diǎn)擊動(dòng)畫重復(fù)執(zhí)行
            $('#ct').animate({left: '100px'}, 1000);
            $('#ct').animate({top: '100px'}, 1500);
            $('#ct').animate({left: '0'}, 2000);
            $('#ct').animate({top: '0'}, 2500);
        });
    </script>
</body>
</html>

如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容奈梳?如何設(shè)置和獲取元素內(nèi)部文本杈湾?

  • 設(shè)置和獲取元素內(nèi)部HTML內(nèi)容:用html()方法可以獲取,如果在()中寫入文本攘须,可以設(shè)置HTML內(nèi)容
<!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>
  • 設(shè)置和獲取元素內(nèi)部文本:用text()方法就可以設(shè)置和獲取元素內(nèi)部文本內(nèi)容漆撞,用法和html()一樣
    text()與html()區(qū)別在于,html()會(huì)獲取到內(nèi)部的標(biāo)簽于宙,text()獲取的均是文本內(nèi)容

如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容浮驳?如何設(shè)置和獲取元素屬性?

  • 設(shè)置和獲取表單用戶輸入內(nèi)容
    通過val()方法捞魁,就可以設(shè)置和獲取表單用戶輸入內(nèi)容
<!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>

導(dǎo)航條

<!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>導(dǎo)航條</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="#">齊木楠雄的災(zāi)難</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">季度完結(jié)</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="#">調(diào)教咖啡廳</a>
                    </li>
                    <li>
                        <a href="#">食戟之靈</a>
                    </li>
                    <li>
                        <a href="#">寶石之國</a>
                    </li>
                </ul>
            </li>
            <li class="category">
                <a href="#" class="cate-title">新番時(shí)間表</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="#">劇場啟動(dòng)計(jì)劃</a>
                    </li>
                    <li>
                        <a href="#">特報(bào)</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官方演唱會(huì)</a>
                    </li>
                    <li>
                        <a href="#">OP官方演唱會(huì)</a>
                    </li>
                    <li>
                        <a href="#">新番發(fā)布會(huì)</a>
                    </li>
                    <li>
                        <a href="#">聲優(yōu)采訪</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;
        }

        /*告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的*/

        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瀏覽器的專有屬性抹恳,它可以設(shè)置或檢索對(duì)象的縮放比例。除此之外署驻,它還有其他一些小作用奋献,比如觸發(fā)ie的hasLayout屬性健霹,清除浮動(dòng)、清除margin的重疊等瓶蚂。*/

        /*對(duì)外部容器設(shè)置定位*/

        .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;
        }

        /*對(duì)li設(shè)置左外邊距20px糖埋,所以一排中三個(gè)li的總體witdth是220*3+20*3-20=700。減去20因?yàn)楦溉萜髟O(shè)置了-20px窃这,使內(nèi)部浮動(dòng)的六個(gè)li橫向向左移動(dòng)20px*/

        /*重點(diǎn):父元素的負(fù)外邊距 = 第一個(gè)浮動(dòng)子元素的外邊距瞳别,可以將子元素整體水平方向移動(dòng)*/

        /*因?yàn)閮?nèi)部a .btn標(biāo)簽應(yīng)用了絕對(duì)定位,所以對(duì)此父容器設(shè)置了定位*/

        .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;
        }

        /*利用絕對(duì)定位調(diào)整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)">新款發(fā)布</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)">新款發(fā)布</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;
            /*設(shè)置行內(nèi)塊元素寬度不會(huì)像塊級(jí)元素一樣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: '珂蘭 黃金轉(zhuǎn)運(yùn)珠 猴哥款',
                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();  //默認(rèn)事件行為將不再觸發(fā)
            $.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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末杭攻,一起剝皮案震驚了整個(gè)濱河市祟敛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌兆解,老刑警劉巖馆铁,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異锅睛,居然都是意外死亡埠巨,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門现拒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辣垒,“玉大人,你說我怎么就攤上這事印蔬⊙埃” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵侥猬,是天一觀的道長例驹。 經(jīng)常有香客問我,道長陵究,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任奥帘,我火速辦了婚禮铜邮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘寨蹋。我一直安慰自己松蒜,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布已旧。 她就那樣靜靜地躺著秸苗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪运褪。 梳的紋絲不亂的頭發(fā)上惊楼,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天玖瘸,我揣著相機(jī)與錄音,去河邊找鬼檀咙。 笑死雅倒,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的弧可。 我是一名探鬼主播蔑匣,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼棕诵!你這毒婦竟也來了裁良?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤校套,失蹤者是張志新(化名)和其女友劉穎价脾,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搔确,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡彼棍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了膳算。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片座硕。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖涕蜂,靈堂內(nèi)的尸體忽然破棺而出华匾,到底是詐尸還是另有隱情,我是刑警寧澤机隙,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布蜘拉,位于F島的核電站,受9級(jí)特大地震影響有鹿,放射性物質(zhì)發(fā)生泄漏旭旭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一葱跋、第九天 我趴在偏房一處隱蔽的房頂上張望持寄。 院中可真熱鬧,春花似錦娱俺、人聲如沸稍味。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽模庐。三九已至,卻和暖如春油宜,著一層夾襖步出監(jiān)牢的瞬間掂碱,已是汗流浹背怜姿。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留顶吮,地道東北人社牲。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像悴了,于是被迫代替她去往敵國和親搏恤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,328評(píng)論 25 707
  • Q&A 1. 庫和框架的區(qū)別湃交? 庫(library):將代碼集合成一個(gè)產(chǎn)品熟空,供開發(fā)者調(diào)用,面向?qū)ο蟮拇a組織而成的...
    進(jìn)擊的阿群閱讀 237評(píng)論 0 0
  • 問答 說說庫和框架的區(qū)別搞莺? 庫為 Library ( 簡寫 Lib )息罗,框架為 Framework。 庫是將代碼集...
    coolheadedY閱讀 221評(píng)論 0 1
  • 1.說說庫和框架的區(qū)別才沧? 什么是庫 庫的英語為 Library ( 簡寫 Lib ) 庫是將代碼集合成的一個(gè)產(chǎn)品迈喉,...
    Sheldon_Yee閱讀 260評(píng)論 0 2
  • 每個(gè)人都有自己的荒原 小說《擺渡人》中的“荒原”是指:人死后到彼岸之間的路途。 但其實(shí)在活著的生命旅途中温圆,我們又何...
    大胡子逸舟閱讀 550評(píng)論 0 3