中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery特性效果與鏈式調用

發布時間:2020-06-27 08:43:08 來源:網絡 閱讀:217 作者:bigbeatwu 欄目:web開發

1.顯示效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>特殊效果</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){
    $('#btn').click(function(){
        /*fadeOut(時間,函數)*/
        /*$('.div1').fadeOut(1000);*/

        /*fadeToggle淡出淡入*/
        /*$('.div1').fadeToggle(1000);*/

        /*toggle()切換元素可視狀態*/
        /*$('.div1').toggle(1000);*/

        /*hide()隱藏*/
        /*$('.div1').hide(1000);*/

        /*show()顯示元素*/
        /*$('.div1').show(1000);*/

        /*slideDown()向下展開*/
        /*$('.div1').slideDown(1000);*/

        /*slideUp()向上卷起*/
        /*$('.div1').slideUp(1000);*/

        /*slideToggle()向下向上反復*/
        $('.div1').slideToggle(1000);
    })
})
</script>

<style type="text/css">

.div1{
    width: 300px;
    height: 300px;
    background-color: antiquewhite;
}
</style>

</head>

<body>

<input type="button" value="效果" id="btn">
<div class="div1"></div>

</body>
</html>

jQuery特性效果與鏈式調用

2.鏈式調用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>層級菜單</title>
<script type="text/javascript" src="../jQuery庫/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

$(function(){

    $('.level1').click(function(){
        /*點擊a,next()就是ul,stop()修正反復點擊,向上向下伸展,父級li,siblings()其他同級li,ul子元素,升起*/
        $(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
    })
})
</script>

<style type="text/css">

.menu{
    width: 100px;
    background-color: aqua;
    list-style: none;
    padding: 0;
    margin: 50px auto 0;

}
.menu li{
    border-bottom: 1px solid #fff;

}
.menu li a{
    text-decoration: none;
    color: #8820AF;

}
.menu li ul{
    background-color: #DDD4D5;
    list-style: none;
    padding: 0;
    text-align: center;
}
.menu li ul li:hover{
    background-color: antiquewhite;
}
</style>

</head>

<body>

<ul class="menu">
    <li>
        <a href="#" class="level1">勇士</a>
        <ul class="first">
            <li><a href="">杜蘭特</a></li>
            <li><a href="">庫里</a></li>
            <li><a href="">湯普森</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">火箭</a>
        <ul>
            <li><a href="">哈登</a></li>
            <li><a href="">保羅</a></li>
            <li><a href="">餅皇</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="level1">湖人</a>
        <ul>
            <li><a href="">詹姆斯</a></li>
            <li><a href="">球哥</a></li>
            <li><a href="">鶯歌</a></li>
        </ul>
    </li>
</ul>

</body>
</html>

jQuery特性效果與鏈式調用

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

京山县| 台南市| 平顶山市| 双牌县| 长海县| 三门县| 彰武县| 隆子县| 九江市| 彭水| 宝坻区| 治县。| 浮山县| 韶关市| 三江| 宁都县| 太原市| 宝坻区| 巨野县| 铜鼓县| 林芝县| 平凉市| 静乐县| 永福县| 元朗区| 杭锦后旗| 巍山| 茂名市| 诏安县| 积石山| 江华| 湄潭县| 绍兴县| 兴城市| 潼南县| 长丰县| 开原市| 东兰县| 灯塔市| 乐昌市| 萨迦县|