第七十一篇 js進階之事件、頁面操做
目錄css
1、js選擇器
1.直接打印
頁面id名會存放到頁面的名稱空間中，在js內能夠直接訪問該名稱空間html
<body>
<div id='d' class='box'></div>
<input type='text' id='d' class='box' />
</body>
<script>
console.log(d) //會取到兩個
</script>
2.getElement系列
1.getElementById(ID): 返回對指定ID的第一個對象的引用，若是在文檔中查找一個特定的元素，最有效的方法是getElementById()數組
2.getElementsByName(name): 返回文檔中name屬性爲name值的元素，由於name屬性值不是惟一的，因此查詢到的結果有可能返回的是一個數組，而不是一個元素app
3.getElementsByTagName(tagname): 返回文檔中指定標籤的元素函數
4.getElementsByClassName():返回文檔中全部指定類名的元素this
3. querySelector()和querySelectorAll()
1.selector，是經過css選擇器來獲取，因爲css沒有邏輯，因此通常經過類名；經過id只能獲取多個或第一個，沒法獲取惟一；可是咱們在書寫HTML標籤時，id最好不要有相同的編碼
2.querySelector():返回文檔中匹配指定css選擇器的第一個元素code
3.querySelectorAll():返回文檔中匹配指定css選擇器全部符合要求的元素；不管是零個、一個仍是多個都以數組的形式返回orm
4.在querySelector()或querySelectorAll()前面加document屬於全文檢索，它會在整個頁面中查找可以匹配的元素htm
5.在querySelector()或querySelectorAll()前面加具體的標籤，它就會在這個標籤內部查找符合規則的元素，咱們能夠稱之爲父級調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js選擇器</title>
</head>
<body>
<h1 id="d" class="box">你好</h1>
<input id="d" class="box"/>
</body>
<script>
console.log(d) // 能夠拿到兩個id相同的標籤
let a = document.querySelector('#d'); //只能拿到第一個id爲d的標籤內容
console.log(a)
let a = document.querySelectorAll('#d'); //兩個均可以拿到，且以數組形式(NodeList)顯示
let body = document.querSelector('body'); //在文檔流（整個頁面）中查找
let b_h1 = body.querySelector('h1'); //在父級標籤內檢索後代標籤
</script>
</html>
2、js頁面操做
1.操做頁面的三步驟
1. 經過js選擇器獲取頁面標籤，並經過定義變量來接收標籤內容
2.設置操做的激活條件，通常稱之爲事件，好比onclick | ondblclick等
3.具體的操做方式，好比對標籤內容|樣式|事件|文檔結構的具體操做，獲得最終效果的邏輯，都在這一步驟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操做頁面的三步驟</title>
</head>
<body>
<h1>操做頁面的三步驟</h1>
<div class="box">
<h1>box-h1</h1>
</div>
</body>
<script>
// 一、獲取頁面標籤
// 二、設置操做的激活條件 - 事件
// 三、具體的操做方式 - 內容 | 樣式 | 事件 | 文檔結構
// 1：
let body = document.querySelector('body');
let box = document.querySelector('.box');
// 父級調用選擇器方法，只完成本身內部的檢索
let body_h1 = body.querySelector('h1'); //找到body下的h1標籤
console.log(body_h1);
let box_h1 = box.querySelector('h1');
console.log(box_h1); //找到box下的h1標籤
// 2：
body_h1.onclick = function () {
// console.log('單擊則在控制檯打印')
// 3：
if (box_h1.style.color != 'red') {
box_h1.style.color = 'red';
box_h1.style.backgroundColor = 'orange';
} else {
box_h1.style.color = 'black';
box_h1.style.backgroundColor = 'white';
}
}
</script>
</html>
2.JS事件
1.js使咱們有能力建立動態頁面，網頁中的每個元素均可以產生某些觸發JavaScript函數的事件。咱們能夠認爲事件是能夠被JavaScript偵測到的一種行爲。能夠歸納爲：當何時執行什麼事。事件的基本結構：事件源、事件類型、執行的指令（函數）
2.使用返回值改變HTML元素的默認行爲：HTML元素大都包含了本身的默認行爲，例如：超連接、提交按鈕等。咱們能夠經過在綁定事件中加上"return false"來阻止它的默認行爲
3.通用的事件監聽方法：
1）綁定HTML元素屬性：<標籤 on+事件="js代碼">。這種方法，JavaScript 代碼與 HTML 代碼耦合在了一塊兒，不便於維護和開發，不推薦
2）綁定DOM對象屬性：經過監聽元素節點的某個事件，來實現事件程序驅動
3）標準DOM中的事件監聽方法： [object].addEvent("事件類型","處理函數","冒泡事件或捕獲事件"); [object].removeEvent("事件類型","處理函數","冒泡事件或捕獲事件");
4)DOM其實是以面向對象方式描述的文檔模型。DOM定義了表示和修改文檔所需的對象、這些對象的行爲和屬性以及這些對象之間的關係。能夠把DOM認爲是頁面上數據和結構的一個樹形表示，不過頁面固然可能並非以這種樹的方式具體實現
3.js事件的分類
1.鼠標事件
1.onclick ：單擊 （單擊能夠拆分紅兩個事件：按下和擡起）
2.ondblclick：雙擊
3.oncontextmenu：右擊
4.onmouseover：懸浮
5.onmouseout：移開
6.onmouseenter：懸浮 （與onmouseleave組合 父級先觸發）
7.onmousemove：移動
8.onmousedown：按下
9.onmouseup：擡起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠標事件</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
let box = document.querySelector('.box');
// 單擊
box.onclick = function () {
console.log('單擊了', this)
};
// 雙擊
box.ondblclick = function () {
console.log('雙擊了')
};
// 右鍵
box.oncontextmenu = function () {
console.log('右鍵了');
// 有些事件有系統默認動做，取消默認動做能夠返回 false
return false;
};
// 懸浮
box.onmouseover = function () {
console.log('懸浮了');
};
// 移開
box.onmouseout = function () {
console.log('移開了');
};
// 移動
box.onmousemove = function () {
console.log('移動了');
};
// 按下
box.onmousedown = function () {
console.log('按下了');
};
// 擡起
box.onmouseup = function () {
console.log('擡起了');
};
</script>
</html>
2.文檔事件
1.onload：頁面加載事件（通常是對window對象）
2.onscroll：頁面滾動（通常對文檔流對象）
3.頁面滾動中會有window.scrollY屬性，它能夠表示窗口滾動了多長距離
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文檔事件</title>
<style>
body {
height: 3000px;
}
</style>
<script>
//頁面加載成功就會觸發事件
window.onload = function () {
console.log(h1)
}
</script>
</head>
<body>
<h1 id="h1">hhhhh</h1>
</body>
<script>
let body = document.querySelector('body');
// 頁面滾動事件
document.onscroll = function (event) {
console.log('頁面滾動中');
// console.log(event);
// console.log(window.scrollY); //它的滾動距離是有頻率的，就像每秒纔打印一次距離，因此若是滑塊了，它可能顯示不了你想要的具體值，因此作判斷時，用<= 或 >=來擴大範圍來觸發事件
if (window.scrollY >= 500) {
body.style.backgroundColor = 'red';
} else {
body.style.backgroundColor = 'white';
}
}
</script>
</html>
3.鍵盤事件
1.onkeydown：按鍵的按下
2.onkeyup：按鍵擡起
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鍵盤事件</title>
</head>
<body>
<h1>鍵盤事件</h1>
<input type="text">
</body>
<script>
let inp = document.querySelector('input');
inp.onkeydown = function () {
console.log('按下')
};
inp.onkeyup = function () {
console.log('擡起')
}
</script>
</html>
4.表單事件
1.onsubmit：提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單事件</title>
<style>
/*表單的內外邊框*/
input {
border: 2px solid pink;
}
input:focus {
outline: 2px solid yellow;
}
</style>
</head>
<body>
<form action="">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="登陸">
</form>
</body>
<script>
let form = document.querySelector('form');
let submit = document.querySelector('[type="submit"]');
let usr = document.querySelector('[type="text"]');
// 表單提交事件：表單默認也有提交數據的動做，也能夠取消
form.onsubmit = function () {
console.log('提交了');
return false;
};
</script>
</html>
//點擊提交，表單會有默認提交事件能夠經過return false取消
<form action="">
<input type="text" name="user">
form.onsubmit = function () {
return false;
}
5.HTML事件
1.onfocus：任何元素或窗口獲取焦點時觸發
2.onblur：任何元素或窗口失去焦點時觸發
選擇輸入框，鍵盤就被監控
6.事件對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件對象</title>
</head>
<body>
<input type="text" class="inp">
</body>
<script>
inp = document.querySelector('.inp');
inp.onkeydown= function (event) {
console.log(event);
// console.log(event.keyCode);
if (event.keyCode === 13) {
console.log('回車了')
}
if (event.ctrlKey && event.keyCode === 13) {
console.log('消息發送了')
}
};
document.onclick = function (event) {
console.log(event);
// 鼠標點擊點
console.log(event.clientX, event.clientY);
}
</script>
</html>
1.當一個事件被觸發的時候，會建立一個事件對象（Event Object），這個對象裏面包含了一些有用的屬性或者方法。事件對象會做爲第一個參數，傳遞給咱們的毀掉函數。事件對象包括不少有用的信息，好比事件觸發時，鼠標在屏幕上的座標。
2.鼠標事件：Mosesevent
3.鍵盤事件：keyevent
4.咱們能夠在事件對象中找到各類屬性，好比在鍵盤事件中能夠找到keycode這個屬性，每一個鍵都有本身的keycode
5.keycode:37 是左方向鍵的鍵盤編碼
6.經過這些屬性，咱們再結合一些邏輯，就能夠實現組合鍵的事件，好比當事件中的ctrlkey爲true，且keycode等於13時，說明ctrl鍵和enter鍵同時按下了，就能夠發送消息了，這個事件在qq聊天時被使用過
7.組合鍵：當按下ctrl鍵，enter鍵的ctrlkey會等於true
8.event.clientX event.clientY：鼠標點擊點的利用，能夠防爬蟲、機器人：
- 1）能夠獲取鼠標點擊點位置，判斷是經過點擊連接來訪問的網頁，從而防止經過代碼請求來訪問網頁
- 2）拖動時間能夠判斷是不是人在操做
4.js操做內容
1.更改標籤內容
//先經過變量和js選擇器獲取標籤
//inp.value能夠拿到輸入框的內容
//inp_value=''//改的只是定義的變量值，而不會去改變inp的屬性值
//標題標籤沒有value屬性，可是有innerText屬性（只拿文本），還有innerHTML（能夠拿到後代標籤和文本內容）
//innerText不會解析標籤，innerHTML會解析標籤，並只輸出文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>內容操做</title>
</head>
<body>
<h1 class="title">標題</h1>
<input type="text" class="title">
<button class="btn">改標題</button>
</body>
<script>
let h1 = document.querySelector('h1.title');
let inp = document.querySelector('input.title');
let btn = document.querySelector('.btn');
// 內容操做：value | innerText | innerHTML
btn.onclick = function () {
// 拿到輸入框的內容
inp_value = inp.value;
if (inp_value) {
// inp_value = ''; // 改的只是一個內存變量
inp.value = ''; // 清空輸入框
// 將內容賦值給h1 innerText | innerHTML
// console.log(h1.innerText);
// console.log(h1.innerHTML);
// 純文本
// h1.innerText = inp_value;
// 文本中的標籤會被解析
h1.innerHTML = inp_value;
}
}
</script>
</html>
2.樣式操做
//1.單擊獲取標籤的以前背景顏色
//注意：this.style 本質操做的是行間式，只能獲取和設置行間式
//注意：在內聯式和外聯式中書寫的樣式稱之爲「計算後樣式」
//注意：getComputedStyle只讀，不能用來設置樣式，設置樣式須要用this.style。好比：this.style.backgroundColor="red";
//注意：this.className能夠進行類名的字符串拼接，實現樣式切換的操做
//getComputedStyle(this, null) //null能夠填標籤的僞類after/before
//2.點擊修改標籤的寬高背景顏色
getComputedStyle(標籤, 僞類); //獲得是字典（對象），key取出的值是字符串
//3.操做計算後樣式，提取寫好計算後
//頁面刷新
//頁面點擊
document.onclick = function () {
//全局刷新
window.location.href = '';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樣式操做</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
.sup-box {
/*width: 400px;*/
height: 100px;
background-color: orange;
border-radius: 50%;
line-height: 100px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<!--<div class="box" style="background-color: deeppink;"></div>-->
<div class="box">文本</div>
</body>
<script>
let box = document.querySelector('.box');
// 需求1：單擊獲取標籤的以前背景顏色
/*
box.onclick = function () {
// 注：this.style 本質操做的是行間式（只能獲取和設置行間式）
// bgColor = this.style.backgroundColor;
// console.log(bgColor);
// 注：在內聯和外聯中書寫的樣式稱之爲 計算後樣式
// 注：getComputedStyle 能獲取計算後樣式，也能獲取行間式，可是隻讀
// getComputedStyle(標籤, 僞類).樣式;
bgColor = getComputedStyle(this, null).backgroundColor;
console.log(bgColor);
width = getComputedStyle(this, null).width;
console.log(width, parseInt(width));
// 只讀，會報錯
// getComputedStyle(this, null).backgroundColor = 'rgb(255, 20, 147)';
}
*/
// 需求2：點擊修改標籤的寬高背景顏色
/*
box.onclick = function () {
this.style.backgroundColor = 'orange';
this_style = getComputedStyle(this, null);
// console.log(parseInt(this_style.width) * 2);
// 寬放大兩倍，高縮小兩倍
this.style.width = parseInt(this_style.width) * 2 + 'px';
this.style.height = parseInt(this_style.height) / 2 + 'px';
}
*/
// 需求：操做計算後樣 - 提取寫好計算後樣式，經過類名將 js 與 css 創建關聯
box.onclick = function () {
console.log(this.className);
// this.className = 'sup-box';
/*
if (this.className === 'box') {
this.className = 'sup-box';
} else {
this.className = 'box';
}
*/
// 注：有個空格：空格sup-box
// this.className += ' sup-box';
if (this.className === 'box') {
this.className += ' sup-box';
} else {
this.className = 'box';
}
};
</script>
</html>
3.頁面轉跳
window是頂層對象，在頁面任何位置均可以被訪問
自我轉跳
//''表明當前頁面
window.location.href=''
//自我刷新
location.reload();
//跳轉（在自身窗口）
window.location.href='相對路徑'
//新開
window.open('相對路徑'， '_blank'); //默認是新開，_self是在自身
//ctrl新開
event.ctrlkey來獲取是否按着ctrl鍵
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頁面轉跳</title>
</head>
<body>
<button class="b1">自我刷新</button>
<button class="b2">轉跳到9</button>
<button class="b3">ctrl新開轉跳到9</button>
</body>
<script>
window.owen = 'Owen';
let b1 = window.document.querySelector('.b1');
// 自我刷新
b1.onclick = function () {
// console.log(owen);
// '' 表明當前頁面連接
// window.location.href = '';
location.reload();
};
let b2 = window.document.querySelector('.b2');
// 轉跳到9*.html
b2.onclick = function () {
// 在自身所在標籤替換
window.location.href = '九、樣式操做.html';
};
// ctrl新開轉跳到9
let b3 = window.document.querySelector('.b3');
b3.onclick = function (ev) {
// open('轉跳路徑', '默認就是_blank')
if (ev.ctrlKey) {
window.open('九、樣式操做.html');
} else {
window.open('九、樣式操做.html', '_self');
}
}
</script>
</html>
4.動態尺寸
//獲取包含滾動條的寬度
先設置一個隱藏box，他的寬爲100vw
1.屏幕有滾動條下的兩種寬度
2.去除滾動條剩餘的所有寬度:
let html = document.querySelector('html');
console.log(html.clientWidth);
** 3.不去除滾動條剩餘的所有寬度:**
function getHtmlWidth() {
let hidden = document.createElement('div');
hidden.style.width = '100vw';
html.appendChild(hidden);
width = parseInt(getComputedStyle(hidden, null).width);
html.removeChild(hidden);
return width
}
width = getHtmlWidth();
console.log(width);
4.案例：動態尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動態尺寸</title>
<style>
body {
margin: 0;
height: 3000px;
}
.box {
/*width: 200px;*/
/*height: 200px;*/
/*width: 100%;*/
background-color: orange;
position: fixed;
top: 0;
left: 0;
min-width: 900px;
max-width: 1100px;
width: 90%;
margin-left: 5%;
/*vw viewwidth vh viewheight*/
/*width: 90vw;*/
/*margin-left: 5vw;*/
}
</style>
</head>
<body>
<div class="hidden" style="width: 100vw"></div>
<div class="box"></div>
</body>
<script>
let html = document.querySelector('html');
// 去除滾動條的寬度
console.log(html.clientWidth);
// 包含滾動條的寬度
// let hidden = document.querySelector('.hidden');
// width = parseInt(getComputedStyle(hidden, null).width);
// console.log(width);
function getHtmlWidth() {
let hidden = document.createElement('div');
hidden.style.width = '100vw';
html.appendChild(hidden);
width = parseInt(getComputedStyle(hidden, null).width);
html.removeChild(hidden);
return width
}
width = getHtmlWidth();
console.log(width);
function resizeBox() {
box_width = parseInt(getComputedStyle(box, null).width);
box.style.height = box_width / 6 + 'px';
if (box_width >= 1100) {
box.style.marginLeft = (html.clientWidth - 1100) / 2 + 'px'
}
}
let box = document.querySelector('.box');
resizeBox();
window.onresize = function () {
resizeBox();
};
</script>
</html>
- 1. Python之路【第十七篇】：Django【進階篇 】 Python之路【第十七篇】：Django【進階篇 】
- 2. [JS進階] HTML5 之文件操做(file)
- 3. Python之路【第十七篇】：Django【進階篇 】
- 4. js字符串操做進階篇
- 5. 第七十篇 js基礎
- 6. 菜鳥js進階---一元操做符
- 7. JS - 事件 and 頁面操作
- 8. 第十七篇
- 9. JavaScript進階（一）JS事件機制
- 10. js第七篇
- 更多相關文章...
- • jQuery Mobile 頁面事件 - jQuery Mobile 教程
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • RxJava操作符（十）自定義操作符
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known