>> JQuery是優秀的輕量級的JavaScript框架，極大的簡化了JS編程。
>> JQuery 的使用步驟：
⑴引入JQuery的JS文件
⑵使用選擇器定位要操作的節點
⑶調用JQuery的方法進行操作
>>>>>>>>>>>>>1. jQuery 對象 <<<<<<<<<<<<<<
>> jQuery 爲了解決瀏覽器兼容問題而提供的一種統一封裝的對象描述
>> jQuery 提供的方法只能由JQuery對象調用，且大多數返回JQuery對象
◆注：使用JQuery時遭遇的各種對象一般規律：
1.通過選擇器獲取的是JQuery對象
2.通過$創建的是JQuery對象
3.JQuery賦值的方法通常返回JQuery對象
4.JQuery的取值方法，若取到的是元素，則返回JQuery對象
5.JQuery的取值方法若取到的是文本，則返回內置對象（String）
◆ jQuery 對象 是一個DOM對象數組
>> DOM 和 JQuery 對象能相互轉換
1.DOM轉換爲JQuery對象
---$(DOM對象)
2.JQuery對象轉換爲 DOM
---obj.get(index):獲取數組中的某個DOM對象
---obj[index]: 等價於obj.get(index)
---obj.length: 獲取數組長度
>>>>>>>>>>>>>> 2.JQuery選擇器 <<<<<<<<<<<<<<<
>>JQuery選擇器:能夠實現元素的定位
>>使用JQuery選擇器能夠將內容和行爲分離
1.基本選擇器（同css）
1）元素選擇器
-- $("標籤名")
2）類選擇器
-- $(".class屬性名")
3）id選擇器：
--$("#id")
4) 選擇器組
-- $("#id,.important")
2.層次選擇器（同css）
1) 在select1元素下，選中所有滿足select2的子孫元素
--$("select1 select2")
2) 在select1元素下，選中所有滿足select2的子元素
--$("select1 > select2")
3) 在select1元素下，滿足select2的下一個弟弟
--$("select1 + select2")
--$("#zg+li")
4）在select1元素下，滿足select2的所有弟弟
--$("select1 ~ select2")
--$("#zg~li")
3.過濾選擇器(*重點*)
3.1基本過濾(*重點*)
---:first 第一個元素
---:last 最後一個元素
---:not(selector) 把selector排除在外
---:even 挑選偶數行
---:odd 挑選奇數行
---:eq(index) 下標等於index的元素
---:gt(index) 下標大於index的元素
---:lt(index) 下標小於index的元素
◆例：
--$("li:first")
--$("li:even")
--$("li:lt(3)")
--$("li:not(#zg)")
3.2內容過濾
---:contains(text) 匹配包含給定文本的元素
---:empty 匹配所有不包含子元素或者文本的空元素
◆例：
--$("p:contains('月餅')")
3.3可見性過濾
---:hidden 匹配所有不可見元素，或type爲hidden的元素
---:visible 匹配所有的可見元素
◆例：
--$("input:hidden")
3.4屬性過濾
---[attribute] 匹配具有attribute屬性的元素
---[attribute=value] 匹配屬性等於value的元素
---[attribute!=value] 匹配屬性不等於value的元素
◆例：
--$("input[value='你好']")
3.5狀態過濾
---:enabled 匹配可用的元素
---:disabled 匹配不可用的元素
---:checked 匹配選中的checkbox
---:selected 匹配選中的option
◆例：
--$("input:checked")
4.表單選擇器（簡單）
---:text 匹配文本框
---:password 匹配密碼框
---:radio 匹配單選框
---:checkbox 匹配多選框
---:submit 匹配提交按鈕框
---:reset 匹配重置按鈕
---:button 匹配普通按鈕
---:file 匹配文件框
---:hidden 匹配隱藏框
◆例：
--$(":text")
>>>>>>>>>>>>>> 3.JQuery操作DOM <<<<<<<<<<<<<
1.讀/寫節點
--HTML內容：obj.html()/obj.html("<span>123</span>")
包含子標籤，相當於innerHTML
--文本：obj.text()/obj.text("123")(不包含子標籤)
--value屬性值：obj.val()/obj.val("abc")
--屬性值：obj.attr("屬性名")/obj.attr("屬性名","屬性值")
2.增刪節點
--增加: $("節點內容")
--刪除：obj.remove()
obj.remove() 刪除滿足selector的節點
--插入：
--parent.append(obj) 添加到最後
--parent.prepend(obj) 添加到最前面
--brother.after(obj) 添加爲兄弟的下一個節點
--bother.before(obj) 添加爲兄弟的上一個節點
3.樣式操作
--addClass("") 追加樣式**重要**
--removeClass("") 移除指定樣式**重要**
--removeClass() 移除所有樣式
--toggleClass("") 切換樣式
--hasClass("") 判斷是否有個樣式
--css("") 讀取scc的值
--css("","") 設置多個樣式
4.遍歷節點
--children()/children(selector) 直接子節點
--next()/next(selector) 下一個兄弟節點
--prev()/prev(selector) 上一個兄弟節點
--siblings()/siblings(selector) 所有兄弟
--find(selector) 滿足選擇器的所有後代
--parent() 父親節點
>>>>>>>>>>>>>> 4.JQuery事件處理 <<<<<<<<<<<<<
1.事件的綁定
--$obj.bind(事件類型，事件處理函數)
--單擊事件簡寫形式：$obj.click(fn)
2.事件對象event
--$obj.click(function(e){})
程序會自動給函數傳一個event參數
--獲取事件源：
--e.target 返回值是DOM對象
--e.pageX和e.pageY 獲取鼠標的位置
3.事件的冒泡
--子節點產生的事件會由內向外的順序執行叫事件冒泡
--取消事件冒泡：e.stopPropagation()
4.合成事件種類
--hover(mouseon(){},mouseout(){})
模擬鼠標懸停事件
--toggle() 在多個事件響應中切換
5.模擬操作
--$obj.trigger(事件類型)
--$obj.trigger("focus") 模擬光標選中事件
--簡寫形式：$obj.focus();
>>>>>>>>>>>>>> 5.JQuery動畫 <<<<<<<<<<<<<
--動畫的實現是jQuery新建了一個線程來不斷的改變元素的寬度、高度、位置。
--所以動畫的實現過程是與主線程併發執行的。
1.隱藏和顯示動畫的效果
--show() / hide()
--通過同事改變元素的寬度和高度來實現顯示或隱藏
--$obj.show(執行事件[，回調函數])
--回調函數：動畫執行完畢後要執行的函數
2.上下滑動式的動畫實現
--sildeDown() /sildeUp
--通過改變高度來實現顯示和隱藏的效果
3.淡入淡出式動畫效果
--fadeIn() / fadeOut()
--通過改變不透明opacity來實現顯示或隱藏
4.自定義動畫效果
--animate(偏移位置，執行時間[，回調函數])
--偏移位置：{}描述動畫執行之後元素的樣式
◆例：
$("div").click(function(){
$(this).animate({'left':'500px'},4000);
$(this).animate({'top':'300px'},4000);
});