jquery知識點總結

婚假也不能虛度。

1:jquery可以加載多個ready函數，而原始的js只能加載一次onload
2:用dom對象得到的對象不能使用jquery中的方法，比如var p=document.getElementById("id"),此時p不能這樣使用p.html(),而應該使用innerHTML。同樣，jquery對象不能使用dom中的方法，如果juqery中改寫了dom中的方法，則可以使用dom中的方法。
3：jquery對象轉換為dom對象的方法：
    <input type="text" id="a" value="111111">
    var input=$('#a')
    a：使用索引，alert(input[0].value)
    b：使用get,alert(input.get[0].value)
4:dom對象轉換為juqery對象：
    用$()把DOM對象包裝起來就OK：
    var input = document.getElementById('a');
    alert($(input).val());
5：jquery與其他js庫共存
    <script>
        var sowhat = jQuery.noConflict()//自定義，可代替jQuery
        或者直接jQuery.noConflict()，然后用jQuery調用方法即可，注意Q不能小寫，默認是大寫
        alert('這是jquery彈出的'+sowhat('#a').val());
        alert('這是prtotype彈出的'+$F('a'));
    </script>
6： >號表示子標簽，項目中一般不用css表達式，因為它不停地計算會使瀏覽器特別卡
    $(function(){
        $('div>a').css('color','red');
    });
    <div>
        <a href="###">abcdefg</a>
        <p><a href="###">1234567890</a></p>
    </div>
7:jquery優勢：
    a:兼容性強大,完美支持css1-2.0
    b:完美容錯機制，eg：即使沒有對應標簽也不會報錯
8:選擇器：
    1：id    ：$('#id')  
    eg:$('#p1').css('color','red');//代替了#p1{color:red;} 
    2：calss ：$('.p1')
    eg:$('.p1').css('color','red');//代替了.p1{color:red;} 
    3：標簽選擇器（不推薦*選擇器）
    eg:$('p').css('color','red');//代替了.p1{color:red;}
    4：多重選擇器
    eg： <span>123</span>
         <div>12312</div>
         <script>
         $(function(){
             $('p,div').css('color','red');
         });
         </script>
    5:層次選擇器
        E   F  e元素所欲的后代元素
        E>F  e元素的子元素
        E+next  e元素后緊鄰的標簽為next的兄弟元素，等於next()
        E~siblings  e元素后的所有的標簽為siblings的兄弟元素,等於nextAll()
        eg:給div標簽后緊鄰的p標簽添加顏色
           $('div+p').css('color','red');
           $('div').next().css('color','red');
           給div標簽后所有的p標簽添加顏色
           $('div~p').css('color','red');
           $('div').nextAll().css('color','red');
    6：過濾選擇器：(用法：只舉一例，其他參考手冊)
        :first
        $('p:first').css();       
        注意：標簽內嵌套標簽時單引號和雙引號錯開使用，若計算偶數則下標從0算起
    7：屬性選擇器
        A:<p title="js">safs</p>
        選取title為js的p標簽添加紅色,注意title可以為原有標簽，也可以為自己自定義的標簽
        $('p[title=js]').css('color','red');
        或者$('p[title]').css('color','red');
        B:選取含有title和myuu屬性的p元素,注意title可以為原有標簽，也可以為自己自定義的標簽
        $('p[title=js][myuu]').css('color','red');
        C:子元素:div的子標簽p的第一個標簽
        $('div p:first-child').css('color','red');
    8：表單元素及表單元素屬性選擇器 
        $(':input[type=checkbox]').val();   
        $(':input:disabled').val();   
        $(':input[disabled=disabled]').val(); 
        $('select:selected').val();
9:dom篩選        
    $('p:eq(0)').css();    //給指定下標為0的p標簽添加顏色     
    $('p').filter('#second').css(); //奇偶數添加    
    $('p').click(function(){//單擊p標簽給當前添加顏色
       if($(this).is('.first')){
          $(this).css('backgound','red');
       }
    });
    $('p').not(':last').css();//給p標簽添顏色，除了最后一個
    $('p').not('#secone').css();//給p標簽添顏色，除了id為second的p標簽
    $('input').map(function(){ //將一組元素轉換為數組（一般不用，因為有一個序列化的方法比這個更好用）
        return $(this).val();
    }).get().join(',');//,即將三組文本框中的值用逗號隔開並轉為字符串
    slice():$('p').slice(1,5).css();//    選中下標為1，2，3，4的元素,包含1，不包含5。也可傳入負數
10:dom遍歷查找：（注：返回一組元素的都可以加參數，返回一個的不能加參數）
    $('#p1').parent().css(); //通過子節點p1找到父節點wrap
    $('#p1').parents('.outer').css();//選取祖先元素，通常加參數,表示范圍為class為outer的標簽為止
    $('p1').offsetParent().css();//offsetParent()返回父元素中第一個其position設為relative或者absolute的元素,僅對可見元素有效
    $('#p2').siblings('div').css();//選擇p2所有的兄弟元素(可加參數)
    $('span').parent().css('color','red').end().css('color','blue')//先設置紅色再設置成藍色，顏色可重疊。鏈式操作，end()函數
    $('input').each(function(){//用的不多，因為效率低，后面有工具函數可以代替它
       alert($(this).val());
    });
11：特殊符號的處理：有的加1個\，有的加2個\\
    $('input[name=gender[]]')沒加轉義符,報錯
    $('input[name=gender\\[\\]]')加了轉義符，正確
    $('input[name=\'checkbox\']')正確
12：表格隔行變色
    ----------js代碼-----------
    var table=document.getElementById('table');
    var tr=table.getElementByTagName('tr');    
    for(var i=0;i<tr.length;i++){
        if(i%2==1){
            tr[i].style.background('blue');
        }else{
            tr[i].style.background('red');
        }
    }
    -----------jquery代碼-------
    $('table tr:even').css('backgrpund','red');
    $('table tr:odd').css('backgrpund','blue');
    使用end()函數可以優化為一行代碼：
    $('table tr').fliter(':even').css().end().fliter(':odd').css()
13：tab標簽頁
    $('#ul li').click(function(){
        $(this).addClass('current').siblings().removeClass('current');//點擊li的時候切換樣式
        $(#content>div).eq($(this).index()).show().siblings().hide();//根據li的索引值，來確定哪個div顯示哪個div隱藏
        上面兩行代碼可優化為一行：
        $(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();
    });    
14:jquery選擇器的優化:
    a：最快的是id選擇器:能用id獲取到的標簽盡量不用class選擇器
    b：假如p標簽下有一個class為a，則盡量：$('p.a')，當然$('.a')這樣寫也可以。
       假如有一個div標簽，id為a，則直接：$('#id'),一定不要$('div#id')這樣寫。
    c：假如div有一個子div，則盡量使用直接使用id獲取，不要通過父元素找。
    d：通過find()來找，盡量不使用上下文查找
        eg：$('li.item-li').find('li').css();
    e：鏈式操作比緩存快很多，只有在要通過一個元素查找另外的元素的時候才需要用到緩存，如果直接對某一個元素進行修改，則直接用鏈式操作。    
15：dom操作：
    a：創建節點：分為內部插入和外部插入。
    內部插入：插入后是子元素
    外部插入：插入后是兄弟元素
    $('body').append('<div>div標簽</div>');//給頁面添加了一個div標簽
    或者也可以這樣寫：
    var str='<div>div標簽</div>';
    $('body').append(str);
    $('p').append('<div>div標簽</div>');//向p標簽的尾部插入div標簽，div是p的所有子標簽中排序在最后一個
    $('<div>div標簽</div>').appendTo('p');//結果和上一句一樣
16：添加樣式
    <style>
       .bg{background:red;}
       .white{color:#fff;}
    </style>
    <script>
        $('p').addClass('bg white');
        $('p').removeClass('bg white');
        //toggleClass();//切換樣式
    </script>
    再比如：
    <p>11111111</p>
    <script>
        /*$('p').css('background','red').css('color','white').css('border','10px solid #abcdef');*/
        $('p').css({
            'backgroundColor':'red',
            'color':'white',
            'border':'10px solid #abcdef'
        });
        //建議大家把css屬性名用引號引起來
    </script>
17：jquery中的事件和對象
18:jquery插件編寫（類級別開發，幾乎不用）：
    $.zxit={  //zxit為命名空間
    centerDiv:function(obj){  //centerDiv為我們自己自定義的插件方法
        obj.css({
            'top':($(window).height()-div.height())/2,
            'left':($(window).width()-div.width())/2,
            'position':'absolute'
        });
        
        return obj;//返回和傳入的都是jquery對象
    }
}
19：jquery插件編寫（對象級別開發，使用率99%）：
    a：官方模板：
        ;(function($){
            $.fn.plugin=function(options){
            var defaults = {
            //各種參數，各種屬性
            }
            var options = $.extend(defaults,options);

            this.each(function(){
            //實現功能的代碼
            });
            return this;
            }
        })(jQuery);