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

 轉載來源：https://www.cnblogs.com/m-xy/p/3705251.html