1. 節點操作
（1）創建和添加節點
<script type="text/javascript">
$(function() {
// 創建jQuery對象，var h1 = $('<h1>jquery</h1>');
$("div").append('<h1>jquery</h1>'); // 添加jQuery對象,參數爲代碼字符串
$("div").append($("p")); // p添加到div內部最後面
$("p").appendTo($("div")); // 與上面等價
$("div").prepend($("p")); // p添加到div內部最前面
$("p").prependTo($("div")); // 與上面等價
$("div").after($("p")); // p添加到div外部後面
$("div").before($("p")); // p添加到div外部前面
})
</script>
（2）清空和刪除節點
<script type="text/javascript">
$(function() {
$("div").html(""); // 清空元素內容，但易內存泄漏，事件不會被清除
$("div").empty(); // 清除元素內容，事件也同樣清除
$("div").remove(); // 刪除元素
$(".des").clone(true).appendTo("div");
// 傳參false深度複製但不復制事件；傳參true深複製，複製事件
})
</script>
2. 動畫
（1）顯示隱藏動畫：show（）、hide（）。
<script type="text/javascript">
$(document).ready(function() {
$("input").eq(0).click(function() {
// $("div").show(); // 不傳參數，沒有動畫效果
// $("div").show(1000); //動畫持續時間，可以是毫秒值，也可以是固定字符串fast:200ms,normal:400ms,slow:600ms
$("div").show(1000, function() { // 回調函數，動畫執行完成後執行
console.log("hahahaha");
})
});
$("input").eq(1).click(function() {
// $("div").hide();
// $("div").hide(1000);
$("div").hide(1000, function() {
console.log("hehehehe");
})
});
})
</script>
（2）滑入滑出切換動畫：slideUp（）、slideDown（）、slideToggle（）用法與上面顯示隱藏動畫類似。
（3）淡入淡出切換動畫：fadeIn（）、fadeOut（）、fadeToggle（）用法與上面顯示隱藏動畫類似。
（4）自定義動畫：
<script type="text/javascript">
$(document).ready(function() {
$("input").eq(0).click(function() {
$("#box1").animate({left:800}, 8000, "linear", function(){
console.log("hahahaha");
});
// 第一個參數：對象，需要的動畫樣式；第二個參數：執行時間；第三個參數：動畫執行效果
// 默認動畫效果swing，還可取值勻速linear等
});
})
</script>
（5）stop用法
<script type="text/javascript">
$(document).ready(function() {
$("input").eq(0).click(function() {
$("div").slideDown(4000).slideUp(4000);
});
$("input").eq(1).click(function() {
// $("div").stop(); // 沒有參數時表示停止當前正在執行的動畫，防止動畫隊列出錯
// $("div").stop().animate(); // 常用
// 第一個參數clearQueue是否清除動畫隊列 true false
// 第二個參數jumpToEnd是否跳轉到當前動畫的最終效果 true false
$("div").stop(true, true);
});
})
</script>
3. 事件機制
（1）發展歷程
| 簡單事件綁定 | $("p").click(function(){}); $("p").mouseenter(function(){}); $("p").mouseleave(function(){}); | 不能同時註冊多個事件 |
| bind事件綁定 | $("p").bind("click mouseenter", function(){}); | 第一個參數事件類型，第二個參數事件處理程序，可以同時註冊多個事件，但不支持動態綁定事件 |
| delegate事件綁定 | $("div").delegate("p", "click", function(){}); | 給父元素註冊委託事件，子元素執行，第一個參數事件最終由誰執行，第二個參數事件的類型，第三個參數函數，函數最後由子元素執行，例如爲div所有的子元素p註冊事件，支持動態綁定事件 |
| on註冊事件 |
$("p").on("click", function(){}); $("div").on("click", "p", function(){}); |
第一種註冊簡單事件，自己觸發，不支持動態綁定；第二種父元素綁定代理事件，給內部元素觸發，支持動態綁定；第一個參數事件類型，第二個參數執行事件的後代元素（可選），沒有後代元素則自己執行，第三個參數傳遞給處理函數的數據，通過event.data使用，event爲函數參數，第四個參數函數 |
（2）事件解綁
| $("#btn").off("click"); | 給id爲btn的元素接觸click事件，也可以不傳參數，則是解除所有事件 |
（3）觸發事件
| $("#btn").click(); | 觸發id爲btn的元素的click事件，一般用於別的函數中調用 |
| $("#btn").trigger("click"); | 觸發id爲btn的元素的click事件，一般用於別的函數中調用 |
（4）事件對象（event爲function的參數）
| event.screenX; event.screenY; | 相對於屏幕最左上角的位移值 |
| event.clientX; event.clientY; | 距離頁面最左上角的位置（忽視滾動條） |
| event.pageX; event.pageY; | 距離頁面最頂部左上角的位置（計算滾動條的距離） |
| event.keyCode; | 按下的鍵盤代碼 |
| event.data; | 存儲綁定事件時傳遞的附加數據 |
| event.stopPropagation(); | 阻止事件冒泡行爲，即點擊子元素，不觸發父元素的事件 |
| event.preventDefault(); | 阻止瀏覽器默認行爲，例如<a>標籤的跳轉頁面 |
| return false; | 既能阻止事件冒泡，又能阻止瀏覽器默認行爲 |
4. 補充知識點
（1）鏈式編程：一般用於設置操作，篩選選擇器會改變jQuery對象的DOM對象，例如prevAll()、nextAll()，end()用於恢復到上次的狀態，返回匹配元素之前的狀態。
（2）each方法：遍歷jQuery對象集合，爲每一個匹配的元素執行一個函數，參數一表示當前元素在所有匹配元素中的索引號，參數二表示當前元素（DOM對象）。
$("li").each(function(index, element) {
$(element).css("opacity", (index+1)/10);
})
（3）$衝突：若$需要被賦予新的定義，可用$.noConflict()釋放$的控制權，默認用jQuery接收控制權；也可以用變量$$ = $.noConflict();的接收控制權，然後變量$$當做$使用。
5. 插件（jQuery文件之後引入）
（1）jquery.color.js：使jQuery動畫能夠實現顏色漸變。
（2）jquery.lazyload.js：在比較長的頁面（滾動條）延遲加載圖片，圖片的src屬性需修改成data-original，給圖片添加lazy類，然後添加代碼$(".lazy").lazyload()。
（3）jquery.ui：需同時引入jquery.ui.js和jquery.ui.css。
（4）jquery插件製作：$.prototype.pluginName = function(){};或者$.fn.pluginName = function(){};實現功能的添加，返回值return this;避免鏈式編程的破壞。