JavaScript之jQuery
jQuery
使用：從官網上下載，並在中引入即可
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
...
</head>
<body>
...
</body>
</html>
用法：使用jQuery()或者$()
按id查詢
使用#id
var div = $('#abc')
按tag查詢
直接寫tag名稱即可
var p = $('p')
按class查詢
使用.class
var a = $('.red')
按屬性查詢
使用[key=value]
var email = $('[name=email]')
若value含有特殊字元(如空格)，需要用雙引號”“
如
var email = $('[name="abc email"]')
以某個字串開頭或結束可以用
var name = $('[name^=icon]')
和
var name = $('[name$=icon]')
組合查詢
即按id,class,tag,屬性組合在一起，直接連在一起即可
var tr = $('tr.red')
多項選擇器
使用逗號隔開，只要符合一個即可，按組合要全部都符合
var ps = $('p.red,p.green')
層級選擇器
用空格隔開，表示前者是後者的子孫
如查詢ul下的所有li節點：
$('ul.lang li');
子選擇器
使用>，和層級選擇器差不多，區別是前者必須是後者的父節點
如
$('ul.lang>li');
過濾器
使用:
用法
$('ul.lang li'); // 選出JavaScript、Python和Lua 3個節點
$('ul.lang li:first-child'); // 僅選出JavaScript 還有一些特殊的用法：
: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正好相反，選擇那些不能輸入的。
查詢和過濾
找到某個節點後，還可以基於這個節點查詢這個節點附近的節點。
向下查詢：
find()
向上查詢：
parent()
向左/右查詢：
prev()/next()
首個子節點：
first()
最後一個子節點：
last()
n到m-1個子節點：
slice(n,m)
可以輸入引數作為過濾條件，若為空則返回[]。
過濾：
filter()
引數為過濾的條件
對映：
map()
引數為一個function，將jQuery陣列每個元素使用一次map()，返回處理後的陣列
操作DOM
修改Text和HTML
獲取節點的文字
text()
獲取原始的HTML文字
html()
設定文字
只需要在上述函式中新增引數即可
操作css
獲取css：
css('key')
修改css：
css('key','value')
操作class
var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 新增highlight這個class
div.removeClass('highlight'); // 刪除highlight這個class
隱藏和顯示DOM
var a = $('a[target=_blank]');
a.hide(); // 隱藏
a.show(); // 顯示
獲取DOM資訊
獲取寬高資訊：
width()
height()
設定節點屬性
attr()和removeAttr()
// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 屬性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name屬性變為'Hello'
div.removeAttr('name'); // 刪除name屬性
div.attr('name'); // undefined
操作表單
對錶單元素可以使用val()獲取和設定value
/*
<input id="test-input" name="email" value="">
<select id="test-select" name="city">
<option value="BJ" selected>Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<textarea id="test-textarea">Hello</textarea>
*/
var
input = $('#test-input'),
select = $('#test-select'),
textarea = $('#test-textarea');
input.val(); // 'test'
input.val('[email protected]'); // 文字框的內容已變為[email protected]
select.val(); // 'BJ'
select.val('SH'); // 選擇框已變為Shanghai
textarea.val(); // 'Hello'
textarea.val('Hi'); // 文字區域已更新為'Hi'
修改DOM結構
prepend()和append()插入到第一個和最後一個子節點
before()和after()插入到該節點的前面或後面
可以插入HTML字串、DOM物件或者jQuery物件
var ul = $('#test-div>ul');
ul.append('<li><span>Haskell</span></li>');
// 建立DOM物件:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 新增DOM物件:
ul.append(ps);
// 新增jQuery物件:
ul.append($('#scheme'));
刪除節點：
remove()
事件
滑鼠事件
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樹完成初始化後觸發。
繫結事件
使用on()為相應的事件繫結函式即可
var a = $('#test-link');
a.on('event', function () {
alert('Hello!');
});
另外，可以使用on()繫結多個事件，按繫結順序執行。
另外，可以直接使用.click(func(…){…})方法直接繫結click事件；
使用.ready(func(…){…})或者直接$(func(…){…})繫結ready事件。
解除繫結
a.off('event',func);//為某個事件解除某個函式
a.off('event');//解除某個事件的所有函式
a.off();//解除所有事件的所有函式
事件引數
對每個繫結的函式func，都會傳入一個event物件，用於獲取事件的引數。
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
動畫
顯示/隱藏
show()：顯示
hide()：隱藏
toggle()：根據當前的狀態選擇隱藏或顯示
展開/收縮
slideUp()：收縮
slideDown()：展開
slideToggle()：根據當前狀態選擇收縮或展開
淡入/淡出
fadeIn()：淡入
fadeOut()：淡出
fadeToggle()：根據當前狀態選擇淡入或淡出
上述函式的引數可以使用時間（以毫秒為單位）作為動畫的過渡時間，也可以使用fast、slow等引數。
自定義動畫
var div = $('#test-animate');
div.animate({
opacity: 0.25,
width: '256px',
height: '256px'
}, 3000,func(...){...}); // 在3秒鐘內CSS過渡到設定值
animate接受三個引數：css最終效果，過渡的時間，回撥函式
暫停
delay()：引數為暫停的毫秒數
序列動畫
多次呼叫上述函式即可實現序列的效果
var div = $('#test-animates');
// 動畫效果：slideDown - 暫停 - 放大 - 暫停 - 縮小
div.slideDown(2000)
.delay(1000)
.animate({
width: '256px',
height: '256px'
}, 2000)
.delay(1000)
.animate({
width: '128px',
height: '128px'
}, 2000);
AJAX
通過$.ajax(url, settings)來使用ajax
settings有如下選項：
- async：是否非同步執行AJAX請求，預設為
true，千萬不要指定為false； - method：傳送的Method，預設為
'GET'，可指定為'POST'、'PUT'等； - contentType：傳送POST請求的格式，預設值為
'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定為text/plain、application/json； - data：傳送的資料，可以是字串、陣列或object。如果是GET請求，data將被轉換成query附加到URL上，如果是POST請求，根據contentType把data序列化成合適的格式；
- headers：傳送的額外的HTTP頭，必須是一個object；
- dataType：接收的資料格式，可以指定為
'html'、'xml'、'json'、'text'等，預設情況下根據響應的Content-Type猜測。
回撥函式：在請求完成後自動呼叫：
var jqxhr = $.ajax('/api/categories', {
dataType: 'json'
}).done(function (data) {
ajaxLog('成功, 收到的資料: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
ajaxLog('失敗: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
ajaxLog('請求完成: 無論成功或失敗都會呼叫');
});
GET
可以通過get(url,data)快速使用GET方法
POST
可以通過post(url,data)快速使用POST方法
getJSON
可以通過getJSON(url,data)快速使用GET方法獲取一個JSON物件
擴充套件
可以使用$.fn.plugin = func(...){...}為jQuery物件繫結方法。
例：
$.fn.highlight1 = function () {
// this已繫結為當前jQuery物件:
this.css('backgroundColor', '#fffceb').css('color', '#d85030');
return this;
}
使用引數
$.fn.highlight2 = function (options) {
// 要考慮到各種情況:
// options為undefined
// options只有部分key
var bgcolor = options && options.backgroundColor || '#fffceb';
var color = options && options.color || '#d85030';
this.css('backgroundColor', bgcolor).css('color', color);
return this;
}
其中&&是指若沒有這個key則給它加上去，||表示若為undefined，則取預設值。
還有另一種表示方法：
$.fn.highlight = function (options) {
// 合併預設值和使用者設定值:
var opts = $.extend({}, $.fn.highlight.defaults, options);
this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
return this;
}
// 設定預設值:
$.fn.highlight.defaults = {
color: '#d85030',
backgroundColor: '#fff8de'
}
其中extend({},obj1,obj2,…)表示將所有物件合併成為一個，若遇到相同的key，後面的obj覆蓋前面的obj。
另外，使用.defaults的方法表示預設值更加靈活。
錯誤處理
try...catch...finally
有錯誤發生時，執行流程：
- 先執行
try { ... }的程式碼； - 執行到出錯的語句時，後續語句不再繼續執行，轉而執行
catch (e) { ... }程式碼； - 最後執行
finally { ... }程式碼。
而沒有錯誤發生時，執行流程：
- 先執行
try { ... }的程式碼； - 因為沒有出錯，
catch (e) { ... }程式碼不會被執行； - 最後執行
finally { ... }程式碼。
另外，catch和finally不必都出現，但應至少出現一個。
丟擲錯誤
throw new Error('...')