JQuery基本使用一

1.類似下面的菜單欄绽乔，用JQuery實現(xiàn)

Paste_Image.png

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

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

菜單選擇縮略圖：

Paste_Image.png

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

添加節(jié)點：

Paste_Image.png

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

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

    var $wrap=$('.wrap'),
        $add=$('.add');
    $wrap.on('mouseenter','div' , function(){
            $(this).addClass('backgroundcolor');
            $(this).find('.button').css('display','block'); 
        })
    $wrap.on('mouseleave','div' , function(){       
            $(this).removeClass('backgroundcolor');
            $(this).find('.button').css('display','none'); 
        })
    $add.on('click', function(){
        $.each(products, function(i, prod){
            var addhtml=addnode(prod);
            $wrap.append(addhtml);
        })
    })
</script>

最后編輯于：2017.12.05 01:45:01

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市欣喧，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌梯找，老刑警劉巖唆阿，帶你破解...
沈念sama閱讀 211,743評論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異锈锤，居然都是意外死亡驯鳖，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,296評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門久免，熙熙樓的掌柜王于貴愁眉苦臉地迎上來浅辙，“玉大人，你說我怎么就攤上這事阎姥〖怯撸” “怎么了？”我有些...
開封第一講書人閱讀 157,285評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵呼巴，是天一觀的道長泽腮。經(jīng)常有香客問我御蒲，道長，這世上最難降的妖魔是什么盛正？我笑而不...
開封第一講書人閱讀 56,485評論 1贊 283
?港島之戀（遺憾婚禮）
正文為了忘掉前任删咱，我火速辦了婚禮，結(jié)果婚禮上豪筝，老公的妹妹穿的比我還像新娘痰滋。我一直安慰自己，他們只是感情好续崖，可當(dāng)我...
茶點故事閱讀 65,581評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布敲街。她就那樣靜靜地躺著，像睡著了一般严望。火紅的嫁衣襯著肌膚如雪多艇。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,821評論 1贊 290
城市分裂傳說
那天像吻，我揣著相機與錄音峻黍，去河邊找鬼。笑死拨匆，一個胖子當(dāng)著我的面吹牛姆涩，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播惭每，決...
沈念sama閱讀 38,960評論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼骨饿，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了台腥？” 一聲冷哼從身側(cè)響起宏赘，我...
開封第一講書人閱讀 37,719評論 0贊 266
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎黎侈，沒想到半個月后察署，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,186評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡蜓竹，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,516評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年箕母，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俱济。...
茶點故事閱讀 38,650評論 1贊 340
活死人
序言：一個原本活蹦亂跳的男人離奇死亡嘶是，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出蛛碌，到底是詐尸還是另有隱情聂喇，我是刑警寧澤，帶...
沈念sama閱讀 34,329評論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站希太，受9級特大地震影響克饶，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜誊辉，卻給世界環(huán)境...
茶點故事閱讀 39,936評論 3贊 313
男人毒藥：我在死后第九天來索命
文/蒙蒙一矾湃、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧堕澄，春花似錦邀跃、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,757評論 0贊 21
一樁弒父案拍屑，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至坑傅，卻和暖如春僵驰，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背唁毒。一陣腳步聲響...
開封第一講書人閱讀 31,991評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工蒜茴，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人浆西。一個月前我還...
沈念sama閱讀 46,370評論 2贊 360
代替公主和親
正文我出身青樓矮男，卻偏偏與公主長得像，于是被迫代替她去往敵國和親室谚。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,527評論 2贊 349

JQuery基本使用一

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