JQuery基礎筆記及面試題

1. jQuery 是什麼？

• jQuery是一款優秀的 JavaScript 庫，從命名可以看出 jquery 最主要的用途是用來做查詢（ jQuery = js + Query),正如 jQuery 官方 Logo 副標題所說（write less, do more)使用 jQuery 能讓我們對 HTML 文檔遍歷和操作，事件處理，動畫以及 Ajax 變得更加簡單

• 原生 JS 設置背景

window.onload = function (ev) {
   // 1.利用原生的JS查找DOM元素
   var div1 = document.getElementsByTagName("div")[0];
   var div2 = document.getElementsByClassName("box1")[0];
   var div3 = document.getElementById("box2");

   // 2.利用原生的JS修改背景顏色
   div1.style.backgroundColor = "red";
   div2.style.backgroundColor = "blue";
   div3.style.backgroundColor = "yellow";
}

• 使用 jQuery 設置背景

$(document).ready(function(){
// 查詢，操作 CSS 一步到位
	$("div").eq(0).css('background','red');
	$(".one").eq(0).css('background','blue');
	$("#two").css('background','yellow');
});

2. 爲什麼要使用 jQuery?

• 強大的選擇器：方便快速查找 DOM 元素
  • 通過 jQuery 查找 DOM 元素要比原生 js 快捷很多
  • jQuery允許開發者使用CSS1-CSS3幾乎所有的選擇器,以及jQuery獨創的選擇器
• 鏈式調用: 可以通過 . 不斷調用jQuery對象的方法
  • jQuery可以通過.（點）.不斷調用jQuery對象的方法，而原生JavaScript則不一定

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
    // 報錯,必須分開寫
    div[0].style.backgroundColor = "red".width = 200+"px";
	// div[0].style.width = 200+"px";
    
    // 2.jQuery
    $(document).ready(function () {
    // 不報錯,後面還可以接着繼續寫
        $("div").eq(1).css('background', 'yellow').css('width', '200px');
    }); 
</script>

• 隱式遍歷(迭代): 一次操作多個元素

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
	// div.style.backgroundColor = "red";// 無效
    for(var i = 0; i<div.length; i++){
        div[i].style.backgroundColor = "red";
    }

    // 2.jQuery
    $(document).ready(function () {
        // 隱式遍歷(迭代)找到的所有div
        $("div").css('background', 'yellow');
    });
</script>

• 讀寫合一: 讀數據/寫數據使用是一個函數

<script>
    $(document).ready(function () {
        // 讀取數據
        var $tx = $("div").eq(0).text();
        alert($tx);
        // 寫入數據
        $("div").eq(0).text("新的數據");
    });
</script>

• 事件處理
• DOM 操作（C增U改D刪）
• 樣式操作
• 動畫
• 插件支持
• 瀏覽器兼容（建議學習1.x版本）
  • 1.x：兼容ie678，但相對其它版本文件較大，官方只做BUG維護，功能不再新增，最終版本：1.12.4
  • 2.x：不兼容ie678，相對1.x文件較小，官方只做BUG維護，功能不再新增，最終版本：2.2.4
  • 3.x：不兼容ie678，只支持最新的瀏覽器，很多老的jQuery插件不支持這個版本，相對1.x文件較小，提供不包含Ajax/動畫API版本

3. jQuery 入口函數

1. jQuery與JavaScript加載模式對比

1. 原生JS會等到DOM元素加載完畢,並且圖片也加載完畢纔會執行
2. jQuery會等到DOM元素加載完畢,但不會等到圖片也加載完畢就會執行

// js 原生入口函數
window.onload = function (ev) {
   // 1.通過原生的JS入口函數可以拿到DOM元素
   var images = document.getElementsByTagName("images")[0];
   
   // 2.通過原生的JS入口函數可以拿到DOM元素的寬高
   var width = window.getComputedStyle(images).width;
            
}

// jQuery 入口函數
$(document).ready(function () {
   // 1.通過jQuery入口函數可以拿到DOM元素
   var $images = $("images");

   // 2.通過jQuery入口函數不可以拿到DOM元素的寬高
   var $width = $images.width();

});

1. 原生的JS如果編寫了多個入口函數,後面編寫的會覆蓋前面編寫的
2. jQuery中編寫多個入口函數,後面的不會覆蓋前面的

// 原生 js
window.onload = function (ev) {
	alert("hello lnj1");// 不會顯示
}
window.onload = function (ev) {
	alert("hello lnj2");// 會顯示
}

// jQuery
$(document).ready(function () {
	alert("hello lnj1");// 會顯示
});
$(document).ready(function () {
	alert("hello lnj2");// 會顯示
});

• jQuery 不會覆蓋的本質
  • jQuery框架本質是一個閉包,每次執行我們都會給ready函數傳遞一個新的函數,不同函數內部的數據不會相互干擾
• 爲何能訪問$符號
  • 因爲$符號 jQuery 框架對外暴露的一個全局變量
• 爲何 window.jQuery = window.$ = jQuery; 而不是window.jQuery = jQuery;
  • jQuery框架不僅提供了jQuery訪問還提供$訪問,提升開發者的編碼效率
• JavaScript中如何定義一個全局變量?
  • 所有全局變量是 window 對象的屬性
  • jQuery 框架源碼實現

  window.jQuery = window.$ = jQuery;
  

  • 使用 jQuery 框架只有兩種方式
    • 通過 $
    • 通過 jQuery

總結：

	window.onload	$(document).ready()
執行時機	必須等待網頁全部加載完畢(包括 圖片等),然後再執行包裹代碼	只需要等待網頁中的DOM結構 加載完畢,就能執行包裹的代碼
執行次數	只能執行一次,如果第二次,那麼 第一次的執行會被覆蓋	可以執行多次,第N次都不會被上 一次覆蓋

2. jQuery 其他寫法

	// 1.第一種寫法
    $(document).ready(function () {
        // alert("hello lnj");
    });

    // 2.第二種寫法
    jQuery(document).ready(function () {
        // alert("hello lnj");
    });

    // 3.第三種寫法(推薦)
    $(function () {
        // alert("hello lnj");
    });

    // 4.第四種寫法
    jQuery(function () {
        alert("hello lnj");
    });

3. 解決$符號衝突問題

1. 釋放 $ 使用權

當便捷訪問符號發生衝突時,我們可以釋放$使用權, 釋放之後只能使用jQuery

jQuery.noConflict();

注意點:

• 釋放操作必須在編寫其它jQuery代碼之前編寫
• 釋放之後就不能再使用$,改爲使用jQuery

2. 自定義訪問符號

	// 2.自定義一個訪問符號
    var nj = jQuery.noConflict();
    nj(function () {
        alert("hello lnj");
    });

4. jQuery 核心函數

  <script>
        $();//jQuery原理();就代表調用jQuery的核心函數

        // 1.接收一個函數
        $(function () {
            alert("hello lnj");
            
            // 2.接收一個字符串
            // 2.1接收一個字符串選擇器
            // 返回一個jQuery對象, 對象中保存了找到的DOM元素
            var $box1 = $(".box1");
            var $box2 = $("#box2");
            
            // 2.2接收一個字符串代碼片段
            // 返回一個jQuery對象, 對象中保存了創建的DOM元素
            var $p = $("<p>我是段落</p>");
            $box1.append($p);
            
            // 3.接收一個DOM元素
            // 會被包裝成一個jQuery對象返回給我們
            var span = document.getElementsByTagName("span")[0];
            var $span = $(span);

        });
    </script>
<body>
	<div class="box1"></div>
	<div id="box2"></div>
	<span>我是span</span>
</body>

5. jQuery 對象

1. jQuery 對象的本質

• jQuery 對象的本質是一個僞數組

var $div = $("div");
	console.log($div);
	
var arr = [1, 3, 5];
	console.log(arr);

• 什麼是僞數組
  • 有 0 到 length-1 屬性
  • 並且有 length 屬性
    例：

var obj = {0:"lnj", 1:"33", 2:"male", length: 3}

6. jQuery 靜態方法

1. 什麼是靜態方法

靜態方法對應的是對象方法,對象方法用實例對象調用,而靜態方法用類名調用

  // 1.定義一個類
  function AClass() {
   }
   // 2.給這個類添加一個靜態方法
   // 直接添加給類的就是靜態方法
   AClass.staticMethod = function () {
       alert("staticMethod");
   }
   // 靜態方法通過類名調用
   AClass.staticMethod();

   // 3.給這個類添加一個實例方法
   AClass.prototype.instanceMethod = function () {
       alert("instanceMethod");
   }
   // 實例方法通過類的實例調用
   // 創建一個實例(創建一個對象)
   var a = new AClass();
   // 通過實例調用實例方法
   a.instanceMethod();

2. jQuery.holdReady()

• 暫停或者恢復 jQuery.ready() 事件
• 傳入 true 或 false

<script>
	// 使用$直接調用,是靜態方法
	$.holdReady(true);
	$(function () {
	   $("#first").click(function () {
	       alert("我是你想要的彈窗");
	   });
	});
</script>
<body>
	<button id="first">點擊測試彈出</button>
	<button id="second">解除延遲</button>
<script>
    $("#second").click(function(){
        $.holdReady(false);
    });
</script>
</body>

3. each 方法

• js 原生 forEach 方法
  • 原生的forEach方法只能遍歷數組, 不能遍歷僞數組

/*
  第一個參數: 遍歷到的元素
  第二個參數: 當前遍歷到的索引
*/
	var arr = [1, 3, 5, 7, 9];
	var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        
	arr.forEach(function (value, index) {
		console.log(index, value);
	});
	
	obj.forEach(function (value, index) {
		console.log(index, value);// 報錯
	});

• jQuery 的 each 靜態方法
  • 遍歷對象或數組(僞數組）
  • 優點統一遍歷對象和數組的方式
  • 回調參數的順序更符合我們的思維模式

// 1.利用jQuery的each靜態方法遍歷數組
/*
第一個參數: 當前遍歷到的索引
第二個參數: 遍歷到的元素
*/
	$.each(arr, function (index, value) {
		console.log(index, value);
	});
	$.each(obj, function (index, value) {
		console.log(index, value);
	});

4. map 方法

• js 原生 map 方法
  • 不能遍歷的僞數組
• jQuery 的 map 方法
  • 遍歷對象或數組,將回調函數的返回值組成一個新的數組返回

$(function () {
     // 4.1遍歷數組
     var arr = [1, 3, 5, 7, 9];
     // 4.1.1通過原生方法遍歷數組
     // 第一個回調函數參數是遍歷到的元素
     // 第二個回調函數參數是當前遍歷的索引
     // 第三個回調函數參數是當前被遍歷的數組
     // 返回值: 將回調函數返回值收集起來組成一個新的數組
     var res = arr.map(function (ele, idx, arr) {
         console.log(idx, ele, arr);
         return ele + idx;
     });
     console.log(res);
     
     // 4.1.2通過jQuery靜態方法遍歷數組
     // 第一個回調函數參數是遍歷到的元素
     // 第二個回調函數參數是當前遍歷的索引
     // 返回值: 將回調函數返回值收集起來組成一個新的數組
     var $res2 = $.map(arr, function (ele,idx) {
         console.log(idx, ele);
         return ele + idx;
     });
     console.log($res2);

     // 4.2遍歷對象
     var obj = {name: "lnj", age:"33", gender:"male"};
     /*
     obj.map(function (ele, idx, obj) {
         // 報錯,原生JS沒有map方法
         console.log(idx, ele, obj);
     });
     */
     var $res = $.map(obj, function (value, key) {
         console.log(key, value);
         return key + value;
     });
     console.log($res);
 });

• jQuery中的each靜態方法和map靜態方法的區別:
  1. each靜態方法默認的返回值就是, 遍歷誰就返回誰
  2. map靜態方法默認的返回值是一個空數組
  3. each靜態方法不支持在回調函數中對遍歷的數組進行處理
  4. map靜態方法可以在回調函數中通過return對遍歷的數組進行處理, 然後生成一個新的數組返回

5. trim 方法

作用: 去除字符串兩端的空格
參數: 需要去除空格的字符串
返回值: 去除空格之後的字符串

<script>
   $(function () {
       var str = "   lnj   ";
       console.log("---"+str+"---");
       var $res = $.trim(str);
       console.log("---"+$res+"---");
   });
</script>

6. isWindow 方法

作用: 判斷傳入的對象是否是window對象
返回值: true/false

	// 真數組
	var arr = [1, 3, 5, 7, 9];
	// 僞數組
	var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
	// 對象
	var obj = {"name":"lnj", age:"33"};
	// 函數
	var fn = function(){};
	// window對象
	var w = window;
	
	var res = $.isWindow(w);
	console.log(res);

7. isArray 方法

作用: 判斷傳入的對象是否是真數組
返回值: true/false

$(function () {
    // 對象
    var obj = {name:"lnj",age: "33", gender:"male"};
    // 真數組
    var arr = [1, 3, 5, 7, 9];
    var $res = $.isArray(obj);
    console.log($res);// false
    var $res2 = $.isArray(arr);
    console.log($res2);// true
});

8. isFunction 方法

作用: 判斷傳入的對象是否是一個函數
返回值: true/false
注意點:

• jQuery框架本質上是一個函數
• (function( window, undefined ) {})( window );

$(function () {
	var obj = {name:"lnj",age: "33", gender:"male"};
	var arr = [1, 3, 5, 7, 9];
	var fn = function () {}
	var $res = $.isFunction(obj);
	console.log($res);// false
	$res = $.isFunction(arr);
	console.log($res);
	$res = $.isFunction(fn);
	console.log($res);
	// 通過該方法驗證了我們前面所說的,jQuery框架本質是一個匿名函數
	$res = $.isFunction($);
	console.log($res);
});

7. jQuery 選擇器

1. 基礎選擇器

選擇器	名稱	描述	返回	實例
#id	id選擇器	根據給定的id匹配一個元素	單個元素	$("#box");選取id爲box元素
.class	類選擇器	根據給定的類名匹配元素	集合元素	$(".box");選取所有類名爲box元素
element	元素選擇器	根據給定的元素名稱匹配元素	集合元素	$(“p”);選取所有 元素
*	通配符選擇器	匹配所有元素	集合元素	$("*");選取所有元素
selector1,selector2,selectorN	並集選擇器	將所有選擇器匹配到的元素合併後一起返回	集合元素	$(“div,p,.box”);選取所有 元素,所有 元素和所有類名爲box元素

2. 層次選擇器

選擇器	名稱	描述	返回	實例
$(“ancestor descendant”)	後代選擇器	選取ancestor元素的所有descendant後代標籤(不光是兒子,包括孫子/重孫子等)	集合元素	$(“div span”);選取<div>元素裏所有的<span>元素
$(“parent > child”)	子元素選擇器	找到選取parent 元素中所有直接子元素child(只有兒子,不包括孫子/重孫子等)	集合元素	$(“div>span”);選取<div>元素下元素名稱是<span>的子元素
$(“prev + next”)	相鄰兄弟選擇器	選取prev元素後面緊跟的那個next元素	集合元素	$(".one+div");選取類名爲one的下一個同級的<div>元素
$(“prev ~ siblings”)	通用兄弟選擇器	選取prev元素後面的所有next元素	集合元素	$("#two~div");選取id名爲two元素後面所有同級的<div>元素

3. 內容過濾選擇器

選擇器	描述	返回
:empty	選取不包含子元素或文本爲空的元素	集合元素
:parent	選取含有子元素或文本的元素	集合元素
:contains(text)	選取含有文本內容爲text的元素	集合元素
:has(selector)	選取含有選擇器所匹配的元素的元素	集合元素

1. :empty

作用: 找到既沒有文本內容也沒有子元素的指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery選擇器</title>
    <script src="代碼/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           // 找到所有div中不包含文本內容或子元素的元素
            var $res = $("div:empty");
            console.log($res.length); // 找到1個元素
            $res.each(function (idx,ele) {
                console.log(idx, ele); // one
            });
        });
    </script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div><!--包含內容不會被找到-->
<div class="three"><!--包含子元素不會被找到-->
    <span>lnj</span>
</div>
<span class="five"></span><!--不是指定元素不會被找到-->
</body>
</html>

2. :parent

作用: 找到有文本內容或有子元素的指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery選擇器</title>
    <script src="代碼/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           // 找到所有div中包含文本內容或子元素的元素
            var $res = $("div:parent");
            console.log($res.length);
            $res.each(function (idx, ele) {
                console.log(idx, ele);
            });
        });
    </script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div><!--有文本內容會被找到-->
<div class="three"><!--有子元素會被找到-->
    <span>lnj</span>
</div>
<span class="five"></span>
</body>
</html>

3. :contains(text)

作用: 找到包含指定文本內容的指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery選擇器</title>
    <script src="代碼/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 找到所有div中包含文本內容爲lnj的元素
            var $res = $("div:contains('lnj')");
            console.log($res.length);// 找到2個元素
            $res.each(function (idx, ele) {
                console.log(idx, ele);// one,three,four
            })
        });
    </script>
</head>
<body>
<div class="one">lnj</div>
<div class="two">zs</div>
<div class="three">lnj</div>
<div class="four"><!--子元素中包含該文本也會被找到-->
    <span>lnj</span>
</div>
<span class="five"></span>
</body>
</html>

4. :has(selector)

作用: 找到包含指定子元素的指定元素
和:parent區別: parent只要有子元素就會被找到,:has(selector)不僅要有子元素,而且子元素還必須滿足條件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery選擇器</title>
    <script src="代碼/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 找到所有div中包含後代元素爲span的元素
            var $res = $("div:has('span')");
            console.log($res.length);
            $res.each(function (idx, ele) {
                console.log(idx, ele);
            });
        });
    </script>
</head>
<body>
<div class="one"> <!--後代中包含span元素會被找到-->
    <span>jjj</span>
</div>
<div class="two"><!--後代中不包含span元素不會被找到-->
    <p>zs</p>
</div>
<div class="three"><!--後代中包含span元素會被找到-->
    <p>
        <span>lnj</span>
    </p>
</div>
</body>
</html>

8. jQuery 屬性操作

1. 屬性與屬性節點

1.什麼是屬性?

• 對象身上保存的變量就是屬性
• 只要對象身上都可以添加屬性(無論是自定義對象,還是DOM對象)

2.如何操作屬性?

• 添加或修改屬性(沒有就會添加,有就會修改)
  • 對象.屬性名稱 = 值;
  • 對象[“屬性名稱”] = 值;
• 獲取屬性
  • 對象.屬性名稱;
  • 對象[“屬性名稱”];

3.什麼是屬性節點?

• 在編寫HTML代碼時,在HTML標籤中添加的屬性就是屬性節點
• 在瀏覽器中找到span這個DOM元素之後, 展開看到的都是屬性
• 在attributes屬性中保存的所有內容都是屬性節點

<span class= "box" nj="123"></span> // 這裏的class和nj就是屬性節點

4.如何操作屬性節點?

• 獲取屬性節點
  • DOM元素.getAttribute(“屬性名稱”);
• 設置屬性節點
  • DOM元素.setAttribute(“屬性名稱”, “值”);

5.屬性和屬性節點有什麼區別?

任何對象都有屬性, 但是隻有DOM對象纔有屬性節點

2. 屬性節點方法

1. attr 方法

作用: 獲取或者設置屬性節點的值

• 可以傳遞一個參數, 也可以傳遞兩個參數
• 如果傳遞一個參數, 代表獲取屬性節點的值
• 如果傳遞兩個參數, 代表設置屬性節點的值

注意點:

• 如果是獲取:無論找到多少個元素, 都只會返回第一個元素指定的屬性節點的值
• 如果是設置:找到多少個元素就會設置多少個元素
• 如果是設置: 如果設置的屬性節點不存在, 那麼系統會自動新增

<script>
   $(function () {
       // 1.獲取指定屬性節點值
       var $res = $(".span1").attr("nj");
       console.log($res);
       // 2.設置屬性節點
       $(".span1").attr("nj", "666");
       $(".span2").attr("id", "box1 box2");

       // 3.注意點:
       // 3.1.獲取屬性節點時,只會獲取找到所有元素中第一個元素的屬性節點
       $res = $("span").attr("class");
       console.log($res);
        $("span").attr("class", "lnj");
   });
</script>

2. removeAttr 方法

作用: 刪除屬性節點

注意點:

• 會刪除所有找到元素指定的屬性節點

<script>
   $(function () {
       // 1.設置屬性節點時,會給所有找到元素設置屬性節點
       $("span").attr("test", "jonathan");
       // 2.刪除屬性節點時,會刪除所有找到元素的屬性節點
       $("span").removeAttr("test");
   });
</script>

3. prop 方法

作用: 設置或者獲取元素的屬性值
注意點:

• prop方法不僅能夠操作屬性, 他還能操作屬性節點
• 官方推薦在操作屬性節點時,具有 true 和 false 兩個屬性的屬性節點，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

<script>
   $(function () {
       // 1.設置屬性
       // 1.1.設置屬性時,會設置所有找到元素的屬性
       $("span").prop("demo", "lnj");
       // 2.獲取屬性
       // 2.1.獲取屬性時,只會獲取找到第一個元素的屬性
       console.log($("span").prop("demo"));
   });
</script>

4. removeProp 方法

<script>
        $(function () {
            // 刪除所有找到元素的demo屬性
            $("span").removeProp("demo");
        });
</script>

5. attr方法和prop方法區別

• 既然所有的DOM對象，都有一個attributes屬性,而prop可以操作屬性,所以也可以操作屬性節點
• 官方推薦在操作屬性節點時,具有 true 和 false 兩個屬性的屬性節點，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
• 因爲如果具有 true 和 false 兩個屬性的屬性節點,如果沒有編寫默認attr返回undefined,而prop返回false

<script>
     $(function () {
         // 1.可以通過prop獲取屬性節點
         console.log($("input").prop("class"));
         // 2.可以通過prop設置屬性節點
         $("input").prop("class", "tag");

         // 3.如果沒有默認值,那麼attr獲取返回undefined
		 //console.log($("input[type=checkbox]").attr("checked"));
         // 4.如果沒有默認值,那麼prop獲取返回false
         console.log($("input[type=checkbox]").prop("checked"));
         // 5.通過attr設置選中
		 //$("input[type=checkbox]").attr("checked", true);
         
         // 6.通過prop設置選中
         $("input[type=checkbox]").prop("checked", true)

     });
</script>

9. jQuery Class 操作

1. jQuery Class 類操作

jQuery CSS類相關方法都是用於操作DOM對象的class屬性節點的值

1. addClass

• 給元素添加一個或多個類
• 如果要添加多個, 多個類名之間用空格隔開即可

<script>
$(function () {
	$("button").eq(0).click(function () {
		// 1.添加一個類
		//$("div").addClass("class1");
		// 2.再添加一個類
		//$("div").addClass("class2");
		// 3.一次性添加多個類(用空格隔開)
		$("div").addClass("class1 class2");
	});
});
</script>

2. removeClass

• 刪除元素的一個或多個類
• 如果想刪除多個, 多個類名之間用空格隔開即可

<script>
    $(function () {
        $("button").eq(1).click(function () {
            // 4.刪除一個類
			//$("div").removeClass("class2");
            // 5.再刪除一個類
			//$("div").removeClass("class1");
            // 6.一次性刪除多個類(用空格隔開)
            $("div").removeClass("class1 class2");

        });
    });
</script>

3. toggleClass

• 切換類
• 添加或刪除一個類(存在就刪除不存在就添加)

<script>
    $(function () {
        $("button").eq(2).click(function () {
            // 7.切換一個類
			//$("div").toggleClass("class2");
            // 8.切換多個類
            $("div").toggleClass("class1 class2");
        });
    });
</script>

2. jQuery 文本值操作

1. html

• 添加或獲取元素中的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-jQuery代碼文本值</title>
    <script src="代碼/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var $btns = $("button");
            var $div = $("div");
            $btns.eq(0).click(function () {
                // 1.添加html, 相當於innerHTML
				//$div.html("<p>我是p標籤</p>");
				//$div.html("<p><span>我是span標籤</span></p>");
                $div.html("我是文本");
            });
            $btns.eq(1).click(function () {
                // 2.獲取html
                console.log($div.html());
            });
        });
    </script>
</head>
<body>
	<button>添加html</button>
	<button>獲取html</button>
	<button>添加文本</button>
	<button>獲取文本</button>
	<div></div>
</body>
</html>

2. text

• 添加或獲取元素中的文本
• text方法能做的html方法都能做,所以一般使用html方法即可

<script>
   $(function () {
       $btns.eq(2).click(function () {
           // 3.添加文本, 相當於innerText
           // 如下內容不會被轉換爲標籤
		   // $div.text('<p>我是段落</p>');
          $div.text('我是文本');
       });
       $btns.eq(3).click(function () {
           // 4.獲取文本
           console.log($div.text());
       });
</script>

3. val

• 添加或獲取元素value屬性的值

<script>
    $(function () {
        $btns.eq(4).click(function () {
            // 4.添加value值
            $("input").val("我是一個輸入框");
        });
        $btns.eq(5).click(function () {
            // 4.獲取value值
            console.log($("input").val());
        });
    });
</script>

3. jQuery CSS 樣式

1. css 方法

• 設置或獲取元素CSS樣式
• 格式1:DOM元素.css(“樣式名稱”, “值”);
• 格式2:DOM元素.css({“樣式名稱1”:“值1”,“樣式名稱2”:“值2”});

<script>
     $(function () {
         $("button").click(function () {
            // 1.單個樣式設置
		    $("div").css("width", "100px");
		 	$("div").css("height", "100px");
		 	$("div").css("background", "red");

             // 2.鏈式設置樣式
			 $("div").css("width", "100px").css("height", "100px").css("background", "red");

             // 3.傳入對象一次性設置樣式
             $("div").css({
                "width":"100px",
                 "height":"100px",
                 "background":"blue"
             });

             // 4.獲取指定樣式的值
             console.log($("div").css("width"));
         });
     });
</script>

2. width 方法

• 設置或獲取元素寬度(相當於獲取width屬性值)

<script>
        $(function () {
            $("button").eq(0).click(function () {
                // 1.獲取元素寬度(不包括padding和border)
				// alert($('.son').width());
            });
            $("button").eq(1).click(function () {
                // 2.設置元素寬度(不包括padding和border)
				// $(".son").width("50px");
            });
        });
    </script>

3. height 方法

• 設置或獲取元素寬度(相當於獲取height屬性值)

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 1.獲取元素寬度(不包括padding和border)
			// alert($('.son').width());
        });
        $("button").eq(1).click(function () {
            // 2.設置元素寬度(不包括padding和border)
			// $(".son").width("50px");
        });
    });
</script>

4. jQuery 元素位置

1. offset 方法

• 獲取或設置元素相對窗口的偏移位

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 1.獲取距離窗口的偏移位(從border開始)
            alert($('.son').offset().left); // 100
        });
        $("button").eq(1).click(function () {
            // 2.設置距離窗口的偏移位
            $('.son').offset({left:10, top:10});
        });
    });
</script>

2. position 方法

• 獲取相對於它最近的具有相對位置(position:relative或position:absolute)的父級元素的距離

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 1.獲取匹配元素相對父元素的偏移
            alert($('.son').position().left);// 50
        });
        $("button").eq(1).click(function () {
            // 2.無效,不能設置相對定位元素的偏移位
            $('.son').position({left:10, top:10})
        });
    });
</script>

5. jQuery scroll 方法

1. scrollTop 方法

• 設置或獲取匹配元素相對滾動條頂部的偏移

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 7.獲取匹配元素相對滾動條頂部的偏移
		 // alert($('.scroll').scrollTop());
		 // alert($('html').scrollTop());
            // 兼容所有瀏覽器寫法
            alert($('html').scrollTop()+$('body').scrollTop());
        });
        $("button").eq(1).click(function () {
            // 8.設置匹配元素相對滾動條頂部的偏移
		 // $('.scroll').scrollTop(100);
		 // $('html').scrollTop(100);
            // 兼容所有瀏覽器寫法
            $('html,body').scrollTop(100);
        });
    });
</script>

2. scrollLeft 方法

• scrollLeft() 方法返回或設置匹配元素的滾動條的水平位置。
• 滾動條的水平位置指的是從其左側滾動過的像素數。
• 當滾動條位於最左側時，位置是 0。

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 7.獲取匹配元素相對滾動條水平的偏移
		 	// alert($('.scroll').scrollLeft());
		 	// alert($('html').scrollLeft());
            // 兼容所有瀏覽器寫法
            alert($('html').scrollLeft()+$('body').scrollLeft());
        });
        $("button").eq(1).click(function () {
            // 8.設置匹配元素相對滾動條水平的偏移
		 	// $('.scroll').scrollLeft(100);
		 	// $('html').scrollLeft(100);
            // 兼容所有瀏覽器寫法
            $('html,body').scrollLeft(100);
        });
    });
</script>

10. jQuery 事件

1. 事件綁定

• 事件綁定方式一

  • eventName(function(){})
  • 綁定對應事件名的監聽, 例如：$(’#div’).click(function(){});
  • 優點：編碼效率略高
  • 缺點：部分事件jQuery沒有實現,所以不能添加

• 事件綁定方式二

  • on(eventName, funcion(){})
  • 通用的綁定事件監聽, 例如：$(’#div’).on(‘click’, function(){});
  • 優點：編碼效率略低
  • 缺點：所有js事件都可以添加
  • 注意點：可以添加多個相同或者不同類型的事件,不會覆蓋

建議：
能用eventName就用eventName, 不能用eventName就用on

<script>
    $(function () {
    	// 1.通過eventName綁定事件
        $("button").click(function () {
             alert("hello lnj");
         });
		$("button").click(function () {
             alert("hello 123");
         });
        $("button").mouseleave(function () {
             alert("hello mouseleave");
         });
        $("button").mouseenter(function () {
             alert("hello mouseenter");
         });

		// 2.通過on綁定事件
        $("button").on("click", function () {
            alert("hello click1");
        });
        $("button").on("click", function () {
            alert("hello click2");
        });
        $("button").on("mouseleave", function () {
            alert("hello mouseleave");
        });
        $("button").on("mouseenter", function () {
            alert("hello mouseenter");
        });
    });
</script>

2. 事件解綁

• jQuery中可以通過off(eventName,function);解綁事件
• off方法如果不傳遞參數, 會移除所有的事件（ // $(“button”).off(); ）
• off方法如果傳遞一個參數, 會移除所有指定類型的事件（ // $(“button”).off(“click”); ）
• off方法如果傳遞兩個參數, 會移除所有指定類型的指定事件（ $(“button”).off(“click”, test1); ）

<script>
    $(function () {
        function test1() {
            alert("son1");
        }
        function test2() {
            alert("son2");
        }
        function test3() {
            alert("son3");
        }
        $(".son").click(test1);
        $(".son").click(test2);
        $(".son").on("mouseleave", test3);

        $(".son").off("click", test1);
    });
</script>

3. 事件座標

• 當事件被觸發時,系統會將事件對象(event)傳遞給回調函數,通過event對象我們就能獲取時間的座標

• 獲取事件座標有三種方式

  • event.offsetX, event.offsetY 相對於事件元素左上角
  • event.pageX, event.pageY 相對於頁面的左上角
  • event.clientX, event.clientY 相對於視口的左上角

• event.page和event.client區別

  • 網頁是可以滾動的,而視口是固定的
  • 所以想獲取距離可視區域座標通過event.client
  • 想獲取距離網頁左上角的座標通過event.client

<script>
    $(function () {
        // 獲取事件的座標
        $(".son").click(function (event) {
            // 獲取相對於事件元素左上角座標
            console.log(event.offsetX, event.offsetY);
            // 獲取相對於視口左上角座標
            console.log(event.clientX, event.clientY);
            // 獲取相對於頁面左上角座標
            console.log(event.pageX, event.pageY);
        });
    });
</script>

4. 事件冒泡

1. 什麼是事件冒泡

• 事件冒泡是從目標元素逐級向上傳播到根節點的過程

2. 阻止事件冒泡

• 如果希望在觸發一個元素的事件處理程序時，不影響它的父元素, 此時便可以使用停止事件冒泡

<script>
    $(function () {
        $(".son").click(function (event) {
            console.log(".son");
            // 在子元素中停止事件冒泡,時間不會繼續向上傳播,所以父元素click方法不會被觸發
            event.stopPropagation();
        });
        $(".father").click(function () {
            console.log(".father");
        });
    });
</script>

5. 默認行爲

1. 什麼是默認行爲

• 網頁中的元素有自己的默認行爲,例如單擊超鏈接後會跳轉,點擊提交表單按鈕會提交

2. 阻止默認行爲

• 可以使用event.preventDefault();方法阻止事件默認行爲方法

<script>
    $(function () {
        $("a").click(function (event) {
            var str = $("a").attr("href");
            // 如果超鏈接是百度就不跳轉
            if(str.indexOf("baidu") > 0){
                // 阻止默認行爲
                event.preventDefault();
            }
        });
    });
</script>

6. 自動觸發事件

1. 什麼是自動觸發事件

• 通過代碼控制事件, 不用人爲點擊/移入/移除等事件就能被觸發

2. 自動觸發方式

• $(“selector”).trigger(“eventName”);
  • 觸發事件的同時會觸發事件冒泡
  • 觸發事件的同時會觸發事件默認行爲
• $(“selector”).triggerHandler(“eventName”);
  • 觸發事件的同時不會觸發事件冒泡
  • 觸發事件的同時不會觸發事件默認行爲

 <script>
     $(function () {
         /*
         $(".son").click(function () {
             alert("son");
         });
         $(".father").click(function () {
             alert("father");
         });

         // trigger會觸發事件冒泡
		 // $(".father").trigger("click");
		 // $(".son").trigger("click");

         // triggerHandler不會觸發事件冒泡
		 // $(".father").triggerHandler("click");
		 // $(".son").triggerHandler("click");
         */

         $("input[type='submit']").click(function () {
             alert("點擊了A標籤");
         });
         // trigger會觸發系統默認事件
		 // $("input[type='submit']").trigger("click");
         // triggerHandler不會觸發系統默認事件
         $("input[type='submit']").triggerHandler("click");

     });
</script>

7. 自定義事件

1. 什麼是自定義事件

• 自定義事件就是自己起一個不存在的事件名稱來註冊事件, 然後通過這個名稱還能觸發對應的方法執行, 這就是傳說中的自定義事件

2. 自定義事件的條件

• 事件必須是通過on綁定的
• 事件必須通過trigger來觸發
• 因爲trigger方法可以自動觸發對應名稱的事件,所以只要事件的名稱和傳遞給trigger的名稱一致就能執行對應的事件方法

<script>
    $(function () {
        $(".father").on("njClick", function () {
            alert("njClick");
        });
        $(".father").trigger("njClick");
    });
</script>

8. 事件命名空間

1. 什麼是事件命名空間

• 事件命名空間主要用於區分相同類型的事件,區分不同前提條件下到底應該觸發哪個人編寫的事件
• 格式: “eventName.命名空間”

2. 添加事件命名空間的條件

• 事件是通過on來綁定的
• 通過trigger觸發事件

3. 事件命名空間注意點（面試題）

1. 利用trigger觸發子元素帶命名空間的事件時，會觸發父元素帶相同命名空間的事件，父元素沒有命名空間的事件不會被觸發
2. 利用trigger觸發子元素不帶命名空間的事件時，所有父元素（帶相同命名空間，不帶命名空間）事件都會被觸發，所有子元素（帶相同命名空間，不帶命名空間）事件也都會被觸發

<script>
    $(function () {
        // 給父元素添加不帶命名空間事件
        $(".father").on("click", function () {
            alert("father");
        });
        // 給父元素添加帶命名空間事件
        $(".father").on("click.66", function () {
            alert("66 - father");
        });

        $(".son").on("click.nj", function () {
            alert("nj - 向左走");
        });
        $(".son").on("click.66", function () {
            alert("66 - 向右走");
        });
        // 會同時觸發NJ和66編寫的click事件
        // 事件會冒泡到不帶命名空間上級元素和帶相同命名空間的上級元素
		// $(".son").trigger("click");
        // 只會觸發NJ編寫的click事件
        // 事件不會冒泡到不帶命名空間上級元素
		// $(".son").trigger("click.nj");
        // 只會觸發66編寫的click事件
        // 事件只會冒泡到帶相同命名空間的上級元素
        $(".son").trigger("click.66");
    });
</script>

9. 事件委託

1. 什麼是事件委託

• 事件委託就是請其他人幫忙做我們想做的事
• 做完之後最終的結果還是會反饋到我們這裏

2. 事件委託的好處

• 減少監聽數量
  • 添加到頁面上的事件處理程序數量將直接關係到頁面的整體運行性能，因爲需要不斷的與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間
  • 每個監聽的函數都是一個對象，是對象就會佔用內存，對象越多，內存佔用率就越大，自然性能就越差
• 新增元素自動有事件響應處理
  • 默認情況下新增的元素無法響應新增前添加的事件

3. jQuery 中添加事件委託

• 添加前
  • $(“li”).click隱式迭代給界面上所有li都添加了click事件(監聽數量衆多)
  • 通過$(“ul”).append新添加的li無法影響click事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-jQuery事件委託</title>
    <script src="../day01/代碼/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.監聽li點擊事件
            $("li").click(function () {
                // 彈出當前點擊行內容
                alert($(this).html());
            });

            // 2.監聽新增按鈕點擊
            var count = 0;
            $("button").eq(0).click(function () {
                count++;
                // 新增一行內容
                $("ul").append("<li>我是新增內容"+count+"</li>")
            });
        });
    </script>
</head>
<body>
<ul>
    <li>我是第1行</li>
    <li>我是第2行</li>
    <li>我是第3行</li>
</ul>
<button>新增一行</button>
<button>移除事件委託</button>
</body>
</html>

• 添加後
  • 格式:$(parentSelector).delegate(childrenSelector, eventName, callback)
  • $(“ul”).delegate隱式迭代所有ul添加事件(相比開始迭代li,必然ul的個數會少很多)
  • 當事件被觸發時,系統會自動動態查找當前是哪個li觸發了事件,所以新增的li也能響應到事件

<script>
     $(function () {
         // 1.委託ul監聽li的點擊事件
         $("ul").delegate("li","click",function () {
             // 前面我們說過事件委託就是讓別人幫忙做事,但最終的結果還是會返回到我們手裏,所以這裏的this是觸發事件的li
             // 這裏的this之所以是觸發事件的li,本質是因爲"事件冒泡", 觸發事件的li向上傳遞到ul,觸發了click事件.
	// console.log(this);
             // 彈出當前點擊行內容
             alert($(this).html());
         });

         // 2.監聽新增按鈕點擊
         var count = 0;
         $("button").eq(0).click(function () {
             count++;
             // 新增一行內容
             $("ul").append("<li>我是新增內容"+count+"</li>")
         });
     });
</script>

10. 移入移出事件

1. mouseenter/mouseleave

• 移動到子元素不會觸發事件

<script>
    $(function () {
        // 移動到子元素不會觸發事件
         // 2.1移入事件
         $('.father').mouseenter(function () {
           console.log('mouseenter');
         });
         // 2.2移除事件
         $('.father').mouseleave(function () {
           console.log('mouseleave');
         });
    });
</script>

2. mouseover/mouseout

• 移動到子元素會觸發事件

<script>
     $(function () {
          // 2.1移入事件
          $('.father').mouseover(function () {
            console.log('mouseover') ;
          });
          // 2.2移除事件
          $('.father').mouseout(function () {
            console.log('mouseout') ;
          });
     });
</script>

3. hover

• 內容監聽移入和移出
• 內部實現就是調用mouseenter和mouseleave

<script>
     $(function () {
         /*
        // 傳入兩個回調函數,一個監聽移入,一個監聽移出
         $(".father").hover(function () {
             console.log("mouseenter");
         }, function () {
             console.log("mouseleave");
         });
         */
         // 如果只傳入一個方式,那麼這個方式既監聽移入也監聽移出
         $(".father").hover(function () {
             console.log("移入移除");
         });
     });
</script>

11. jQuery 動畫效果

1. 顯示，隱藏動畫

1. show

• 顯示動畫
• 內部實現原理根據當前操作的元素是塊級還是行內決定, 塊級內部調用display:block;,行內內部調用display:inline;

// 編寫jQuery相關代碼
$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    // 注意: 這裏的時間是毫秒
    $("div").show(1000, function () {
        // 作用: 動畫執行完畢之後調用
        alert("顯示動畫執行完畢");
    });
});

2. hide

• 隱藏動畫

$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("隱藏動畫執行完畢");
    });
});

3. toggle

• 切換動畫（顯示變隱藏，隱藏變顯示）

$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("切換動畫執行完畢");
    });
});

4. 注意點

• show(1000, function () {}? 第一個參數單位是毫秒, 1000毫秒等於1秒
• 默認的動畫時長是400毫秒
• 除了指定毫秒以外還可以指定三個預設參數 slow、normal、fast
  • slow本質是600毫秒
  • normal本質是400毫秒
  • fast本質是200毫秒
• 其它兩個方法同理可證

2. 展開，收起動畫

1. slideDown

• 展開動畫

$("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("展開完畢");
    });
});

2. slideUp

• 收起動畫

$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("收起完畢");
    });
});

3. slideToggle

• 切換動畫（ 展開變收起,收起變展開）

$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("收起完畢");
    });
});

3. 淡入，淡出動畫

1. fadeIn

• 淡入動畫

$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("淡入完畢");
    });
});

2. fadeOut

• 淡出動畫

$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("淡出完畢");
    });
});

3. fadeToggle

• 切換動畫（顯示變淡出，不顯示變淡入）

$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("切換完畢");
    });
});

4. fadeTo

• 淡入到指定透明度動畫
• 可以通過第二個參數,淡入到指定的透明度(取值範圍0~1)

$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("淡入完畢");
    })
});

4. 自定義動畫

1. animate

/*
第一個參數: 接收一個對象, 可以在對象中修改屬性
第二個參數: 指定動畫時長
第三個參數: 指定動畫節奏, 默認就是swing
第四個參數: 動畫執行完畢之後的回調函數
*/
$(".two").animate({
    marginLeft: 500
}, 5000, "linear", function () {
    // alert("自定義動畫執行完畢");
});

• 每次開始運動都必須是初始位置或者初始狀態,如果想在上一次位置或者狀態下再次進行動畫可以使用累加動畫

$("button").eq(1).click(function () {
    $(".one").animate({
        width: "+=100"
    }, 1000, function () {
        alert("自定義動畫執行完畢");
    });
});

• 同時操作多個屬性,自定義動畫會執行同步動畫,多個被操作的屬性一起執行動畫

$(".one").animate({
    width: 500,
    height: 500
}, 1000, function () {
    alert("自定義動畫執行完畢");
});

5. 動畫隊列

• 多個動畫方法鏈式編程,會等到前面的動畫執行完畢再依次執行後續動畫

$("div").slideDown(1000).slideUp(1000).show(1000);

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000);
    });
});

• 但是如果後面緊跟一個非動畫方法則會被立即執行

// 立刻變爲黃色,然後再執行動畫
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");

• 如果想顏色再動畫執行完畢之後設置
  • 1.使用回調
  • 2.使用動畫隊列

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000, function () {
            $(".one").css("background", "yellow")
        });
    });
});

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
    $(".one").css("background", "yellow")
});

• 注意：
  • 動畫隊列方法queue()後面不能繼續直接添加queue()
  • 如果想繼續添加必須在上一個queue()方法中next()方法

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
    $(".one").css("background", "yellow");
    next(); // 關鍵點
}).queue(function () {
    $(".one").css("width", "500px")
});

6. 動畫相關方法

1. delay

• 設置動畫延遲時長

$(".one").animate({
    width: 500
    // height: 500
}, 1000).delay(2000).animate({
    height: 500
}, 1000);

2. stop

• 停止指定元素上正在執行的動畫

	// 立即停止當前動畫, 繼續執行後續的動畫
	$("div").stop();
	$("div").stop(false);
	$("div").stop(false, false);

	// 立即停止當前和後續所有的動畫
	$("div").stop(true);
	$("div").stop(true, false);

	// 立即完成當前的, 繼續執行後續動畫
	$("div").stop(false, true);

	// 立即完成當前的, 並且停止後續所有的
	$("div").stop(true, true);

12. jQuery 文檔處理

1. 添加節點

1. 內部插入

• append
• appendTo
  • 將元素添加到指定元素內部的最後

// 1.創建一個節點
var $li = $("<li>新增的li</li>");
// 2.添加節點
// $("ul").append($li);
$li.appendTo("ul");

• prepend
• prependTo
  • 將元素添加到指定元素內部的最前面

// 1.創建一個節點
var $li = $("<li>新增的li</li>");
// 2.添加節點
// $("ul").prepend($li);
$li.prependTo("ul");

2. 外部插入

• after
• insertAfter
  • 將元素添加到指定元素外部的後面

// 1.創建一個節點
var $li = $("<li>新增的li</li>");
// 2.添加節點
// $("ul").after($li);
$li.insertAfter("ul");

• before
• insertBefore
  • 將元素添加到指定元素外部的前面

// 1.創建一個節點
var $li = $("<li>新增的li</li>");
// 2.添加節點
// $("ul").before($li);
$li.insertBefore("ul");

2. 刪除節點

• empty()
  • 刪除指定元素的內容和子元素, 指定元素自身不會被刪除

$("div").empty();

• remove()
  • 刪除指定元素

// 刪除所有div
$("div").remove();
// 刪除div中id是box1的那個div
$("div").remove("#box1");

• detach()

// 刪除所有div
$("div").detach();
// 刪除div中id是box1的那個div
$("div").detach("#box1");

• remove和detach區別
  • remove刪除元素後,元素上的事件會被移出
  • detach刪除元素後,元素上的事件會被保留

$("button").click(function () {
    // $("div").remove();
    // $("div").empty();
    // $("li").remove(".item");

    // 利用remove刪除之後再重新添加,原有的事件無法響應
    // var $div = $("div").remove();
    // 利用detach刪除之後再重新添加,原有事件可以響應
    var $div = $("div").detach();
    // console.log($div);
    // 將刪除的返回值重新添加到body上
    $("body").append($div);
});
$("div").click(function () {
    alert("div被點擊了");
});

3. 替換節點

• replaceWith
  • 將所有匹配的元素替換成指定的HTML或DOM元素
  • replaceWith參數可以是一個DOM元素
  • replaceWith參數也可以是一個代碼片段
• replaceAll
  • 用匹配的元素替換掉所有 selector匹配到的元素

// 編寫jQuery相關代碼
$("button").click(function () {
    // 創建一個新的節點
    var $item = $("<h6>我是標題6</h6>");
    // 利用新的節點替換舊的節點
    // $("h1").replaceWith($item);
    $item.replaceAll("h1");
});

4. 複製節點

• clone
  • 複製一個節點
  • 淺複製不會複製節點的事件
  • 深複製會複製節點的事件

$(function () {
    // clone([Even[,deepEven]])
    $("button").eq(0).click(function () {
        // 1.淺複製一個元素
        var $li = $("li:first").clone(false);
        // 2.將複製的元素添加到ul中
        $("ul").append($li); // 點擊li無法響應事件
    });
    $("button").eq(1).click(function () {
        // 1.深複製一個元素
        var $li = $("li:first").clone(true);
        // 2.將複製的元素添加到ul中
        $("ul").append($li); // 點擊li可以響應事件
    });

    $("li").click(function () {
        alert($(this).html());
    });
});

5. 包裹節點

• wrap()
  • 將指定節點用其他標記包裹起來
  • 該方法對於需要在文檔中插入額外的結構化標記非常有用, 而且不會破壞原始文檔的語義
• wrapAll()
  • 將所有匹配的元素用一個元素來包裹
  • 而 wrap() 方法是將所有的元素進行單獨包裹
• wrapInner()
  • 將每一個匹配的元素的子內容（包括文本節點）用其他結構化標記包裹起來

<script type="text/javascript">
	//測試使用 jQuery wrap, wrapAll, wrapInner
	$(function(){
		//包裝 li 本身
		$("#box1 li").wrap("<font color='red'></font>");
	
		//包裝所有的 li
		$("#box2 li").wrapAll("<font color='red'></font>");
	
		//包裝 li 裏邊的文字. 
		$("#box3 li").wrapInner("<font color='red'></font>");
	})
</script>

6. 遍歷節點

• children() ：只考慮子元素，不考慮後代元素。
• next() ：同輩緊鄰後面一個元素。
• nextAll() ：同輩緊鄰後面所有兄弟元素。
• prev() ：同輩緊鄰前一個兄弟元素。
• prevAll() ：同輩緊鄰前所有兄弟元素。
• siblings() ：同輩所有兄弟元素。
• find(‘span’) ：返回被選元素的後代元素，括號內必填寫，如果查找所有後代使用 “*”，起查找作用。
• filter(‘div’) ：指定選擇器的xx元素，括號內必填寫，符合條件的同級元素，非後代元素，起過濾作用。
• has(‘div’) ：符合條件的後代元素，不包含自身，括號內必填寫，起過濾作用。
• parents() ：獲取所有祖先元素，參數爲篩選條件。
• closest(‘.new’) ：用來取得最近的匹配元素，包括自身。
  • 首選檢查自身是否符合，如果符合返回元素本身；如果不匹配，向上查找父元素，逐級向上直到匹配到選擇器的元素。
  • 如果什麼沒找到，返回一個空的jq對象。必須填寫篩選條件，且只能找到一個元素。
• parentsUntil() ：截止到xx位置的祖先節點。

13. jQuery 面試題

1. 爲什麼要使用jQuery？jquery有哪些好處？

• jQuery是輕量級的框架
• 強大的選擇器，出色的DOM操作的封裝
• 可靠的事件處理機制（jQuery在處理事件綁定的時候相當的可靠）
• ajax封裝的非常的好，不需要考慮複雜瀏覽器的兼容性和XMLHttpRequest對象的創建和使用的問題
• 出色的瀏覽器的兼容性
• 支持鏈式操作，隱式迭代
• 行爲層和結構層的分離，還支持豐富的插件，jquery 的文檔也非常的豐富

2. jQuery能做什麼？

• 獲取頁面的元素
• 修改頁面的外觀
• 改變頁面大的內容
• 響應用戶的頁面操作
• 爲頁面添加動態效果
• 無需刷新頁面，即可以從服務器獲取信息
• 簡化常見的javascript任務

3. jQuery 庫中的 $() 是什麼？

• $() 函數是 jQuery() 函數的別稱
• $() 函數用於將任何對象包裹成 jQuery 對象
• 允許調用定義在 jQuery 對象上的多個不同方法

4. $(document).ready() 是個什麼函數？爲什麼要用它？

• ready() 函數用於在文檔進入ready狀態時執行代碼
• 當DOM 完全加載（例如HTML被完全解析DOM樹構建完成時），jQuery允許你執行代碼
• 使用$(document).ready()的最大好處在於它適用於所有瀏覽器，jQuery幫你解決了跨瀏覽器的難題

5. (document).ready()方法和window.onload有什麼區別？

• window.onload方法是在網頁中所有的元素完全加載到瀏覽器後才執行
• $(document).ready() 可以在DOM載入就緒是就對其進行操縱，並調用執行綁定的函數

6. jQuery中.get()提交和.post()提交的區別

• .get()使用GET方法來進行異步提交，.post()使用POST方法來進行異步提交
• get請求方式將參數跟在url後進行傳遞用戶可見 post請求則是作爲http消息的實體內容發送給服務器，用戶不可見
• post傳輸數據比get大
• get請求的數據會被瀏覽器緩存，不安全

7. jQuery中有哪些方法可以遍歷節點？

• children():獲取匹配元素的子元素集合，不考慮後代元素 KaTeX parse error: Expected '}', got 'EOF' at end of input: (function(){(“div”).children()})
• next()獲取匹配元素後面緊鄰的同級元素
• prev()獲取匹配元素前緊鄰的同級元素
• siblings()獲取匹配元素前後的所有同輩元素

8. $(this) 和 this 關鍵字在 jQuery 中有何不同？

• $(this) 返回一個 jQuery 對象，可以對它調用多個 jQuery 方法
• this 代表當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。
• 不能對 this 調用 jQuery 方法，直到 this 被 $() 函數包裹，例如 $(this)。

9. 使用 CDN 加載 jQuery 庫的主要優勢是什麼 ?

• 報錯節省服務器帶寬
• 更快的下載速度
• 如果瀏覽器已經從同一個CDN下載類相同的 jQuery 版本, 那麼它就不會再去下載它一次

10. 如何使用從服務器獲取一個複雜數據(對象)?

• 通常會把這個數據轉換爲通用的數據交換格式，如xml或json。由於xml解析比較麻煩，所以使用json比較多。
• 在jQuery中有專門的獲取服務器json數據的方法，getJSON()，在回調中，jQuery會自動將json轉換爲java對象。

11. 在使用選擇器的時要注意的地方?

• 選擇器中含有\等特殊字符的時候需要進行轉譯
• 屬性選擇器的引號問題
• 選擇器中含有空格的注意事項

12. 有哪些查詢節點的選擇器？

• :first 查詢第一個
• :last 查詢最後一個，
• :odd查詢奇數但是索引從0開始
• :even 查詢偶數
• :eq(index)查詢相等的
• :gt(index)查詢大於index的
• :lt查詢小於index
• :header 選取所有的標題等

13. jQuery是如何處理緩存的？ ( 要處理緩存就是禁用緩存 )

• 通過$.post()方法來獲取數據，那麼默認就是禁用緩存的
• 通過$.get()方法來獲取數據，可以通過設置時間戳來避免緩存。 可以在URL後面加上+(+new Date)

$.get('ajax.xml?'+(+new Date),function () { //內容});

• 通過$.ajax方法來獲取數據，只要設置cache:false即可。

14. 在jquery中你有沒有編寫過插件，插件有什麼好處？你編寫過那些插件？它應該注意那些？

• 插件的好處 :
  • 對已有的一系列方法或函數的封裝，以便在其他地方重新利用
  • 方便後期維護和提高開發效率插件的分類：封裝對象方法插件、封裝全局函數插件、選擇器插件
• 注意的地方：
  • 插件的文件名推薦命名爲jquery.[插件名].js，以免和其他的javaScript庫插件混淆
  • 所有的對象方法都應當附加到jQuery.fn對象上，而所有的全局函數都應當附加到jQuery對象本身上
  • 插件應該返回一個jQuery對象，以保證插件的可鏈式操作
  • 避免在插件內部使用$作爲jQuery對象的別名,而應使用完整的jQuery來表示，這樣可以避免衝突或使用閉包來避免
  • 所有的方法或函數插件，都應當分好結尾，否則壓縮的時候可能出現問題。在插件頭部加上分號，這樣可以避免他人的不規範代碼給插件帶來影響
  • 在插件中通過$.extent({})封裝全局函數,選擇器插件，擴展已有的object對象過$.fn.extend({})封裝對象方法插件