js編寫流程、數據類型、變數的命名、變數應用、數組、定時器、子節點和父節點、、、、 ...
第一章:
編寫JS流程:
1、 佈局:HTML和CSS
2、 樣式:修改頁面元素樣式,div的display樣式
3、 事件:確定用戶做什麼操作,onclick(滑鼠點擊事件)、onmouseover(滑鼠懸停)、onmouseout(滑鼠移出)
4、 編寫JS:在事件中,用JS來修改頁面元素樣式
5、 原理:響應用戶的操作,對頁面元素進行樣式修改
第二章:
Javascript基礎:
JS代碼的引入:
外部鏈入式:
<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;
- 變數的作用域:
1、 全局變數:位於函數體外部的變數,所有函數均可調用與賦值;
2、 局部變數:位於函數體中的變數,僅僅為其所在函數體中使用,其他函數定義相同的變數名不會衝突;
- 閉包:子函數可以使用父函數里定義的函數
- 求餘運算符:% 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數據類型;
1、 非0的數字為真,0為假;
2、 非空字元串為真,空字元串為假;
3、 非空對象為真,空對象為假;
4、 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下的所有節點信息。
歡迎來指正與提問。