JQuery 基礎講解

>> 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);
        });