jQuery學習筆記：基礎
阿新 • • 發佈：2018-11-11
本文主要總結jQuery中一些知識點
概念
美元符號$是著名的jQuery符號。jQuery把所有功能全部封裝在一個全域性變數jQuery中，而$也是一個合法的變數名，它是變數jQuery的別名
$本質上就是一個函式，但是函式也是物件，於是$除了可以直接呼叫外，也可以有很多其他屬性
選擇器
層級選擇器
查詢和過濾
操作DOM
- 修改Text和Html：呼叫jQuery物件的 text( ) 和 html( ) 方法分別獲取節點和原始Html文字
- 修改CSS：呼叫jQuery物件的 css('name', 'value')
- 顯示和隱藏DOM：呼叫jQuery物件的 hide( ) 和 show( )
- 獲取DOM資訊：呼叫jQuery物件的 attr( ) removeAttr( ) prop( ) is( )
- 操作表單：呼叫jQuery物件的val( )
事件
用on方法來繫結一個事件，需要傳入事件名稱和應對的處理函式
var a = $('#test-link'); a.on('click', function () { alert('Hello!'); });
或者用簡化的寫法直接呼叫 click( )
a.click(function () { alert('Hello!'); });
初始化程式碼必須放到 document 物件的 ready 事件中，保證DOM已完成初始化：
<html>
<head>
<script>
$(document).on('ready', function () {
});
</script>
</head>
<body>
<form id="testForm">
...
由於 ready 事件使用非常普遍，所以可以簡化：
$(document).ready(function () { });
甚至可以再簡化為：
$(function () { // init... });
AJAX
jQuery在全域性物件jQuery（也就是$）幫頂了 ajax( ) 函式，可以處理AJAX請求
ajax(url, settings) 函式需要接收一個url和一個可選的 settings 物件，常用的選項如下：
- async：是否非同步，預設true，非特殊不要指定為false
- method：傳送的Methode，預設為'GET'，可指定為'POST'或'PUT'等
- contentType：傳送POST請求的格式，預設值為'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定為'text/plain' 或 'application/json'
- data：傳送的資料，型別可以是字串、陣列或oject。如果是GET請求，data將被轉換成query附加到URL上，如果是POST請求，根據contentType把data序列化成合適的格式
- headers：傳送額外的HTTP頭，必須是一個object
- dataType：接收的資料格式，可以指定為'html' 'xml' 'json' 'text'等，預設情況根據響應的content-Type猜測
下面是一個傳送GET請求，並返回一個JSON格式的資料
var jqxhr = $.ajax('/api/categories', { dataType: 'json' });
jQuery的jqXHR物件類似一個Promise物件，我們可以用鏈式寫法來處理各種回撥：
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('請求完成: 無論成功或失敗都會呼叫'); });
最後可以寫成這樣
$.ajax('${base}/apply/save', {
method: 'POST',
data: {'type': type, 'expo': expo},
dataType: 'json'
})
.done(function (data) {
// done
})
.fail(function (xhr, status) {
console.log('fail: ' + xhr.status + ' reason:' + status);
})
.always(function () {
// done
});
（非原創 侵刪 文章來源：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000）