• CSS的概述：層疊樣式表.
  • 修飾HTML的頁面.使頁面與樣式分離.
• CSS的語法：
  • 選擇器{屬性名:屬性值;屬性名:屬性值;...}
• CSS的引入方式：
  • 行內樣式：在html元素上使用style屬性設置
  • 內部樣式：在html中使用<style></style>進行設置
  • 外部樣式：定義一個css文件,在html中引入該文件.<link href=”” type=”” rel=””/>
• CSS的選擇器：(****)
  • 元素選擇器:
  • ID選擇器：
  • 類選擇器：
  • 後代選擇器：
  • 子元素選擇器：
• CSS的樣式：
  • 文本
  • 背景
  • 字體
  • 列表
• CSS的盒子模型：
  • 內邊距：padding
  • 邊框：border
  • 外邊距：margin
• CSS的懸浮和定位：
  • 懸浮：float屬性設置懸浮.
  • 清除懸浮：clear屬性清除.
  • 定位：position屬性設置定位.
    • 使用left和top屬性控制位置.
  • display屬性：控制元素的顯示方式：
    • block--顯示的, none--隱藏的,inline--顯示到一行.
      
      JS:
• JS的概述：JavaScript運行在瀏覽器端腳本語言.
• JS的歷史：由網景公司研發的.由ECMA組織統一標準:ECMAScript.
• JS的組成：ECMAScript，BOM，DOM.
• JS的語法：
  • JS的變量聲明:
  • JS的數據類型：
    • 原始類型：undefined,boolean,string,number,null
    • 引用類型：
  • JS的運算符：
    • 與java中基本一致.有一個 === 類型與值都相同的情況下才會為true.
  • JS的語句：
    • 與Java中的語句一致.
• 簡單的表單校驗：
  • 正則的校驗：使用String的match方法和正則中的test方法.

1.2 案例一：使用JS完成圖片的輪播的效果：1.2.1 需求：

• 設置定時的方法
  
• 清除定時的方法
  
  1.2.2.2 步驟分析：
  【步驟一】創建一個HTML文件
  【步驟二】當頁面加載的時候開始計時.使用onload事件.
  【步驟三】編寫onload事件觸發的函數.
  【步驟四】獲得操作圖片的控制權.
  【步驟五】修改圖片的src的屬性.
  1.2.3 代碼實現：

<script>
window.onload = function(){
// 設置定時：
window.setInterval("changeImg()",5000);
}
var i = 1;
function changeImg(){
i++;
// 獲得圖片的控制權：
if(i > 3){
i=1;
}
var img1 = document.getElementById("img1");
img1.src="../img/"+i+".jpg";
}
</script>

1.3 案例二：使用JS實現定時彈出廣告定時隱藏.1.3.1 需求:
在網站的首頁上定時彈出一個廣告，並且定時隱藏掉.

1.3.2 分析：1.3.2.1 技術分析：
【JS的window對象的定時的方法】

• 設置定時的方法
  
• 清除定時的方法
  
  【CSS的顯示和隱藏的屬性】
• display
  • block：顯示元素：
  • none：隱藏元素：

1.3.2.2 步驟分析：
【步驟一】創建一個HTML頁面
【步驟二】確定事件：頁面的加載事件
【步驟三】觸發一個函數，編寫該函數.
【步驟四】在函數中設置定時操作.定時執行一個顯示的函數.
【步驟五】清空定時，重新設置定時，5秒鐘隱藏.
1.3.3 代碼實現：

var time;
window.onload = function(){
time = window.setInterval("show()",5000);
}
// 顯示廣告的方法
function show(){
// 獲得廣告的div元素:
var adDiv = document.getElementById("adDiv");
adDiv.style.display = "block";
window.clearInterval(time);
time = window.setInterval("hide()",5000);
}
// 隱藏廣告的方法:
function hide(){
// 獲得廣告的div元素:
var adDiv = document.getElementById("adDiv");
adDiv.style.display="none";
window.clearInterval(time);
}

1.3.4 總結：1.3.4.1 JS中的BOM對象:

? Window

• alert(); --彈出對話框
• setInterval();
• setTimeout();
• clearInterval();
• clearTimeout();
• confirm(); --彈出一個確認窗口
• prompt(); --彈出一個可輸入的對話框
• open(); --打開一個新窗口
  ? Navigator ：包含的是瀏覽器的信息.
  
  ? Screen:用來獲得屏幕信息:
  
  ? History:瀏覽器的歷史對象:
  
  ? Location:包含URL信息的對象
  
  1.4 使用JS完成註冊頁面表單提示及校驗1.4.1 需求：
  
  註冊頁面之前是彈出對話框的形式進行校驗的這種方式不是特別友好！可以將錯誤信息顯示到文本框的後面.而且當光標落入到文本框的時候,提示的信息.
  1.4.2 分析：1.4.2.1 技術分析:
  【JS的輸出】
• document.getElementById(“”).innerHTML=”HTML的代碼”;
• document.write(“”);

【JS的事件】

• onfocus :獲得焦點.
• onblur :失去焦點.
• onsubmit :提交的時候.

1.4.2.2 步驟分析：
【步驟一】創建一個html文檔
【步驟二】在要去校驗的文本框上添加事件.
【步驟三】觸發函數
【步驟四】在函數中向文本框後的html的區域中寫入一段提示的內容.
1.4.3 代碼實現:

function tips(id,content){
document.getElementById(id+"Span").innerHTML = "<font color=‘red‘>"+content+"</font>";
}
function checkForm(){
// 判斷用戶名不能為空:
var username = document.getElementById("username").value;
if(username == ""){
document.getElementById("usernameSpan").innerHTML = "<font color=‘red‘>用戶名不能為空！</font>";
return false;
}
var password = document.getElementById("password").value;
if(password == ""){
document.getElementById("passwordSpan").innerHTML = "<font color=‘red‘>密碼不能為空！</font>";
return false;
}
}

1.4.4 總結：1.4.4.1 JS的事件的總結：

• onload :
• onclick :
• onsubmit :
• onfocus :
• onblur :
• onchange :下拉列表改變事件.
• ondblclick:雙擊某個元素的事件.
  鍵盤操作事件:
• onkeydown :
• onkeyup :
• onkeypress:
  鼠標操作事件：
• onmousemove：
• onmouseout：
• onmouseover：
• onmousedown
• onmouseup

1.5 案例四：使用JS完成後臺數據展示的隔行換色的表格：1.5.1 需求：
在後臺展示數據的頁面上，通常使用表格標簽進行數據的展示.沒有背景的表格比較難看的，可以使用JS控制表格的隔行換色.

1.5.2 分析：1.5.2.1 技術分析：
【使用JS獲得表格的行數】

• 獲得到控制的表格元素:
  • var tab1 = document.getElementById(“tab1”);
  • var len = tab1.rows.length;

1.5.2.2 步驟分析：
【步驟一】創建一個HTML頁面：可以使用後臺設計頁面.
【步驟二】確定事件：onload事件.
【步驟三】觸發一個函數.在這個函數中獲得操作的表格.
【步驟四】獲得表格中的所有的行數.
【步驟五】遍歷表格的行數.
【步驟六】判斷是否是奇數行還是偶數行.
1.5.3 代碼實現：

function changeColor(){
// 獲得要操作的對象的控制權：
var tab1 = document.getElementById("tab1");
// 獲得表格的所有的行數:
var count = tab1.rows.length;
// 遍歷每行:
for(var i = 0;i<count;i++){
if(i % 2 == 0){
// 偶數行
tab1.rows[i].style.backgroundColor = "#00FF00";
}else{
// 奇數行
tab1.rows[i].style.backgroundColor = "#00FFFF";
}
}
}

1.5.4 總結：1.5.4.1 表格中的tbody和thead標簽
function changeColor(){
// 獲得操作的表格的控制權:
var tab1 = document.getElementById("tab1");
// 獲得tbody中的所有的行.
var len = tab1.tBodies[0].rows.length;
for(var i = 0;i< len ;i++){
if(i % 2 == 0){
tab1.tBodies[0].rows.style.backgroundColor = "green";
}else{
tab1.tBodies[0].rows.style.backgroundColor = "gold";
}
}
}

1.6 案例五：使用JS完成復選框的全選和全不選的效果1.6.1 需求：
在實際的開發中一條記錄一條記錄進行刪除的話，效率很低，有的時候需要一起刪除多條記錄.需要通過在表格之前設置一個復選框的形式進行勾選復選框.點擊一個刪除的按鈕.

1.6.2 分析:1.6.2.1 技術分析：
1.6.2.2 步驟分析：
【步驟一】創建一個HTML頁面.
【步驟二】確定事件：復選框的單擊事件.
【步驟三】觸發一個函數
【步驟四】在函數中,獲得上面的復選框是否被選中.
【步驟五】如果選中,下面的所有的復選框都被選中.
【步驟六】如果不選中,下面的所有的復選框都不選中.
1.6.3 代碼實現：

function checkAll(){
// 獲得上面的復選框
var selectAll = document.getElementById("selectAll");
// 判斷這個復選框是否被選中.
var ids = document.getElementsByName("ids");
if(selectAll.checked == true){
// 上面復選框被選中：獲得下面所有的復選框,修改checked屬性
for(var i = 0 ;i<ids.length;i++){
ids[i].checked = true;
}
}else{
// 上面復選框沒有被選中：獲得下面所有的復選框,修改checked屬性
for(var i = 0 ;i<ids.length;i++){
ids[i].checked = false;
}
}
}

1.6.4 總結：1.6.4.1 JS中的DOM對象：
【DOM的概述】
? 什麽是DOM
DOM：Document Object Model：文檔對象模型.
將一個HTML的文檔加載到內存形成一個樹形結構,從而操作樹形結構就可以改變HTML的樣子.
? DOM的使用：
知道document，element，attribute中的屬性和方法

【DOM的常用的操作】
? 獲得元素：

• document.getElementById(); -- 通過ID獲得元素.
• document.getElementsByName(); -- 通過name屬性獲得元素.
• document.getElementsByTagName(); -- 通過標簽名獲得元素.
  ? 創建元素：
• document.createElement(); -- 創建元素
• document.createTextNode(); -- 創建文本
  ? 添加節點：
• element.appendChild(); -- 在最後添加一個節點.
• element.insertBefore(); -- 在某個元素之前插入.
  ? 刪除節點：
• element.removeChild(); -- 刪除元素

【使用DOM完成對ul中添加一個li元素】
function addElement(){
var city = document.getElementById("city");
// 創建一個元素:
var liEl = document.createElement("li");
// 創建一個文本節點:
var text = document.createTextNode("深圳");
// 添加子節點:
liEl.appendChild(text);
city.appendChild(liEl);
}

1.7 案例六：使用JS完成省市聯動的效果：1.7.1 需求：
在註冊頁面上有兩個下拉列表,左側省份的下拉列表一改變,右側的市的下拉列表也要跟著發生變化.

1.7.2 分析：1.7.2.1 技術分析:
【JS中創建數組】

【JS的事件】
下拉的列表的改變的事件.onchange.

【JS的DOM的操作】
創建元素：
添加元素：

1.7.2.2 步驟分析
【步驟一】創建一個HTML文件.
【步驟二】確定事件：onchange事件.
【步驟三】觸發函數,在函數中編寫代碼.
【步驟四】獲得到所選擇的省份的信息.
【步驟五】根據選擇的省份的信息獲得到對應的數組中的市的數據.
【步驟六】遍歷數組中的市的信息.
【步驟七】創建元素，創建文本,最後將元素添加到第二個列表中.
1.7.3 代碼實現:

// 定義數組：二維數組：
var arrs = new Array(5);
arrs[0] = new Array("杭州市","紹興市","溫州市","義烏市","嘉興市");
arrs[1] = new Array("南京市","蘇州市","揚州市","無錫市");
arrs[2] = new Array("武漢市","襄陽市","荊州市","宜昌市","恩施");
arrs[3] = new Array("石家莊市","唐山市","保定市","邢臺市","廊坊市");
arrs[4] = new Array("長春市","吉林市","四平市","延邊市");
function changeCity(value){
// 獲得到選中的省份的信息.
var city = document.getElementById("city");
// 清除第二個列表中的內容:
for(var i=city.options.length;i>0;i--){
city.options[i] = null;
}
// city.options.length = 0;
// alert(value);
for(var i= 0 ;i< arrs.length;i++){
if(value == i){
// 獲得所有的市的信息.
for(var j=0;j<arrs[i].length;j++){
// alert(arrs[i][j]);
// 創建元素：
var opEl = document.createElement("option");// <option></option>
// 創建文本節點:
var textNode = document.createTextNode(arrs[i][j]);
// 將文本的內容添加到option元素中.
opEl.appendChild(textNode);
// 將option的元素添加到第二個列表中.
city.appendChild(opEl);
}
}
}
}

1.7.4 總結：1.7.4.1 JS的內置對象:

? Array:

? Boolean:

? Date:

• http://www.baidu.com?time=new Date().getTime();
  ? Math對象:
  
  ? String對象:
• charAt();
• indexOf();
• lastIndexOf();
• split();
• replace();
• substring();
• substr();

1.7.4.2 JS的全局函數：

• parseInt();
  • parseInt(“11”);
• parseFloat();
  • parseFloat(“32.09”);
• 編碼和解碼的方法：
  // 解碼
• decodeURI();
• decodeURIComponent();
  // 編碼
• encodeURI();
• encodeURIComponent();
  eval函數：
• 將一段內容當成是JS的代碼執行.
  //var sss = “alert(‘aaaa’)”;
  //eval(sss);

第3章WEB03- JS篇