web 13.JQueryベース

6056 ワード

属性セレクタには、$( A[ ^= ]) ;がxxxを先頭とする$( A[ $= ]) ;がxxxを末尾とする$( A[ != ]) ;がxxxではない$( A[ *= ]) ;がxxxを含む
属性を取得または設定キー名を入力するだけで取得できます.たとえば、alert($("#one").css("backgroundColor"));背景色を取得します.設定するにはキー値を入力する必要があります.たとえば、$("#one").css("backgroundColor","green");色を設定します.toggleClass();削除されていない属性を削除するappend追加prepend誰の内部の前または後ろにbefore`````` after追加誰が誰の前または後ろにempty追加すると、すべての要素が保持され、対応するDOM要素(現在の要素をコピー)がクリアされ、戻ります.

今日の内容

1. JQuery   :
    1.   
    2.     
    3. JQuery   JS       
    4.    
    5. DOM  
    6.   

JQueryベース:

1.   :   JavaScript  。  JS  
    * jQuery     、   JavaScript  ,  Prototype        JavaScript   ( JavaScript  )。jQuery         “write Less,Do More”,         ,      。   JavaScript       ,       JavaScript    ,   HTML    、    、     Ajax  。

    * JavaScript  :       js  ,   js       
2.     
    1.   :
        1.   JQuery
            *   jQuery      :
                1.x:  ie678,       ,    BUG  ,
                           。        ,  1.x      ,
                         :1.12.4 (2016 5 20 )
                2.x:   ie678,      ,    BUG  ,
                           。                  2.x,
                         :2.2.4 (2016 5 20 )
                3.x:   ie678,         。      ,
                           3.x   ,    jQuery         。
                                      。    :3.2.1(2017 3 20 )
            * jquery-xxx.js   jquery-xxx.min.js  :
                1. jquery-xxx.js:    。      ,         。     
                2. jquery-xxx.min.js:    。     ,    。     。      

        2.   JQuery js  :  min.js  
        3.   
            var div1 = $("#div1");
            alert(div1.html());


3. JQuery   JS       
    1. JQuery      ,    。
    2. JQuery   js        .
    3.       
        * jq -- > js : jq  [  ]    jq  .get(  )
        * js -- > jq : $(js  )


4.    :           (  )

    1.       :
        1.     
            //1.  b1  
            $("#b1").click(function(){
                alert("abc");
            });
        2.     
             $(function () {
               
             });
             window.onload    $(function)   
                 * window.onload       ,      ,           
                 * $(function)       。
        3.     :css  
             // $("#div1").css("background-color","red");
            $("#div1").css("backgroundColor","pink");


    2.   
        1.      
            1.      (     )
                *   : $("html   ")              
            2. id    
                *   : $("#id    ")      id        
            3.     
                *   : $(".class    ")       class        
            4.      :
                *   : $("   1,   2....")               
        2.      
            1.      
                *   : $("A B ")   A       B         
            2.     
                *   : $("A > B")   A       B   
        3.      
            1.         
                *   : $("A[   ]")           
            2.      
                *   : $("A[   =' ']")                
            3.        
                *   : $("A[   =' '][]...")             
        4.      
            1.        
                *   : :first               
            2.        
                *   : :last                
            3.       
                *   : :not(selector)           
            4.      
                *   : :even   ,  0     
            5.      
                *   : :odd   ,  0     
            6.        
                *   : :eq(index)       
            7.         
                *   : :gt(index)         
            8.         
                *   : :lt(index)         
            9.      
                *   : :header     (h1~h6)  ,    
        5.        
            1.         
                *   : :enabled       
            2.          
                *   : :disabled        
            3.       
                *   : :checked     /        
            4.       
                *   : :selected           

5. DOM  
    1.     
        1. html():   /                 -->   
        2. text():   /                   -->   
        3. val():   /     value   
    2.     
        1.       
            1. attr():   /       
            2. removeAttr():    
            3. prop():  /       
            4. removeProp():    

            * attr prop  ?
                1.              ,     prop
                2.               ,     attr
        2.  class    
            1. addClass():  class   
            2. removeClass():  class   
            3. toggleClass():  class  
                * toggleClass("one"): 
                    *            class="one",     one   。            class="one",   
            4. css():
    3. CRUD  :
        1. append():            
            *   1.append(  2):    2     1    ,     
        2. prepend():            
            *   1.prepend(  2):   2     1    ,     
        3. appendTo():
            *   1.appendTo(  2):   1     2  ,     
        4. prependTo():
            *   1.prependTo(  2):   1     2  ,     


        5. after():         
            *   1.after(  2):    2     1  。  1   2     
        6. before():         
            *   1.before(  2):    2     1  。  1   2     
        7. insertAfter()
            *   1.insertAfter(  2):   2     1  。  1   2     
        8. insertBefore()
            *   1.insertBefore(  2):    2     1  。  1   2     

        9. remove():    
            *   .remove():      
        10. empty():           。
            *   .empty():            ,               


6.