JQuery第二天總結__JavaScript

1.    JQuery選取器
    用於選取頁面上的元素對象。JQuery選取器完全繼承了css選取器的方式
    JQuery選取器是學習JQuery的基礎
    Dom中如何擷取頁面中的元素對象。        --三種方式    
    
    如何直接通過JQuery方式擷取頁面上的元素。（擷取後直接就是一個JQuery對象）
    id選取器                  $('#id')                
    標籤選取器                $('span')                    
    類別選取器                  $('.cls')            
    標籤 加 類 選取器          $('div.cls')    
    多條件選取器            $('h1,p,span')
    層選取器                $('div span')        --div中的所有span元素
                            $('div>span')        --div中的所有直接的span元素
                            $('div+span')        --div後面的第一個元素span
                            $('div~span')        --div後面的所有的span標籤                                                        
    
2.    擷取兄弟元素的幾個方法
    next()        當前元素之後的緊鄰著的第一個兄弟元素
    nextAll()    當前元素之後的所有兄弟元素
    prev()        當前元素之前的緊鄰著的上一個兄弟元素
    prevAll()    當前元素之前所有兄弟元素
    siblings()    除了本身，其他的所有兄弟元素
    
3.    JQuery的迭代（封裝集）
    如何判斷對象是否存在，JQuery選取器返回的是一個對象數組，
    調用text() html() click()之類方法的時候其實是對數組中每個元素迭代調用每個方法，
    因此即便通過id選擇的元素不存在也不會報錯
    
    如果需要判斷指定的id是否存在，應該寫
    if($('#btn').length<=0){
        alert('id為btn1的元素不存在。');
    }
    
    $('#id').length>0 用途：可以判斷某個頁面上的某個元素是否存在，如果存在則不用
    重新建立；如果不存在則建立一個新的並顯示（動態建立元素的時候用）
    
4.    鏈式編程的時候一定要注意在什麼時候破壞了鏈
    比如當前對象的傳遞，如使用nextAll()，則當前對象的傳遞被破壞了，
    可以調用end()方法返回鏈被破壞前的對象
    
5.    addClass('class')    添加樣式      removeClass('class')移除樣式
    toggleClass('class')轉場樣式    hasClass('class')    判斷是否應用了某種樣式
    
6.    基本過濾選取器
        擷取第一個元素
            $('p:first').css('backgroundColor','green');
            $('p').first().css('backgroundColor', 'green');
        擷取最後的元素
            $('p:last').css('backgroundColor', 'green');
            $('p').last().css('backgroundColor', 'green')        
        偶數
            $('p:even').css('backgroundColor', 'green');
        奇數
            $('p:odd').css('backgroundColor', 'green');
        索引擷取元素            
            $('p:eq(3)')        --索引等於3的p        
            $('p:lt(3)')        --索引小於3的所有p
            $('p:gt(3)')        --索引大於3的所有p    
            $('p:gt(2):lt(2)')    --索引大於2 又小於2 （即原3，4）
        Not
            $('p:not(.class)')
        設定header                        
            $('h1,h2,h3,h4,h5,h6').css('backgroundColor', 'green');
            //簡單的寫法
            $(':header').css('backgroundColor', 'green');
        
7.    相對定位        
        不僅可以使用選取器進行絕對位置，還可以進行相對定位
        只要在$()指定第二個參數，第二個參數為相對的元素
        $(selector,context)
        //取到表中每行的偶數列
        $('td:even', $(this)).css('backgroundColor', 'red');