本文详细讲解了JavaScript中对象的原始值比较、字符串颜色标记，以及四种创建自定义对象的方式。此外，介绍了事件分类，如单击、焦点和选项卡变化，以及正则表达式应用。还展示了表单提交的实例，包括输入验证和窗口操作技巧。
一、JavaScript字符串相关
1.js中 判断两个js对象的原始值是否相同。
//js中的valueof()比较的是两个js对象的原始值是否相同
document.write((s1.valueOf() == s2.valueOf())+"<br/>") ;2.给输出的字符串添加颜色。
//fontcolor 方法:给字符串颜色标记 ("参数英文单词或者#xxxxxx")
document.write(str.fontcolor("greenyellow")+"<br/>") ; 二、创建JS自定义对象的四种方式（第四种为重点）
方式一：类似于Java中的有参构造：
function 对象(属性名称1,属性名称2,属性名称3....){
//它的成员属性
this.成员属性1 = 属性名称1 ;
this.成员属性2 = 属性名称2 ;
this.成员属性3 = 属性名称3 ;
//追加功能
this.方法名 = function(空参/带参){
}
}
创建对象
var 对象名 = new 对象(实际参数列表);
function Person(name,age,gender){
//追加它的成员属性
this.name = name ;
this.age = age ;
this.gender = gender ;
//追加功能
this.speakEnglish = function(name){
alert("会说"+name) ;
}
}
//创建Person对象
var p = new Person("高圆圆",42,"女") ;
document.write("姓名是:"+p.name+",年龄是:"+p.age+",性别是:"+p.gender+"<br/>") ;
//调用功能
p.speakEnglish("英语") ;方式二：类似于Java中的无参构造：
1_定义对象的格式:function 对象(){}
2_创建对象 var 对象名 = new 对象() ;
3_追加属性和追加功能
对象名.属性名称 = "值"
对象名.方法名 = function(){}...
//定义对象
function Person2(){}
//创建Person2对象
var p2 = new Person2() ;
//追加属性和追加功能
p2.name = "文章" ;
p2.age = 35 ;
p2.gender = "男" ;
p2.playGame = function(gameName){
alert("会玩"+gameName) ;
}方式三：使用Object对象（代表所有对象）
直接new对象；
//直接new 对象
var p3 = new Object() ;
//追加属性和追加功能
p3.name = "张佳宁" ;
p3.age = 31 ;
p3.gender = "女" ;
p3.speakEnglish = function(name){
alert(p3.name+"会说"+name) ;
}方式四：Json数据格式：字面值方式（后期重点）
基本格式{“key”：value} 键值对格式
也可在里面定义对象属性，下图中address即为对象。
var p4 = {
"name":"小小","age":8,"gender":"女",
"address":{"shi":"西安市","xian":"临潼区","zhen":"雨金街办"},
"singing":function(name){
document.write(p4.name+"喜欢唱"+name);
}
};
document.write("姓名是:"+p4.name+",年龄是:"+p4.age+",性别是:"+p4.gender+"<br/>");
document.write("住址是:"+p4.address.shi+p4.address.xian+p4.address.zhen+"<br/>");
p4.singing("爱的太迟");三、Json的复杂类型
var 对象名 = [{}，{}，{}] 描述类似数组或者集合。
【】中括号即为定义数组；
var students =
[
{"name":"高圆圆","age":42,"gender":"女","address":"西安市"},
{"name":"王宝强","age":35,"gender":"男","address":"北京市",
"speak":function(){document.write(this.name+"会说英语");}},
{"name":"文章","age":32,"gender":"男","address":"渭南市"},
{"name":"姚笛","age":25,"gender":"女","address":"西安市"}
] ;
//json对象[索引值].key 获取对应value值
document.write(students[1].address+"<br />") ;
students[1].speak(); 第三方解析方式:jsonlib,gson,fastJson,Springmvc的jackson这些jar包
后端将List---->json
后端Map----Json
后端实体----Json {"username":"xx","password":"xxx"}
四、获取标签对象的方法。
基本概念：
DOM（Document Object Model）：基于文档对象模型编程。
标签对象(又称为节点对象)。
当html页面被浏览器解析运行的时候，浏览器中内置js引擎会将每一个标签在解析过程中封装，形成了一种树状结构！
通过获取到标签对象后，来改变标签对象一些特有属性，从而达到js某种效果；
方式一：通过查询节点关系获取标签对象
特有属性：parentNode：父节点（父标签对象） childNode：所有子节点
firstChild：第一个子节点对象 lastChild：最后一个子节点对象
nextSibling：下一个兄弟节点 previousSibing：上一个兄弟节点
方式二：
1、在标签中给定id属性值，必须唯一（推荐）。
//document.getElementById("id属性值") 获取标签对象
var username = document.getElementById("username");
2、获取类名相同的标签对象。
//docuement.getElementsByClassName("class属性值")
//第一个class属性标签对象
var username1 = document.getElementsByClassName("cl_username");
//class属性标签对象数组
var username2 = document.getElementsByClassName("cl_username")[0];3、获取name相同的标签对象。
//docuement.getElementsByName("name属性值") ;
//获取的标签对象列表
var username = document.getElementsByName("name")[0] ;4、获取标签相同的标签对象。
//docuement.getElementsByTagName("同名的标签名称") ;
//返回的标签对象列表
var username = document.getElementsByTagName("input")[0] ;五、Js中常见事件的分类。
1、单击事件分类
点击相关:
单击事件：onclick = “方法名（）”；
双击事件：ondbclick = “方法名（）”；
焦点事件:
获取焦点：onfocus = “方法名（）”；
失去焦点：onblur = “方法名（）”；
选项卡发生变化:
选项卡发生变化事件：οnchange= “方法名（）”；
select标签—>下拉菜单
option—>下拉选项
选项卡发生变化:
单击事件：onclick = “方法名（）”；
双击事件：ondbclick = “方法名（）”；
鼠标移动事件:
鼠标移入事件：onmouseover = “方法名（）”；
鼠标移出事件：onmouseout = “方法名（）”；
页面载入事件:
载入完成事件：onload = “方法名（）”；可用于加载完改变某些标签的属性
表单提交事件：
格式：提交允许事件：onsubmit = “return 方法名（）”用于判断表单是否可以提交；
方法名中返回值应为boolean类型；
<form action="server1.html" method="GET" id="box1" onsubmit="return checkAll()">2、Js中跳转窗口，输入追加判断，选项卡追加变化（如输入籍贯时）
1）跳转窗口的三种方式：
a：标签； location对象的href方法；只能在当前窗口打开
window对象的open方法（默认设置为_block）；可以设置打开窗口
<a href="label.html">跳转到其他项目的标签</a>
location.href=("server1.html");
window.open("server1.html","_self");2）输入追加判断
body：
<input type="text" id="username" class="input" onblur="checkUsername()"
placeholder="请输入用户名"><span class="span" id="span1"></span>script：
function checkUsername(){
var username = document.getElementById("username").value;
var span1 = document.getElementById("span1");
var reg = /^[a-zA-Z0-9]{4,14}$/;
if(reg.test(username)){
span1.innerHTML="用户名可用".fontcolor("green");
a = true;
}else{
span1.innerHTML="用户名错误".fontcolor("red");
a = false;
}
}3）选项卡追加变化（如输入籍贯时）
body：
籍贯:
<select id="province" onchange="testChange()">
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="江苏省">江苏省</option>
</select>
<select id="city">
<!-- <option value="城市名称">城市名称</option> -->
</select>script：
function testChange(){
var province = document.getElementById("province").value;
var city = document.getElementById("city");
city.innerHTML = "";
if(province=="陕西省"){
var citys = ["西安市","咸阳市","榆林市"];
for (var i = 0; i < citys.length; i++) {
city.innerHTML += "<option value = "+citys[i]+">"+citys[i]+"</option>";
}
}
}六、正则表达式
1、 简单的符号：
1)数量词相关的语法
x:代表任意字符
x+:表示X字符串出现一次或者多次
x*:表示X字符出现0次或者多次
x?:表示X字符出现0次或者1次
2)范围相关的语法
X{n}: 表示X字符恰好出现n次
X{n,}:表示X字符至少出现n次
X{n,m}:表示X字符至少出现n次,但是不超过m次
3)匹配字符相关的
X[a-z] :X字符可以是a-z中任何的一个小写字母字符
X[0-9] :x字符是一个数字字符
X[A-Za-z0-9_]:X字符可以是任意的大小字母均可或者数字或者_
2、正则表达式的使用流程
1.创建正则对象
2.正则表达式:自有函数 test("接收用户输入的文本框的内容字符串")匹配是否成功
正则对象名.test(字符串)； true,匹配成功,false,失败!
3.在Java语言中和在javascript中，如果需要格式完全匹配，必须加入边界匹配器。
^:以....开头 $:以...结尾
不写的话,则会在整个字符串中寻找，只要有满足条件的字符串则返回true；
var 正则表达式对象 = /^ 正则语法 $/ ;
var reg = /^[a-z]+[0-9]{3,}[a-z]+$/
var str = "adw123asda" ;
if(reg.test(str)){
alert("条件成立");
}else{
alert("条件不成立") ;
}七、练习作业（表单提交）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>08_Js的表单校验</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
width: 100%;
}
#centent {
width: 100%;
height: 100%;
min-width: 1240px;
min-height: 800px;
}
#box1 {
width: 500px;
position: fixed;
top: 20%;
left: 50%;
margin-left: -250px;
font-size: 20px;
}
.input {
width: 80%;
box-sizing: border-box;
line-height: 30px;
padding: 10px 20px 10px 20px;
font-size: 20px;
vertical-align: bottom;
}
#login {
height: 30px;
width: 100px;
font-size: 18px;
border-radius: 10px;
border-width: 0px;
}
.span {
display: inline-block;
width: 20%;
text-align: center;
font-size: 17px;
line-height: 20px;
}
</style>
</head>
<body>
<div id="centent">
<form action="server1.html" method="GET" id="box1" onsubmit="return checkAll()">
<table border="0px" cellspacing="5px" width=100%>
<tr height="50px">
<td width=30%>
用户名:
</td>
<td width=70%>
<input type="text" id="username" class="input" onblur="checkUsername()"
placeholder="请输入用户名"><span class="span" id="span1"></span>
</td>
</tr>
<tr height="50px">
<td>
密  码:
</td>
<td>
<input type="password" id="password" class="input" onblur="checkPassword()"
placeholder="请输入密码"><span class="span" id="span2"></span>
</td>
</tr>
<tr height="50px">
<td>
确认密码:
</td>
<td>
<input type="password" id="repassword" class="input" onblur="checkRepassword()"
placeholder="请确认密码"><span class="span" id="span3"></span>
</td>
</tr>
<tr height="50px">
<td>
邮  箱:
</td>
<td>
<input type="text" id="email" class="input" onblur="checkEmail()"
placeholder="请输入邮箱地址"><span class="span" id="span4"></span>
</td>
</tr>
<tr height="50px">
<td colspan="2" align="center">
<input type="submit" id="login" value="提 交">
</td>
</tr>
</table>
</form>
</div>
</body>
<script>
var a, b, c, d;
function checkUsername() {
var username = document.getElementById("username").value;
var span1 = document.getElementById("span1");
var reg = /^[a-zA-Z0-9]{4,14}$/;
if (reg.test(username)) {
span1.innerHTML = "用户名可用".fontcolor("green");
a = true;
} else {
span1.innerHTML = "用户名错误".fontcolor("red");
a = false;
}
}
function checkPassword() {
var password = document.getElementById("password").value;
var span2 = document.getElementById("span2");
var reg = /^[a-zA-Z0-9]{6,10}$/;
if (reg.test(password)) {
span2.innerHTML = "密码可用".fontcolor("green");
b = true;
} else {
span2.innerHTML = "密码格式错误".fontcolor("red");
b = false;
}
}
function checkRepassword() {
var repassword = document.getElementById("repassword").value;
var password = document.getElementById("password").value;
var span3 = document.getElementById("span3");
if (repassword == password) {
span3.innerHTML = "密码一致".fontcolor("green");
c = true;
} else {
span3.innerHTML = "密码不一致".fontcolor("red");
c = false;
}
}
function checkEmail() {
var email = document.getElementById("email").value;
var span4 = document.getElementById("span4");
var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-z]{2,3}){1,3}$/;
if (reg.test(email)) {
span4.innerHTML = "邮箱格式正确".fontcolor("green");
d = true;
} else {
span4.innerHTML = "邮箱格式错误".fontcolor("red");
d = false;
}
}
//提交之前校验
function checkAll() {
if (a && b && c && d) {
return true;
} else {
return false;
}
}
</script>
</html>
效果图
3992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
