简单的jQuery代码

简单的jQuery代码

用户名: 密 码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简单的jQuery代码</title>
    <!--引入jQuery脚本-->
    <script src="scripts/jquery-3.1.1.js" type="text/javascript "></script>

    <script type="text/javascript">
        /*可以写JS jQuery代码*/
        //window.onload=function(){alert("今天风好大");};//JS写法
        //等价的jQuery写法
        //1.
        /* jQuery(document).ready(function(){
         alert("今天风好大");
         });
         //2.
         $(document).ready(function(){
         alert("今天风好大");
         });*/
        //3.
        $(function(){
            alert("风真的好大啊");
            document.getElementById("id1").onclick=function(){
                //获取用户名  密码里面的value
                //js写法
                var name = document.getElementById("name");
                var password = document.getElementById("password");
                alert("name:"+name.value+"\n"+"password"+password.value);
                //jQuery写法 等价于JS写法
                alert("name:"+$("#name").val());
                alert("password:"+$("#password").val());
                //$("#name"):获取的是jQuery对象
                //document.getElementById("name"):DOM中的对象
                var $name =$("#name");
                var name = $name[0];
                alert(name.value);

                //DOMduixiang =>jQuery对象
                var password = document.getElementById("password");
                //可以理解为$()就是jQuery对象的构造函数
                var $password = $(password);
                alert($password.val);

            }
        });

    </script>


</head>
<body>
用户名:<input id="name" type="text">
密 码:<input id="password" type="password">
<input id="id1" type="button" value="提交">
</body>
</html>

  

posted @ 2017-02-20 19:03  john。  阅读(386)  评论(0编辑  收藏  举报