jQuery操作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>
    <style>
        .layout {
            width: 600px;
            margin: 0 auto;
            border: 5px dotted;
            background: #fff8dc;
            padding: 20px;
        }

        #btn {
            width: 150px;
            height: 120px;
            font-size: 1.2rem;
            background-color: #fff;
            margin-bottom: 50px;
        }

        .box {
            width: 200px;
            height: 300px;
            border: 1px solid;
        }

        .scroll {
            position: fixed;
            width: 300px;
            left: 50%;
            top: 30%;
        }

        #user {
            width: 200px;
            height: 30px;
            font-size: 1.5rem;
            border: 2px solid #aaa;
        }

        .city {
            width: 100px;
            height: 50px;
            text-align: center;
            font-size: 1.2rem;
            border: 1px solid #aaa;
            border-radius: 3px;
        }

        #val {
            color: #a00;
            font-size: 1.1em;
        }
    </style>
</head>

<body>
    <section class="layout">
        <h3>當(dāng)點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色</h3>
        <button id="btn">點我</button>

        <h4 class="scroll">當(dāng)窗口滾動時，獲取垂直滾動距離: <span>0</span>px</h4>

        <h3>當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色，移出鼠標(biāo)背景色變?yōu)榘咨?lt;/h3>
        <div class="box"></div>

        <h3>當(dāng)鼠標(biāo)激活 input 輸入框時讓輸入框邊框變?yōu)樗{(lán)色，當(dāng)輸入框內(nèi)容改變時
           把輸入框里的文字小寫變?yōu)榇髮懀?dāng)輸入框失去焦點時去掉邊框藍(lán)色，
           控制臺展示輸入框里的文字</h3>
        <input id="user" type="text" placeholder="輸入">

        <h3>當(dāng)選擇 select 后，獲取用戶選擇的內(nèi)容:<span id="val"></span></h3>
        <select class="city" name="city">
            <option value="北京" selected>北京</option>
            <option value="上海">上海</option>
            <option value="廣州">廣州</option>
            <option value="深圳">深圳</option>
            <option value="寧波">寧波</option>
            <option value="杭州">杭州</option>
        </select>
    </section>


    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var $btn = $("#btn")
        var $div = $(".box")
        var $user = $("#user")
        var $city = $(".city")

        $btn.on("click", function() {
            $btn.css("background", "#f00")
            setTimeout(function() {
                $btn.css("background", "#00f")
            }, 600)
        })

        $(window).on("scroll", function() {
            var scrollTop = $(window).scrollTop()
            $(".scroll span").text(parseInt(scrollTop))
        })

        $div.on("mouseenter", function() {
            $(this).css("background", "#f00")
        })

        $div.on("mouseleave", function() {
            $(this).css("background", "#fff")
        })

        $user.on("focusin", function() {
            $(this).css("borderColor", "#00f")
        })

        $user.on("focusout", function() {
            $(this).css("borderColor", "#aaa")
            console.log($(this).val())
        })

        $user.on("keypress", function() {
            var val = $(this).val()
            $(this).val(val.toUpperCase())
        })

        $("#val").text($city.val())
        $city.on("change", function() {
            $("#val").text($city.val())
        })
    </script>

</body>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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