1、jQuery介紹

什麼是 jQuery ?

jQuery，顧名思義，也就是 JavaScript 和查詢（Query），它就是輔助 JavaScript 開發的 js 類庫。
jQuery 核心思想！！！

它的核心思想是 write less,do more(寫得更少,做得更多)，是以它實作了很多浏覽器的相容問題。
jQuery 流行程度

jQuery 現在已經成為最流行的 JavaScript 庫，在世界前 10000 個通路最多的網站中，有超過 55%在使用 jQuery。
jQuery 好處！！！ jQuery 是免費、開源的，jQuery 的文法設計可以使開發更加便捷，例如操作文檔對象、選擇 DOM 元素、制作動畫效果、事件處理、使用 Ajax 以及其他功能

2、jQuery的初體驗

需求：使用 jQuery 給一個按鈕綁定單擊事件?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		// window.onload = function () {
		// 	var btnObj = document.getElementById("btnId");
		// 	// alert(btnObj);//[object HTMLButtonElement]   ====>>>  dom對象
		// 	btnObj.onclick = function () {
		// 		alert("js 原生的單擊事件");
		// 	}
		// }

		$(function () { // 表示頁面加載完成 之後，相當 window.onload = function () {}
			var $btnObj = $("#btnId"); // 表示按id查詢标簽對象
			$btnObj.click(function () { // 綁定單擊事件
				alert("jQuery 的單擊事件");
			});
		});

	</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

常見問題？

1、使用 jQuery 一定要引入 jQuery 庫嗎？

答案：是，必須

2、jQuery 中的$到底是什麼？

答案：它是一個函數

3、怎麼為按鈕添加點選響應函數的？

答案： ①使用 jQuery 查詢到标簽對象

②使用标簽對象.click( function(){} );

3、jQuery核心函數

$ 是 jQuery 的核心函數，能完成 jQuery 的很多功能。$()就是調用$這個函數

1、傳入參數為 [ 函數 ] 時：

表示頁面加載完成之後。相當于 window.onload = function(){}

2、傳入參數為 [ HTML 字元串 ] 時：

會對我們建立這個 html 标簽對象

3、傳入參數為 [ 選擇器字元串 ] 時：

$(“#id 屬性值”); id 選擇器，根據 id 查詢标簽對象

$(“标簽名”); 标簽名選擇器，根據指定的标簽名查詢标簽對象

$(“.class 屬性值”); 類型選擇器，可以根據 class 屬性查詢标簽對象

4、傳入參數為 [ DOM 對象 ] 時：

會把這個 dom 對象轉換為 jQuery 對象

4、jQuery 對象和 dom 對象區分

什麼是 jQuery 對象，什麼是 dom 對象

Dom 對象

1.通過 getElementById()查詢出來的标簽對象是 Dom 對象

2.通過 getElementsByName()查詢出來的标簽對象是 Dom 對象

3.通過 getElementsByTagName()查詢出來的标簽對象是 Dom 對象

4.通過 createElement() 方法建立的對象，是 Dom 對象

DOM 對象 Alert 出來的效果是：[object HTML 标簽名 Element]
jQuery 對象

1.通過 JQuery 提供的 API 建立的對象，是 JQuery 對象

2.通過 JQuery 包裝的 Dom 對象，也是 JQuery 對象

3.通過 JQuery 提供的 API 查詢到的對象，是 JQuery 對象 jQuery 對象 Alert 出來的效果是：[object Object]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //核心函數的4個作用
        //傳入參數為[函數]時：在文檔加載完成後執行這個函數
        $(function () {
            // alert("頁面加載完成之後，自動調用");
            //傳入參數為[HTML字元串]時：根據這個字元串建立元素節點對象
            $("    <div>" +
                "        <span>div-span1</span>" +
                "        <span>div-span2</span>" +
                "    </div>").appendTo("body");

            // alert($("button").length);
            //傳入參數為[DOM對象]時：将DOM對象包裝為jQuery對象傳回
            var btnObj = document.getElementById("btn01");
            // alert(btnObj);
            // alert( $(btnObj) );

            // alert( $("<h1></h1>") );
            //傳入參數為[選擇器字元串]時：根據這個字元串查找元素節點對象
            alert($("button"));
        });
    </script>
</head>
<body>
<button id="btn01">按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
</body>

問題：jQuery 對象的本質是什麼？

jQuery 對象是 dom 對象的數組 + jQuery 提供的一系列功能函數。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		alert($);
	});
</script>
</head>
<body>
	<button id="btn">Button</button>
</body>

jQuery 對象和 Dom 對象使用差別

jQuery 對象不能使用 DOM 對象的屬性和方法

DOM 對象也不能使用 jQuery 對象的屬性和方法

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//testDiv.css("color","red")
		//testDiv.style.color = "blue";
		// var arr = [12,"abc",true];
		
		// var $btns = $("button");
		//
		// for (var i = 0; i < $btns.length; i++){
		// 	alert($btns[i]);
		// }

		// document.getElementById("testDiv").innerHTML = "這是dom對象的屬性InnerHTML";
		// $("#testDiv").innerHTML = "這是dom對象的屬性InnerHTML";

		// $("#testDiv").click(function () {
		// 	alert("click()是jQuery對象的方法");
		// });

		// document.getElementById("testDiv").click(function () {
		// 	alert("click()是jQuery對象的方法");
		// });

		// alert( $(document.getElementById("testDiv"))[0] );

		alert( $("button:first") );
	});

</script>
</head>
<body>
	<div id="testDiv">Atguigu is Very Good!</div>
	
	<button id="dom2dom">使用DOM對象調用DOM方法</button>
	<button id="dom2jQuery">使用DOM對象調用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery對象調用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery對象調用DOM方法</button>
</body>

Dom 對象和 jQuery 對象互轉

dom 對象轉化為 jQuery 對象（重點）

1、先有 DOM 對象

2、$( DOM 對象 ) 就可以轉換成為 jQuery 對象
jQuery 對象轉為 dom 對象（重點）

1、先有 jQuery 對象

2、jQuery 對象[下标]取出相應的 DOM 對象

03-jQuery(一)1、jQuery介紹2、jQuery的初體驗3、jQuery核心函數4、jQuery 對象和 dom 對象區分5、jQuery選擇器（重點）6、jQuery元素篩選

5、jQuery選擇器（重點）