JavaScript操作瀏覽器
瀏覽器物件
window
window不僅充當全域性變數,還表示瀏覽器視窗
window.innerWidth
和window.innerHeight
表示瀏覽器視窗內部的寬度和高度
nevigator
nevigator物件表示瀏覽器的資訊,最常用的屬性包括:
- navigator.appName:瀏覽器名稱;
- navigator.appVersion:瀏覽器版本;
- navigator.language:瀏覽器設定的語言;
- navigator.platform:作業系統型別;
- navigator.userAgent:瀏覽器設定的
User-Agent
如
appName = Netscape
appVersion = 5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36
language = zh-CN
platform = Linux x86_64
userAgent = Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36
screen
screen物件表示螢幕的資訊,常用的屬性有:
- screen.width:螢幕寬度,以畫素為單位;
- screen.height:螢幕高度,以畫素為單位;
- screen.colorDepth:返回顏色位數,如8、16、24。
location
location物件表示當前頁面的URL資訊。
常用屬性:
location.href;//http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
location.assign();//載入一個新頁面
location.reload();//重新載入頁面
document
document物件表示當前頁面的HTML檔案的DOM樹,
getElementById()
:根據id獲取一個節點
getElementsByTagName()
:根據tagname獲取一組節點
getElementByClassName()
:根據classname獲取一組節點(id是唯一的,tagname和classname不唯一)
document.cookie
:獲取瀏覽器的cookie資訊
document.title
:獲取瀏覽器視窗的標題
node.children
、node.firstElementChild
、node.lastElementChild
:獲取所有孩子節點、第一個孩子節點、最後一個孩子節點
更新DOM
獲取DOM內容可以使用innerHTML
,innerText
,textContent
區別:
innerHTML
:可以修改節點內的HTML元素,如
// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設定文字為abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 設定HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的內部結構已修改
在節點內添加了標籤
innerText
:不可以修改節點內的HTML元素,且不返回這個元素的資訊
textContent
:不可以修改節點內的HTML元素,但可以返回所有資訊
插入DOM
一般使用creatElement()建立一個新的節點,再使用appendChile()插入
list = document.getElementById('list');
//建立一個新的節點
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
//還可以設定屬性
//haskell.setAttrtbute(key,value);
list.appendChild(haskell);
在某個位置插入:
insertBefore(node,ref)
將node插入ref之前
刪除DOM
刪除DOM有兩個方法
1、先找到這個節點,再找出其父節點,再呼叫removeChild()
// 拿到待刪除節點:
var self = document.getElementById('to-be-removed');
// 拿到父節點:
var parent = self.parentElement;
// 刪除:
var removed = parent.removeChild(self);
2、直接找到父節點,刪除其子節點
var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 瀏覽器報錯
報錯的原因是因為這個過程是動態的,刪除了0號元素,1號元素就自動補位成為新的0號元素
操作表單
表單型別
- 文字框,對應的
<input type="text">
,用於輸入文字; - 口令框,對應的
<input type="password">
,用於輸入口令; - 單選框,對應的
<input type="radio">
,用於選擇一項; - 複選框,對應的
<input type="checkbox">
,用於選擇多項; - 下拉框,對應的
<select>
,用於選擇一項; - 隱藏文字,對應的
<input type="hidden">
,使用者不可見,但表單提交時會把隱藏文字傳送到伺服器。
獲取值
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '使用者輸入的值'
對於單選框和複選框,應該使用checked:
// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false
提交表單
方法一:為button繫結一個onClick事件
<!-- HTML -->
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 提交form:
form.submit();
}
</script>
方法二:為form繫結一個onsubmit事件:
<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 繼續下一步:
return true;
}
</script>
注意將button的type設定為submit,那麼點選時預設觸發submit事件,為form繫結onsubmit事件,有利於在提交前做一些驗證工作,當返回false時,則不提交form。
關於密碼的提交方法:一般會將密碼用MD5方法加密後再提交,注意要配合hidden標籤使用:
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="input-password">
<input type="hidden" id="md5-password" name="password">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var input_pwd = document.getElementById('input-password');
var md5_pwd = document.getElementById('md5-password');
// 把使用者輸入的明文變為MD5:
md5_pwd.value = toMD5(input_pwd.value);
// 繼續下一步:
return true;
}
</script>
另外,form只會提交含有name屬性的標籤,因此密碼不會提交,只提交hidden標籤,避免了密碼的暴露。
操作檔案
在HTML表單中,可以上傳檔案的唯一控制元件就是<input type="file">
注意:當一個表單包含<input type="file">
時,表單的enctype
必須指定為multipart/form-data
,method
必須指定為post
,瀏覽器才能正確編碼並以multipart/form-data
格式傳送表單的資料。
使用方法:
var
fileInput = document.getElementById('test-image-file'),//file按鈕
info = document.getElementById('test-file-info'),//顯示資訊
preview = document.getElementById('test-image-preview');//顯示影象內容
// 監聽change事件:
fileInput.addEventListener('change', function () {
// 清除背景圖片:
preview.style.backgroundImage = '';
// 檢查檔案是否選擇:
// value即file檔案路徑
if (!fileInput.value) {
info.innerHTML = '沒有選擇檔案';
return;
}
// 獲取File引用:
var file = fileInput.files[0];
// 獲取File資訊:
info.innerHTML = '檔案: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的圖片檔案!');
return;
}
// 讀取檔案:
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式讀取檔案:
reader.readAsDataURL(file);
});
- value:獲取檔案路徑;
- files[0]:獲取檔案的引用;
- name:獲取檔名;
- size:獲取檔案大小;
- type:獲取檔案型別;
- lastModifiedDate:獲取檔案最後一次修改的日期;
- FileReader:用於讀取檔案;
- readAsDataURL:以DataURL的格式讀取檔案,將讀取到的內容用url()輸出即可。
另外,onload是回撥函式,當使用readAsDataURL讀取完檔案後,自動呼叫回撥函式對讀取到的檔案進行處理。
在字串'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...'
中,base64,
後的字串是用base64方式編碼後的資料,在伺服器端可以用反編碼獲取檔案的二進位制資訊。
AJAX(Asynchronous JavaScript and XML)
AJAX主要用於在js中使用非同步請求,主要依靠XMLHttpRequest物件。
用法如下:
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest物件
request.onreadystatechange = function () { // 狀態發生變化時,函式被回撥
if (request.readyState === 4) { // 成功完成
// 判斷響應結果:
if (request.status === 200) {
// 成功,通過responseText拿到響應的文字:
return success(request.responseText);
} else {
// 失敗,根據響應碼判斷失敗原因:
return fail(request.status);
}
} else {
// HTTP請求還在繼續...
}
}
// 傳送請求:
request.open('GET', 'http://www.baidu.com');
request.send();
alert('請求已傳送,請等待響應...');
使用非同步就一定要用到回撥函式,這裡使用了onreadystatechange()回撥函式
request.readystate表示是否發出了請求,4為成功傳送,否則傳送請求失敗;
request.status表示伺服器的響應結果,200表示成功相應,否則響應失敗;
request.open()表示定義請求,第一個引數為GET或者POST,第二個引數為URL;
request.send()表示真正傳送請求,GET不需要引數,POST需要輸入FormData物件。
Promise
大致是給兩個函式,符合某個條件時執行函式1,不符合某個條件時執行函式2
new Promise(function (success, fail) {
if(...){
succes();
}
else{
fail();
}
}).then(func1).catch(func2);
//這裡func1賦給success,func2賦給fail
另外,還可以將多個Promise物件序列執行:
job1.then(job2).then(job3).catch(handleError);
也可以將多個Promist並行執行:
Promise.all([p1, p2]).then(success).catch(fail);
或
Promise.race([p1, p2]).then(success).catch(fail);
兩者的區別是:
Promise.all()是p1,p2都會執行完,而Promise.race()是若p1執行較快,首先使用success函式,則返回p1的執行結果,不再返回p2的執行結果,也就是說只返回執行最快的p的執行結果,其他丟棄。
Canvas
canvas = document.getElementById('test-shape-canvas');//獲取畫布
ctx = canvas.getContext('2d');//繪製2D影象
//ctx = canvas.getContext('webgl');繪製3D圖形
繪製圖形
ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小為200x200的矩形,擦除的意思是把該區域變為透明
ctx.fillStyle = '#dddddd'; // 設定顏色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小為130x130的矩形塗色
// 利用Path繪製複雜路徑:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);
繪製文字
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('帶陰影的文字', 20, 40);