目录
1.JS自定义对象
一.Object形式的自定义对象
对象的定义:
var 变量名 = new Object(); //对象实例（空对象）
变量名 . 属性名 = 值； //定义一个属性
变量名 . 函数名 = function(){} //定义一个函数
对象的访问:
变量名 . 属性 / 函数名();
//对象的定义
var obj = new Object();
obj.name = " 李华 ";
obj.fun = function(){
alert("姓名："+ this.name);
}
//对象的访问
obj.fun();二.{}形式的自定义对象
对象的定义:
var 变量名 = { //空对象
属性名 : 值, //定义一个属性
属性名 : 值 //两个属性之间有逗号，最后一个属性后无逗号
函数名 : function(){} //定义一个函数
};
对象的访问:
变量名 . 属性 / 函数名();
//对象的定义
var obj = {
name : " 李华 ";
fun : function(){
alert("姓名：" + this.name);
}
};
//对象的访问
alert(obj.name);2.JS中的事件
1.事件的注册
静态注册事件:通过html标签的事件属性直接赋予事件响应后的代码；
动态注册事件:先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码
动态注册基本步骤:
1.获取标签对象
2.标签对象.事件名 = function(){}
2.onload事件
onload事件是浏览器解析完页面之后就会自动触发的事件
静态注册：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadFun(){
alert('静态注册onload事件')；
}
</script>
</head>
<body onload="onloadFun();">
</body>动态注册：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function(){
alert('动态注册onload事件');
}
</script>
</head>
<body>
</body>3.onclick事件
onclick 单击事件是常用于按钮的点击响应操作的事件
静态注册和动态注册：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/* 静态注册 */
function onclickFun(){
alert('静态注册onclick事件');
}
/* 动态注册 */
window.onload = function(){
var btnObj=document.getElementById("btn01");//document是JS提供的一个对象(文档)
btnObj.onclick = function(){
alert('动态注册onclick事件');
}
}
</script> //getElementById通过id属性获取标签对象
</head>
<body>
<button onclick="onclickFun();">按键1</button>
<button id="btn01">按键2</button>
</body>4.onblur事件
onblur 失去焦点事件是常用于输入框失去焦点后验证其输入内容是否合法的事件
静态注册和动态注册：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/* 静态注册 */
function onblurFun(){
console.log('静态注册onblur事件');
} /*console是控制台对象，是JS提供，专门用来向浏
览器的控制器打印输出，用于测试使用*/
//log()是打印的方法
/* 动态注册 */
window.onload = function(){
var passwordObj=document.getElementById("password");
passwordObj.onblur = function(){
console.log('动态注册onblur事件');
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text"><br/>
</body>5.onchange事件
onchange 内容发生改变事件是常用于下拉列表和输入框内容发生改变后操作的事件
静态注册和动态注册：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/* 静态注册 */
function onchangeFun(){
alert('使用语言改变');
}
/* 动态注册 */
window.onload = function(){
var selObj=document.getElementById("sel01");
selObj.onchange = function(){
alert('学习的外语发生改变');
}
}
</script>
</head>
<body>
请选择你使用的编译语言：
<select onchange="onchangeFun();">
<option>--C++--</option>
<option>--Java--</option>
<option>--python--</option>
</select>
请选择你学习的外语：
<select id="sel01">
<option>--英语--</option>
<option>--法语--</option>
<option>--日语--</option>
</body>6.onsubmit事件
onsubmit 表单提交事件是常用于表单提交前，验证所有表单项是否合法的事件
静态注册和动态注册：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/* 静态注册 */
function onsubmitFun(){
alert('静态注册表单提交事件---发现不合法');
return false;
}
/* 动态注册 */
window.onload = function(){
var formObj=document.getElementById("form01");
formObj.onsubmit = function(){
alert('动态注册表单提交事件---发现不合法');
return false;
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>3.DOM模型
DOM全称是Document Object Model 文档对象模型
作用：将文档中的标签、属性、文本转换成为对象来管理
对Document 对象的理解
1.Document 管理了所有的HTML文档内容
2.Document是一种树结构的文档，有层级关系
3.将所有的标签都对象化
4.通过Document 可以访问所有的标签对象
class Dom{
private String id; //id属性
private String tagName; //表示标签名
private Dom parentNode; //父结点
private List<Dom>children; //子结点
private String innerHTML; //起始标签和结束标签中间的内容
}4.Document对象中的查询方法介绍
document . getElementById(elementId)
通过标签的id属性查找标签dom对象，elementId是标签的id属性值
/* 例 */
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun(){
var useridObj = document.getElementById("userid");
var useridText = useridObj.value; //通过Id查找写入的用户名判断是否合法
var patt = /^\w{5,12}$/; //value的值随用户名的输入而改变
if(patt.test(useridText)){
alert("合法！");
}else{
alert("不合法！");
}
}
</script>
</head>
<body>
用户名：<input type="text" id="userid" value="lmy"/>
<button onclick="onclickFun()">较验</button>
</body>document . getElementsByName(elementName)
通过标签的name属性查找标签dom对象，elementName是标签的name属性值
/* 例 */
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkAll(){
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
hobbies[i].checked = true; //checked表示复选框的选中状态true或false
}
}
function checkNo(){
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
hobbies[i].checked = false;
}
}
function checkReverse(){
var hobbies = document.getElementsByName("hobby");
for(var i=0;i<hobbies.length;i++){
if(hobbies[i].checked){
hobbies[i].checked = false;
}else{
hobbies[i].checked = true;
}
/* 或 */
/* hobbies[i].checked = !hobbies[i].checked */
}
}
</script>
</head>
<body>
兴趣爱好：
<input type = "checkbox" name="hobby" value="cpp">C++
<input type = "checkbox" name="hobby" value="java">Java
<input type = "checkbox" name="hobby" value="js">JavaScript
</br>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>document . getElementsByTagName(tagname)
通过标签名查找标签dom对象，tagname是标签名
/* 例 */
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function checkAll(){
var inputs = document.getElementsByTagName("input")
for(var i=0;i<inputs.length;i++){
inputs[i].checked = true;
}
</script>
</head>
<body>
兴趣爱好：
<input type = "checkbox" value="cpp">C++
<input type = "checkbox" value="java">Java
<input type = "checkbox" value="js">JavaScript
</br>
<button onclick="checkAll()">全选</button>
</body>注意事项：
1.使用优先级：Id>Name>TagName
2.以上三个方法必须在页面加载完成之后执行，才能查询到标签对象
5.正则表达式
RegExp是正则表达式的缩写
语法
var patt = new RegExp(pattern,modifiers);
或者
var patt = /pattern/modifiers;
//表示要求字符串中，是否包含字母e
var patt = new RegExp("e"); /* 或 */ var patt =/e/;
var str = "abcd";
alert( patt.test(str) );
//若str中包含“e”，则返回true，否则返回false
//表示要求字符串中，是否包含字母a或b或c
var patt = /[abc]/;
//表示要求字符串中，是否包含字母abc之外的字符
var patt = /[^abc]/;
//表示要求字符串中，是否包含小写字母
var patt = /[a-z]/;
//表示要求字符串中，是否包含大写字母
var patt = /[A-Z]/;
//表示要求字符串中，是否包含字母
var patt = /[A-z]/;
//表示要求字符串中，是否包含任意数字
var patt = /[0-9]/;
//表示要求字符串中，是否包含给定集合内的任何字符
var patt = /[adgk]/;
//表示要求字符串中，是否包含给定集合外的任何字符
var patt = /[^adgk]/;
//表示要求字符串中，是否包含任何指定的选项
var patt = /(red|blue|green)/;元字符
//表示要求字符串中，是否包含字母、数字、下划线
var patt = /\w/;//w小写
//表示要求字符串中，是否包含字母、数字、下划线之外的字符
var patt = /\W/;//W大写
//表示要求字符串中，是否包含数字
var patt = /\d/;
//表示要求字符串中，是否包含数字之外的字符
var patt = /\D/;
//表示要求字符串中，是否包含空白字符
var patt = /\s/;
//表示要求字符串中，是否包含空白字符之外的字符
var patt = /\S/;
//表示要求字符串中，是否包含NUL
var patt = /\0/;
//表示要求字符串中，是否包含换行符
var patt = /\n/;
//表示要求字符串中，是否包含换页符
var patt = /\f/;
//表示要求字符串中，是否包含回车符
var patt = /\r/;
//表示要求字符串中，是否包含制表符
var patt = /\t/;
//表示要求字符串中，是否包含垂直制表符
var patt = /\v/;量词
//表示要求字符串中，是否至少包含一个a
var patt = /a+/;
//表示要求字符串中，是否不包含a或包含多个a
var patt = /a*/;
//表示要求字符串中，是否不包含a或包含一个a
var patt = /a?/;
//表示要求字符串中，是否包含X个连续的a（可连续多个）
var patt = /a{X}/;
//表示要求字符串中，是否至少包含X个连续的a，至多包含Y个连续的a（a仍至少X个，无最高上限）
var patt = /a{X,Y}/;
//表示要求字符串中，是否包含至少X个连续的a
var patt = /a{X,}/;
//表示要求字符串中，是否以a结尾
var patt = /a$/;
//表示要求字符串中，是否以a打头
var patt = /^a/;
//表示要求字符串中，从头到尾必须完全匹配（连续的a的个数在X到Y之间）
var patt = /^a{X,Y}$/;
6.常见的较验提示方式
第一种
/* 例 */
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun(){
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
var patt = /^\w{5,12}$/;
//innerHTML 表示起始标签和结束标签中的内容，可读，可写(赋值)
var usernameSpanObj = document.getElementById("usernameSpan");
usernameSpanObj.innerHTML = "请输入用户名"
if(patt.test(usernameText)){
usernameSpanObj.innerHTML = "用户名合法!";
}else{
usernameSpanObj.innerHTML = "用户名不合法!";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="userid" value="lmy"/>
<span id="usernameSpan" style="color:red;"></span>
<button onclick="onclickFun()">较验</button>
</body>第二种
/* 例 */
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun(){
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
var patt = /^\w{5,12}$/;
//innerHTML 表示起始标签和结束标签中的内容，可读，可写(赋值)
var usernameSpanObj = document.getElementById("usernameSpan");
usernameSpanObj.innerHTML = "请输入用户名"
if(patt.test(usernameText)){
usernameSpanObj.innerHTML = "<img src=\"图片1.png\" width=\"18\" height=\"18\">";
}else{
usernameSpanObj.innerHTML = "<img src=\"图片2.png\" width=\"18\" height=\"18\">";
}
}
</script>
</head>
<body>
用户名：<input type="text" id="userid" value="lmy"/>
<span id="usernameSpan" style="color:red;"></span>
<button onclick="onclickFun()">较验</button>
</body>7.节点的常用属性和方法
节点就是标签对象
方法：
getElementsByTagName()
获取当前节点的指定标签名孩子节点
appendChild(oChildNode)
可以添加一个子节点，oChildNode是要添加的孩子节点
属性：
childNodes
获取当前节点的所有子节点
firstChild
获取当前节点的第一子节点
lastChild
获取当前节点的最后一个子节点
parentNode
获取当前节点的父节点
nextSibling
获取当前节点的下一个节点
previousSibling
获取当前节点的上一个节点
className
获取或设置标签的class属性值
innerHTML
获取或设置起始标签和结束标签中的内容
innerText
获取或设置起始标签和结束标签中的文本
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
