04-初學JavaScript
阿新 • • 發佈：2020-12-07
經過週末的消沉還是要繼續學習程式碼的，不過今天可是備受打擊，閒話少說繼續整理
DOM操作
通常，通過 JavaScript，您需要操作 HTML 元素。
為了達成此目的，您需要首先找到這些元素。有好幾種完成此任務的方法：
- 通過 id 查詢 HTML 元素
- 通過標籤名查詢 HTML 元素
- 通過類名查詢 HTML 元素
- 通過 CSS 選擇器查詢 HTML 元素
- 通過 HTML 物件集合查詢 HTML 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
DOM：只要針對節點（元素）進行操作
Dhtml
dynamic:動態的
<div style="width: 100px;height: 100px;background: red" class="d">
<p>放假！！！！！！！</p>
<div style="width: 100px;height: 100px;background: blue">
</div>
</div>
<div style="width: 100px;height: 100px;background: yellow" class="d">
</div>
<script>
文件物件
var d1= document.getElementById('d1');
console.log(d1);
d1.innerText='這是重點';
d1.innerHTML = '<h1>這是超級重點</h>';
console.log(d1.innerHTML);
var divs = document.getElementsByTagName('div');
console.log(divs[1]);
var divs = document.getElementsByClassName('d');
console.log(divs[1]);
</script>
</body>
</html>
通過這三種方法獲取表單元素
其中tagname 和classname都是陣列 只有id是一個元素 因為id只能有一個
二、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<a href="" id="a">這是一個連結</a>
<button onclick="f()">設定屬性按鈕</button>
<button onclick="f1()">檢視屬性</button>
</div>
<script>
var d1 = document.getElementById('d1');
console.log(d1.getElementsByTagName('a')[0]);
//設定屬性值
function f(){
a.href='01-Dhtml.html';
a.target='_blank';
a.title='這是一個連結';
}
//顯示屬性值
function f1(){
console.log(a.href);
console.log(a.target);
console.log(a.title);
}
</script>
</body>
</html>
通過獲取的元素設定屬性值
三、按鈕的提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="01-Dhtml.html" method="get">
<input type="text" name="username" placeholder="請輸入使用者名稱">
<span style="color: #ff0000"></span>
<br>
<!-- <input type="submit" value="提交">-->
</form>
<button>按鈕</button>
<script>
var i = document.getElementsByName('username')[0];
var btn = document.getElementsByTagName('button')[0];
var span = document.getElementsByTagName('span')[0]
i .onblur = function (){
console.log(i.value);
span.innerText='liunengenng'
}
i.onfocus = function (){
span.innerText=''
}
</script>
</body>
</html>
這有兩種方式 一是通過button提交攔截 二是通過from攔截 form onsubmit 返回true\false 一定要加return
from沒有寫而是自己想的 最後查的資料
四、通過獲取元素 改變屬性值 來實現全選和全不選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<fieldset>
<legend>愛好</legend>
全選<input type="checkbox" id="all"/><br>
睡覺<input type="checkbox" name="hobby"/>
吃飯<input type="checkbox" name="hobby" />
玩遊戲<input type="checkbox" name="hobby"/>
</fieldset>
<script>
var check = document.getElementsByName('hobby');
document.getElementById('all').onclick = function (){
for (var i = 0; i <check.length; i++) {
check[i].checked = document.getElementById('all').checked;
}
}
for (var i = 0; i <check.length; i++) {
check[i].onclick = function() {
for (var j = 0; j < check.length; j++) {
if (check[j].checked) {
document.getElementById('all').checked = true;
} else {
document.getElementById('all').checked = false;
}
}
}
}
//
// function f(){
// var temp= 0;
// for (var j = 0; j <check.length; j++) {
//
// if(check[j].checked){
// temp++;
// }
// }
//
// if(temp == 3){
// document.getElementById('all').checked=true;
// }else{
// document.getElementById('all').checked=false;
// }
// }
</script>
</body>
</html>
由於這裡忘記獲取的是陣列因此這裡卡主了 通過 console.log 才找到哪裡出了錯誤
五、改變css樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.c1{
width: 100px;
height: 100px;
background: yellow;
margin: auto;
}*/
.c1{
width: 100px;
height: 100px;
background:yellow;
margin: auto;
}
.c2{
border-radius: 50px;
box-shadow: 10px 10px 10px 10px red;
}
</style>
</head>
<body>
<!--一個元素是可以寫多個類名，但是id名只能有一個-->
<div id="d1"> 1223</div>
<script>
var d1 = document.getElementById('d1');
d1.className='c1 c2'
</script>
</body>
</html>
這裡一定要記住classname 要想兩個樣式都實現 必須寫在一個裡 如d1.className='c1 c2'
六、自定義屬性 通過按鈕改變字型大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
123
</div>
<button id="d2">按鈕1</button>
<button id="d3">按鈕2</button>
<button id="d4">按鈕3</button>
<script>
var d1 = document.getElementById('d1');
var btn = document.getElementsByTagName('button');
for (var i = 0; i <btn.length; i++) {
btn[i].setAttribute('btn','b'+(i+1));
btn[i].onclick=function (){
if ('b1'== this.getAttribute('btn')){
d1.style.fontSize='12px';
}
if ('b2' == this.getAttribute('btn')){
d1.style.fontSize='16px';
}
if(this.getAttribute('btn'=='b3')){
d1.style.fontSize='32px';
}
}
}
</script>
</body>
</html>
一開始想著點選 一個按鈕可以改變一個樣式 但是好像想簡單了 所以這裡有加了自定義屬性 ，可以通過setAttribute自定義屬性 通過getAttribute獲取屬性
七、用自定義屬性來實現摺疊選單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
width: 600px;
height: 600px;
border: 1px solid red;
margin: auto;
}
ul{
list-style:none ;
display: none;
}
p{
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
background: grey;
color: deepskyblue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="d1">
<p>衣服</p>
<ul>
<li>阿迪</li>
<li>耐克</li>
<li>喬丹</li>
<li>李寧</li>
</ul>
<p>圖書</p>
<ul>
<li>阿迪1</li>
<li>耐克2</li>
<li>喬丹3</li>
<li>李寧4</li>
</ul>
<p>美食</p>
<ul>
<li>阿迪987</li>
<li>耐克345</li>
<li>喬丹123</li>
<li>李寧12345</li>
</ul>
<p>學校</p>
<ul>
<li>阿迪987</li>
<li>耐克345</li>
<li>喬丹123</li>
<li>李寧12345</li>
</ul>
</div>
<script>
var d1 = document.getElementById('d1');
var ps = document.getElementsByTagName('p');
var uls = document.getElementsByTagName('ul');
for (var i = 0; i <ps.length; i++) {
ps[i].setAttribute('pid',i);
ps[i].onclick = function (){
var pid = this.getAttribute('pid');
var curul = uls[pid];
if(curul.style.display=='block'){
curul.style.display='none';
}else{
for (var i = 0; i <ps.length; i++) {
uls[i].style.display='none';
}
curul.style.display='block';
}
}
}
</script>
</body>
</html>
這裡的邏輯我用了許久才明白 尤其是else裡的迴圈 判斷是如果是關的就執行else操作 迴圈看其他列表 如果他們是開的就關掉 這樣就是實現了 點開一個 關掉其他的列表
八、事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 事件：事件是網頁檢測到的行為-->
<!--事件：事件源+事件型別+事件處理-->
<!-- 事件繫結函式的方式-->
<!--方式一在元素內部寫事件，在事件註冊函式-->
<button onclick="f()">按鈕1</button>
<script>
// function f(){
// alert(123);
// }
// // 方式二：獲取元素物件。事件 = 匿名函式
// document.getElementsByTagName('button')[0].onmouseenter = function (){
// alert(456);
// }
// 方式三（借用事件監聽函式）:第一個引數為事件名，第二個為要呼叫的函式名
document.getElementsByTagName('button')[0].addEventListener("mousedown", m)
function m(){
alert(789)
}
</script>
</body>
</html>
事件的三種第二種用的比較多 第三種是特定情況的話才會使用
九、利用 滑鼠和鍵盤做了 一個結合事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1" style="width: 10px;height: 10px;border-radius:50px;background: red">
</div>
<script>
window.onload = function (e){
document.onmousedown = function (e){
var a = e.clientX;
var b = e.clientY;
document.getElementById('d1').style.marginLeft = a+'px';
document.getElementById('d1').style.marginTop = b+'px';
document.getElementById('d1').style.transition = 'all 1s'
}
}
</script>
</body>
</html>
實現用滑鼠對小球進行移動
之後就是作業了
一個是實現 摁下回車 按鈕開始倒計時，計時結束 才可以點選按鈕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" disabled="disabled">
<script >
var btn = document.getElementsByTagName('input')[0]
var i= 3;
btn.value=i;
var t;
window.onload = function (e){
document.onkeydown = function (e){
if(e.keyCode == 13){
t = setInterval(f,1000)
}
}
function f(){
--i
btn.value=i;
if(i == 0){
console.log(123);
clearInterval(t)
btn.value='新年快樂'
btn.disabled=false;
}
}
}
</script>
</body>
</html>
第二個作業是 判斷輸入框裡的文字個數 實時反映到介面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
還可以輸入100個數
</div>
<input type="text" style="height: 200px">
<script>
window.onload = function (e){
document.onkeydown = function (){
var i=100;
var d1 = document.getElementById('d1')
var t1 = document.getElementsByTagName('input')[0]
var a;
i=i - t1.value.length;
d1.innerText='還可以輸入'+i+'個字元';
}
}
</script>
</body>
</html>
ok 萬事大吉！！