編寫JS流程:javascript
一、 佈局:HTML和CSSjava
二、 樣式:修改頁面元素樣式,div的display樣式數組
三、 事件:肯定用戶作什麼操做,onclick(鼠標點擊事件)、onmouseover(鼠標懸停)、onmouseout(鼠標移出)閉包
四、 編寫JS:在事件中,用JS來修改頁面元素樣式函數
五、 原理:響應用戶的操做,對頁面元素進行樣式修改佈局
第二章:post
Javascript基礎:spa
JS代碼的引入:firefox
外部鏈入式:對象
<script type=」text/javascript」 src=」js文件路徑」></script>
內部js:
<script>js代碼</script>
數據類型:
var a=12;
數值類型number
alert(typeof a);
字符串string
a="hello";
alert(typeof a);
布爾類型boolean
a=true;
alert(typeof a);
函數類型function
a=function(){};
alert(typeof a);
對象object
a=document;
alert(typeof a);
沒有定義的類型undefined
alert(typeof a);
- 變量名的命名規則:不以數字開頭大小寫字母、數字、下劃線命名;(區分大小寫);經常使用命名規則:駝峯命名法,首字母小寫後面單詞首字母大寫開頭;如:getDingShiQi
- 變量的轉換:
parseInt(值); 將一個值轉換爲Int數據類型
parseFloat(值); 將一個值轉換爲float數據類型
隱式轉換:
Var a=5, b=」5」, c=」2」;
先轉換類型,再比較:
a==b;
不轉換類型,直接比較
a===b;
不轉換類型,+爲鏈接符
a+b;
先轉換類型,再進行運算,+爲運算符
a+b;
- 變量的做用域:
一、 全局變量:位於函數體外部的變量,全部函數都可調用與賦值;
二、 局部變量:位於函數體中的變量,僅僅爲其所在函數體中使用,其餘函數定義相同的變量名不會衝突;
- 閉包:子函數能夠使用父函數裏定義的函數
- 求餘運算符:% var a=34; var c = a%10; c爲4;
- 判斷語句 Switch 語句:
語法:
switch(值或者變量)
{
case 值:
語句塊;
break;
case 值:
語句塊;
break;
default:
語句塊;
}
判斷switch括號裏面的值與case的值是否相等、相等則執行case 裏的語句塊,遇到break;則結束,不然繼續執行下面的其餘case裏面的語句塊直至遇到break; 跳出。若判斷case裏面沒有相符合的,則執行default 下的語句塊,這裏的default至關於else
- break,continue的區別: 通常在循環體中使用這兩;break;跳出所有循環;continue; 跳出本次循環
- 真假:爲boolean數據類型;
一、 非0的數字爲真,0爲假;
二、 非空字符串爲真,空字符串爲假;
三、 非空對象爲真,空對象爲假;
四、 Undefined爲假;
- 可變參arguments 調用函數時傳遞多個參數造成一個arguments數組;能夠直接用下標調用
它,如arguments[0];
- 提取非行間樣式[只能用id的方式]:currentStyle爲ie裏面的
語法:document.getElementById("div1").currentStyle.width;
getComputedStyle 爲firefox裏面的
語法:window.getComputedStyle(oBj,null).width;
- 數組基礎:
聲明一個數組:var Arr = new Array();
聲明並初始化:var Arr = [1,2,3,4,5];
Arr.push(); 在數組尾部添加一個或者多個元素,並返回一個新的長度;
Arr.pop(); 在數組尾部刪除並返回最後一個元素;
Arr.unshift(); 在數組頭部添加一個或者多個元素,並返回一個新的長度;
Arr.shift(); 在數組頭部刪除並返回第一個元素;
Arr.sort(); 對數組進行排序;按照默認順序排序;
Arr.join(「,」); 在數組原有元素間插入元素」,」
Arr.concat(Brr); 鏈接Arr和Brr數組返回新的數組
第三章:
定時器:var 定時器名=setInterval(tick, 1000); 設置定時器,每隔1000毫秒調用tick函數構建圖片的src屬性值
Var 定時器名=setTimeout(tick, 1000); 設置定時器,隔1000毫秒調用tick函數構建圖片的src屬性值
清除定時器:
clearTimeout(定時器名);
clearInterval(定時器名);
第四章:
offsetLeft(); 語法:oBj.offsetLeft(); 返回當前元素距離父元素左邊緣的距離;
第五章:
InnerHTML 語法:oBj.innerHTML; innerHTML具備雙向功能,經過它能夠獲取標籤元素內容與設置標籤元素內容;
- 子節點和父節點:
childNodes獲取子節點 childNodes返回的是子節點的集合,是一個數組的格式。他會把換行和空格也當成是節點信息。childNodes.length獲取長度
利用children來獲取子元素是最方便的,他也會返回出一個數組。對其獲取子元素的訪問只需按數組的訪問形式便可。
firstChild來獲取第一個子元素
使用firstElementChild來獲取第一個子元素的時候,會獲取到父元素第一個子元素的節點 這樣就能直接顯示出來文本信息了。他並不會匹配換行和空格信息。
parentNode獲取父節點
parentElement和parentNode同樣,只是parentElement是ie的標準。
offsetParent獲取全部父節點
其實這個是於位置有關的上下級 ,直接可以獲取到全部父親節點, 這個對應的值是body下的全部節點信息。