Javascript複習大綱重點難點詳細總結

第一課時

何爲js特效：
1.定義時間（觸發時機+行爲）
2.觸發事件（行爲發生）
3.事件發生具有重複性
————————————————————————————
面向對象編程：（js是一門基於對象的語言）
1.如何獲得該對象
2.如何調用該對象的屬性
3.如何調用該對象的方法
————————————————————————————
對象的組成部分：
1.屬性（特性）
2.方法（行爲）
————————————————————————————
js標籤放置位置（執行順序）
1.內聯
2.內部
3.外部
_______________________________________________________
定義變量：
var str = '小金'
________________________________________________________
輸出變量：
alert("my name is "+str)
document.write("my name is "+str);
__________________________________________________________
js註釋
1.//單行註釋
2./*     */多行註釋
_____________________________________________________________
js變量類型
1.字符串   var a = '小金'
2.整型    var a = 100 進行數值運算
3.浮點    var a = 100 .1  (小數)
4.布爾    true 和false
5.數組    ps = new Array('小金','小帥','小明','小蘇')
    ps = ['小金','小帥','小明','小蘇']
6.對象    js對象：
        obj = new Object();
        obj.username = 'user1';
        obj.say  =function(){
             alert(1);    
        }
    和dom對象:
        eleobj = document;
7.json對象     
        jsonObj = {
             'username':'user1',
              'age':'20',
              'sex':'nan',
              'say':function(){
                  alert(1);
            },
        }
8.NaN    （not a number）str = '10abs'
                             num = Number(str)         
9.null  :空。無值   str = null(下文可能會用到的變量)
10.undefined  變量未定義
____________________________________________________________________
定義函數：
1.傳統定義方法
    function say(){
        alert(1);
    }
2.匿名定義方法
    say = function(){
        alert(1);
    }
___________________________________________________
調用函數
say();
——————————————————————————————
變量作用域：
1.全局變量
變量定義時前面如果沒有var則全部都是全局變量
2.局部變量
只有在函數內部前面帶var的變量爲局部變量，局部變量只能在函數體內使用
——————————————————————————————————————

第二課時

變量類型測試：
1.typeof();    
//typeof()可判斷的類型：
        1.string
        2.number
        3.boolean
        4.object
        5.undefined
2.arr instanceof Array;可以測試數組類型
        arr = [1,2,3];
        alert(arr instanceof Array);   //true
______________________________________________________________
頂級全局方法
typeof();   //
parseInt();  //強制轉整型
parseFloat();  //強制轉浮點型  '10px'---->'10'
Number();  //將字符轉換爲數字
String();  //將整型轉字符串
Boolean();  //轉布爾值true 1    false 0

eval（）執行字符春表達式
    b='a=1+1';
    eval(b);
    alert(a);//2
__________________________________________________________________
js中前面的對象不用寫的兩種情況：
1.Global對象（js內部對象）
typeof();   
parseInt();  
parseFloat();  
Number(); 
String(); 
Boolean();
eval（）
2.window對象（瀏覽器提供的對象）
alert();
______________________________________________________________________
變量類型轉換
1.整型轉字符串
1）String();
2） num+'';
2.字符串轉整型
1）parseInt();
2）Number();
3.所有類型-->布爾類型
1）v = ' ';
     b = Boolean(v);
2）v = ' ';
     b = !!v;
4.所有類型-->布爾類型（爲假的情況）
1）字符串（‘’）
2）整型（0）
3）浮點型（0.0）
4）null
5）NaN
6）undefined
5.json字符串轉json對象
v = "{'username':'user1','age':'20'}";
obj = eval('('+v+')');
alert(obj);
_______________________________________________________________________
變量運算符：
1.+-*/
2.in：
1）判斷一個屬性是否在對象身上
        v = "{'username':'user1','age':'20'}";
        alert('username' in obj);//true
2）判斷數組中的下標在不在數組上
        arr = ['a',''b,'c'];
        alert(2 in arr);//false  2爲下標  （0,1,2）
3.instanceof  ：檢查某個對象是否由某個構造函數產生的
4.delete:刪除變量
   v = 'abc';
   delete v;
   alert(v);//報錯，v被刪除；   但delete不能刪除局部變量
——————————————————————————————————
js語法
1.ifElse語句
2.switch語句
3.while循環
4.for循環
5.forIn遍歷（針對於json）
———————————————————————————————————
消息框：
1.彈出框alert()
2.確認框confirm('你確認刪除嗎')
3.提示框promp('請輸入圖片的名字')

第三課時

js內置對象
1.數學對象
屬性：Math.PI;//圓周率
方法：Math.ceil();//上一個整數（入）
         Math.floor();//下一個整數
         Math.round();//四捨五入
         Math.random();//隨機數（0-1之間的一個小數）
         Math.max(1,100,2);//100
         Math.min(1,100,2);//1
—————————————————————————————
2.日期對象
1）生成對象
dobj = new Date();
2）方法
year = dobj.getFullYear();
month = dobj.getMonth();
day= dobj.getDate();
hour= dobj.getHours();
minute= dobj.getMinutes();
second= dobj.getSeconds();

str = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
alert(str);//獲取年月日時分秒
_____________________________________________________________________
3.定時器（週期性）
1）定義
var timer = null;
timer = setInterval(func,1000);
2）清除
oBtn.onclick = function(){
    clearInterval(timer);
}
————————————————————————————————————
4.超時器（一次性任務）
1）定義
timer = setTimeout(func,1000);
2）清除
clearTimeout(timer);
_________________________________________________________________
5.字符串
1)屬性：
length
2)方法:
str = 'linux';

indexOf('n');              //2檢索某一個字符在大字符串裏的位置   下標
lastIndexOf();            //檢索最後一個字符的位置
substr(0,5);              //字符串截取  (1,3) 從1位置截取3個
slice(start,end);        //（1,3）從1開始截取到3，不包含最後一個   -1爲最後一個
split(reg);                 //('.')以.分割開，字符串分割成數組
search(reg);              //檢查字符串在文中的位置（正則）
search(reg|正則表達式)       //字符串差債           i忽略大小寫
match(reg|正則表達式);//把字符串中的所有reg都匹配出來         g全部都顯示出來
replace(reg|正則表達式,"str");                //替換  把reg替換爲str

split也支持正則分割
截取文件中的目錄部分代碼：
str = '/web/home/index.php'
pos = str.lastIndexOf('/');
dir = str.substr(0,pos);
alert(dir);                            //目錄web/home
file = str.substr(pos+1);
alert(file);                            //文件名index.php

pos1 = str.lastIndexOf('.');
file1 = str.substr(pos1+1);
alert(file1);                           //後綴 php

str = '2019-2+18'
str.split('-|+');                       //正則以-或+分割成數組   2019,2,18
函數返回值：
return val；
function(){
     return val;
}

字符串轉大寫：str.toUpperCase();

字符串轉小寫：str.toLowerCase();
———————————————————————————————————————
6.數組
1）屬性：
length
2）方法：
join("/");   //把一個數組用/連起來成一個字符串
pop()        //把數組最後一個值彈出，並改變原數組
push()      //從數組從最後插入一個值，並改變原數組
shift()       //把數組最前面彈出一個值，並改變原數組
unshift()   //從數組從最前插入一個值，並改變原數組
reverse()   //反轉原數組，不改變原數組
contact()   //連接兩個數組
    arr = ['1','2']
    arr1 = ['3','4']
    arr2 = arr.contact(arr1);     
    alert(arr2);      //1,2,3,4
slice(start,end)    //從哪開始，到哪結束，但不包括最後一個

sort(show)   //排序
show(a,b){
   return a-b;  //升序asc 
   return b-a;  //降序desc
}
splice()           //從哪開始，到哪結束，但不包括最後一個

————————————————————————————
運算符
1）數學運算符：
+-*/%
2）比較運算符：
>, <,==,!=,>=,<=
3）邏輯運算符
&&，||，！與（兩邊都爲真則爲真）或（一邊爲真則爲真）非
——————————————————————————
正則表達式
騰訊課堂視頻：https://ke.qq.com/webcourse/index.html#cid=190052&term_id=100225123&taid=1065242083911268&vid=a1416r5u6qe

js對象：
1.js內置對象
2.js時間對象
3.BOM瀏覽器對象
4.DOM文檔對象

第四課時

js特效：
1.觸發事件
2.屬性改變
3.樣式改變
————————————————————————————————
綁定事件：
1.標籤身上
2.js代碼中
————————————————————————————————
鼠標事件：
onclick
ondblclick         //雙擊
onmouseenter    //鼠標移入
onmouseleave     //鼠標移除
onmousemove     //鼠標移動
——————————————————————————————————
鍵盤事件：
onkeydown
onkeyup
onkeypress
_________________________________________________________
獲取的3個高度
1.有效的高  屏幕可視的高
document.documentElement.clientHeight
2.屏幕的總高度
document.documentElement.scrollHeight
3.滾動的高度
document.documentElement.scrollTop
document.body.scrollTop(chrome)
___________________________________________________________
表單事件：
onfocus     //獲得焦點時觸發的事件
onblur       //鼠標移開，失去焦點
onchange   //當表單元素的值發生改變
onselect     //選中表單元素的時候執行
onsubmit   //當表單提交的時候
    obj.onsubmit = function(){
        r = confirm('你確認提交表單嗎？');
        if(!r){
            return false;
        }
onreset       //當表單重置的時候
    obj.onreset  = function(){
        r = confirm('你確認清除表單數據嗎？');
        if(!r){
            return false;
        }

小例子onkeyup實現預覽效果
________________________________________________________
其他事件：
onload      //網頁是否加載完畢，圖片是否加載完畢
onerror     //當圖片加載失敗的時候

onresize    //當瀏覽器的大小發生改變的時候

onscroll     //當滾動條滑動的時候

<--瀏覽器回到頂點
區分瀏覽器內核
-->

function isChrome(){
    nu = navigator.userAgent;
    if(nu.match(/chrome/i)){
        return true;
    }else{
        return false;
    }
}//封裝函數是否是谷歌瀏覽器


window.onscroll = function(){
    if(isChrome()){
         st = document.body.scrollTop;//谷歌
         document.title = st;
    }else{
         st = document.documentElement.scrollTop;//谷歌
          document.title = st;
    }
}


<a name="abc">
    <img src="1.jpg">
</a>
錨點：含有名字屬性的a連接叫錨點
<a name='top'></a>      #top錨點回到頂部兼容性最高

網頁加載：
1.標籤加載完畢  js代碼放body後邊
2.窗口加載完畢（圖片）window.onload = function(){}

position3個定位置
1.absolute
2.relative
3.fixed
position4個定位
1.左上角(top,left)
2.右上角(top,right)
3.左下角(bottom,left)
4.右下角(bottom,right)
_____________________________________________________________________________

事件方法：（事實上每一個事件對應一個方法）
1.select()
2.blur()
3.focus()
4.click()
5.submit()
6.reset()

<!DOCTYPE html>
<html>
<head>
	<title>表單事件</title>
</head>
<body>
	<form action="">
		<p>用戶名：</p>
		<p><input type="text" value="xiaoming" id="tid"></p>
		<p><input type="submit" value="ok"></p>
	</form>
</body>
<script type="text/javascript">
	oTid = document.getElementById('tid');

	oTid.onfocus = function () {
		this.select();//1.表單內元素被選中
	}
	oTid.onkeydown = function (event) {
		kc = event.keyCode;
		document.title = kc;
		if(kc==32){
			this.blur();
		}//2.鼠標移開失去焦點
	}
	oTid.focus();//3.直接獲取焦點
</script>
</html>

————————————————————————————————————————————
如何阻止表單默認行爲
1.<a href=""></a>
return false;
<a href="javascript:;"></a>
2.<input type="submit">
return false;

第五課時

BOM定義（browser Object Model）瀏覽器對象模型：
1.window對象
屬性：
frames  //窗口數組
opener  //打開我的那個窗口
top        //頂級窗口
方法:
alert();
confirm();
prompt();
setInterval();
clearInterval();
setTimeout();
clearTimeout();
____________________________________________________________
2.navigator瀏覽器特性
屬性：useragent

<!DOCTYPE html>
<html>
<head>
	<title>檢查瀏覽器內核</title>
</head>
<body>

</body>
<script type="text/javascript">
	nav = navigator.userAgent;
	ntype = nav.match(/chrome|firefox|trident/i);
	switch(ntype[0]){
		case 'Chrome':
			document.body.style.background = '#f00';
			break;
		case 'Firefox':
			document.body.style.background = '#0f0';
			break;
		case 'Trident':
			document.body.style.background = '#00f';
			break;
	}
</script>
</html>

3.screen屏幕對象
4.history對象
5.location地址欄
 

DOM(document object model) 文檔對象模型

1.document
2.document.documentElement
3.document.head
4.document.title
5.document.body

——————————————————————————————————
獲取元素對象方法：
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByNamed()

————————————————————————————————————
元素對象標準屬性：（應該有的屬性）
<form action="" method=""></form>
1.obj.id
2.obj.className
3.obj.style
4.obj.title

——————————————————————————————
元素對象非標準屬性：
<form action="" method="" age="5" sex="nv" index="3"></form>
,其中age,sex,和index是非標準屬性
1.obj.getAttribute('age');
2.obj.setAttribute('age','50');

——————————————————————————————————
元素對象js屬性
1.obj.tagName         //獲取標籤名
2.obj.innerHTML      //獲取標籤所有的內容
3.obj.outerHTML      //獲取標籤全部內容
4.obj.textContent      //獲取標籤名所有的文本內容，標籤除外

————————————————————————————————————————
直接獲取dom元素對象集合：
1.document.links;       //集合
2.document.images;
3.document.forms;
4.document.anchors;   //錨點
5.tableObj.rows;
6.tableRowObj.cols;
7.selectObj.options;