行爲層JavaScript+jQuery

JavaScript + jQuery【不完整】

---

1、JavaScript 行爲層

• JavaScript簡介

1. JavaScript歷史： 1995年，網景公司 憑藉其Navigator瀏覽器成爲Web時代開啓時最著名的第一代互聯網公司。因爲網景公司但願能在靜態HTML頁面上添加一些動態效果，因而叫Brendan Eich這哥們在兩週以內設計出了JavaScript語言。
2. ECMAScript： 一年後微軟又模仿JavaScript開發了JScript，爲了讓JavaScript成爲全球標準，幾個公司聯合ECMA（European Computer Manufacturers Association）組織定製了JavaScript語言的標準，被稱爲ECMAScript標準。
3. JavaScript版本
4. 一個完整的JavaScript包括：ECMAScript【語法 變量和數據類型 運算符 邏輯控制語句 關鍵字保留字 對象】+BOM【瀏覽器對象模型】+DOM【文檔對象模型】

• 特色

1. JavaScript主要用來在HTML頁面中添加交互行爲
2. JavaScript是一種腳本語言，語法和java相似
3. JavaScript通常用來編寫客戶端的腳本
4. JavaScript是一種解釋性語言，邊執行邊解釋

• 基本語法

1. JavaScript嚴格區分大小寫，若是弄錯了大小寫，程序將報錯或者運行不正常。
2. 聲明：var 合法的變量名；
3. 因爲JavaScript屬於弱類型語言，所以容許不聲明變量而直接使用，系統將會自動聲明該變量 如：x=88；

• 對象

1. 經過new Object（）方式建立對象
2. 字面量賦值方式建立對象

• 數據類型和變量

         ECMAScript提供了 typeof(變量或值) 來判斷一個值或變量是哪一種數據類型

1. Number（JavaScript不區分整數和浮點數，統一用Number表示）
• 123; // 整數123
• 0.456; // 浮點數0.456
• 1.2345e3; // 科學計數法表示1.2345x1000，等同於1234.5
• -99; // 負數
• 0xlf; // 十進制的31
• NaN; // NaN表示Not a Number，當沒法計算結果時用NaN表示
• Infinity; // Infinity表示無限大，當數值超過了JavaScript的Number所能表示的最大值時，就表示爲Infinity
2. 字符串
• 以單引號'或雙引號"括起來的任意文本，好比'abc'，"xyz"等等。請注意，''或""自己只是一種表示方式，不是字符串的一部分，所以，字符串'abc'只有a，b，c這3個字符。
• 經常使用方法1：indexOf(str,index):返回指定字符首次出現的位置
• 經常使用方法2：charAt(index):經過索引值查找，返回指定字符
• 經常使用方法3： toLowerCase():字符串小寫
• 經常使用方法4： toUpperCase():字符串大寫
• 經常使用方法5： substring(from,to):傳入兩個索引值，截取兩個值之間的字符串，不包括to值。返回新字符串，若start爲負數，默認start爲0
• 經常使用方法6： split(spearator,limit):分割字符串，以數組形式返回。spearator指定切割的地方，limit設置返回字符串的最大長度
3. 布爾值：常常用在條件判斷中，能夠直接用true、false表示布爾值，也能夠經過布爾運算計算出來 。
• true; // 這是一個true值
• false; // 這是一個false值
• 2 > 1; // 這是一個true值
• 2 >= 3; // 這是一個false值
4. null和undefined
• null表示一個「空」的值，它和0以及空字符串''不一樣，0是一個數值，''表示長度爲0的字符串，而null表示「空」
• 當聲明的變量未初始化時，該變量的默認值是undefined，它表示「未定義」
• 在其餘語言中，也有相似JavaScript的null的表示，例如Java也用null，Swift用nil，Python用None表示。
• JavaScript的設計者但願用null表示一個空的值，而undefined表示值未定義。事實證實，這並無什麼用，區分二者的意義不大。大多數狀況下，咱們都應該用null。undefined僅僅在判斷函數參數是否傳遞的狀況下有用。
• undefined表示代表了變量但未對該變量賦值，null即是對該變量賦予了一個空值

• 數組： 是一組按順序排列的集合，集合的每一個值稱爲元素。
• JavaScript的數組能夠包括任意數據類型。例如： [1, 2, 3.14, 'Hello', null, true];
• 另外一種建立數組的方法是經過Array()函數實現： new Array(1, 2, 3); // 建立了數組[1, 2, 3]  
• 出於代碼的可讀性考慮，強烈建議直接使用[]
• 數組的元素能夠經過索引來訪問。請注意，索引的起始值爲0

1. slice()
• slice()就是對應String的substring()版本，它截取Array的部分元素，而後返回一個新的Array
• * slice()的起止參數包括開始索引，不包括結束索引。
• 若是不給slice()傳遞任何參數，它就會從頭至尾截取全部元素。利用這一點，咱們能夠很容易地複製一個Array
2. push()和pop()
• push()向Array的末尾添加若干元素，pop()則把Array的最後一個元素刪除掉
3. unshift()和shift()
• 若是要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉
4. sort()和reverse()
• sort()能夠對當前Array進行排序，它會直接修改當前Array的元素位置，直接調用時，按照默認順序排序；
• reverse()把整個Array的元素給掉個個，也就是反轉
5. splice()
• splice()方法是修改Array的「萬能方法」它從指定的索引開始刪除若干元素，而後再從該位置添加若干元素
• 若是要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉
6. concat()
• concat()方法把當前的Array和另外一個Array鏈接起來，並返回一個新的Array
• 注意，concat()方法並無修改當前Array，而是返回了一個新的Array。
• 實際上，concat()方法能夠接收任意個元素和Array，而且自動把Array拆開，而後所有添加到新的Array裏
7. join()
• 把當前Array的每一個元素都用指定的字符串鏈接起來，而後返回鏈接後的字符串
• join(分隔符);

• 運算符號

1. 算數運算符：+          -        *         /        %       ++        --
2. 比較運算符：>          <      >=      <=     ==       !=        ===       !==
3. 邏輯運算符：&&       ||         !
4. 賦值運算符：=          +=     -=

• 經常使用系統函數

1. parseInt()與parseFloat()
• 這兩個方法的參數數據類型都是字符串
• parseInt() 是將數字開頭的整數部分取出來
• parseFloat()是將數字開頭的整數或浮點數取出來
2. isNaN()函數: 用於檢查一個變量是否爲數值，若是是，則返回false，若是不是，則返回true。
3. eval()函數: 用於計算並返回字符串表達式的值

• JavaScript操做BOM對象（一）

1. 經常使用屬性
• history   有關客戶訪問過的URL的信息
• back（）加載history對象列表中的前一個URL
• forward（）加載history 對象列表中的下一個URL
• go（）加載history 對象列表中的某個具體URL
• location  有關當前URL的信息
• host：設置或返回主機名和當前URL的端口號
• hostname：設置或返回當前URL的主機名
• href：設置或返回完整的URL
• reload（）從新加載當前文檔
• reolace（）用新的文檔替換當前文檔
• screen只讀屬性，包含有關客戶端顯示屏的信息
2. 經常使用方法
• prompt()顯示可提示用戶輸入的對話框
• alert()顯示一個帶有提示信息和一個「肯定」按鈕的警示對話框
• confirm()顯示一個帶有提示信息、「肯定」和「取消」按鈕的對話框
• close()關閉瀏覽器窗口
• open()打開一個新的瀏覽器窗口，加載給定URL所指定的文檔
• setTimeout()在指定的毫秒數後調用函數或計算表達式
• setInterval()按照指定的週期（以毫秒計）來調用函數或表達式
3. document對象
• 屬性1： referrer：返回載入當前文檔的URL
• 屬性2： URL：返回當前文檔的URL
• 方法1： getElementById()返回對擁有指定id的第一個對象的引用
• 方法2： getElementByName()返回帶有指定名稱的對象的集合
• 方法3： getElementsByTagName()返回帶有指定標籤名的對象的集合
• 方法4： write()向文檔寫文本、HTML表達式或JavaScript代碼

• JavaScript操做BOM對象（二 內置對象）http://www.javashuo.com/article/p-nbrolhmq-gy.html

1. Date
• getDay()返回一週中的第幾天(0-6)
• getYear()返回年份.2000年之前爲2位,2000(包含)之後爲4位
• getFullYear()返回完整的4位年份數
• getMonth()返回月份數(0-11)
• getDate()返回日(1-31)
• getHours()返回小時數(0-23)
• getMinutes()返回分鐘(0-59)
• getTime()返回從1970年1月1號0:0:0到如今一共花去的毫秒數
2. Math  http://www.runoob.com/jsref/jsref-obj-math.html
• ceil(x) 對數進行上舍入
• floor(x)對數進行下舍入
• round(x)四捨五入
• random() 返回0~1之間的隨機數

• JavaScript操做DOM對象  http://www.javashuo.com/article/p-tiwxnrxm-cz.html

1. 操做節點屬性
• attributes     // 獲取全部標籤屬性
• setAttribute("屬性名","屬性值")   // 設置標籤屬性
• getAttribute("屬性名")    // 獲取指定標籤屬性
2. 建立和插入節點
• createElement(tagName)建立一個標籤名爲tagName的新元素節點
• A.appendChild(B)把B節點追加至A節點的末尾
• insertBefore(A,B)把A節點插入至B節點前
• cloneNode(deep)複製某個指定的節點
3. 刪除和替換節點
• removeChild(node)刪除指定的子節點
• replaceChild(newnode,oldnode)用其餘的節點替換指定的節點
4. style屬性  http://www.javashuo.com/article/p-tqhwnbkz-ct.html
5. 獲取元素位置

• 面向對象編程

1. 構造函數 和 原型對象
2. 原型繼承 和 class繼承

• strict模式
• Map https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
• Set   https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set

2、jQuery http://www.w3school.com.cn/jquery/index.asp

• jQuery的優點

1. 輕量級
2. 強大的選擇器
3. 出色的DOM封裝
4. 可靠的事件處理機制
5. 出色的瀏覽器兼容性
6. 隱式迭代
7. 豐富的插件支持

• 選擇器 http://phpstudy.php.cn/e/jquery/jquery_ref_selectors.html
• 基本過濾選擇器

1. :first 　　 　　     獲取數組中第一個元素
2. :last 　　 　　      獲取數組中最後一個
3. :eq(selector)　　 獲取指定索引
4. :gt(index) 　　     大於指定索引
5. :lt(index) 　　      小於指定索引
6. :even 　　           偶數，從0開始計數（0、二、4即1/3/5行）
7. :odd　　              奇數
8. :not(selector) 　  去除全部與指定選擇器匹配的元素
9. :header 　　       得到全部標題元素
10. :animated 　　    得到全部動畫
11. :focus 　　         得到焦點

• 可見性過濾選擇器

1. :Hidden：匹配全部不可見元素，或者type爲hidden的元素
2. :Visible：匹配全部的可見元素
3. :Val（）：得到匹配元素的當前值。Vallue的值
4. :Show（）；顯示隱藏的匹配元素。
5. :Hide（）；隱藏全部的元素

• 事件 http://phpstudy.php.cn/e/jquery/jquery_ref_events.html