為什么學習jQuery?
0.jQuery 由 John Resig 創建，是繼 Prototype 之后又一個優秀的 Javascript 庫,其宗旨是「寫更少的代碼，做更多的事情」
1.通過js原生語法如:document.getElementById等方法獲取DOM對象,方法名稱長，使用不方便.
2.jQuery定義了一套選擇器規則，和CSS選擇器目的一樣，都是為了選擇出符合特定規則的元素,代碼簡潔.
3.jQuery選擇器方便使用者jQuery刻意和CSS選擇器使用相同的語法，幾乎支持所有類型的CSS3選擇器
1： 說說庫和框架的區別？
庫的英語為 Library，框架的英語為 Framework
庫是將代碼集合成的一個產品，供程序員調用。面向過程的代碼組織形式而成的庫也叫函數庫。框架則是為解決一個(一類)問題而開發的產品，框架用戶一般只需要使用框架提供的類或函數，即可實現全部功能?？梢哉f，框架是庫的升級版。
開發者在使用框架的時候，必須使用這個框架的全部代碼。庫只管引進來使用，除了庫接口，沒有其他約束，
而框架則有著各種各樣的嚴格約束。例如bootstrap，約束了DOM結構。例如AnglarJS，也對DOM結構有約束。這些都是框架。框架就像一門語言，有自己的世界。用了什么框架，就得按照這個框架世界里的規則行事編碼
2： jquery 能做什么？
-
jQuery是一個高效、精簡并且功能豐富的 JavaScript工具庫。它提供的 API 易于使用且兼容眾多瀏覽器，這讓諸如 HTML 文檔遍歷和操作、事件處理、動畫和 Ajax 操作更加簡單
3： jquery 對象和 DOM 原生對象有什么區別？如何轉化？
區別
jQuery對象就是通過jQuery包裝DOM對象后產生的對象(集合對象)。jQuery對象是jQuery獨有的，可以使用jQuery里的方法。
因此jQuery對象和DOM對象是不一樣的，不能調用對方定義的方法。
dom對象須使用dom方法，jq對象需使用jq方法
$(‘#test’).innerHTML會報錯，document.getElementById(‘#test’)[0].html()也會報錯。2者轉換：
普通的DOM對象可以用$()包裝起來轉換為jQuery對象：$(document.getElementById(‘#test’)).html();//正常
jQuery對象本身是一個集合，要轉換為DOM對象，可通過數組索引取出：
第一種方式：$(‘#test’)[0]
第二種方式：$(‘#test’).get(0)
注： eq(0)返回的還是jQuery對象,eq(0)[0]是DOM對象。
4：jquery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
- 綁定事件
on，bind，delegate，live，unbind，trigger
- on
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品,我們推薦使用on()方法
on() 方法在被選元素及子元素上添加一個或多個事件處理程序。
使用 on() 方法添加的事件處理程序適用于當前及未來的元素
如需添加只運行一次的事件然后移除，請使用 one()
語法
$(*selector*).on(*event,childSelector,data,function,map*)
bind() 方法為被選元素添加一個或多個事件處理程序，并規定事件發生時運行的函數
$(selector).bind(event,data,function)unbind() 方法移除被選元素的事件處理程序。
該方法能夠移除所有的或被選的事件處理程序，或者當事件發生時終止指定函數的運行。
$(selector).unbind(event,function)delegate
delegate() 方法為指定的元素（屬于被選元素的子元素）添加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。
使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創建的新元素）。
語法
$(selector).delegate(childSelector,event,data,function)
- live
ive() 方法為被選元素附加一個或多個事件處理程序，并規定當這些事件發生時運行的函數。
通過 live() 方法附加的事件處理程序適用于匹配選擇器的當前及未來的元素（比如由腳本創建的新元素）。
語法
$(selector).live(event,data,function)
- off
off() 方法通常用于移除通過 on()方法添加的事件處理程序。
自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品,推薦使用off()該方法
5：jquery 如何展示/隱藏元素？
- 使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：
//隱藏元素
$("#hide").click(function(){
$("p").hide();
});
//顯示元素
$("#show").click(function(){
$("p").show();
});
- 改變元素的css中的display屬性
$(".box").css("display", "block");
//設置元素的display為block
$(".box").css("display", "none");
//設置元素的display為none
- 用jQuery的fadeIn()、fadeOut()方法
$(".box").fadeIn();
//fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的。
$(".box").fadeOut();
//fadeOut() 方法使用淡出效果來隱藏被選元素，假如該元素是隱藏的。
6： jquery 動畫如何使用？
- animate() 方法執行 CSS 屬性集的自定義動畫。
該方法通過CSS樣式將元素從一個狀態改變為另一個狀態。CSS屬性值是逐漸改變的，這樣就可以創建動畫效果。
只有數字值可創建動畫（比如 "margin:30px"）。字符串值無法創建動畫（比如 "background-color:red"）。
注釋：使用 "+=" 或 "-=" 來創建相對動畫（relative animations）。
語法1:
$(selector).animate(styles,speed,easing,callback)
styles: 必需,規定產生動畫效果的 CSS 樣式和值。
speed:可選,規定動畫的速度
easing:可選,規定在不同的動畫點中設置動畫速度的 easing 函數
callback:可選,animate 函數執行完之后，要執行的函數。
語法 2
$(selector).animate(styles,options)
styles: 必需,規定產生動畫效果的 CSS 樣式和值。
options:可選,規定動畫的額外選項
7：如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？
- 獲取元素內部 HTML 內容
text() - 設置或返回所選元素的文本內容
html() - 設置或返回所選元素的內容（包括 HTML 標記）
val() - 設置或返回表單字段的值
$(".box").html() //獲取元素內部的html內容，類似于innerHTML
$(".box").text() //獲取元素內部的text文本，類似于innerText
- 設置元素內部 HTML 內容和內部文本
$(".box").html("<p>設置了一個段落</p>")//設置了元素內部的html內容,標簽生效
$(".box").text("設置了一個文本")//設置了元素內部的text文本，標簽不生效
8：如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？
//獲取
$(selectorOfFormData).val()//不加參數即可獲取用戶輸入或選擇的內容
//設置
$(selectorOfFormData).val(modifiedVal)//加參數即可設置用戶輸入或選擇的內容
//獲取
$(selector).attr(attributeName)//傳入元素屬性名即可獲取元素的屬性值
//設置單個屬性
$(selector).attr(attributeName,attributeVal)//傳入元素屬性名和要設置的屬性值即可完成對元素的屬性設置
//用key:value的形式設置多個屬性的值:
$( "img" ).attr({
src: "/resources/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
9： 使用 jquery實現如下效果
- index() 方法返回指定元素相對于其他指定元素的 index 位置。
10： 使用 jquery 實現如下效果
11： 實現如下效果
