今日主要內容
- 常用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>
