JavaScripts語法速查
目錄
1. 結構
1.1. 定義
-
在html中
<head> <script> alert('Hello, world'); </script> </head> -
獨立檔案，然後在html中import
<head> <script src="/static/js/abc.js"></script> </head>
有些時候你會看到 <script> 標籤還設定了一個type屬性：<script type="text/javascript">...</script>。但這是沒有必要的，因為預設的type就是JavaScript，所以不必顯式地把type指定為JavaScript。
1.2. 呼叫
1.3. strict模式
如果一個變數沒有通過var申明就被使用，那麼該變數就自動被申明為全域性變數：
i = 10; // i現在是全域性變數
strict模式將限制這樣的定義方式。
'use strict';
2. 語法
2.1. 字串
var s = 'Hello, world!';
s.length; // 13
s.toUpperCase();
s.toLowerCase();
s.indexOf('world'); // 沒有找到指定的子串，返回-1
s.substring(0, 5); // 從索引0開始到5（不包括5），返回'hello'
需要特別注意的是，字串是不可變的，如果對字串的某個索引賦值，不會有任何錯誤，但是，也沒有任何效果。
2.1.1. 多行字串
由於多行字串用\n寫起來比較費事，所以最新的ES6標準新增了一種多行字串的表示方法，用反引號 * ... * 表示：
var str = `這是一個
多行
字串`;
2.1.2. 模板字串
var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}歲了!`;
2.2. 陣列
var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6
arr.indexOf('Hello');
arr.slice(0, 3); // 從索引0開始，到索引3結束，但不包括索引3
var aCopy = arr.slice(); // 複製陣列
arr.push('A', 'B'); // 返回Array新的長度: 4
arr.pop(); // pop()返回'B'; 空陣列繼續pop不會報錯，而是返回undefined
arr.unshift('A', 'B'); // 頭部insert，返回Array新的長度: 4
arr.shift(); // 'A'
arr.sort();
arr.reverse();
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,然後再新增兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']
var added = arr.concat([1, 2, 3]);
// concat()方法可以接收任意個元素和Array
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
2.3. 物件
var xiaohong = {
name: '小紅',
'middle-school': 'No.1 Middle School'
};
xiaohong的屬性名middle-school不是一個有效的變數，就需要用''括起來。訪問這個屬性也無法使用.操作符，必須用['xxx']來訪問：
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小紅'
xiaohong.name; // '小紅'
如果我們要檢測xiaoming是否擁有某一屬性，可以用in操作符：
var xiaoming = {
name: '小明',
birth: 1990,
school: 'No.1 Middle School',
height: 1.70,
weight: 65,
score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false
要判斷一個屬性是否是xiaoming自身擁有的，而不是繼承得到的，可以用hasOwnProperty()方法：
var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
2.4. Map/Set
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
m.set('Adam', 67); // 新增新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
s.add(4);
s.delete(3);
2.5. for遍歷
3. 面向物件
4. JQuery
載入模組：
var $ = require('jquery');
// 或者
require('jquery');
- 第一種的話，jquery 也是一個標準的 CMD 模組，如果存在 jquery 的多個版本時，彼此可以共存。
- 第二種的話，jquery 是一個，如果一個頁面中存在多個 jquery 版本時，全域性變數 jQuery / $ 會彼此覆蓋。
4.1. jQuery物件
jQuery物件和DOM物件之間可以互相轉化：
var div = $('#abc'); // jQuery物件
var divDom = div.get(0); // 假設存在div，獲取第1個DOM元素
var another = $(divDom); // 重新把DOM包裝為jQuery物件
4.2. 選擇器
// 查詢<div id="abc">:
var div = $('#abc');
// 按tag查詢: 查詢<p>xxxx</p>:
var ps = $('p'); // 返回所有<p>節點
ps.length; // 數一數頁面有多少個<p>節點
// 按class查詢
var a = $('.red'); // 所有節點包含`class="red"`都將返回
// 查詢同時包含red和green的節點
var a = $('.red.green'); // 注意沒有空格
// 符合條件的節點: <div class="blue green red">...</div>
// 按屬性查詢: 找出<??? name="email">
var email = $('[name=email]');
// 組合查詢
var emailInput = $('input[name=email]');
var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>
// 多項選擇器
$('p,div'); // 把<p>和<div>都選出來
$('p.red,p.green'); // 把<p class="red">和<p class="green">都選出來
層級選擇器 $('ancestor descendant')
$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
$('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
子選擇器 $('parent>child') 類似層級選擇器，但是限定了層級關係必須是父子關係
過濾器 : 一般不單獨使用，它通常附加在選擇器上，幫助我們更精確地定位元素。
$('ul.lang li'); // 選出JavaScript、Python和Lua 3個節點
$('ul.lang li:first-child'); // 僅選出JavaScript
$('ul.lang li:last-child'); // 僅選出Lua
$('ul.lang li:nth-child(2)'); // 選出第N個元素，N從1開始
$('ul.lang li:nth-child(even)'); // 選出序號為偶數的元素
$('ul.lang li:nth-child(odd)'); // 選出序號為奇數的元素
4.3. 表單相關
針對表單元素，jQuery還有一組特殊的選擇器：
:input：可以選擇<input>，<textarea>，<select>和<button>；:file：可以選擇<input type="file">，和input[type=file]一樣；:checkbox：可以選擇複選框，和input[type=checkbox]一樣；:radio：可以選擇單選框，和input[type=radio]一樣；:focus：可以選擇當前輸入焦點的元素，例如把游標放到一個<input>上，用$('input:focus')就可以選出；:checked：選擇當前勾上的單選框和複選框，用這個選擇器可以立刻獲得使用者選擇的專案，如$('input[type=radio]:checked')；:enabled：可以選擇可以正常輸入的<input>、<select>等，也就是沒有灰掉的輸入；:disabled：和:enabled正好相反，選擇那些不能輸入的。
4.4. 事件
因為JavaScript在瀏覽器中以單執行緒模式執行，頁面載入後，一旦頁面上所有的JavaScript程式碼被執行完後，就只能依賴觸發事件來執行JavaScript程式碼。
瀏覽器在接收到使用者的滑鼠或鍵盤輸入後，會自動在對應的DOM節點上觸發相應的事件。如果該節點已經綁定了對應的JavaScript處理函式，該函式就會自動呼叫。
由於不同的瀏覽器繫結事件的程式碼都不太一樣，所以用jQuery來寫程式碼，就遮蔽了不同瀏覽器的差異，我們總是編寫相同的程式碼。
-
滑鼠事件
- click: 滑鼠單擊時觸發；
- dblclick：滑鼠雙擊時觸發；
- mouseenter：滑鼠進入時觸發；
- mouseleave：滑鼠移出時觸發；
- mousemove：滑鼠在DOM內部移動時觸發；
- hover：滑鼠進入和退出時觸發兩個函式，相當於mouseenter加上mouseleave。
-
鍵盤事件
鍵盤事件僅作用在當前焦點的DOM上，通常是
<input>和<textarea>。- keydown：鍵盤按下時觸發；
- keyup：鍵盤松開時觸發；
- keypress：按一次鍵後觸發。
-
其他事件
- focus：當DOM獲得焦點時觸發；
- blur：當DOM失去焦點時觸發；
- change：當
<input>、<select>或<textarea>的內容改變時觸發； - submit：當
<form>提交時觸發； - ready：當頁面被載入並且DOM樹完成初始化後觸發。僅作用於document物件。
4.4.1. 事件引數
有些事件，如mousemove和keypress，我們需要獲取滑鼠位置和按鍵的值，否則監聽這些事件就沒什麼意義了。所有事件都會傳入Event物件作為引數，可以從Event物件上獲取到更多的資訊：
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
4.4.2. 取消繫結
function hello() {
alert('hello!');
}
a.click(hello); // 繫結事件
// 10秒鐘後解除繫結:
setTimeout(function () {
a.off('click', hello);
}, 10000);
4.4.3. 事件觸發條件
一個需要注意的問題是，事件的觸發總是由使用者操作引發的。例如，我們監控文字框的內容改動：
var input = $('#test-input');
input.change(function () {
console.log('changed...');
});
當用戶在文字框中輸入時，就會觸發change事件。但是，如果用JavaScript程式碼去改動文字框的值，將不會觸發change事件：
var input = $('#test-input');
input.val('change it!'); // 無法觸發change事件
有些時候，我們希望用程式碼觸發change事件，可以直接呼叫無引數的change()方法來觸發該事件：
var input = $('#test-input');
input.val('change it!');
input.change(); // 觸發change事件
input.change()相當於input.trigger('change')，它是trigger()方法的簡寫。
為什麼我們希望手動觸發一個事件呢？如果不這麼做，很多時候，我們就得寫兩份一模一樣的程式碼。