文本框獲得失去焦點(diǎn)——js和jquery方法的對(duì)比

2012/1/30 11:17:37 出處：本站人氣：139次字號(hào)：小中大

騎自行車(chē)的正確

在校大學(xué)生該如

微信朋友圈怎么

每日一囧

Js方法
<head>
    <script type="text/javascript">
        function Doit() {
            // 獲得一個(gè)input的數(shù)組,需要遍歷
            var inputs = document.getElementsByTagName_r("input");
              for (var i = 0; i < inputs.length; i++) {

                // 如果是文本控件
                if (inputs[i].type == "text") {
                    // 前面有on——
                    inputs[i].onfocus = function () {
                        // 通過(guò)this直接獲取觸發(fā)的元素
                        this.style.backgroundColor = "yellow";
                    };
                    inputs[i].onblur = function () {
                        this.style.backgroundColor = "white";
                    };
                }

            }
        }
    </script>
</head>
<body onload="Doit()">
    <input id="Text1" type="text" />
    <input id="Text2" type="text" />
    <input id="Text3" type="text" />
    <input id="Button1" type="button" value="button" />
</body>
</html>

Jquery方法
<head>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // 不需要遍歷
            $('input[type=text]').click(function () {
                // this前面要加dollar符
                $(this).css("backgroundColor","yellow");
            }).blur(function () { $(this).css("backgroundColor","white");});
            // blur前面沒(méi)有on
        });
    </script>
</head>
<body>
    <input id="Text1" type="text" />
    <input id="Text2" type="text" />
    <input id="Text3" type="text" />
    <input id="Button1" type="button" value="button" />
</body>
</html>

文章推薦

相關(guān)資訊

本類(lèi)常用軟件

文本框獲得失去焦點(diǎn)——js和jquery方法的對(duì)比