js知識點彙總

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()