19 Javascript、事件三部曲、事件、變數、操作表單內容、操作閉合標籤內容、變數拼接、操作屬性、操作樣式

js的歷史

javascript

為了處理表單的驗證

1995年，網景公司 布蘭登·艾奇 10天 Mocha

9月 LiveScript

12月 java的順風車 javascript

微軟： JScript

1997年 js1.1 為藍本 歐洲計算機制造商協會 ECMAScript

js和es的關係

js和ECMAScript的關係:

ECMAScript規定了javascript的語法標準

javascript是ECMAScript的體現

js的概念

js是基於物件和事件驅動的解釋性指令碼語言;

特點

2.1 基於物件: 頁面中所有的內容 自己建立的物件都可以來直接用

一切皆物件 萬物皆物件

2.2 事件驅動: 瀏覽器會直接對使用者或者是客戶端的行為進行一個響應

2.3 解釋性: 瀏覽器可以直接執行js程式碼

2.4 跨平臺性: 只要有瀏覽器就可以執行

組成部分

ECMAScript 語法標準

DOM Document Object Model 文件物件模型

BOM Browser Object Model 瀏覽器物件模型

引入方式

行內

基於事件 通過事件進行觸發

第一個滑鼠事件: onclick

onclick="alert('hello js')"

缺陷： 單個事件的簡單的程式碼觸發 不推薦使用

<div style="width: 100px;height: 100px;background: red;" onclick="alert('hello js')">這是一個div</div>

內嵌

內嵌： script 雙標籤 可以寫在頁面的任何位置 也可以有多個

執行: 從上到下執行 遇到script標籤就會去執行其中的程式碼 其中程式碼執行完成後，才會往後執行

建議: body的結束標籤之前

沒有遵循三分離

常用： 學習 授課 結構和行為一一對應

w3c:

實現分離: html--結構 css--樣式 js--行為

<script>
  alert('3');
</script>
 

外鏈

1. 有js檔案 字尾.js

2. script 雙標籤 src地址屬性引入對應的檔案地址

3. js檔案中 直接寫程式碼

推薦使用: 開發過程中

注意： 在外鏈的js中，如果再寫程式碼 不會執行

<script src="./06.js">
  // 在外鏈的js中，如果再寫程式碼 不會執行
  alert('2');
</script>

註釋

1. 行註釋 //

2. 塊註釋 /* 註釋程式碼 */

除錯語言

alert

alert('內容')

作用： 彈出提示內容

阻斷頁面

alert('hello js')"

console.log

console.log('內容') 在控制檯輸入內容

console.log(值1, 值2, 值3, ... ); 可以同時輸出在控制檯

// 滑鼠移動
document.getElementById('box').onmousemove = function(){
  // alert('onmousemove');
  console.log('onmousemove');
} 

事件三部曲

1. 找 找到是誰來觸發 滑鼠操作誰就找誰

通過id:

document.getElementById('id名')

object HTMLDivElement---獲取成功 將box從頁面中拿到js中來使用

null---獲取失敗 檢查單詞 檢查大小寫

document--文件

get--獲取

Element--元素

ById---通過id

2. 新增事件 滑鼠操作誰就加給誰

語法: 元素.事件 = function(){}

onclick

3. 具體做的事情:

function後面的{}中

// 1. 找
alert(document.getElementById('box'));
// alert(document.getElementById('box1'));
​
// 2. 加事件
document.getElementById('box').onclick = function(){
  // 3. 具體的事情
  alert('1');
}

window.onload

執行順序： 程式碼從上往下執行 執行到script標籤的時候 body還沒有執行 頁面中還沒有元素 獲取不到box

Cannot set property 'onclick' of null: 不能把onclick這個屬性加給null

元素沒有獲取到

window.onload作用: 等待頁面及資源載入完成後, 在執行其中的程式碼

window.onload = function(){

所有程式碼

}

window.onload = function () {
  // 1. 找
  alert(document.getElementById('box'));
  // alert(document.getElementById('box1'));
​
  // 2. 加事件
  document.getElementById('box').onclick = function () {
    // 3. 具體的事情
    alert('1');
   }
}

事件

1. 點選事件 onclick

2. 雙擊事件 ondblclick

3. 滑入事件 從元素外面進入到元素裡面 onmouseover onmouseenter

4. 滑出事件 從元素裡面出去到元素外面 onmouseout onmouseleave

5. 滑鼠按下 onmousedown

6. 滑鼠抬起 onmouseup

7. 右鍵選單 oncontextmenu

8. 滑鼠移動 onmousemove 一直不間斷觸發

// 找元素
// alert(document.getElementById('box'));
// 加事件  元素.事件 = function(){}
document.getElementById('box').onclick = function(){
  // 具體做的事情
  alert('單擊');
}
​
// 加事件  元素.事件 = function(){}
document.getElementById('box').ondblclick = function(){
  // 具體做的事情
  alert('雙擊');
}
​
// 滑入滑出
// 滑入
document.getElementById('box').onmouseover = function(){
  // 具體做的事情
  alert('mouseover');
}
document.getElementById('box').onmouseenter = function(){
  // 具體做的事情
  alert('mouseenter');
}
​
// 滑出
document.getElementById('box').onmouseout = function(){
  // 具體做的事情
  alert('mouseout');
}
document.getElementById('box').onmouseleave = function(){
  // 具體做的事情
  alert('mouseleave');
}
​
// 按下
document.getElementById('box').onmousedown = function(){
  alert('mousedown');
}
​
// 抬起
document.getElementById('box').onmouseup = function(){
  alert('mouseup');
}
​
// 右鍵選單
document.getElementById('box').oncontextmenu = function(){
  alert('contextmenu');
}
​
// 滑鼠移動
document.getElementById('box').onmousemove = function(){
  // alert('onmousemove');
  console.log('onmousemove');
} 

over與enter區別

over與enter的區別： over會用子元素觸發父元素身上的事件 enter不會

document.getElementById('box').onmouseover = function(){
    console.log('over');
}
document.getElementById('box').onmouseenter = function(){
    console.log('enter');
}


document.getElementById('box').onmouseout = function(){
    console.log('out');
}
document.getElementById('box').onmouseleave = function(){
    console.log('leave');
}

變數

概念

變數：用來儲存資料的容器

用關鍵字 var 宣告

宣告方式

1. 先宣告，後賦值;

var 變數名; 變數名 = 值;

2. 宣告的同時並賦值;

var 變數名 = 值;

3. 同時宣告多個;

var 變數名1, 變數名2, ...;

變數名1 = 值1;

變數名2 = 值2;

4. 同時宣告多個的同時並賦值;

var 變數名1 = 值1, 變數名2 = 值2, ...;

// 先宣告 後賦值
var box; box = 1;
console.log(box);

// 宣告的同時並賦值
var obox = 2;
console.log(obox);

// 同時宣告多個
var a,b,c;
a = 10;
b = 20;
c = 30;
// console.log(a);
// console.log(b);
// console.log(c);
console.log(a, b, c);

// 同時宣告多個並賦值
var x = 30, y = 40, z;
z = 50;
console.log(x, y);

命名規範

命名規範:

\1. 由字母、數字、_、$組成, 數字不能夠開頭的

\2. 不能使用關鍵字和保留字 top

\3. 不能重複, 重複的話 後面的會覆蓋前面的

建議:

\1. 具有語義化 userName password isLogin

\2. 遵循小駝峰命名法 多個單片語成一個變數名, 從第二個單詞開始首字母大寫 userName

// continue;
// break;
// case

var top = 10;
console.log(top); // 得不到10

var abc = 20;

var abc = 40;
console.log(abc); // 40

場景

1. 用來儲存元素 元素有多個地方用到的時候 將元素儲存到一個變數中 只獲取一次元素 多次操作

2. 需要儲存資料的時候

操作表單內容

1. 獲取表單內容: var 變數名 = 元素.value;

2. 設定表單內容: 元素.value = '要設定的內容';

3. 注意:

   1. 步驟：先獲取元素 在獲取/設定內容

   2. 獲取下拉列表的值 沒有value屬性的情況下 獲取到的是option中的內容，如果有value 獲取的就是value的值

   3. 設定下拉列表的值 有value寫value的值 沒有value就寫option的內容 值與選中的項必須一模一樣 不一樣的話就選不中出現空白

// 獲取表單內容  
// 1. 獲取元素
var inp = document.getElementById('inp');
console.log(inp);
// 2. 獲取表單的值  內容
var inpValue = inp.value;
console.log(inpValue);

// 3. 設定表單內容
inp.value = '古力娜扎';

// 獲取文字域的值
var txt = document.getElementById('txt');
console.log(txt);
var txtValue = txt.value;
console.log(txtValue);
// 設定文字域的值
txt.value = '這是古力娜扎的私人領域';

// 獲取下拉列表的值  沒有value屬性的情況下 獲取到的是option中的內容
// 如果有value  獲取的就是value的值
var city = document.getElementById('city');
console.log(city);
var cityV = city.value;
console.log(cityV);

// 設定下拉列表的值
//    city.value = 'gz '; // option中的內容 還是value的內容  有value寫value的值  沒有value就寫option的內容  值與選中的項必須一模一樣  不一樣的話就選不中出現空白
city.value = 'gz'; 

操作閉合標籤內容

閉合標籤: 雙標籤 有起始標籤有結束標籤就是閉合標籤

閉合標籤的內容： 起始標籤和結束標籤中間

innerText

獲取閉合標籤的內容:

var 變數名 = 元素.innerText;

設定閉合標籤的內容:

元素.innerText = '值';

// 獲取內容  先獲取元素
var box = document.getElementById('box');
console.log(box);
var txt = box.innerText;
// box.innerText; // 不會報錯 沒有任何作用 既沒有輸出在控制檯 也不會顯示在頁面中
console.log(txt);

// 設定box的內容為: 新的內容
box.innerText = '新的內容';

innerHTML

獲取閉合標籤的內容:

var 變數名 = 元素.innerHTML;

設定閉合標籤的內容:

元素.innerHTML = '值';

// 獲取ul的內容
var oul = document.getElementById('oul');
console.log(oul);
var oulHTML = oul.innerHTML;
console.log(oulHTML);

// 設定ul的內容
oul.innerHTML = '新的內容';

區別

1. 都是獲取閉合標籤的內容，innerText不能獲取標籤 innerHTML可以獲取標籤

2. 都可以設定閉合標籤的內容 innerText不識別標籤的 innerHTML可以識別標籤

3. 設定內容的時候 後面的會覆蓋前面的

不想覆蓋 累加

語法：元素.innerHTML = 元素.innerHTML + '新的內容';

var oulHTML = oul.innerHTML;
console.log(oulHTML);

var oulTxt = oul.innerText;
console.log(oulTxt);
// 設定ul的內容
// oul.innerHTML = '新的內容';
// oul.innerHTML = '<li>新的內容</li>';
// oul.innerText = '<li>新的內容</li>';

// 累加: 語法：元素.innerHTML = 元素.innerHTML + '新的內容';
oul.innerHTML = oul.innerHTML + '新的內容';
oul.innerHTML = oul.innerHTML + '<li>新的內容</li>';

變數拼接

1. 刪除 被替換的內容刪除掉

2. 加 加兩個引號(與最外層引號一致) 以及兩個加號

3. 拼接 在加號中間 加上變數名

// 變數不能直接寫在引號中  相當於是英文字元  而不是變數
// 變數拼接： 1. 刪除 被替換的內容刪除掉  2. 加  加兩個引號(與最外層引號一致)  以及兩個加號 3. 拼接 在加號中間 加上變數名
oul.innerHTML = oul.innerHTML + '<li>' + txt + '</li>';

操作屬性

屬性： 寫在起始標籤上 除了起始標籤名以外的都是屬性

操作屬性：

\1. 獲取屬性: var 變數名 = 元素.屬性名;

var 變數名 = 元素['屬性名']; var 變數名 = 元素[變數];

\2. 設定屬性: 元素.屬性名 = '值';

元素['屬性名'] = '值'; 元素[變數] = '值';

點和[]的區別： []裡面可以是變數 可以是'屬性名' 點後面只能是屬性名

操作id

\1. 獲取屬性: var 變數名 = 元素.id;

\2. 設定屬性: 元素.id = '值';

var div = document.getElementById('abox');
console.log(div);
var txt = div.id;
console.log(txt);

var btn = document.getElementById('btn');
console.log(btn);
// 加事件
btn.onclick = function(){
    // 具體做的事情  元素.屬性名 = '值';
    div.id = 'bbox';
}

操作class

\1. 獲取屬性: var 變數名 = 元素.className;

\2. 設定屬性: 元素.className = '值';

class: 是關鍵字 所以不能直接用

需要用 className

場景：

\1. 修改多個樣式 2個以上

\2. 樣式跟隨滑鼠改變 點選div讓div的背景色變藍 點選其他按鈕讓某個元素的樣式改變

var div = document.getElementById('abox');
console.log(div);

// var txt = div.class;  錯誤
var txt = div.className;
console.log(txt);

// 設定類名
div.className = 'ab';

操作src

\1. 獲取屬性: var 變數名 = 元素.src;

\2. 設定屬性: 元素.src = '值';

絕對地址： 以碟符為開頭

file:///E:/%E4%B8%AD%E5%85%AC%E6%95%99%E8%82%B2/1207/day01/img/1.jpg

相對地址：

./ 同一個

../ 上一個

// 獲取元素
var img = document.getElementById('img');
console.log(img);
// 獲取src的值
var txt = img.src;
console.log(txt); // file:///E:/%E4%B8%AD%E5%85%AC%E6%95%99%E8%82%B2/1207/day01/img/1.jpg  沒用

var txt1 = img['src'];
console.log(txt1);

var a = 'src';
console.log(a);
var txt2 = img[a];
console.log(txt2);

// 設定的時候寫相對地址
// 點選img  改變img為第二張圖
img.onclick = function(){
    // img.src = './img/2.jpg';
    // img['src'] = './img/3.jpg';
    var a = 'src';
    img[a] = './img/4.jpg';
}

操作樣式

單個屬性操作

修改style屬性的某一個屬性

操作樣式屬性: 只能操作行內

\1. 獲取樣式屬性: var 變數名 = 元素.style.屬性名;

\2. 設定樣式屬性: 元素.style.屬性名 = '值';

在js中 沒有連字元 轉換成駝峰命名法 font-size ---> fontSize

var box = document.getElementById('box');
console.log(box);
var w = box.style.width;
console.log(w); // 空

box.style.width = '300px';
box.style.background = 'blue';
box.style.height = '300px';

多個屬性操作

\1. 獲取： var 變數名 = 元素.style.cssText;

\2. 設定： 元素.style.cssText = '值';

值:寫的樣式，樣式的語法與css中語法一致 width:100px; font-size: 21px;

直接給style賦值, 原先寫在行內的樣式就會被覆蓋掉

var box = document.getElementById('box');
console.log(box);
// 批量操作樣式
var txt = box.style.cssText;
console.log(txt);

// 設定樣式
box.style.cssText = 'width:300px; height: 300px; font-size: 40px; color: #fff;background: black;';