1.本門課的作用（JavaScript的作用）所有基于Web的程序開發基礎

2.一種計算機客戶端腳本語言，主要在Web瀏覽器解釋執行。

3.瀏覽器中Javascript，用于與用戶交互，以及實現頁面中各種動態特效

4.在HTML文件中，任何JavaScript代碼必須放到<script>標簽中

5.把JavaScript代碼放到外部文件中，在HTML代碼中直接引入該文件(外部文件定義為：*.js)

6.就算語法特點：

– 類C語言

– 弱類型：變量的數據類型可以任意轉換

7. ? 單行注釋：//

? ? 多行注釋：/* */

8.JavaScript中5種內置數據類型：Number、String、Boolean、Undefined、Null

9. 獲得變量在某一時刻的數據類型，使用typeof運算符

10. 轉換為Number類型：parseInt()、parseFloat()

– 轉換為String類型：原變量 + ‘’

– 轉換為Boolean類型：變量之前加 !!

11. ==：值相等則為true

– ===：類型和值都須相同則為true

12.CSS選擇器的作用：選擇具有一定特征的元素，應用某一種樣式

13.選擇器就是一些公用的代碼段

14.函數：完成特定功能的一段代碼

– 可重用性

– 任務分解

1. 函數的要素：函數名、函數參數、函數返回值

16.?JS中函數分類：

– JS內置函數：如parseInt( )、eval( )、alert( )、

– 自定義函數

1. 使用function關鍵字定義函數
2. 調用方式

– 直接調用? --通過事件觸發

19.在函數體內，形參其實就是一個變量，函數調用時，一方面可以通過參數向函數傳遞

數據，另一方面也可以從函數獲取數據。

1. return語句不帶表達式時仍會返回值，該值為Undefined
2. 在一個函數定義的函數體語句中出現對另一個函數的調用，這就是函數的嵌套調用
3. 事件：能被JavaScript檢測到的活動

– 用戶動作（鼠標或鍵盤操作等）

– 狀態變化（加載、改變文本框內容等）

1. 常用事件類型

—頁面加載事件 —圖片事件 —表單事件 —鍵盤和鼠標事件

24.獲得字符串的長度

– 通過字符串變量的length屬性獲得

25.根據位置截取一段子串

– 通過字符串變量的substr()方法

參數1：截取的開始位置

參數2：截取的長度

26.查找子串

– indexOf()方法，參數：要查找的子串

1. 字符串定義： 單引號或雙引號定義

字符串常用操作：

– 字符串長度：length屬性

– 截取子串：substr( )方法

– 查找子串：indexOf( )方法

– 字符串連接運算符： + +=

1. 數組用來在單獨的變量中存儲一系列的值

定義數組：

– 方式一：通過[ ]方式

例：var arr1 = [‘a’,‘b’,‘c’];

– 方式二：通過new Array方式

var arr2 =new Array(‘a’,‘b’,‘c’);

1. JavaScript：是一門基于對象的語言， 對象具有一些屬性和行為

屬性：

– 通過變量來表示

行為

– 通過函數來實現

30. 訪問對象屬性/方法

– 方式一：通過 對象名 . 屬性名 、對象名 . 方法名( )

– 方式二：通過 對象名[“屬性名” ]

?修改對象屬性

– 直接賦值給對象屬性

31.刪除對象屬性

– 使用delete關鍵字

1. 構造函數的形參用于賦給對象的屬性
2. 在構造函數中，使用this指代對象
3. 對象的屬性和方法必須通過this訪問
4. 通過new 關鍵字來通過構造函數創建對象
5. JavaScript包含的對象

– 自定義對象

– 內置對象

– 瀏覽器對象（BOM）

– 文檔對象（DOM）

1. String對象處理字符串相關操作

– 獲取字符長度

– 判斷子串位置

– 截取子串

Array對象的使用

常用操作

– 獲取數組長度

– 向數組末尾增加元素

– 從數組末尾獲取元素

Math對象的使用

常用操作

– 四舍五入：Math. round( )

– 向下取整：Math.floor( )

– 生成隨機數：Math.random( )

– 取到最大值：Math.max( )

– 取到最小值：Math.min( )

Date對象的使用

Date對象包含了一系列的日期時間處理的功能

– 創建Date對象，例： var now= new Date( );

?常用操作

– 獲取當前日期時間： toLocaleString( )

– 獲取年份、月份、日期：getFullYear()、 getMonth()、getDate()

– 獲取小時、分鐘、秒鐘： getHours()、 getMinutes()、getSeconds()

1. JavaScript的對象就是一些屬性和方法的集合
2. 屬性的實質是一些數據，在程序中用變量保存
3. 方法的實質是一些行為，在程序中用函數實現
4. 創建對象，使用{ } ，括號內部為屬性名：屬性值或方法名：方

法體，屬性和屬性間用逗號分隔

1. 通過.符號訪問對象中的屬性或方法，通過[ ]訪問對象中的屬性或方法
2. BOM作用：?彈出窗口?計數器?自動跳轉頁面?獲得瀏覽器信息?圖片切換

44.BOM綜述

BrowserObject瀏覽器提供的用戶與瀏覽器窗口之間交互的對象及操作的接口。

Model 這些對象并不是獨立存在的，對象與對象之間存在著層次結構，對象模型的作用就是描述這些層次結構。

1. 彈出提示窗口alert();例：window.alert(‘你確定要關閉此窗口嗎？’);

? 彈出確認窗口 confirm()； 例：window.confirm(‘你確定要關閉此窗口嗎？’);

? 彈出輸入框 prompt()； 例：window.prompt(‘請輸入你的評價, 1(滿意) 2(一般)’);

? 延遲執行 setTimeout()； – setTimeout( code , millisec )

????????? ?clearTimeout() – clearTimeout( id_of_settimeout )

? 定時執行 setInterval() – setInterval( code , millisec ）;

?????????? clearInterval() – clearInterval( id_of_setinterval

? 打開/關閉窗口 ?open () ; close();

1. 使用document對象 常用方法：document.write()

? 子對象

– forms

– images

– links

– anchors

– location

?? 使用history對象 history對象可以訪問瀏覽器窗口的瀏覽歷史

子對象

-Back();? -forward();? -go();

?? 使用location對象 location對象包含當前窗口的URL信息。

?? 使用navigator對象 navigator對象包含瀏覽器的信息，瀏覽器的類型、版本信息都可以從中獲取。

?? 使用srceen對象 screen對象包含客戶端屏幕的相關信息。

子對象

-height();? -width();

47.DOM（Document Object Model）：文檔對象模型

– 瀏覽器提供的操作HTML文檔內容的應用程序接口

– 用于對文檔進行動態操作，如增加文檔內容、刪除文檔內容、修改文檔內容等等

48.DOM的核心就是對DOM樹的操作，即增加、刪除、修改DOM樹中的內容

1. DOM節點是一個對象（屬性和方法）
2. 訪問DOM節點

通過id屬性獲得節點：

document.getElementById( )

?通過標簽名獲得所有同名標簽：document(或某一節點對象).getElementsByTagName( )

?通過父節點獲得子節點：node.childNodes[ ]、node.firstChild、node.lastChild

?通過子節點獲得父節點：node.parentNode

?獲得前后兄弟節點：node.previous(next)Sibling

51.獲得某一元素節點的屬性節點

– 標準方式獲得屬性：node.getAttribute(? name )

– 簡單方式獲得屬性：node. attrName

?修改某一元素節點的屬性節點

– 直接賦值給屬性

52.獲得某一元素節點的相關信息

– 節點類型：node.nodeType

– 節點標簽名：node.nodeName

?獲得文本節點的文本值：node.nodeValue

53.生成一個 DOM節點

– 生成一個元素節點： document.createElement( )

– 生成一個文本節點：document.createTextNode( )

?把生成的節點作為某一個節點（ node）的子節點

– 作為node節點的最后一個子節點：

node.appendChild( newNode )

– 插入到node節點中某一子節點之前：

node.insertBefore( newNode, oldNode )

54. 刪除一個元素節點、文本節點

– 通過父節點刪除本節點：myParent.removeChild(mySelfNode )

– 通過自己刪除本節點：

mySelfNode.parentNode.removeChild(mySelfNode )

? 刪除一個屬性節點： node.attrName = ‘’;

55修改一個元素節點（新節點替換舊節點）：

oldNode.parentNode.replaceChild (newNode, oldNode )

?修改一個文本節點（替換文本值）：

textNode.nodeValue = “”;

?修改一個屬性節點（覆蓋原有屬性）：

node.attrName = ‘newAttrValue’;

56.程序原則：

– 應盡量使用節點對象屬性的方式來綁定事件處理函數

– 盡量避免HTML標記屬性中綁定事件處理函數

57.DOM中每個元素結點都有一個style對象管理元素的樣式

58訪問樣式表

使用document.styleSheets屬性

– 包含了頁面上所有樣式表的引用

– 數組

?每個styleSheets屬性指定一個cssRules集合，包含所有定義在樣式表中的規則

– 注意：在IE中為“rules”

59.第三方庫Prototype 、MooTools、Dojo Toolkit、

60jQuery的一大貢獻就是將行為與結構分離

61jQuery選擇器

基本功能

快速、精確地選擇某一個（某一組）元素

返回該元素（組）的jQuery包裝集

優勢

?簡潔

?強大

62選擇器類別劃分

?

標簽選擇器： var? div? =? $(‘div’); 類選擇器： var? toHidden? =? $(‘.toHidden’); ID選擇器： var? toExten? =? $(‘#toExten’); 群選擇器： var? nodes? =? $(‘div,? p,? ul,? ol’); 通用選擇器：var? anyNodes? =? $(‘*’); ?

基本選擇器

?層次選擇器

?過濾選擇器

?表單選擇器

?表單過濾選擇器

基本過濾器（下標從0開始）

???????? :first、:last、:not(selector)、:even、:odd、:eq(index)

???????? :gt(index)、:lt(index)

內容過濾選擇器

???????? ?:contains(text)、:empty、:has(selector)

可見性過濾選擇器：:hidden、:visible

屬性過濾選擇器

???????? [attribute]、[attribute=value]、[attribute!=value]

第index個子元素（下標從1開始）

???????? ?:nth-child(index/even/odd/equation)

第1個子元素?????????? :first-child

最后1個子元素：? :last-child

選取<input>、<textarea>、<select>和<button>元素 ? :input

選取所有文本框（<input type=“text”/>）? :text

選取所有密碼框：???????????????? :password

選取所有單選按鈕：??????????? :radio

選取所有多選按鈕：??????????? :checkbox

選取所有提交按鈕：??????????? :submit

選取所有重置按鈕：??????????? :reset

選取所有文件上傳域：???????????????? :file

選取所有圖像按鈕：??????????? :image

選取所有按鈕：???????????????????? :button

選取所有隱藏域（<input type=“hidden”/>）：?????? :hidden

選取所有可用元素：??? ???????????? :enabled

選取所有不可用的元素：?? ?????? ?:disabled

選取所有被選中的元素：???? ? :checked

選取所有被選中的下拉列表項：:selected

1. 使用選擇器獲取的對象為jQuery包裝集（jQuery對象）
2. jQuery包裝集和DOM對象轉化

DOM→jQuery：使用 ?$( ) ?包裝

jQuery→DOM：數組下標方式、get( )方法獲得

1. 文檔就緒事件是jQuery中擴展的一個新事件

作用：替代window.onload事件

寫法：

????????????????????????? $(document).ready(function(){ //..文檔就緒后的處理函數})

66.this在事件處理函數中，同原生JS一樣，指代觸發事件的DOM對象

通常通過$(this)的方法將DOM對象轉換為jQuery對象

1. jq綁定事件的方法 ?-通過事件方法 -通過bind方法
2. jQuery文檔操作

查找節點

插入節點

刪除節點

設置和獲取HTML、文本和值

69獲取用戶名控件節點

var $userName = $('input[name="username"]');

獲取密碼控件節點

var $pswd = $('input[name="pswd"]');

獲取標題節點

var $h1 = $('h1');

70text()：返回或設置匹配元素的文本內容

返回匹配元素的文本內容

$p_con = $(‘p’).text()

設置匹配元素的文本內容

$p_content = $(‘p’).text(‘你不喜歡的水果是？’);

71設置和獲取屬性 ：attr()

設置屬性：$(‘p’).attr(‘title’,‘最不愛的水果是’);

獲取屬性：$(‘p’).attr(‘title’);

刪除屬性：removeAttr()

$(‘p’).removeAttr(‘title);

72添加類：addClass()

向匹配的元素中追加一個類

$(‘li’).addClass(‘bgcolor’);

刪除類：removeClass()

刪除匹配的元素中指定的類

$(‘li’).removeClass(‘bgcolor’);

刪除匹配元素的所有類

$(‘li’).removeClass();

73設置和獲取匹配元素的CSS樣式 ：css()

獲取樣式：$(‘li’).css(‘title’);

設置樣式：$(‘li’).css(‘padding’,’15px’);

設置多個樣式：$(‘li’).css({

?"color":"white",

? "font-size":"20px",

? "padding":"5px"

} )

74父節點

子節點

兄弟節點：silblings()

$sibNode s= $(‘ul’).siblings();

上一個節點：prev()

$preNode = $(‘ul’).prev()

下一個節點：next()?? $nxtNode = $(‘ul’).next()

?