码迷,mamicode.com
首页 > Web开发 > 详细

简单的jQuery代码

时间:2017-02-20 21:25:34      阅读:269      评论:0      收藏:0      [点我收藏+]

标签:utf-8   document   用户名   title   omd   charset   cli   har   htm   

简单的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>

  

简单的jQuery代码

标签:utf-8   document   用户名   title   omd   charset   cli   har   htm   

原文地址:http://www.cnblogs.com/john568300/p/6420939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!