jQuery 介紹：
什么是 jQuery ?
jQuery，顧名思義，也就是 JavaScript 和查詢（Query），它就是輔助 JavaScript 開發的 js 類庫。
jQuery 核心思想！！！
它的核心思想是 write less,do more(寫得更少,做得更多)，所以它實現了很多瀏覽器的兼容問題。
jQuery 流行程度
jQuery 現在已經成為最流行的 JavaScript 庫，在世界前 10000 個訪問最多的網站中，有超過 55%在使用jQuery。
jQuery 好處！！！
jQuery 是免費、開源的，jQuery 的語法設計可以使開發更加便捷，例如操作文檔對象、選擇 DOM 元素、制作動畫效果、事件處理、使用 Ajax 以及其他功能
可在jQuery API文檔中查詢jQuery 的功能
jQuery的使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <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 binIdObj = document.getElementById('btnId'); // binIdObj.onclick = function () { // alert("js 原生的單擊事件") // } // } $(function () {//表示頁面加載完成之后，相當於 window.onload = function () {} var $btnObj = $("#btnId");//表示按id查詢標簽對象 是jQuery對象（默認變量名以$開頭） $btnObj.click(function () {//綁定單擊事件 alert("jQuery 的單擊事件"); }); }); </script> </head> <body> <button id="btnId" >SayHello</button> </body> </html>
常見問題？
1、使用 jQuery 一定要引入 jQuery 庫嗎？ 答案： 是，必須
2、jQuery 中的$到底是什么？ 答案： 它是一個函數
3、怎么為按鈕添加點擊響應函數的？ 答案：
1、使用 jQuery 查詢到標簽對象
2、使用標簽對象.click( function(){} );
jQuery 核心函數：
1、傳入參數為 [ 函數 ] 時： 表示頁面加載完成之后。相當於 window.onload = function(){}
2、傳入參數為 [ HTML 字符串 ] 時： 會對我們創建這個 html 標簽對象
3、傳入參數為 [ 選擇器字符串 ] 時：$(“#id 屬性值”);id 選擇器，根據 id 查詢標簽對象
$(“標簽名”);標簽名選擇器，根據指定的標簽名查詢標簽對象
$(“.class 屬性值”); 類型選擇器，可以根據 class 屬性查詢標簽對象
4、傳入參數為 [ DOM 對象 ] 時：會把這個 dom 對象轉換為 jQuery 對象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <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("頁面加載完成之后，自動調用") $( "<div>" + " <span>div-span1</span>" + " <span>div-span2</span>" + " </div>" ).appendTo("body") // alert($("button").length); var btnObj = document.getElementById('btn01'); // alert(btnObj); // alert($(btnObj)); // alert($("<h1></h1>")); //通過jQueryAPI創建的jQuery對象 alert($("button")); }); //傳入參數為[函數]時：在文檔加載完成后執行這個函數 //傳入參數為[HTML字符串]時：根據這個字符串創建元素節點對象 //傳入參數為[選擇器字符串]時：根據這個字符串查找元素節點對象 //傳入參數為[DOM對象]時：將DOM對象包裝為jQuery對象返回 </script> </head> <body> <div> <button id="btn01">按鈕1</button> <button>按鈕2</button> <button>按鈕3</button> </div> </body> </html>
jQuery 對象和 dom 對象區分：
什么是 jQuery 對象，什么是 dom 對象：
Dom 對象
1.通過 getElementById()查詢出來的標簽對象是 Dom 對象
2.通過 getElementsByName()查詢出來的標簽對象是 Dom 對象
3.通過 getElementsByTagName()查詢出來的標簽對象是 Dom 對象
4.通過 createElement() 方法創建的對象，是 Dom 對象
DOM 對象 Alert 出來的效果是：[object HTML 標簽名 Element]
jQuery 對象
5.通過 JQuery 提供的 API 創建的對象，是 JQuery 對象
6.通過 JQuery 包裝的 Dom 對象，也是 JQuery 對象
7.通過 JQuery 提供的 API 查詢到的對象，是 JQuery 對象
jQuery 對象 Alert 出來的效果是：[object Object]
jQuery 對象的本質是什么？
j
Query 對象是 dom 對象的數組 + jQuery 提供的一系列功能函數。
jQuery 對象和 Dom 對象使用區別
jQuery 對象不能使用 DOM 對象的屬性和方法
DOM 對象也不能使用 jQuery 對象的屬性和方法
Dom 對象和 jQuery 對象互轉
1、dom 對象轉化為 jQuery 對象（*重點）
1、先有 DOM 對象
2、$( DOM 對象 ) 就可以轉換成為 jQuery 對象
2、jQuery 對象轉為 dom 對象（*重點）
1、先有 jQuery 對象
2、jQuery 對象[下標]取出相應的 DOM 對象
jQuery 選擇器（*****重點）
基本選擇器（****重點）
#ID 選擇器：根據 id 查找標簽對象
.class 選擇器：根據 class 查找標簽對象
element 選擇器：根據標簽名查找標簽對象
* 選擇器：表示任意的，所有的元素
selector1，selector2 組合選擇器：合並選擇器 1，選擇器 2 的結果並返回
層級選擇器（****重點）
ancestor descendant后代選擇器： 在給定的祖先元素下匹配所有的后代元素
ancestor元素下所有的descendant元素
parent > child子元素選擇器： 在給定的父元素下匹配所有的子元素
prev + next相鄰元素選擇器： 匹配所有緊接在 prev 元素后的 next 元素
prev ~ sibings之后的兄弟元素選擇器：匹配 prev 元素之后的所有 siblings 元素
過濾選擇器：
:first 獲取第一個元素
:last 獲取最后個元素
:not(selector) 去除所有與給定選擇器匹配的元素
:even 匹配所有索引值為偶數的元素，從 0 開始計數
:odd 匹配所有索引值為奇數的元素，從 0 開始計數
:eq(index) 匹配一個給定索引值的元素
:gt(index) 匹配所有大於給定索引值的元素
:lt(index) 匹配所有小於給定索引值的元素
:header 匹配如 h1, h2, h3 之類的標題元素
:animated 匹配所有正在執行動畫效果的元素
內容過濾器：
:contains(text) 匹配包含給定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有選擇器所匹配的元素的元素
屬性過濾器：
[attribute] 匹配包含給定屬性的元素。
[attribute=value] 匹配給定的屬性是某個特定值的元素
[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。
[attribute^=value] 匹配給定的屬性是以某些值開始的元素
[attribute$=value] 匹配給定的屬性是以某些值結尾的元素
[attribute*=value] 匹配給定的屬性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 復合屬性選擇器，需要同時滿足多個條件時使用
表單過濾器:
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有 文本輸入框
:password 匹配所有的密碼輸入框
:radio 匹配所有的單選框
:checkbox 匹配所有的復選框
:submit 匹配所有提交按鈕
:image 匹配所有 img 標簽
:reset 匹配所有重置按鈕
:button 匹配所有 input type=button <button>按鈕
:file 匹配所有 input type=file 文件上傳
:hidden 匹配所有不可見元素 display:none 或 input type=hidden
表單對象屬性過濾器：
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有選中的單選，復選，和下拉列表中選中的 option 標簽對象
:selected 匹配所有選中的 option
jQuery 元素篩選
eq() 獲取給定索引的元素 功能跟 :eq() 一樣
first() 獲取第一個元素 功能跟 :first 一樣
last() 獲取最后一個元素 功能跟 :last 一樣
filter(exp) 留下匹配的元素
is(exp) 判斷是否匹配給定的選擇器，只要有一個匹配就返回，true
has(exp) 返回包含有匹配選擇器的元素的元素 功能跟 :has 一樣
not(exp) 刪除匹配選擇器的元素 功能跟 :not 一樣
children(exp) 返回匹配給定選擇器的子元素 功能跟 parent>child 一樣
find(exp) 返回匹配給定選擇器的后代元素 功能跟 ancestor descendant 一樣
next() 返回當前元素的下一個兄弟元素 功能跟 prev + next 功能一樣
nextAll() 返回當前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一樣
nextUntil() 返回當前元素到指定匹配的元素為止的后面元素
parent() 返回父元素
prev(exp) 返回當前元素的上一個兄弟元素
prevAll() 返回當前元素前面所有的兄弟元素
prevUnit(exp) 返回當前元素到指定匹配的元素為止的前面元素
siblings(exp) 返回所有兄弟元素
add() 把 add 匹配的選擇器的元素添加到當前 jquery 對象中