今日主要内容
- 常用API
- JSON字符串
- JS自定义对象三种方式
- DOM事件操作类型，JS对html和css的操作
- 正则表达式前端数据验证
1、常用API
在JS中对象包含三种:
- 内置对象
String/Number/Booleam/Array/Math/Date/RegExp/Function
也就是JS中常用的API - 外置对象
window(浏览器对象)，dom(文档模型对象) - 自定义对象
自己创建的对象
1、String
构建对象: var str1 = new String("abc");
var str2 = "abc";
对象属性: str1.length;
常用方法:
charAt()
slice()
split()
fromCharCode()
...
2、Math
常用方法:
random()
floor()
ceil()
round()
...
3、Date
构建对象:
new Date()
new Date(时间戳);
new Date("yyyy-MM-dd")
new Date(年,月,日,时,分,秒,毫秒)
常用方法:
getFullYear()
getMonth()
getDate()
getHour()
getMinute()
getSecond()
getMillisSeconds()
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*JS常用API*/
//String类型
//创建对象(引用类型)
var str = new String("a,b;c,d,e,f:s!g");
//基本类型string
var str1 = "abcdef";
console.log(str,typeof str);
console.log(str1,typeof str1);
//返回当前下标位置的字符
console.log(str.charAt(2));
//截取第2个以后的字符到末尾
console.log(str.slice(2));
//截取[2,4)
console.log(str.slice(2,4));
//正则表达式切割字符串
console.log(str.split(/^,|;|:|!|$/));
//静态方法将Unicode编码转为字符
console.log(String.fromCharCode(97,98));
//Date类型
//构建对象
var date1 = new Date();
var date2 = new Date(15345435435534);
var date3 = new Date("2019-10-1");
var date4 = new Date(2018,9,8,13,14,15,300);
console.log(date1);
console.log(date2);
console.log(date3);
console.log(date4);
//获取年,月,日,时,分,秒,毫秒
console.log(date1.getFullYear());
console.log(date1.getMonth()+1);
console.log(date1.getDate());
console.log(date1.getHours());
console.log(date1.getMinutes());
console.log(date1.getSeconds());
console.log(date1.getMilliseconds());
//格式化输出日期时间
console.log(date1.toDateString());
console.log(date1.toLocaleDateString());
console.log(date1.toTimeString());
console.log(date1.toLocaleTimeString());
</script>
</body>
</html>
2、JSON
1>什么是JSON
JavaScript Object Notation
json是一种轻量级的数据交换格式
其主要作用是存储和传输数据,特别是在
服务器端和浏览器客户端之间传输数据
2>JSON语法规则
JSON由key和value键值对组成,
其中key必须是字符串,由双引号引起来
key和value之间使用冒号隔开键值对之间是有逗号隔开
大括号中保存JSON对象
-
中括号中是JSON数组
var json = {"name":"张三","age":30,"hobby":["吃","喝","玩"]};
3、JS自定义对象的三种创建方式
1>自定义对象的三种创建方式
1)new Object
对象创建: var obj = new Object();
属性: obj.属性名=属性值
方法: obj.方法名=function(){}
2)构造器函数
function Point(x,y){
//给属性赋值
this.x = x;
//指定方法
this.方法名=function(){}
}
对象创建: var obj = new Point(3,4);
3)类JSON格式的JS对象
var obj = {
属性名:属性值,
...
方法名:function(){}
};
//JSON字符串转换为JS对象
var json = "";
var jsObj = JSON.parse(json);
jsObj = eval("("+json+")");
//迭代遍历JS对象
for(k in jsObj){
//k:属性名,方法名
//jsObk[k]:属性值,方法体
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//1、直接new对象
var people = new Object();
//给对象属性赋值
people.name = "张三";
people.age = 30;
//给对象指定方法
people.eat = function(){
console.log(this.name+"在吃饭");
}
people.getAge = function(){
return this.age;
}
//获取对象属性值
console.log(people.name,people.age);
//调用对象方法
people.eat();
console.log(people.getAge());
//2、函数构造器 矩形类
function Rect(width,height){
//给属性赋值
this.width = width;
this.height = height;
//指定方法
this.getArea = function(){
return this.width*this.height;
}
}
//构建对象
var rect1 = new Rect(3,5);
var rect2 = new Rect(6,10);
console.log(rect1.getArea());
console.log(rect2.getArea());
//3、类JSON格式的JS对象(属性名不带引号)
var person = {
//属性
name:"张三",
age:30,
//方法
eat:function(){
console.log(this.name+"在吃饭");
}
};
//访问属性
console.log(person.name,person.age);
//调用方法
person.eat();
//对象遍历
for(x in person){
console.log(x+"/"+person[x]);
}
//json字符串转换成js对象
var jsonStr = '{"name":"张三","age":30,"hobby":["吃","喝","玩"]}';
console.log(jsonStr,typeof jsonStr);
//转为js对象
var jsonObj = JSON.parse(jsonStr);
jsonObj = eval("("+jsonStr+")");
console.log(jsonObj,typeof jsonObj);
</script>
</body>
</html>
4、 DOM事件操作类型
DOM:Document Object Model
文档对象模型，将整个html页面抽象成内存中一个倒置的文档树，每个html元素都是一个dom对象
DOM作用:让js可以操作页面上的html元素
事件:
给元素添加事件后，当触发特定操作时，会执行相应函数
语法:<标签 事件=‘函数’></标签>
事件类型:
onclick 鼠标单击
ondbclick 鼠标双击
onmouseenter 鼠标移入
onmouseleave 鼠标移出
onfocus 获取焦点
onblur 失去焦点
onload 页面加载
onmousedown 鼠标按钮
onmouseup 鼠标抬起
onchange 改变选项
......
5、js对html和css操作
1>获取/修改纯文本内容
获取:obj.innerText
修改:obj.innerText="文本内容"
2>获取/修改元素中内容(可包含子标签)
获取:obj.innerHTML
修改:obj.innerHTML="元素中内容"
3>获取/修改元素的css属性
获取:obj.style.css属性名
修改:obj.style.css属性名="属性值"
如果属性名中间有横杠，去掉横杠，将第二个单词首字母大写
4>获取/修改input表单的value属性
获取:obj.value
修改:obj.value="内容"
5>获取/修改元素的html属性
获取:obj.html属性名
修改:obj.html属性名=属性值
获取/修改css类名:obj.className
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--给超链接添加一个点击事件,
点击完后去执行js中定义的doclick()方法
-->
<a href="#" onclick="doclick1()">点我啊~</a>
<h1 id="h1"><i>怎样学好java</i></h1>
<!--给按钮添加一个鼠标双击事件-->
<button ondblclick="doclick2()">点我就知道了</button>
<!--给div添加鼠标移入移除事件-->
<div id="div01" style="width: 100px;height: 100px;background-color: red;"
onmouseenter="doclick3()" onmouseleave="doclick4()">
</div>
<!--给图片添加点击事件,当点击图片时随机切换-->
<img id="img01" src="img/1.jpg" onclick="change()"
width="100px" class="image"/>
<div style="width:200px;height: 200px;background-color: blue;display: block;"
id="div02">
</div>
<button
id="btn01"
onclick="doclick5()">隐藏或显示</button>
<br />
<!--
给输入框注册获取焦点事件 f1
和失去焦点事件f2
-->
<input type="text" placeholder="请输入账号"
id="txt01" onfocus = "f1()"
onblur="f2()" value="张三"
/>
<span id="msg"></span>
<script>
//点击超链接来执行的方法
function doclick1(){
alert("步步高打火机，哪里不会点哪里");
}
//鼠标双击时执行的方法
function doclick2(){
//根据id获取页面上的h1元素
var h1 = document.getElementById("h1");
//获取h1元素中纯文本内容
var txt = h1.innerText;
console.log(txt);
//获取h1元素中元素内容(含子标签)
var html = h1.innerHTML;
console.log(html);
//修改h1中元素内容
//h1.innerText = "陕西西安找蓝鸥";
h1.innerHTML = "<i style='color:red'>陕西西安找蓝鸥</i>"
}
//鼠标移入事件
function doclick3(){
//根据id获取页面上div元素
var div = document.getElementById("div01");
//获取div的css属性值
var w = div.style.width;
var h = div.style.height;
var bg = div.style.backgroundColor;
console.log(w,h,bg);
}
//鼠标移入事件
function doclick4 () {
//根据id获取页面上div元素
var div = document.getElementById("div01");
//修改元素属性值
div.style.width="300px";
div.style.height="300px";
div.style.backgroundColor="green";
div.style.borderRadius="50%";
}
var imgs=[
"http://127.0.0.1:8020/JavaScript/img/1.jpg",
"http://127.0.0.1:8020/JavaScript/img/2.jpg",
"http://127.0.0.1:8020/JavaScript/img/3.jpg",
"http://127.0.0.1:8020/JavaScript/img/4.jpg",
"http://127.0.0.1:8020/JavaScript/img/5.jpg",
"http://127.0.0.1:8020/JavaScript/img/6.jpg"
];
//点击图片随机切换
function change(){
//获取图片
var img = document.getElementById("img01");
//获取图片src属性和class属性
console.log(img.src,img.className);
//获取图片的src属性值
var index = Math.floor((Math.random()*imgs.length));
img.src=imgs[index];
}
//点击按钮时让图片隐藏或显示
function doclick5(){
//根据id找到div
var objDiv =
document.getElementById("div02");
var btn = document.getElementById("btn01");
//获取div的style属性,判断状态
var dis = objDiv.style.display;
if(dis=="block"){
//显示状态就让隐藏
objDiv.style.display = "none";
btn.innerText = "点击显示";
}else{
//隐藏状态就让显示
objDiv.style.display = "block";
btn.innerText = "点击隐藏";
}
}
//获取输入框对象
var inputObj = document.getElementById("txt01");
//输入框获取焦点时调用
function f1(){
//获取输入框中内容
var txt = inputObj.value;
console.log(txt);
//修改输入框中内容(清空)
inputObj.value = "";
}
//输入框失去焦点时调用
function f2(){
//获取填写的名称
var name = inputObj.value;
console.log("正在把你填写的名字:"+name+"发送服务器检测...");
//判断用户名是否被占用
//获取span元素
var span = document.getElementById("msg");
if(name=="翠花"){//已被占用
span.innerHTML = "<i>该账号已被占用</i>";
span.style.color = "red";
}else if(name==""){//输入为空
span.innerHTML = "<i>账号不能为空</i>";
span.style.color = "red";
}else{//可以使用的
span.innerHTML = "<b>恭喜,账号可以使用!!!</b>";
span.style.color = "green";
}
}
</script>
</body>
</html>
5、正则表达式Regex
在JS中使用RegExp对象来表示正则表达式
1>对象创建:
1)var reg = /pattern/flags;
2)var reg = new RegExp("pattern",["flags"]);
flags标识有两个
- g:设定当前匹配为全局匹配
- i:忽略大小写的匹配
pattern格式:
/^pattern/;
var reg = new RegExp("/^\d{3,6}$/");
2>主要用于表单中检测用户输入的内容是否符合规范
3>主要方法
- reg.exec(str) 检索字符串中指定值,并返回找到的值
- reg.test(str) 检索字符串中指定值,返回true或false
4>常用匹配规范:
\d 匹配任意一个数字
\w 匹配任意一个字符(字母,数字,_)
？ 有或者没有
* 任意个(0个到多个)
+ 一个到多个
. 任意字符
[0-9] 0-9中任意一个数字
[0-9a-z] 任意一个数字或者小写字母
[0-9a-zA-Z] 任意一个数字或者字母
[0-9]{6} 必须是6位纯数字
[0-9]{6,8} 最少6个,最多8个纯数字
[0-9]{6,} 最少6个,最多不限制
[0-9]{,8} 最多8个
\d+ 一个或多个数字
\d? 0个或1个数字
\d* 0个到多个数字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--onsubmit:表单提交事件-->
<form action="http://www.baidu.com"
onsubmit="return checkForm()">
账号:<input id="txtName" type="text"
onblur="checkName()"/>
<span id="nameMsg"></span>
<br /><br />
密码:<input id="txtPwd" type="password"
onblur="checkPwd()"/>
<span id="pwdMsg"></span>
<br /><br />
<input type="submit" value="注册"/>
</form>
<script>
//账号输入框失去焦点检测账号
function checkName(){
//定义正则表达式,
//验证账号是否为6到10位数字和字母的组合
// /a*b/ 非严格匹配 cdaaaabm true
// /^a*b$/ 严格匹配 aaab true
var regex = /^[0-9a-zA-Z]{6,10}$/;
//获取用户输入的账号
var name = document.getElementById("txtName").value;
//使用正则表达式匹配用户输入的名称,检测是否合法
//将匹配结果显示在span上
var span = document.getElementById("nameMsg");
if(regex.test(name)){
span.innerHTML = "<b>恭喜,账号可以使用</b>";
span.style.color = "green";
return true;
}else{
span.innerHTML = "<i>账号格式错误</i>";
span.style.color = "red";
return false;
}
}
//密码输入框失去焦点检测账号
function checkPwd(){
//定义正则表达式,
//验证密码是否为6为纯数字
var regex = /^\d{6}$/;
//获取用户输入的密码
var pwd = document.getElementById("txtPwd").value;
//使用正则表达式匹配用户输入的密码,检测是否合法
//将匹配结果显示在span上
var span = document.getElementById("pwdMsg");
if(regex.test(pwd)){
span.innerHTML = "<b>恭喜,密码可以使用</b>";
span.style.color = "green";
return true;
}else{
span.innerHTML = "<i>密码格式错误(必须是6位纯数字)</i>";
span.style.color = "red";
return false;
}
}
//检测表单是否可以提交
function checkForm(){
return checkName()&&checkPwd();
}
</script>
</body>
</html>
