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