JS學習筆記

JavaScript基礎

<!-- 2.內嵌式的js -->
<script>
    // alert('沙漠駱駝');
</script>

<!-- 3. 外部js script 雙標簽 -->
<script src="my.js"></script>

輸入輸出框

// 這是一個輸入框
prompt('請輸入您的年齡');
// alert 彈出警示框 輸出的 展示給用戶的
alert('計算的結果是');
// console 控制臺輸出 給程式員測驗用的  
console.log('我是程式員能看到的');

1、數字型

// 1. 八進制  0 ~ 7  我們程式里面數字前面加0 表示八進制
var num1 = 010;
// 2. 十六進制  0 ~ 9  a ~ f    #ffffff  數字的前面加 0x 表示十六進制
var num3 = 0x9;


// 3. 數字型的最大值
console.log(Number.MAX_VALUE);
// 4. 數字型的最小值
console.log(Number.MIN_VALUE);
// 5. 無窮大
console.log(Number.MAX_VALUE * 2); // Infinity 無窮大  
// 6. 無窮小
console.log(-Number.MAX_VALUE * 2); // -Infinity 無窮大
// 7. 非數字
console.log('pink老師' - 100); // NaN


// isNaN() 這個方法用來判斷非數字   并且回傳一個值 如果是數字回傳的是 false 如果不是數字回傳的是true
console.log(isNaN(12)); // false
console.log(isNaN('pink老師')); // true

獲取變數資料型別：typeof

2、型別轉換

// 1. 把數字型轉換為字串型 變數.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
// 2. 我們利用 String(變數)   
console.log(String(num));
// 3. 利用 + 拼接字串的方法實作轉換效果 隱式轉換
console.log(num + '');


// 1. parseInt(變數)  可以把 字符型的轉換為數字型 得到是整數
// console.log(parseInt(age));
console.log(parseInt('3.14')); // 3 取整
console.log(parseInt('3.94')); // 3 取整
console.log(parseInt('120px')); // 120 會去到這個px單位
console.log(parseInt('rem120px')); // NaN
// 2. parseFloat(變數) 可以把 字符型的轉換為數字型 得到是小數 浮點數
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 會去掉這個px單位
console.log(parseFloat('rem120px')); // NaN
// 3. 利用 Number(變數) 
var str = '123';
console.log(Number(str));
console.log(Number('12'));
// 4. 利用了算數運算 -  *  /  隱式轉換
console.log('12' - 0); // 12
console.log('123' - '120');
console.log('123' * 1);

3、短路運算（邏輯中斷）

// 1. 用我們的布林值參與的邏輯運算  true && false  == false 
// 2. 123 && 456  是值 或者是 運算式 參與邏輯運算？ 
// 3. 邏輯與短路運算  如果運算式1 結果為真 則回傳運算式2  如果運算式1為假 那么回傳運算式1
console.log(123 && 456); // 456
console.log(0 && 456); //  0
console.log(0 && 1 + 2 && 456 * 56789); // 0
console.log('' && 1 + 2 && 456 * 56789); // ''
// 如果有空的或者否定的為假 其余是真的  0  ''  null undefined  NaN
// 4. 邏輯或短路運算  如果運算式1 結果為真 則回傳的是運算式1 如果運算式1 結果為假 則回傳運算式2
console.log(123 || 456); // 123
console.log(123 || 456 || 456 + 123); // 123
console.log(0 || 456 || 456 + 123); // 456
// 邏輯中斷很重要 它會影響我們程式運行結果思密達
var num = 0;
console.log(123 || num++);
console.log(num); // 0

4、三元運算式

var num = 10;
var result = num > 5 ? '是的' : '不是的'; // 我們知道運算式是有回傳值的
console.log(result);
// if (num > 5) {
//     result = '是的';
// } else {
//     result = '不是的';
// }

5、陣列

創建陣列

// 利用new 創建陣列
var arr = new Array(); // 創建了一個空的陣列
// 利用陣列字面量創建陣列 []
var arr = []; // 創建了一個空的陣列

// 檢測是否為陣列
//(1) instanceof  運算子 它可以用來檢測是否為陣列
console.log(arr instanceof Array);
// (2) Array.isArray(引數);  H5新增的方法  ie9以上版本支持
console.log(Array.isArray(arr));

添加洗掉陣列

// 1. push() 在我們陣列的末尾 添加一個或者多個陣列元素   push  推
arr.push(4, 'pink');	// 添加兩個元素
// 2. unshift 在我們陣列的開頭 添加一個或者多個陣列元素
arr.unshift('red', 'purple');
// 3. pop() 它可以洗掉陣列的最后一個元素  
arr.pop();
// 4. shift() 它可以洗掉陣列的第一個元素  
arr.shift();
// 1. 翻轉陣列
arr.reverse();
// 2. 陣列排序（冒泡排序）
arr1.sort(function(a, b) {
    //  return a - b; 升序的順序排列
    return b - a; // 降序的順序排列
});

獲取陣列元素索引

// 回傳陣列元素索引號方法  indexOf(陣列元素)  作用就是回傳該陣列元素的索引號 從前面開始查找
// 它只回傳第一個滿足條件的索引號 
// 它如果在該陣列里面找不到元素，則回傳的是 -1  
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));
// 回傳陣列元素索引號方法  lastIndexOf(陣列元素)  作用就是回傳該陣列元素的索引號 從后面開始查找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); // 4

陣列轉換為字串

// 1. toString() 將我們的陣列轉換為字串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2. join(分隔符) 
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink
console.log(arr1.join('-')); // green-blue-pink

splice()

splice() 方法通過洗掉或替換現有元素或者原地添加新的元素來修改陣列,并以陣列形式回傳被修改的內容，此方法會改變原陣列，

// 從索引 2 的位置開始洗掉 0 個元素，插入“drum” 和 "guitar"
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// 從索引 3 的位置開始洗掉 1 個元素
var removed = myFish.splice(3, 1);

// 從索引 2 的位置開始洗掉 1 個元素，插入“trumpet”
var removed = myFish.splice(2, 1, "trumpet");

// 從索引 2 的位置開始洗掉所有元素
var removed = myFish.splice(2);

6、字串

根據字符回傳位置

// 字串物件  根據字符回傳位置  str.indexOf('要查找的字符', [起始的位置])
var str = '改革春風吹滿地，春天來了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春', 3)); // 從索引號是 3的位置開始往后查找

根據位置回傳字符

// 1. charAt(index) 根據位置回傳字符
var str = 'andy';
str.charAt(3);
// 2. charCodeAt(index)  回傳相應索引號的字符ASCII值 目的： 判斷用戶按下了那個鍵 
console.log(str.charCodeAt(0)); // 97
// 3. str[index] H5 新增的
console.log(str[0]); // a

字串操作方法

// 1. concat('字串1','字串2'....)  拼接字串
var str = 'andy';
console.log(str.concat('red'));

// 2. substr('截取的起始位置', '截取幾個字符');
var str1 = '改革春風吹滿地';
console.log(str1.substr(2, 2)); // 第一個2 是索引號的2 從第幾個開始  第二個2 是取幾個字符

// 3. 替換字符 replace('被替換的字符', '替換為的字符')  它只會替換第一個字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));

// 4. 字符轉換為陣列 split('分隔符')    前面我們學過 join 把陣列轉換為字串
var str2 = 'red, pink, blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));

7、函式

// 1. 利用函式關鍵字自定義函式(命名函式)
function sayHi() {
    console.log('hi~~');
}
sayHi();

// 2. 函式運算式(匿名函式)
var fun = function(aru) {
    console.log('我是函式運算式');
    console.log(aru);
}
fun('pink老師');

arguments ：里面存盤了所有傳遞過來的實參

// 利用函式冒泡排序 sort 排序
function sort(arr) {
    for (var i = 0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-i-1;j++) {
            if (arr[j] < arr[j+1]) {
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
    return arr;
}

立即執行函式

// 1.立即執行函式: 不需要呼叫，立馬能夠自己執行的函式
function fn() {
    console.log(1);
}
fn();
// 2. 寫法 也可以傳遞引數進來
// 1.(function() {})()    或者  2. (function(){}());
(function(a, b) {
    console.log(a + b);
    var num = 10;
})(1, 2); // 第二個小括號可以看做是呼叫函式
(function sum(a, b) {
    console.log(a + b);
    var num = 10; // 區域變數
}(2, 3));
// 3. 立即執行函式最大的作用就是 獨立創建了一個作用域, 里面所有的變數都是區域變數 不會有命名沖突的情況

8、物件

// 1.利用物件字面量創建物件{}
// var obj = {};	//創建了一個空的物件
var obj = {
    uname: '張三瘋',
    age: 21,
    sex: '男',
    sayHi: function() {
        console.log('hi~');
    }
}
// (1) 里面的屬性或者方法我們采取鍵值對的形式  鍵 屬性名 ： 值  屬性值 
// (2) 多個屬性或者方法中間用逗號隔開的
// (3) 方法冒號后面跟的是一個匿名函式
// 2. 使用物件
// (1). 呼叫物件的屬性 我們采取 物件名.屬性名 . 我們理解為 的
console.log(obj.uname);
// (2). 呼叫屬性還有一種方法 物件名['屬性名']
console.log(obj['age']);
// (3) 呼叫物件的方法 sayHi   物件名.方法名() 千萬別忘記添加小括號
obj.sayHi();

// 2.利用new Object 創建物件
var obj = new Object();		// 創建了一個空的物件
obj.uname = '張三瘋';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~');
}
// (1) 我們是利用 等號 = 賦值的方法 添加物件的屬性和方法
// (2) 每個屬性和方法之間用 分號結束

使用建構式

function Star(uname, age, sex) {
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang) {
        console.log(sang);
    }
}
var ldh = new Star('劉德華', 18, '男'); // 呼叫函式回傳的是一個物件
// 1. 建構式名字首字母要大寫
// 2. 我們建構式不需要return 就可以回傳結果
// 3. 我們呼叫建構式 必須使用 new
// 4. 我們只要new Star() 呼叫函式就創建一個物件 ldh  {}
// 5. 我們的屬性和方法前面必須添加 this

遍歷物件

var obj = {
    name: 'pink老師',
    age: 21,
    sex: '男',
    fn: function() {}
}
for (var k in obj) {
    console.log(k);		// k 變數 輸出  得到的是 屬性名
    console.log(obj[k]);// obj[k] 得到是 屬性值
}

###9、Math物件

// Math數學物件 不是一個建構式 ，所以我們不需要new 來呼叫 而是直接使用里面的屬性和方法即可
console.log(Math.PI); // 一個屬性 圓周率
console.log(Math.max(1, 99, 3)); // 99

// 絕對值方法
console.log(Math.abs(-1)); // 1

// 2.三個取整方法
// (1) Math.floor()   地板 向下取整  往最小了取值
console.log(Math.floor(1.1)); // 1
console.log(Math.floor(1.9)); // 1
// (2) Math.ceil()   ceil 天花板 向上取整  往最大了取值
console.log(Math.ceil(1.1)); // 2
console.log(Math.ceil(1.9)); // 2
// (3) Math.round()   四舍五入  其他數字都是四舍五入，但是 .5 特殊 它往大了取  
console.log(Math.round(1.1)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // 這個結果是 -1

亂數

// 1.Math物件亂數方法   random() 回傳一個隨機的小數  0 =< x < 1
// 2. 這個方法里面不跟引數
// 3. 代碼驗證 
console.log(Math.random());
// 4. 我們想要得到兩個數之間的隨機整數 并且 包含這2個整數
// Math.floor(Math.random() * (max - min + 1)) + min;
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));

10、Date日期物件

// Date() 日期物件  是一個建構式 必須使用new 來呼叫創建我們的日期物件
var arr = new Array(); // 創建一個陣列物件
var obj = new Object(); // 創建了一個物件實體
// 1. 使用Date  如果沒有引數 回傳當前系統的當前時間
var date = new Date();
console.log(date);
// 2. 引數常用的寫法  數字型  2019, 10, 01  或者是 字串型 '2019-10-1 8:8:8'
var date1 = new Date(2019, 10, 1);
console.log(date1); // 回傳的是 11月 不是 10月 
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);

格式化日期年月日

var date = new Date();
// 我們寫一個 2019年 5月 1日 星期三
var year = date.getFullYear();	// 回傳當前日期的年  2019
var month = date.getMonth() + 1;// 月份 回傳的月份小1個月   記得月份+1 呦
var dates = date.getDate();// 回傳的是 幾號
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();// 3  周一回傳的是 1 周六回傳的是 6 但是 周榷訓傳的是 0
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

console.log(date.getHours()); // 時
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
// 要求封裝一個函式回傳當前的時分秒 格式 08:08:08
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTimer());

常用

//2021-09-15 09:17:29
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = month < 10 ? '0' + month : month;
var dates = date.getDate();
dates = dates < 10 ? '0' + dates : dates;
var h = date.getHours();
h = h < 10 ? '0' + h : h;
var m = date.getMinutes();
m = m < 10 ? '0' + m : m;
var s = date.getSeconds();
s = s < 10 ? '0' + s : s;

console.log(year + '-' + month + '-' + dates + ' ' + h + ':' + m +':' + s)

時間戳

// 獲得Date總的毫秒數(時間戳)  不是當前時間的毫秒數 而是距離1970年1月1號過了多少毫秒數
// 1. 通過 valueOf()  getTime()
var date = new Date();
console.log(date.valueOf()); // 就是 我們現在時間 距離1970.1.1 總的毫秒數
console.log(date.getTime());
// 2. 簡單的寫法 (最常用的寫法)
var date1 = +new Date(); // +new Date()  回傳的就是總的毫秒數
console.log(date1);
// 3. H5 新增的 獲得總的毫秒數
console.log(Date.now());

倒計時效果

// 倒計時效果
// 1.核心演算法：輸入的時間減去現在的時間就是剩余的時間，即倒計時 ，但是不能拿著時分秒相減，比如 05 分減去25分，結果會是負數的，
// 2.用時間戳來做，用戶輸入時間總的毫秒數減去現在時間的總的毫秒數，得到的就是剩余時間的毫秒數，
// 3.把剩余時間總的毫秒數轉換為天、時、分、秒 （時間戳轉換為時分秒）
// 轉換公式如下： 
//  d = parseInt(總秒數/ 60/60 /24);    //  計算天數
//  h = parseInt(總秒數/ 60/60 %24)   //   計算小時
//  m = parseInt(總秒數 /60 %60 );     //   計算分數
//  s = parseInt(總秒數%60);            //   計算當前秒數
function countDown(time) {
    var nowTime = +new Date(); // 回傳的是當前時間總的毫秒數
    var inputTime = +new Date(time); // 回傳的是用戶輸入時間總的毫秒數
    var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數 
    var d = parseInt(times / 60 / 60 / 24); // 天
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); //時
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); // 分
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); // 當前的秒
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '時' + m + '分' + s + '秒';
}
console.log(countDown('2022-5-1 18:00:00'));

DOM

檔案物件模型

1、獲取節點

document.getElementById(‘id’)

// 1. 因為我們檔案頁面從上往下加載，所以先得有標簽 所以我們script寫到標簽的下面
// 2. get 獲得 element 元素 by 通過 駝峰命名法 
// 3. 引數 id是大小寫敏感的字串
// 4. 回傳的是一個元素物件
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 列印我們回傳的元素物件 更好的查看里面的屬性和方法
console.dir(timer);

document.getElementsByTagName(‘name’)

// 1.回傳的是 獲取過來元素物件的集合 以偽陣列的形式存盤的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我們想要依次列印里面的元素物件我們可以采取遍歷的方式
for (var i = 0; i < lis.length; i++) {
    console.log(lis[i]);
}
// 3. 如果頁面中只有一個li 回傳的還是偽陣列的形式 
// 4. 如果頁面中沒有這個元素 回傳的是空的偽陣列的形式
// 5. element.getElementsByTagName('標簽名'); 父元素必須是指定的單個元素
// var ol = document.getElementsByTagName('ol'); // [ol]
// console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));

document.querySelector(’#nav’);

// 1. getElementsByClassName 根據類名獲得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 回傳指定選擇器的第一個元素物件  切記 里面的選擇器需要加符號 .box  #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()回傳指定選擇器的所有元素物件集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);

獲取特殊元素

// 1.獲取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2.獲取html 元素
// var htmlEle = document.html;
var htmlEle = document.documentElement;
console.log(htmlEle);

2、事件

1.滑鼠事件

滑鼠事件	觸發條件
onclick	滑鼠點擊左鍵觸發
onmouseover	滑鼠經過觸發
onmouseout	滑鼠離開觸發
onfocus	獲得滑鼠焦點觸發
onblur	失去滑鼠焦點觸發
onmousemove	滑鼠移動觸發
onmouseup	滑鼠彈起觸發
onmousedown	滑鼠按下觸發
contextmenu	滑鼠右鍵
selectstart	選中文字

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 點擊一個按鈕，彈出對話框
        // 1. 事件是有三部分組成  事件源  事件型別  事件處理程式   我們也稱為事件三要素
        //(1) 事件源 事件被觸發的物件   誰  按鈕
        var btn = document.getElementById('btn');
        //(2) 事件型別  如何觸發 什么事件 比如滑鼠點擊(onclick) 還是滑鼠經過 還是鍵盤按下
        //(3) 事件處理程式  通過一個函式賦值的方式 完成
        btn.onclick = function() {
            alert(btn.innerText);
        }
    </script>
</body>

2.觸屏事件

觸屏touch事件	說明
touchstart	手指觸摸到一個DOM元素時觸發
touchmove	手指在一個DOM元素上滑動時觸發
touchend	手指從一個DOM元素上移開時觸發

div.addEventListener('touchstart', function(e) {
// console.log(e);
// touches 正在觸摸螢屏的所有手指的串列 
// targetTouches 正在觸摸當前DOM元素的手指串列
// 如果偵聽的是一個DOM元素，他們兩個是一樣的
// changedTouches 手指狀態發生了改變的串列 從無到有 或者 從有到無
// 因為我們一般都是觸摸元素 所以最經常使用的是 targetTouches
console.log(e.targetTouches[0]);
// targetTouches[0] 就可以得到正在觸摸dom元素的第一個手指的相關資訊比如 手指的坐標等等
});

e.preventDefault(); // 阻止螢屏滾動的默認行為

3.注冊事件的兩種方式

var btns = document.querySelectorAll('button');
// 1. 傳統方式注冊事件  唯一性
btns[0].onclick = function() {
    alert('hi');
}
btns[0].onclick = function() {
    alert('hao a u');
}
// 2. 事件偵聽注冊事件 addEventListener 
// (1) 里面的事件型別是字串 必定加引號 而且不帶on
// (2) 同一個元素 同一個事件可以添加多個偵聽器（事件處理程式）
btns[1].addEventListener('click', function() {
    alert(22);
})
btns[1].addEventListener('click', function() {
    alert(33);
})
// 3. attachEvent ie9以前的版本支持
btns[2].attachEvent('onclick', function() {
    alert(11);
})

4.洗掉事件

var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
    alert(11);
    // 1. 傳統方式洗掉事件
    divs[0].onclick = null;
}
// 2. removeEventListener 洗掉事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要呼叫加小括號

function fn() {
    alert(22);
    divs[1].removeEventListener('click', fn);
}
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);

function fn1() {
    alert(33);
    divs[2].detachEvent('onclick', fn1);
}

5.DOM事件流的三個階段

// dom 事件流 三個階段
// 1. JS 代碼中只能執行捕獲或者冒泡其中的一個階段，
// 2. onclick 和 attachEvent（ie） 只能得到冒泡階段，
// 3. 捕獲階段 如果addEventListener 第三個引數是 true 那么則處于捕獲階段  document -> html -> body -> father -> son
var son = document.querySelector('.son');
son.addEventListener('click', function() {
    alert('son');
}, true);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
    alert('father');
}, true);
// 4. 冒泡階段 如果addEventListener 第三個引數是 false 或者 省略 那么則處于冒泡階段  son -> father ->body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function() {
    alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
    alert('father');
}, false);
document.addEventListener('click', function() {
    alert('document');
})

6.事件物件

// 事件物件
var div = document.querySelector('div');
div.onclick = function(e) {
    // console.log(e);
    // console.log(window.event);
    // e = e || window.event;
    console.log(e);


}
// div.addEventListener('click', function(e) {
//         console.log(e);
//     })
// 1. event 就是一個事件物件 寫到我們偵聽函式的 小括號里面 當形參來看
// 2. 事件物件只有有了事件才會存在，它是系統給我們自動創建的，不需要我們傳遞引數
// 3. 事件物件 是 我們事件的一系列相關資料的集合 跟事件相關的 比如滑鼠點擊里面就包含了滑鼠的相關資訊，滑鼠坐標啊，如果是鍵盤事件里面就包含的鍵盤事件的資訊 比如 判斷用戶按下了那個鍵
// 4. 這個事件物件我們可以自己命名 比如 event 、 evt、 e
// 5. 事件物件也有兼容性問題 ie678 通過 window.event 兼容性的寫法  e = e || window.event;


e.target 回傳的是觸發事件的物件（元素）  this 回傳的是系結事件的物件（元素）
區別 ： e.target 點擊了那個元素，就回傳那個元素 this 那個元素系結了這個點擊事件，那么就回傳誰

7.事件物件阻止默認行為

// 2. 阻止默認行為（事件） 讓鏈接不跳轉 或者讓提交按鈕不提交
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
    e.preventDefault(); //  dom 標準寫法
})
// 3. 傳統的注冊方式
a.onclick = function(e) {
    // 普通瀏覽器 e.preventDefault();  方法
    // e.preventDefault();
    // 低版本瀏覽器 ie678  returnValue  屬性
    // e.returnValue;
    // 我們可以利用return false 也能阻止默認行為 沒有兼容性問題 特點： return 后面的代碼不執行了， 而且只限于傳統的注冊方式
    return false;
    alert(11);
}

8.阻止事件冒泡

// 常見事件物件的屬性和方法
// 阻止冒泡  dom 推薦的標準 stopPropagation() 
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
    alert('son');
    e.stopPropagation(); // stop 停止  Propagation 傳播
    e.cancelBubble = true; // 非標準 cancel 取消 bubble 泡泡
}, false);

var father = document.querySelector('.father');
father.addEventListener('click', function() {
    alert('father');
}, false);
document.addEventListener('click', function() {
    alert('document');
})

9.事件委托

<body>
    <ul>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
        <li>知否知否，點我應有彈框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：給父節點添加偵聽器， 利用事件冒泡影響每一個子節點
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，點我應有彈框在手！');
            // e.target 這個可以得到我們點擊的物件
            e.target.style.backgroundColor = 'pink';


        })
    </script>
</body>

10.禁用右鍵和選中文字

// 1. contextmenu 我們可以禁用右鍵選單
document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
})
// 2. 禁止選中文字 selectstart
document.addEventListener('selectstart', function(e) {
    e.preventDefault();
})

11.滑鼠事件物件 X和Y坐標獲取

// 滑鼠事件物件 MouseEvent
document.addEventListener('click', function(e) {
    // 1. client 滑鼠在可視區的x和y坐標
    console.log(e.clientX);
    console.log(e.clientY);
    console.log('---------------------');

    // 2. page 滑鼠在頁面檔案的x和y坐標
    console.log(e.pageX);
    console.log(e.pageY);
    console.log('---------------------');

    // 3. screen 滑鼠在電腦螢屏的x和y坐標
    console.log(e.screenX);
    console.log(e.screenY);
})

12.常用的鍵盤事件

// 常用的鍵盤事件
//1. keyup 按鍵彈起的時候觸發 
// document.onkeyup = function() {
//         console.log('我彈起了');

//     }
document.addEventListener('keyup', function() {
    console.log('我彈起了');
})

//3. keypress 按鍵按下的時候觸發  不能識別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keypress', function() {
    console.log('我按下了press');
})
//2. keydown 按鍵按下的時候觸發  能識別功能鍵 比如 ctrl shift 左右箭頭啊
document.addEventListener('keydown', function() {
    console.log('我按下了down');
})
// 4. 三個事件的執行順序  keydown -- keypress -- keyup

13.鍵盤事件物件之keyCode屬性

// 鍵盤事件物件中的keyCode屬性可以得到相應鍵的ASCII碼值
// 1. 我們的keyup 和keydown事件不區分字母大小寫  a 和 A 得到的都是65
// 2. 我們的keypress 事件 區分字母大小寫  a  97 和 A 得到的是65
document.addEventListener('keyup', function(e) {
    // console.log(e);
    console.log('up:' + e.keyCode);
    // 我們可以利用keycode回傳的ASCII碼值來判斷用戶按下了那個鍵
    if (e.keyCode === 65) {
        alert('您按下的a鍵');
    } else {
        alert('您沒有按下a鍵')
    }

})
document.addEventListener('keypress', function(e) {
    // console.log(e);
    console.log('press:' + e.keyCode);

})

3、操作元素

1.innerText和innerHTML的區別

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        // innerText 和 innerHTML的區別 
        // 1. innerText 不識別html標簽 非標準  去除空格和換行
        var div = document.querySelector('div');
        // div.innerText = '<strong>今天是：</strong> 2019';
        // 2. innerHTML 識別html標簽 W3C標準 保留空格和換行的
        div.innerHTML = '<strong>今天是：</strong> 2019';
        // 這兩個屬性是可讀寫的  可以獲取元素里面的內容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

2.修改元素屬性

<body>
    <button id="ldh">劉德華</button>
    <button id="zxy">張學友</button> <br>
    <img src="images/ldh.jpg" alt="" title="劉德華">

    <script>
        // 修改元素屬性  src
        // 1. 獲取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 注冊事件  處理程式
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg';
            img.title = '張學友思密達';
        }
        ldh.onclick = function() {
            img.src = 'images/ldh.jpg';
            img.title = '劉德華';
        }
    </script>
</body>

3.表單屬性設定

<body>
    <button>按鈕</button>
    <input type="text" value="輸入內容">
    <script>
        // 1. 獲取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        console.log(btn.innerHTML);
        // 2. 注冊事件 處理程式
        btn.onclick = function() {
            // input.innerHTML = '點擊了';  這個是 普通盒子 比如 div 標簽里面的內容
            // 表單里面的值 文字內容是通過 value 來修改的
            input.value = '被點擊了';
            // 如果想要某個表單被禁用 不能再點擊 disabled  我們想要這個按鈕 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函式的呼叫者 btn
        }
    </script>
</body>

4.修改樣式屬性

<body>
    <div class="box">
        淘寶二維碼
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 獲取元素
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2. 注冊事件 處理程式
        btn.onclick = function() {
            // div.style里面的屬性 采取駝峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
            box.style.display = 'none';
        }
    </script>
</body>

5.通過className更改元素樣式

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 獲得修改元素樣式  如果樣式比較少 或者 功能簡單的情況下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 讓我們當前元素的類名改為了 change

            // 2. 我們可以通過 修改元素的className更改元素的樣式 適合于樣式較多或者功能復雜的情況
            // 3. 如果想要保留原先的類名，我們可以這么做 多類名選擇器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

6.classList 回傳元素的類名

<body>
    <div class="one two"></div>
    <button> 開關燈</button>
    <script>
        // classList 回傳元素的類名
        var div = document.querySelector('div');
        // console.log(div.classList[1]); //two
        // 1. 添加類名  是在后面追加類名不會覆寫以前的類名 注意前面不需要加.
        div.classList.add('three');
        // 2. 洗掉類名
        div.classList.remove('one');
        // 3. 切換類  沒有就加上，有就洗掉
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            document.body.classList.toggle('bg');
        })
    </script>
</body>

7.三種創建元素方式區別

// window.onload = function() {     //當整個頁面加載完了再呼叫
//         document.write('<div>123</div>');
//     }
// 三種創建元素方式區別 
// 1. document.write() 創建元素  如果頁面檔案流加載完畢，再呼叫這句話會導致頁面重繪
// var btn = document.querySelector('button');
// btn.onclick = function() {
//     document.write('<div>123</div>');
// }

// 2. innerHTML 創建元素  創建多個元素效率更高（不要拼接字串，采用陣列的形式拼接），結構稍微復查
var inner = document.querySelector('.inner');
// for (var i = 0; i <= 100; i++) {
//     inner.innerHTML += '<a href="#">百度</a>'
// }
var arr = [];
for (var i = 0; i <= 100; i++) {
    arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3. document.createElement() 創建元素   創建多個元素效率稍低一點點，但結構更清晰
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
    var a = document.createElement('a');
    create.appendChild(a);
}

4、自定義屬性操作

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 獲取元素的屬性值
        // (1) element.屬性
        console.log(div.id);
        //(2) element.getAttribute('屬性')  get得到獲取 attribute 屬性的意思 我們程式員自己添加的屬性我們稱為自定義屬性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 設定元素屬性值
        // (1) element.屬性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('屬性', '值');  主要針對于自定義屬性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  這里面寫的就是class 不是className
        // 3 移除屬性 removeAttribute(屬性)    
        div.removeAttribute('index');
    </script>
</body>

H5自定義屬性

<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的獲取自定義屬性的方法 它只能獲取data-開頭的
        // dataset 是一個集合里面存放了所有以data開頭的自定義屬性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定義屬性里面有多個-鏈接的單詞，我們獲取的時候采取 駝峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>

5、節點

var box = document.querySelector('.box');
console.dir(box);

1.父節點 parentNode

得到的是離元素最近的父級節點(親爸爸) 如果找不到父節點就回傳為 null

console.log(element.parentNode);

2.子節點 childNodes

// DOM 提供的方法（API）獲取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子節點  childNodes 所有的子節點 包含 元素節點 文本節點等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 獲取所有的子元素節點 也是我們實際開發常用的
console.log(ul.children);


var ol = document.querySelector('ol');
// 1. firstChild 第一個子節點 不管是文本節點還是元素節點
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 回傳第一個子元素節點 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 實際開發的寫法  既沒有兼容性問題又回傳第一個子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);

3.兄弟節點

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一個兄弟節點 包含元素節點或者 文本節點等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一個兄弟元素節點
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>
</body>

4.創建和添加節點

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 創建節點元素節點
        var li = document.createElement('li');
        // 2. 添加節點 node.appendChild(child)  node 父級  child 是子級 后面追加元素  類似于陣列中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加節點 node.insertBefore(child, 指定元素);  插入指定元素之前
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我們想要頁面添加一個新的元素 ： 1. 創建元素 2. 添加元素
    </script>
</body>

5.洗掉節點

<body>
    <button>洗掉</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光頭強</li>
    </ul>
    <script>
        // 1.獲取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 洗掉元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 點擊按鈕依次洗掉里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;       //按鈕禁用
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

6.克隆節點

<body>
    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括號為慷訓者里面是false 淺拷貝 只復制標簽不復制里面的內容
        // 2. node.cloneNode(true); 括號為true 深拷貝 復制標簽復制里面的內容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>

BOM

瀏覽器物件模型 window

window：BOM頂級物件

	window常見事件
onload	等頁面內容全部加載完畢，再去執行處理函式
onresize	調整視窗大小時呼叫
window.onload	當整個頁面加載完了再呼叫
scroll	視窗滾動

window.scroll(0, 0);

定時器

// 1. setTimeout 
// 語法規范：  window.setTimeout(呼叫函式, 延時時間);
// 1. 這個window在呼叫的時候可以省略
// 2. 這個延時時間單位是毫秒 但是可以省略，如果省略默認的是0
// 3. 這個呼叫函式可以直接寫函式 還可以寫 函式名 還有一個寫法 '函式名()'
// 4. 頁面中可能有很多的定時器，我們經常給定時器加識別符號 （名字)
// setTimeout(function() {
//     console.log('時間到了');

// }, 2000);
function callback() {
    console.log('爆炸了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000); // 我們不提倡這個寫法


// 清除定時器
clearTimeout(timer);

// 1. setInterval 
// 語法規范：  window.setInterval(呼叫函式, 延時時間);
setInterval(function() {
    console.log('繼續輸出');
}, 1000);
// 2. setTimeout  延時時間到了，就去呼叫這個回呼函式，只呼叫一次 就結束了這個定時器
// 3. setInterval  每隔這個延時時間，就去呼叫這個回呼函式，會呼叫很多次，重復呼叫這個函式


// 清除定時器
clearInterval(timer);

location常見的方法

//http://127.0.0.1:5500/java-script-master/index(1).html?uname=aaa
console.log(location.search); // ?uname=andy
// 1.先去掉？  substr('起始的位置'，截取幾個字符);
var params = location.search.substr(1); // uname=andy
console.log(params);
// 2. 利用=把字串分割為陣列 split('=');
var arr = params.split('=');
console.log(arr); // ["uname", "ANDY"]
var div = document.querySelector('div');
// 3.把資料寫入div中
div.innerHTML = arr[1] + '歡迎您';

// 記錄瀏覽歷史，所以可以實作后退功能
location.assign('http://www.itcast.cn');
// 不記錄瀏覽歷史，所以不可以實作后退功能
location.replace('http://www.itcast.cn');
//重新加載頁面
location.reload(true);

history物件

// 前進
history.forward();
history.go(1);

// 后退
history.back();
history.go(-1);

offset 系列屬性

// offset 系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移 位置 回傳的不帶單位的數值  
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以帶有定位的父親為準  如果么有父親或者父親沒有定位 則以 body 為準
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小 寬度和高度 是包含padding + border + width 
console.log(w.offsetWidth);
console.log(w.offsetHeight);
// 3. 回傳帶有定位的父親 否則回傳的是body
console.log(son.offsetParent); // 回傳帶有定位的父親 否則回傳的是body
console.log(son.parentNode); // 回傳父親 是最近一級的父親 親爸爸 不管父親有沒有定位


window.pageYOffset 頁面被卷去的頭部

offset與style的區別

? offset可以得到任意樣式表中的樣式

? offset系列獲得的數值是沒有單位的

? offsetWidth包含padding+border +width

? offsetWidth等屬性是只讀屬性，只能獲取不能賦值

? 所以，我們想要獲取元素大小位置，用offset更合適

? style只能得到行內樣式表中的樣式值

? style.width獲得的是帶有單位的字串

? style.width獲得不包含padding和border的值

? style.width是可讀寫屬性，可以獲取也可以賦值

? 所以，我們想要給元素更改值，則需要用style改變

client系列

// client 寬度 和我們offsetWidth 最大的區別就是 不包含邊框
var div = document.querySelector('div');
console.log(div.clientWidth);

scroll系列

<body>
    <div>
        我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容 我是內容
    </div>
    <script>
        // scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        // scroll滾動事件當我們滾動條發生變化會觸發的事件
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);

        })
    </script>
</body>

常見插件

輪播圖效果js插件：https://www.swiper.com.cn/

superslide：http://www.superslide2.com/

iscroll：https://github.com/cubiq/iscroll

本地存盤

window.sessionStorage

1、生命周期為關閉瀏覽器視窗

2、在同一個視窗（頁面）下資料可以共享

3、以鍵值對的形式存盤使用

sessionStorage.setItem('uname', val);
sessionStorage.getItem('uname');
sessionStorage.removeItem('uname');
// 清除所有的
sessionStorage.clear();

window.localStorage

1、生命周期為永久生效，除非手動洗掉，否則關閉頁面也會存在

2、可以多視窗（頁面）共享（同一瀏覽器可以共享）