Day1
一、什么是JS？
基於對象和事件驅動的客戶端腳本語言
二、哪一年?哪個公司?誰?第一個名字是什么?
1995，NetScape(網景公司)，布蘭登(Brendan Eich)，liveScript
三、W3C第一個標准？
ECMA-262
四、JS包含哪幾個部分？
ECMA 、BOM 、DOM
五.如何引入JS？
三種，與引入CSS相似，
內聯樣式，外部樣式，內部樣式。
六.JS中有哪些輸出方式?區別是什么?
alert(); 以警告框的方式輸出,中斷后面代碼的執行
document.write();輸出在頁面中,它是影響頁面布局
console.log();在控制台輸出,不影響用戶體驗,是程序常用的排序工具,它是輸出對象的詳細信息
七、JS中如何換行？
如果是純JS代碼中換行 \n （alert(); ）
如果是在頁面中換行 <br> （document.write()）
八.JS中有哪些數據類型?
基本數據類型: Number/String/Boolean/Null/Undefined/Symbol
復合數據類型：Object
九.標識符的命名規則:
1.包含字母/數字/下划線/$/中文
2.不能以數字開頭
3.不能是關鍵字/保留字
4.語義化
5.駝峰命名
1>大駝峰: ZhongHuaRenMingGongHeGuo 常用於類(構造函數名)
2>小駝峰: zhongHuaRenMingGongHeGuo
6.匈牙利命名法:
整數(int) iNum
小數(float) fNum
布爾(boolean) boo
數組(array) arr
函數(function) fn
正則 re
十. 什么是變量?
是在內存中開辟一塊空間,這塊空間用於存儲數據,且數據隨程序會發生改變.
1. 如何聲明變量?
顯式聲明: var iNum = 3;
隱式聲明: iNum = 3;
2. 如何給變量賦值?
初始化
先聲明后賦值
十一.運算符
1.遞增遞減運算符 ++ --
i++ == i; ++i == i + 1；
2. 算術運算符 * / % + -
3 * "3"(9) "3" * "3"(9) 3 * null(0) 3 * "3a"(NaN) 3 * undefined(NaN) 3 * true(3) 3 * false(0)
3 / 2(1.5) 3 / '2'(1.5) 3 / '3a'(NaN) 0 / 3(0) 3 / 0(Infinity) 0 / 0(NaN)
8 % 3(2) 3 % 8(3) 2 % 8(2)
3 + 3(6) 3 + '3' = '33'("33") 3 + null(3)
3.關系運算符 > < >= <= == != === !==
3 >= 3(true) 3 > "2"(true) "100" > "2"(false)逐位比較 '我' > '你'(true)(Unicode編碼比較)
//切記
null == 0 (false)
null == "" (false)
null == false (false)
null == undefined (true)
null === undefined (false)
4.邏輯運算符
!
&& (如果左邊表達式的值為true,則返回右邊表達式的值;如果左邊表達式的值為false,則返回左邊表達式的值,此時,發生短路)
|| (如果左邊表達式的值為true,發生短路,返回左邊表達式的值,如果左邊表達式的值為false,返回右邊表達式的值)
!1(false) !-1(false) !0(true) !""(true) !NaN(true) !undefined(true)
3 > 2 && 4 (4)
3 - 3 && 4 (0)
3 > 2 || 4 (true)
3 - 3 || 4 (4)
5. 三元(三目)運算符 表達式 ? 表達式1 : 表達式2
如果表達式成立，執行表達式1，不成立執行表達式二
6. 特殊運算符： new(創建對象) typeof instanceof
typeof 1 "number"
typeof typeof 1 "string"
var a = new Object;
console.log(a instanceof Object); //true;
typeof一般只能返回如下幾個結果：number,boolean,string,function,object,undefined。
instanceof判斷是不是某種數據類型
var a = Symbol();console.log(typeof a); //symbol
7. 賦值運算符
簡單賦值 : =
復合算術賦值: += -= *= /= %=(取運算符左邊變量中的值與運算符右邊表達式的值進行相應的算術運算,再將結果賦值給左邊的變量)
var a = 3;
a *= 3 + 1; //12
十二.JS內置函數(數據類型的轉換)
1. parseInt()
2. parseFloat()
3. Number()
4. isNaN() 判斷是否是NaN，是就返回true,否則返回false;
5. eval() :解析字符串,將字符串解析為表達式並返回表達式的值
Day2
一.程序控制的三大結構?
順序結構/選擇結構/循環結構
二.實現選擇結構語句有哪些?
1. 三元 ?:
2. if
1> if(){}
2> if(){}else{}
3> if(){}else if(){}……
3. switch
Day3
一.什么是循環?
滿足一定條件，（重復）執行一段相同代碼塊。
二.循環思想(循環三要素)?
1、從哪里開始 2、到哪里結束 3、步長
三.實現循環語句?
1. while
格式 :
表達式1;
while(表達式2){
語句組;
表達式3;
}
2. do while
格式 :
表達式1;
do{
語句組;
表達式3;
}while(表達式2);
3.for循環
for(表達式1;表達式2;表達式3){
語句組;
}
表達式1;
for(;表達式2;表達式3){
語句組;
}
表達式1;
for(;表達式2;){
語句組;
表達式3;
}
四.實現無限循環(死循環) : 讓條件永遠為真
while(2){}
do while(1)
for(;1;){}
五.break
break :
1.用於switch,終止switch語句
2.用於循環,終止一層循環
continue :
用於循環,終止一次循環
六.循環嵌套
Day4
一.什么是函數
對於需要反復使用的功能代碼，將其封裝成一個獨立的模塊，這種功能代碼塊叫函數。
功能：將代碼組織為可利用的單位，可以完成特定的任務並返回數據
二.函數的好處?
可以在同一個程序或其他程序中多次重復使用（通過函數名調用）。
三.如何定義函數?
1.語句定義法
function 函數名([參數]){
語句組;
}
2.表達式定義法
var 函數名 = function([參數]){
語句組;
}
四.如何調用函數?
1.一般調用 : 函數名([參數])
2.遞歸調用 : 自身內部調用自己
3.事件調用
4.計時器調用
五.函數的參數
1.什么是形參?
定義函數時,所傳遞的參數
2.什么是實參?
調用函數時,所傳遞的參數
六.函數的返回值 return
return 后可不跟參數，遇到return函數就停止了。
七.作用域
/*
* 進入作用域，啟動解析器
* 一、預解析：尋找一些東西?var function 參數
* a = undefined
* fn = function fn(){ alert(4);}
* 二、逐行解讀代碼:
* 1.表達式
* a = 3;
*/
alert(a); //undefined
var a = 3;
function fn(){
alert(4);
}
alert(a); //3
/*
* 進入作用域，啟動解析器
* 一、預解析：尋找一些東西?var function 參數
* a = 3
* 二、逐行解讀代碼:
* 1.表達式
* 2.函數調用
*/
alert(a);//function a(){ alert(4);}
var a = 1;
alert(a); //1
function a(){
alert(2);
}
//a();
alert(a); //1
var a = 3;
alert(a); //3
function a(){
alert(4);
}
alert(a); //3
<script type="text/javascript">
/*
* 進入作用域，啟動解析器
* 一、預解析：尋找一些東西?var function 參數
* fn = function fn(){...}
* a = 3
* 二、逐行解讀代碼:
* 1.表達式
* 2.函數調用
*
*
*/
function fn(){
alert('hehe');
}
// alert(a); // a is not defined
</script>
<script type="text/javascript">
var a = 3;
fn();//hehe
</script>
/*
* 進入作用域，啟動解析器
* 一、預解析：尋找一些東西?var function 參數
* a = 3
* fn = function (){...}
* 二、逐行解讀代碼:
* 1.表達式
* 2.函數調用(進入函數作用域)
* 一、預解析 ：找var function 參數
* a = 4
* 二、逐行解讀代碼
* 1.表達式
* 2.函數調用
*/
alert(a); //undefined
var a = 3;
alert(a); //3
function fn(){
alert(a); //undefined
var a = 4;
alert(a); //4
}
fn();
alert(a); //3
/*
* 進入作用域，啟動解析器
* 一、預解析：尋找一些東西?var function 參數
* a = 3
* fn = function (){...}
* 二、逐行解讀代碼:
* 1.表達式
* 2.函數調用(進入函數作用域)
* 一、預解析 ：找var function 參數
* a = 4
* 二、逐行解讀代碼
* 1.表達式
* 2.函數調用
*/
alert(a); //undefined
var a = 3;
alert(a); //3
function fn(a){ //a = 3
alert(a); //3
var a = 4;
alert(a); //4
}
fn(a);
alert(a); //3
/* 作用域鏈
* 進入作用域，啟動解析器
* 一、預解析：尋找一些東西?var function 參數
* a = 4
* fn = function (){...}
* 二、逐行解讀代碼:
* 1.表達式
* 2.函數調用(進入函數作用域)
* 一、預解析 ：找var function 參數
*
* 二、逐行解讀代碼
* 1.表達式
* 2.函數調用
*/
alert(a); //undefined
var a = 3;
alert(a); //3
function fn(){
alert(a); //3
a = 4;
alert(a); //4
}
fn();
alert(a); //4
/* 作用域鏈
* 進入作用域，啟動解析器
* 一、預解析：尋找一些東西?var function 參數
* fn = function (){...}
* a = 4
* 二、逐行解讀代碼:
* 1.表達式
* 2.函數調用(進入函數作用域)
* 一、預解析 ：找var function 參數
*
* 二、逐行解讀代碼
* 1.表達式
* 2.函數調用
*/
function fn(){
a = 4;
alert(a); //4
}
fn();
alert(a); //4
Day5
一.遞歸函數
1.本質:實現了循環
function fic(n){
if(n == 1){
return 1;
}else{
return n * fic(n - 1);
}
}
alert(fic(5));
二.面向對象
物質(對象)：一切具有本質特征和行為的事物。
1.如何創建對象? 字面量(json)
var obj = {
name : '張志林',
age : 18
}
2.new Object()
3.構造函數
4.如何訪問對象中的屬性和方法?
對象.屬性 對象.方法()
對象['屬性'] 對象['方法']()
Day六
一.什么是數組?
存儲一組或一系列數據容器.
二.數組好處?
為了解決大量相關數據的存儲和使用的問題。
三.下標
從0開始。
四.如何定義數組?
1.字面量(json)
var arr = [];
2.構造函數的方式
var arr1 = new Array();
五.屬性: length : 長度
六.方法: 增,刪,改,截,拼,復,排,轉
1.增
前增: unshift()
返回值:增加后數組的長度
影響: 是
后增: push()
返回值:增加后數組的長度
影響: 是
2.刪
前刪: shift()
返回值:被刪除的元素
影響: 是
后刪: pop()
返回值:被刪除的元素
影響: 是
3.改
splice(start,length,增加的元素,……);
返回值: 被刪除的元素數組
影響: 是
4.截
slice(start,end)
返回值: 截取到的新數組
影響: 否
var arr = [1,2,3,4,5,6];
console.log(arr.slice(-5,-2)); //2,3,4 //數組循環了
5.拼
concat()
返回值:拼接后的新數組
影響:否
6.復
復制克隆，好幾種方法。
其中三種如下，ECMA5還有三種
var arr = [1,2,3,4];
var list = arr;
list[0] = 9;
console.log(arr,list);
var list = [];
for(var i = 0,len = arr.length;i < len;i ++){
一、 list[i] = arr[i];
// list.push(arr[i]);
}
二、 list = arr.slice(0);
三、 list = arr.concat();
ECMA5的復制數組
var arr = [1,2,3,4,5];
var list = [];
1、 arr.forEach(function(value){
list.push(value);
})
2、 var list1 = arr.map(function(value){
return value;
})
3、 var list2 = arr.filter(function(value){
return value;
})
console.log(arr,list,list1,list2);
7.排
1.reverse()倒序
2.sort()按照字符編碼的順序進行排序
sort(function(a,b){return a - b;})從小到大按數字排
sort(function(a,b){return b - a;})從大到小按數字排
返回值: 返回排序后的數組
影響: 是
8.轉
1.toString() :將數組轉為字符串,用逗號隔開
將十進制整數轉為其它進制
2.join()
返回值:返回字符串
影響: 否
數組方法例題：
var arr = [3];
//有且僅有一個正整數作為參數時，表示數組長度，負數或小數報錯，其它情況表示數組中的元素。
// var list = new Array(3,3);
// console.log(arr[0]);
// console.log(list[0]);
// var arr = [1,2,3,4,5,6];
// console.log(arr.slice(-5,-2)); //2,3,4
// console.log(arr.slice(5,1)); //[] //空數組
// var arr = [1,2,3,4,5,6];
// arr.push(['a','b','c']); //[1,2,3,4,5,6,['a','b','c']];
//// console.log(arr.length);
// var list = arr.concat(['a','b','c']); //[1,2,3,4,5,6,'a','b','c'];
// console.log(list);
var arr = [1,2,3,4];
// var list = arr;
// list[0] = 9;
// console.log(arr,list); //[9,2,3,4] //[9,2,3,4] //地址相同，共用一個數組，改變一個都改變了
// 數組復制
// var list = [];
// for(var i = 0,len = arr.length;i < len;i ++){
// list[i] = arr[i];
//// list.push(arr[i]);
// }
// list = arr.slice(0);
// list = arr.concat();
// 數組排序
// var arr = [5,2,100,3,6];
// console.log(arr.sort(function(a,b){return a - b}));
// console.log(arr.sort(function(a,b){return b - a}));
// console.log(typeof arr.toString());
// var num = 300;
// console.log(num.toString(2)); //二進制
// console.log(num.toString(8)); //八進制
// console.log(num.toString(16));//十六進制
// 獲取（min，max）的隨機數
// function fnRand(min,max){
// return Math.floor(Math.random() * (max - min + 1) + min);
// }
// alert(fnRand(0,0xffffff).toString(7));
七.冒泡排序/選擇排序
冒泡排序
從大到小：
function mao(arr){
for(var i = 1;i < arr.length;i ++){
for(var j = 0;j < arr.length - i;j ++){
if(arr[j] < arr[j + 1]){
var t = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = t;
}
}
}
return arr;
}
從小到大：
function mao1(arr){
for(var i = 1;i < arr.length;i ++){
for(var j = arr.length - 1;j >= i;j --){
if(arr[j] < arr[j - 1]){
var t = arr[j];
arr[j] = arr[j - 1];
arr[j - 1] = t;
}
}
}
return arr;
}
選擇排序
從小到大：
function xuan1(arr){
for(var i = 0;i < arr.length - 1;i ++){
for(var j = i + 1;j < arr.length;j ++){
if(arr[j] < arr[i]){
var t = arr[j];
arr[j] = arr[i];
arr[i] = t;
}
}
}
return arr;
}
數組去重
方法一、 function norepeat(arr){
var list = [];
for(var i = 0,len = arr.length;i < len;i ++){
if(list.indexOf(arr[i]) == -1){
list.push(arr[i]);
}
}
return list;
}
// alert(norepeat([2,3,3,2,4,3,2]));
//方法二、 alert([...new Set([2,3,3,2,4,3,2])]);
八.堆/棧(值傳遞與引用傳遞)
Day7
一.ES5擴展方法
1.嚴格模式
想在哪個作用域下，使用嚴格模式，在哪個作用域下，寫下面這句話。
"use strict"
2.數組擴展方法
1> indexOf()
2> lastIndexOf()
3> forEach(function(value,index,array){})
4> map(function(value,index,array){return ...})
5> reduce(function(pre,next,index,array){return ....})
6> filter(function(value,index,array){return ...})
例題
var arr = [1,2,3,4,5];
var list = [];
1、 arr.forEach(function(value){
list.push(value);
})
2、 var list1 = arr.map(function(value){
return value;
})
3、 var list2 = arr.filter(function(value){
return value;
})
console.log(arr,list,list1,list2);
//數組復制的三種方法
二.String
1.如何定義字符串?
var str = "";
var str1 = new String();
2.屬性: length
3.方法: 查/替/截/轉
查: indexOf()
lastIndexOf()
charAt()
charCodeAt()
String.fromCharCode()
替: replace()
將字符串中的一些字符替換為另外一些字符串。
返回一個替換后的新字符串，不會改變原字符串。
截: substring(start,end)
slice(start,end)
substr(start,length)
擴展：substr(start,length):從指定的位置開始截取指定長度的字符串。
轉:
toUppercase()
toLowercase()
split()
var str = "how do you do";
var subStr = str.substr(4,2);
alert(subStr); //do
var sub = str.substring(5,1);
alert(sub); //ow d
三.中文范圍
GB2312
GB18030
4e00-9fa5
輸出所有漢字：
var str = '';
for(var i = 19968;i <= 40869;i ++){
str += String.fromCharCode(i) + ' ';
}
document.write(str);
Day8
一.Math
Math.PI
Math.abs()
Math.round()
Math.floor()
Math.ceil()
Math.max()
Math.max.apply(null,[])
Math.min.apply(null,數組名)
Math.random() 0 <= n < 1
Math.random() * (最大值 - 最小值 + 1) + 最小值
Math.pow()
Math.sqrt()
console.log(Math.round(-3.5));//-3
console.log(Math.round(-3.5000001));//-4
console.log(Math.max.apply(null,[1,2,3,4,5]));//5
console.log(Math.min.apply(null,[1,2,3,4,5]));//1
Math.random() * (5 + 1) + 5 //5-10的隨機數
二.Date
1.如何創建日期對象
new Date()
new Date(year,month,date)
new Date(year,month,date,hour,minute,second)
2.獲取
getFullYear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
getTime() 獲取時間戳
toLocaleString()
toLocaleDateString()
toLocaleTimeString()
2.設置set
<script type="text/javascript">
var date = new Date();
console.log(date.toLocaleString());
console.log(date.toLocaleDateString());
console.log(date.toLocaleTimeString());
</script>
Day9
一.BOM
1.頂級對象(宿主對象) window
2.哪些子對象?
window
graph TB
window-->document
window-->history
window-->location
window-->frames
window-->screen
window-->navigator
document history location frames screen navigator
3.如何跳轉頁面?
window.location
location.href
4.如何獲取操作系統和瀏覽器的信息
navigator.userAgent
5.方法
alert()
confirm()
prompt()
6.計時器
setTimeout()
setInterval()
二.DOM
1.如何獲取頁面元素?
1> document.getElementById('id名');
2> document.getElementsByTagName('標簽名');
3> document.getElementsByClassName('類名');
4> document.getElementsByName('name名');
5> document.querySelector('選擇器');
6> document.querySelectorAll('選擇器');
7> document.documentElement 獲得html節點
8> document.body 獲得 body節點
2.如何創建元素節點?
document.createElement()
3.如何創建文本節點?
document.createTextNode()
4.如何追加節點到頁面?
appendChild()
5.如何修改節點 ?
replaceChild(new,old)
6.如何克隆節點?
cloneNode()
7.如何刪除節點?
removeChild()
8.常見節點對象有哪些?
元素節點 屬性節點 文本節點
nodeName: 標簽名 屬性名 #text
nodeType: 1 2 3
nodeValue: null 屬性值 文本內容
Day10
DOM
一.設置或訪問元素節點中的屬性(自定義屬性)
1.獲取自定義屬性 getAttribute()
2.設置自定義屬性 setAttribute()
3.刪除屬性 removeAttribute()
二.outerHTML/innerHTML/textHTML
三.childNodes/children
1.去除空白文本節點
function removeSpace(node){
var childs = node.childNodes;
for(var i = 0;i < childs.length;i ++){
if(childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)){
node.removeChild(childs[i]);
}
}
return node;
}
四.高級選項
parentNode : 父節點
previousSibling : 前一個兄弟節點
nextSibling : 后一個兄弟節點
firstChild: 第一個子節點
lastChild : 最后一個子節點
parentElementNode
previousElementSibling
nextElementSibling
firstElementChild
lastElementChild
五.插入
insertBefore(新節點,指定的舊節點)
Day11
一.什么是事件對象?
當一個對象觸發了所綁定的事件，所發生的一切詳細信息都將保存在一個臨時的地方，這個地方就叫做事件對象(相當於飛機上的黑匣子)。
二.如何獲取事件對象?
1.ie : window.event
2.標准瀏覽器 : 給事件處理函數傳遞的第一個參數
3.兼容: 形參 || window.event
三.如何獲取鼠標的編碼值? event.button
1.標准瀏覽器 : 0 1 2
2.IE : 1 4 2
鼠標按鈕兼容:
function getButton(evt){
var e = evt || window.event;
if(evt){
return e.button;
}else if(window.event){
switch(e.button){
case 1 : return 0;
case 4 : return 1;
case 2 : return 2;
}
}
}
四.如何獲取鼠標的各種坐標值?
1.相對坐標值 : event.offsetX/event.offsetY
2.可視區坐標值: event.clientX/event.clientY
3.絕對坐標值 : event.pageX/event.pageY
滑動輪高度 scrollTop = document.documentElement.scrollTop || document.body.scrollTop
頁面高度 event.pageY = event.clentY + scrollTop
document.onscroll = function(evt){
var e = evt || window.event;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
}
4.屏幕坐標值: event.screenX/event.screenY
var oDiv = document.querySelector('#box');
oDiv.onclick = function(evt){
var e = evt || window.event;
console.log("offsetX:" + e.offsetX + '\noffsetY:' + e.offsetY);
console.log("clientX:" + e.clientX + '\nclientY:' + e.clientY);
console.log("pageX:" + e.pageX + '\npageY:' + e.pageY);
console.log("screenX:" + e.screenX + '\nscreenY:' + e.screenY);
}
一.clientX/clientY屬性介紹
鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,
即是以瀏覽器滑動條此刻的滑動到的位置為參考點,不隨滑動條移動 而變化.
二.offsetX/offsetY屬性介紹
鼠標點擊位置相對於點擊(鼠標所在對象區域)的坐標位置
三.pageX/pageY屬性介紹
鼠標在頁面上的位置,從頁面左上角開始,
即是以頁面為參考點,隨滑動條移動而變化
四.擴展：screenX和screenY屬性
鼠標點擊位置到windows屏幕窗口的坐標位置
五.事件流(事件捕獲——事件目標——事件冒泡)
兼容阻止冒泡
document.getElementById("btn").onclick = function(evt){
evt = evt || window.event;
alert(this.nodeName);
// evt.stopPropagation();//IE不兼容
// evt.cancelBubble = true;//IE
evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
}
六.鍵盤事件
onkeydown/onkeyup keyCode
onkeypress
event.keyCode || event.charCode || event.which
Day12
一.如何阻止事件的默認行為?
1.右鍵菜單 : oncontextmenu return false
2.超鏈接:
event.preventDefault? event.preventDefault() : event.returnValue = false
var oA = document.getElementById("aa");
oA.onclick = function(evt){
evt = evt || window.event;
evt.preventDefault();
evt.returnValue = false;
}
3.拖拽 : ondragstart return false
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
img{
width: 100px;
height: 100px;
position: absolute;
left :150px;
}
</style>
</head>
<body style="height: 5000px;">
<div id="box">
</div>
<img src="img/1.jpg" id="img1"/>
<script type="text/javascript">
drag('box');
drag('img1')
function drag(id){
var ele = document.getElementById(id);
ele.onmousedown = function(evt){
var e = evt || window.event;
var disX = e.offsetX;
var disY = e.offsetY;
document.onmousemove = function(evt){
var e = evt || window.event;
ele.style.left = e.pageX - disX + 'px';
ele.style.top = e.pageY - disY + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
}
//去掉拖拽的默認行為
document.ondragstart = function(){
return false;
}
}
}
</script>
</body>
二.添加事件監聽器
function addEventListener(obj,event,fn,boo){
if(obj.addEventListener){
obj.addEventListener(event,fn,boo);
}else{
obj.attachEvent('on' + event,fn);
}
}
三.移除事件監聽 器
function removeEventListener(obj,event,fn,boo){
if(obj.removeEventListener){
obj.removeEventListener(event,fn,boo);
}else{
obj.detachEvent('on' + event,fn);
}
}
四.事件委托/事件代理
1.事件委托的優點:提高性能
2.原理 : 事件冒泡
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<h2>hhhh222</h2>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul')[0];
oUl.onmouseover = function(evt){
var e = evt || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toUpperCase() === 'LI'){
target.style.background = 'red';
}
}
</script>
</body>
五.事件
onclick
ondblclick
onmousedown
onmouseup
onmouseover : 移入事件
onmouseout :移出事件
onmouseenter : 移入事件(默認阻止事件冒泡)
onmouseleave : 移出事件(默認阻止事件冒泡)
onmousemove
onkeydown
onkeyup
onkeypress
onload
onblur
onfocus
onchange
onscroll
onresize
oncontextmenu
ondragstart
onsubmit
六.拖拽
七. offset
offsetWidth : width + padding + border
offsetHeight : height + padding + border
offsetLeft : 相對於父節點的left值
offsetTop : 相對於父節點的top值
Day13
一.什么是cookie?
存儲在瀏覽器的文檔
在本地的客戶端的磁盤上以很小的文件 形式保存數據。
二.如何創建cookie?
document.cookie = "key=value;[expires=日期對象;path='/']"
三.cookie的特點:
1.一個cookie的大小不超過4KB
2.一個域中的cookie數量在50條左右
3.cookie存在一定的風險
Day14
一.什么是正則表達式?
匹配字符的一組規則
二.如何定義正則表達式?
1. /正則表達式/標志位
2. new RegExp("正則表達式",'標志位')
3.元字符 : 三三二三個一
三: {} [] ()
X{} : 表示括號前的一個或一組字符連續出現的次數.
X{m} : 表示括號前的一個或一組字符連續出現m次.
X{m,} : 表示括號前的一個或一組字符連續出現m至無限次.
X{m,n} : 表示括號前的一個或一組字符連續出現m至n次.
[] : 表示范圍 (可以把正則的符號放進[]中解析為字符);
[\u4e00-\u9fa5]
() : 表示組
三: * + ?
X* : {0,}
表示*前的一個或一組字符連續出現0至無限次.
X+ : {1,}
表示+前的一個或一組字符連續出現1至無限次.
X? : {0,1}
表示?前的一個或一組字符連續出現0至1次.
二 : ^ $
^ : 用於正則的開頭 : 表示定頭
用於[]的開頭: 表示取反 [^0-9]
$ : 表示定尾
三個一: . | \
. : 表示模糊匹配任意一個字符
| : 表示或者
\ : 轉義符 (將正則的符號放在\后,解析為字符串);
\d : 數字
\D : 非數字
\s : 空白符
\S : 非空白符
\w : 字母數字下划線
\W : 非字母數字下划線
\b : 表示邊界
三.標志位
g : 表示全局
i : 不區別大小寫
四.正則的方法
1.test() 返回boolean
2.exec() :返回數組 null
五.字符串的方法
1.match() :返回數組 null
2.search() : 返回下標值, -1
3.replace()
六.exec與match的區別
exec是正則調用,參數是字符串
match是字符串調用,參數是正則表達式
<script type="text/javascript">
var str = 'how do you do';
var re = /o/;
console.log(re.exec(str));
console.log(str.match(re));
/*
[o]
[o]
*/
var str = 'how do you do';
var re = /o/g;
console.log(re.exec(str));
console.log(str.match(re));
/*
[o]
[o,o,o,o]
*/
//全局匹配時,exec無效
var str = 'how do you do';
var re = /(o).*(o)/;
console.log(re.exec(str));
console.log(str.match(re));
/*
[ "ow do you do", "o", "o" ]
[ "ow do you do", "o", "o" ]
*/
//()有幾個就代表有幾個相應的匹配個數，整體也是一個
var str = 'how do you do';
var re = /(o).*(o)/g;
console.log(re.exec(str));
console.log(str.match(re));
/*
Array(3) [ "ow do you do", "o", "o" ]
Array [ "ow do you do" ]
*/
Day15
一.ES6
1. bind()/call()/apply()
bind() : 返回一個函數
call()/apply() :返回一個對象
2. JSON : 網絡數據傳輸格式
JSON是一種基於文本的數據交換方式，或者叫做數據描述格式。
JSON的優點：
- 基於純文本，跨平台傳遞極其簡單
- JS原生支持，后台語言幾乎全部支持
- 輕量級數據格式，占用字符數量極少，特別適合互聯網傳遞
- 可讀性較強，雖然比不上XML那么一目了然，但在合理的依次縮進之后還是很容易識別的
- 容易編寫和解析，當然前提是你要知道數據結構
1.[]
2. {"key" : "value","key" : "value"}
//原生對象 : {key : 'value',"key" : "value",key : "value"}
【注】
JSON 的健和值必須加雙引號，數字可不加，不可加單引號。
一個JSON中只能有一個JSON數據。[ ]
可以在[ ] 中寫多個 { }。
3. JSON.parse()/JSON.stringify() IE8以下不兼容
JSON.parse() : 將json字符串轉為json對象
JSON.stringify() :將json對象轉為json字符串
var str = '{"name" : "張志林","age" : 18}';
//轉為json對象
//eval() : 存在風險
// var json = eval('(' + str + ')');
// console.log(json.name);
var json = JSON.parse(str);
json.address = "青島";
//轉為json字符串
str = JSON.stringify(json);
console.log(str);
4.let/const
1> let聲明的變量不能做變量提升
2> 同一個作用域中不能重復聲明一個變量
3> let聲明,會產生塊級作用域
注: for循環有兩個作用域,for循環本身是一個塊級作用域,for循環的{}又是for循環的子級作用域
4> let聲明的全局變量不再是window的屬性
const 好處: 一改全改
【注】const
使用const命名是為了當有大量重復常量時，方便修改
常量要求全大寫，
當常量是數組時，可以修改數組的元素，地址不可修改。
5.變量的解構賦值
[] // 返回一個數組
可以直接對應賦值;
++交換變量的值[x, y] = [y, x];++
上面代碼交換變量x和y的值，這樣的寫法不僅簡潔，而且易讀，語義非常清晰。
{} // 返回一個對象
++從函數返回多個值,傳參可不按順序++
函數只能返回一個值，如果要返回多個值，只能將它們放在數組或對象里返回。有了解構賦值，取出這些值就非常方便。
alert(a);
// var a = 3;
//// alert(b);
// let b = 4;
// var a = 5;
// var a = 6;
// b = 8;
// {
// let a = 3;
//
// }
// alert(a);
// for(let i = 1;i < 5;i ++,console.log(i)){
// let i = 8;
// console.log(i);
// }
// const G = 10;
// const ARR = [1,2,3,4];
// ARR[0] = 10;
// console.log(ARR[0]);
// let a = 3;
// alert(window.a);
// let b = 3 * G;
// let [a,b,c] = [1,2,3];
// let [q,[w,[e],r],t] = [1,[2,[3],4],5];////不寫的話顯示,undefined
// [a,b] = [b,a];
// console.log(a,b,c);
// let {a,b=9,c} = {c : 8,a : 2};
// console.log(a,b,c);
function fn({a = 1,b = 2,c = 3}){
return [a,b,c];
}
let [x,y,z] = fn({a : 3,c : 5,b : 4});
console.log(x,y,z);
6.字符串的擴展方法
1> includes() :
判斷子串是否在父串中包含,如果有,返回true,沒有,返回false
2> startsWith():
判斷子串是否在父串的開頭部分,如果在,返回true,不在,返回false
3> endsWith() : 判斷子串是否在父串的結尾部分,如果在,返回true,不在,返回false
4> repeat() :
重復字符串
注: 如果<= -1 報錯
如果是小數 : 自動取整
如果是字符串:自動轉為數字,如果轉不了數字的,轉為NaN,NaN按0算
var str = "how do you do";
console.log(str.includes('do',str.length));
console.log(str.startsWith('do',4));
console.log(str.endsWith('do',5));
7.生成器函數:解決異步產生的問題
異步:同時進行
同步:執行完一個,再執行一個
//生成器函數
*指針函數,按照指針一步一步執行,每次要點一次 fn().next()
function * fn(){
yield setTimeout(()=>{
alert('1');
},3000);
yield setTimeout(()=>{
alert('2');
},2000);
yield setTimeout(()=>{
alert('3');
},1000);
}
var me = fn();
console.log(me.next())
8.箭頭函數 =>
++唯一好處: this自動指向所在函數外部的對象++
var fn = ()=>{
// var a = 3;
// var b = 3;
// return a + b;
// }
// alert(fn());
// var fn1 = (a,b)=>a + b;
// alert(fn1(3,4));
document.onclick = function(){
//alert(this);
// var that = this;
setTimeout(()=>{
alert(this);
},5000)
}
9.set
1>自動去重
let set = new Set([1,2,1,2,3,2,1,1,4]);//構造一個新的set
console.log(set.size);//獲取集合長度
console.log([...set]);//轉成數組
2>添加元素
set.add('a');
3>刪除元素
set.delete(1);
4>判斷是否包含某個元素
console.log(set.has(2));
5>清空整個set
// console.log(set.clear());
// console.log(set);
6>遍歷
//keys
//values
//entries
//forEach()
for(let key of set.keys()){
console.log(key);
}
for(let key of set.values()){
console.log(key);
}
for(let [key,value] of set.entries()){
console.log(key,value);
}
set.forEach(function(value,key,set){
console.log(key +'=>' + value);
})
10.
數組
set
原生 對象
map
// var a = {x : 2},b = {x : 3},c = {};
// alert(a);
// c[a] = 7;// '[object Object]'
// c[b] = 8; //'[object Object]'
// console.log(c);
// var obj = {};
// obj[[]] = 3;
// obj[[]] = 4;
// console.log(obj);
//原生對象：所有key默認都會自動 轉為字符串
//map {name : '張三',[] : '1',[] : '2'}
let map = new Map([
[1,2],
[[],3],
[[],4],
[{},5],
[{},6],
['a',7]
]);
// console.log(map);
// alert([] == []);
// console.log(map.size);
//1.添加元素
map.set('b',8).set('c',9);
//2.訪問元素
// console.log(map.get('b'));
//3.刪除元素
// console.log(map.delete('b'));
// console.log(map.delete([]));
//4.清除map中所有的元素
// map.clear();
//5.判斷是否包含某個key的value
// console.log(map.has('c'));
// console.log(map);
//6.遍歷map
//keys
//values
//entries
//forEach()
for(let key of map.keys()){
console.log(key);
}
for(let value of map.values()){
console.log(value);
}
for(let [key,value] of map.entries()){
console.log(key,value);
}
map.forEach(function(value,key,map){
console.log(key,value);
})
11.Symbol : 保證變量中的值是唯一的.
var str1 = Symbol('hello');
var str2 = Symbol('hello');
// console.log(str1 == str2);
// console.log(typeof str1);
var obj = {};
obj[str1] = 1;
obj[str2] = 2;
console.log(obj);
12.class extends
// Father
/* function Father(name,age){
this.name = name;
this.age = age;
this.showName = function(){
return this.name;
}
} */
/*
* 對象（物質）：一切具有本質特征和行為的事物。
* 類 ： 具有相同屬性和方法的一類對象
* 屬性 ： 本質特征
* 方法 ： 行為
* 屬性與變量
* 方法與函數
*/
class Father{
//默認的方法
//構造器
constructor(name,age){
//屬性
this.name = name;
this.age = age;
}
showName(){
return this.name;
}
showAge(){
return this.age;
}
}
class Son extends Father{
constructor(name,age){
//調用父類的構造器方法
super(name,age); //超類，基類，父類
}
}
var son = new Son('張三',18);
console.log(son.name);
console.log(son.showName());
class例子,拖拽
html頁面
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 5000px;
}
#fa{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#so{
width: 100px;
height: 100px;
background: green;
position: absolute;
left: 130px;
}
</style>
</head>
<body>
<div id="fa">
父類：無邊界拖拽
</div>
<div id="so">
子類：有邊界拖拽
</div>
<script type="text/javascript" src="js/drag.js" ></script>
<script type="text/javascript" src="js/Subdrag.js" ></script>
<script type="text/javascript">
new Drag('fa');
new Subdrag('so');
</script>
</body>
</html>
父類
class Drag{
constructor(id){
this.ele = document.getElementById(id);
this.ele.onmousedown = function(evt){
this.fnDown(evt);
}.bind(this);
}
fnDown(evt){
var e = evt || window.event;
this.disX = e.offsetX;
this.disY = e.offsetY;
document.onmousemove = (evt)=>{
this.fnMove(evt);
}
document.onmouseup = this.fnUp;
}
fnMove(evt){
let e = evt || window.event;
this.ele.style.left = e.pageX - this.disX + 'px';
this.ele.style.top = e.pageY - this.disY + 'px';
}
fnUp(){
document.onmousemove = null;
}
}
子類
class Subdrag extends Drag{
constructor(id){
super(id);
}
fnMove(evt){
let e = evt || window.event;
let left = e.pageX - this.disX;
let top = e.pageY - this.disY;
//設置邊界
if(left <= 0){
left = 0;
}else if(left >= document.documentElement.clientWidth - this.ele.offsetWidth){
left = document.documentElement.clientWidth - this.ele.offsetWidth;
}
if(top <= 0){
top= 0;
}else if(top >= document.documentElement.clientHeight - this.ele.offsetHeight){
top = document.documentElement.clientHeight - this.ele.offsetHeight;
}
this.ele.style.left = left + 'px';
this.ele.style.top = top + 'px';
}
}