<!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>
JQ第一篇
时间： 2024-11-05 04:53:10