A preliminary summary of jquery

1, $ (document). The Ready () method differs from the Window.onload method

In order to operate the page elements normally, we need to write the JS code of the operation element in document. Ready () (Jquery) or window.onload (normal JS). $ (document). Ready (This is actually/converts the DOM object document into a jquery object and then registers the Ready () event) Generally we can simplify the

$(function(){

........jquery代码...........

});

下面介绍一些它们的区别：

2. timing of execution
   The Window.onload method is not executed until all the elements in the Web page, including all associated files of the element, are fully loaded into the browser. And through the $ (document) in jquery. The ready () method can be called as long as the DOM is fully in place, such as a picture as long as the tag is complete, without waiting for the picture to be loaded, you can set the image's width and height properties or styles.
4. $ (document). The Ready () method can register different event handlers multiple times, and window.onload can only hold a reference to a function at a time, and multiple bound functions only overwrite the previous function.

5. 2, $.map functions (obj, FN) and $.each (obj, fn) functions.

   • Obj (object): the objects or arrays to iterate over
   • fn (function): functions to be executed in each object
   • 
     

   $.each (obj, fn (key,value)) is used to iterate over a set of key-value pairs, and if it is an ordinary array, the key is subscript index

   var ' Person1 ' ' Human 1 ' ' Person2 ' ' Human 2 '  };                 var result = $.each (dict, function (k,v) {                        alert (k+"= = =" ) +V); // The result is the ejection of person1=== human 1,person2==== Human 2} respectively                );

   $.map function (obj, fn (value,index))

6. var arrint = [13579var result =  //  return2// result is 2,6,10,14,18

   3. Dom and jquery object conversions

   The DOM object is converted to a jquery object, Var Div=document.getelementbyid (), and Var jqdom=$ (div) so that you can use some members of jquery, such as text

   jquery object to Dom object: Var domobj=jqdom[0]; So you can use some of the DOM's members, like Innnertext.

   4. Selector:

   Tag Selector: $ (' P ');

   ID Selector: $ (' #p1 ');

   Class selector: $ ('. a ')

   Combo Selector: $ (' #btn, #p1, span ')

   Tag + class selector: $ (' p.a ');

   Hierarchy selector: $ (' div p ');

   $ (' div >p ') div under the direct sub-element;

   $ (' div ~ p ') after Div, search all P brothers, equals $ (' div '). Nextall (' P ');

   $ (' div +p ') div is only found next to the first P-element brother, equal to $ (' div '). Next (' P ');

   5. Implicit iteration: $ (' P '). Text ("); all P-label text can be set without looping

   6, Chain-type programming:

   When using chained programming, be aware of next (), the Nextall returned is not the original element, or you can use end () to restore the previous state. such as $ (this). Prevall (). CSS ("). End (). siblings ();

   Text (), HTML (), Val () These methods are used to set the value of the time can be chained programming, but when the content is not chained programming, because when the value is obtained, the content of the return value changed. "It is not possible to chain-program at any time, and when the return value is not the original object, it cannot be chained." 】

   $ (' P'). Text (' we're all p! . '). CSS ('border'5px solid yellow'). Click (function () {                    alert (this). Text ());                });

   7. Setup and Acquisition

   Set css:$ (this). css ({' width ': ' 100px ', ' border ': ' 1px '}), get a property in CSS var width=$ (this). CSS (' width ')

   Set attr:$ (This). attr (' width ', ' 100px '), get attr a property: Var width=$ (this). attr (' width ')

   Set text:$ (This). Text (' Text1 '), get Text,var txt=$ (this). Text ()

   Set val:$ (This). Val (' Text1 '), get Text,var val=$ (this). Val ()

   8. Filter:

   $ (' P:first ') the first P element, equal to $ (' P ').

   $ (' P ': last) the final P element, equal to $ (' P ').

   $ (' P:eq (2) ') according to the index

   $ (' P:even ') Select all the even number of P

   $ (' odd) Select all odd number of P

   $ (' p:gt (index) ') greater than index

   $ (' p:lt (index) ') less than index

   $ (' header ') Select all H1-H6 elements

   $ (' Input:not (. MyClass) ') Pick style name is not MyClass

   Filter Exercises:

   Filter Exercises

   <! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Scripts/jquery-1.8.2.js"Type="Text/javascript"></script> <script type="Text/javascript">$ (function () {$ ('#table1 Tr:first'). CSS ('font-size','30px'); $('#table1 Tr:last'). CSS ('Color','Red'); $('#table1 tr:gt (0): LT (3)'). CSS ('fontSize','28px'); $('#table1 tr:odd'). CSS ('BackgroundColor','Red');    }); </script>"table1"Border="1"> <tr> <td>name</td> <td>Achievements</td> </tr> <tr> <td>Tom</td> <td> -</td> </tr> <tr> <td>Jim</td> <td> About</td> </tr> <tr> <td>John</td> <td>98</td> </tr> <tr> <td>Jason</td> <td> the</td> </tr> <tr> <td>AAA</td> <td> the</td> </tr> <tr> <td>Average score</td> <td>98</td> </tr> </table></body>
   9. jquery Effect:
   
      
      
   
       
       
    
        
    
         
   Animate ()
    
         
   Animations that apply "custom" to selected elements
    
        
    
        
    
         
   Clearqueue ()
    
         
   Removes all queued functions from the selected element (still not running)
    
        
    
        
    
         
   FadeIn ()
    
         
   Gradually change the opacity of the selected element, from hidden to visible
    
        
    
        
    
         
   FadeOut ()
    
         
   Gradually change the opacity of the selected element, from visible to hidden
    
        
    
        
    
         
   FadeTo ()
    
         
   Gradually change the selected element to a given opacity
    
        
    
        
    
         
   Hide ()
    
         
   Hide the selected element
    
        
    
        
    
         
   Show ()
    
         
   Display the selected element
    
        
    
        
    
         
   Slidedown ()
    
         
   Swipe to show selected elements by adjusting the height
    
        
    
        
    
         
   Slidetoggle ()
    
         
   Toggle for sliding and sliding display of selected elements
    
        
    
        
    
         
   Slideup ()
    
         
   Swipe to hide selected elements by adjusting the height
    
        
    
        
    
         
   Stop ()
    
         
   Stops the animation from being run on the selected element
    
        
    
        
    
         
   Toggle ()
    
         
   Toggle to hide and display selected elements
    
        
    
       
      
      
   The jquery effect is easy to use, and you can see the effects demo in W3cschool
   jquery effect exercise: Fake QQ Friends tab
   Faux QQ Friends tab
   "http://www.w3.org/1999/xhtml">"Text/css"> *{padding:0; Margin:0;            } div {width:200px;            height:500px;        BORDER:1PX solid blue; } UL {List-style-Type:none; } ul li {text-Align:center; } h3 {Background-Color:orange;            Cursor:pointer; Margin-bottom:2px; }    </style> <script src="Jquery-1.8.2.js"Type="Text/javascript"></script> <script type="Text/javascript">$ (function () {//set the background color of a friend's name$('h3 ~ ul > Li'). CSS ({'BackgroundColor':'Blue','Margin-bottom':'2px' }); //register a Click event for the Buddy group title$('ul Li H3'). Click (function () {$ ('#snd'). attr ('src','1.WAV'); $( This). Next ('ul'). Slidetoggle ( -);        });    }); </script>"snd"loop="0"Src=""> <div> <ul> <li> my friends.my classmates.boyfriendSpare Tire
   
   

A preliminary summary of jquery