jQuery 節(jié)點(diǎn)操作

1. 創(chuàng)建元素：
   語法：var $li = $('<li></li>')
2. 追加元素
   ? 向父元素最后追加
   語法：父元素jQuery對象.append(新創(chuàng)建的jQuery對象);

//$li是創(chuàng)建的元素對象
$("ul").append($li)

語法：新創(chuàng)建jQuery對象.appendTo('父元素選擇器' 或 父元素jQuery對象);

// $("ul")父元素選擇器
$li.appendTo($("ul"));

? 向父元素最前面追加
語法：父元素jQuery對象.prepend(新創(chuàng)建的jQuery對象);
語法：新創(chuàng)建jQuery對象.prependTo('父元素選擇器' 或 父元素jQuery對象);

? 向元素后面追加新的兄弟
語法：jQuery對象.after(新創(chuàng)建的jQuery對象);
語法：新創(chuàng)建jQuery對象.insertAfter('選擇器' 或 jQuery對象);

//jQuery對象$li
$("<li>33333333</li>").insertAfter($li);
或
//選擇器li
$("<li>33333333</li>").insertAfter('li');

? 向元素前面追加新的兄弟
語法：jQuery對象.before(新創(chuàng)建的jQuery對象);
語法：新創(chuàng)建jQuery對象.insertBefore('選擇器' 或 jQuery對象);

//選擇器li
$("<li>33333333</li>").insertBefore('li');

3. 刪除元素
   jQuery對象.remove();

4. 清空元素

• 清空方式1：jQuery對象.empty(); 推薦使用， 清空內(nèi)部的所有元素及元素相關(guān)的事件
  empty() 方法，清除所有子節(jié)點(diǎn)的同事，清除子節(jié)點(diǎn)上的事件
• 清空方式2：jQuery對象.html(''); 僅僅清空內(nèi)部的元素，不清清理內(nèi)存中的元素的事件
  html() 方法，將參數(shù)設(shè)置為空字符串

5. 克隆元素
   jQuery對象.clone(布爾值); 返回克隆好的元素
   ? 參數(shù)：默認(rèn)是false,表示僅僅克隆內(nèi)容。 true，克隆內(nèi)容和事件

jQuery 操作元素的尺寸

1. width() 和 height() 方法
   操作的大小僅僅是內(nèi)容部分
   設(shè)置：jQuery 對象.width(數(shù)字)
   獲?。簀Query 對象.width()

2. innerWidth() 和 innerHeight() 方法：操作的大小是內(nèi)容部分 + padding

3. outerWidth() 和 outerHeight() 方法：操作的大小是內(nèi)容部分 + padding + border

jQuery 操作元素的位置

1. 獲取元素距離文檔的位置：jQuery 對象.offset()
   ? 返回一個(gè)對象，對象中包含了元素的位置
   ? 注意：offset() 方法獲取的元素的位置，永遠(yuǎn)參照文檔,和定位沒有關(guān)系

2. 距離上級(jí)定位參考元素的位置：jQuery 對象.position()
   ? 返回的一個(gè)對象，對象中包含了元素的位置
   ? 注意：position() 方法獲取的元素的位置,參照最近的定位元素（和定位有關(guān)系）

3. 操作卷去的頁面間距
   獲取：jQuery 對象.scrollTop() 返回值是數(shù)字
   設(shè)置：jQuery 對象.scrollTop(數(shù)字)

jQuery 事件操作

1. 簡單方式注冊事件：jQuery 對象.click(事件處理程序)

2. on 方法注冊事件

• 注冊簡單事件語法：jQuery 對象.on('事件名',事件處理程序);

// on() 方法的封裝的底層實(shí)際是 addEventListener()
$("input").on("click",function () {
    alert(2)
})

? 事件委托的實(shí)現(xiàn)：jQuery 對象.on('事件名','選擇器',事件處理程序);
選擇器：子孫元素
注意：在事件處理程序中，this 代表的是子孫元素（所點(diǎn)最先觸發(fā)的）

// 原生 DOM 中如何實(shí)現(xiàn)事件委托
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function (e) {
    e.target.style.background = "pink";
};

// jQuery 中的事件委托
// on() 方法傳遞三個(gè)參數(shù)
// 參數(shù)1： 事件類型
// 參數(shù)2： 進(jìn)行委托的子元素的選擇器
// 參數(shù)3： 事件處理程序
$("ul").on("click", "li", function () {
    // 在事件委托過程中，事件函數(shù)的內(nèi)部 this 不是指向事件源，而是指向觸發(fā)事件的 委托子元素
    alert($(this).text())
})

3. off 方法移除事件

• 解綁簡單的事件：jQuery 對象.off('click',事件處理程序名稱)

// 定義事件處理函數(shù)
var fun1 = function () {
    alert(2)
}; 
var fun2 = function () {
    alert(3)
};
// 綁定簡單事件
$("input").on("click",fun1)
$("input").on("click",fun2)

// 解綁事件
$("input").off("click",fun2)

• 解綁事件委托注冊的事件：jQuery 對象.off('click',‘選擇器’,事件處理程序名稱)

var fn1 = function () {            
    alert($(this).text())
};
var fn2 = function () {            
    alert($(this).index())
};
// 綁定事件委托的事件
$("ul").on("click", "li", fn1)
$("ul").on("click", "li", fn2)
// 解綁事件委托
$("ul").off("click", "li", fn2)

4. 觸發(fā)事件：jQuery 對象.trigger('事件名');
   應(yīng)用：輪播圖的自動(dòng)播放，輪播圖的切換事件給trigger（）方法的參數(shù)

jQuery 事件對象

1. 事件對象
   ? 事件處理程序的第一個(gè)形參 e

2. 鼠標(biāo)事件對象相關(guān)的屬性
   ? 事件對象.clientX/Y 參照瀏覽器
   ? 事件對象.pageX/Y 參照文檔
   ? 事件對象.offsetX/Y 參照元素

3. 鍵盤事件對象相關(guān)的屬性
   ? 事件對象.keyCode 返回鍵碼數(shù)字
   ? 事件對象.altKey/shiftKey/ctrlKey 返回是布爾值。 檢測是否按下（true）

4. 公共的屬性或方法
   ? 屬性
   事件對象.target 最初觸發(fā)事件的DOM元素
   事件對象.currentTarget 在事件冒泡階段中的當(dāng)前DOM元素
   ? 方法：
   事件對象.preventDefault(); 阻止默認(rèn)行為
   事件對象.stopPropagation(); 阻止事件冒泡

5. 多庫共存問題
   關(guān)于 $ 沖突的問題
   ? 解決方案1：jQuery 中不使用 $,使用 jQuery
   ? 解決方案2：jQuery 庫釋放 $ 符合的使用權(quán)，用其他簡單的符號(hào)代替
   jQuery.noConflict(); 釋放 $,把 $ 代表的函數(shù)返回給用戶，用戶可以用其他變量接收

jQuery 插件使用

1. 獲取插件
   ? 百度搜索、github搜索
   ? jQuery 插件庫之家：http://www.htmleaf.com
2. 注意
   先引入 jQuery 文件，再引入插件庫文件，再去使用
   復(fù)制源代碼或看文檔使用