JQ第一篇

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <title></title>

    <script type ="text/javascript">

        console.log($());//输出jq对象

        function gel(id) { return document.getElementById(id)}

        window.onload = function () {

            //为按钮的点击事件绑定一个匿名方法

            //gel("btnChange").onclick = function () {

            //    //1.dom属性之一：字符串类型属性

            //    //gel("divMsg").name

            //    //2.dom属性之二：函数类型属性-只能设置方法给它，如果没有设置默认为null

            //    gel("divMsg").onclick = function () { var a = 0; }

            //    //3.dom属性之三：样式属性，通过样式属性可以调用元素的各种样式项

            //    alert(gel("divMsg").style);

            //}

            gel("btnChange").onclick=function(){

                //点击创建文本框

                var txt = document.createElement("input");

                txt.type = "text";

                //失去焦点

                txt.onblur = function () {//方法里的this：调用的时候，谁点这个方法，方法里的this就是谁

                    var txtValue = this.value;

                    //创建正则表达式

                    var rex = new RegExp(/\d+/);//表示一个或多个

                    if (!rex.test(txtValue))

                    {

                        alert("必须输入数字");

                        this.select();

                    }

                }

                gel("divMsg").appendChild(txt);

            }

        }

    </script>

    <style type ="text/css">

        span {

         border:1px solid #000;

         display:block;/**按块级元素显示*/

        }

    </style>

</head>

<body>

    <!--块级元素:占满一行-->

     <div id="divMsg"></div>

    <!---行级元素；根据内容占用大小---->

    <span ></span>

    <input type ="button"id="btnChange" value ="按钮" />

</body>

</html>
相关文章
