當(dāng)前位置：首頁(yè) → 文章首頁(yè) IT學(xué)院 IT技術(shù)

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

作者：  來(lái)源：  發(fā)布時(shí)間：2012-1-30 11:17:37  點(diǎn)擊：
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>

文章評(píng)論

軟件按字母排列: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z