js基本操做
js操做頁面三步驟
<!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');
console.log(body_h1);
let box_h1 = box.querySelector('h1');
console.log(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>
js事件
鼠標事件
<!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>
文檔事件
<!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 (ev) {
console.log('滾動了');
// console.log(ev);
// console.log(window.scrollY);
if (window.scrollY >= 500) {
body.style.backgroundColor = 'red';
} else {
body.style.backgroundColor = 'white';
}
}
</script>
</html>
鍵盤事件
<!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>
表單事件
<!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;
};
// 獲取焦點
usr.onfocus = function () {
console.log('獲取焦點')
};
// 失去焦點
usr.onblur = function () {
console.log('失去焦點')
};
</script>
</html>
事件對象
<!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 (ev) {
console.log(ev);
// console.log(ev.keyCode);
if (ev.keyCode === 13) {
console.log('回車了')
}
if (ev.ctrlKey && ev.keyCode === 13) {
console.log('消息發送了')
}
};
document.onclick = function (ev) {
console.log(ev);
// 鼠標點擊點
console.log(ev.clientX, ev.clientY);
}
</script>
</html>
js操做內容
<!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>
js操做樣式
<!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>
頁面轉跳
<!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>
屏幕有滾動條下的兩種寬度
去除滾動條剩餘的所有寬度
let html = document.querySelector('html');
console.log(html.clientWidth);
不去除滾動條剩餘的所有寬度
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);
案例：動態尺寸
<!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. JS數組基本操做
- 2. js數組基本操做
- 3. js基本操做-事件兼容性
- 4. js 數組操做基本方法
- 5. js基本操做-this理解
- 6. JS基本語法與操做
- 7. select下js的基本操做(備忘)
- 8. js基本操做-數組去重
- 9. js數組(列表)的基本操做
- 10. sparkSQL操做基本操做
- 更多相關文章...
- • Git 基本操作 - Git 教程
- • Lua 基本語法 - Lua 教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. JS數組基本操做
- 2. js數組基本操做
- 3. js基本操做-事件兼容性
- 4. js 數組操做基本方法
- 5. js基本操做-this理解
- 6. JS基本語法與操做
- 7. select下js的基本操做(備忘)
- 8. js基本操做-數組去重
- 9. js數組(列表)的基本操做
- 10. sparkSQL操做基本操做