A few experiences that make jquery more beautiful

The novice uses jquery to write code often focus on the implementation of functionality, less complex features of the page will not be too concerned about performance issues, with the cordial greetings to jquery, find jquery more and more simple, the more simple the more you want to use it beautiful. The following summarizes a few common commonly used is also often overlooked small experience, there are a few are clearly aware of the other people's article only to find that their usual is a bad way.

1. You don't need to use $ (function () {}) to wait for the DOM structure to load after referencing jquery before </body>.

2, $ ('. Class ') is the lowest efficiency, you can add conditions using the Find () method

$ (' #id '). Find ('. class ')

3. The ID selector is unique and avoids using multiple ID selectors.

4. Avoid using implicit wildcard characters

$ ('. Class:radio ')// not recommended $ ('. Class Input:radio ')// suggestion

5. Specify the context for the selector

$ ('. Class #id ')// Limited search scope, performance higher than $ ('. Class ')

6*, more than once, jquery can consider caching to improve performance $element indicate that jquery objects

$element = $ (' #element '= $element. Height (); $element. css (' height ', h+5);

7*, correct use of time delegation

Html

<ul id= "List" >    <li>234</li>    <li>234</li>    <li>234</li>    <li>234</li></ul>

Compared

$ (' #list '). Find (' Li '). On (' click ',function() {    console.log ()})

This one

$ (' #list '). On (' Click ', ' li ',function() {    console.log ()})

Performance is much higher, learn to use this method.

8, the use of chain-type operation.

9, chain operation to maintain the readability of the Code

$ (' #id ')    . On (' click ',function() {alert (' Hello everybody ');})    . FadeIn (' slow ')    . Animate ({height:' 120px '},500);

OK, simple summary of the few, follow-up refueling!

A few experiences that make jquery more beautiful