文本框获得失去焦点——js和jquery方法的对比

2012/1/30 11:17:37 出处：本站人气：139次字号：小中大

骑自行车的正确

在校大学生该如

微信朋友圈怎么

每日一囧

Js方法
<head>
    <script type="text/javascript">
        function Doit() {
            // 获得一个input的数组,需要遍历
            var inputs = document.getElementsByTagName_r("input");
              for (var i = 0; i < inputs.length; i++) {

                // 如果是文本控件
                if (inputs[i].type == "text") {
                    // 前面有on——
                    inputs[i].onfocus = function () {
                        // 通过this直接获取触发的元素
                        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前面没有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>

热门评论

文章推荐

相关资讯

本类常用软件

文本框获得失去焦点——js和jquery方法的对比