Jquery usage Summary

JQuery is a good Javascript framework after Prototype, because of its compatibility, it is much better than using JS directly (it is a lightweight js library, which is not suitable for other js libraries, and it is compatible with CSS3 and various common browsers ), therefore, MORE and MORE people will introduce JQuery-related files when developing web projects, that is, we are willing to introduce JQuery files without special effects (its purpose: write less, do more, write less code and do more things). It not only provides me with better compatibility than JS, but also encapsulates some operations, this allows you to easily process HTML documents, events, and animation effects, and provides AJAX interaction for websites. Therefore, JQuery is recommended for web development. More advanced encapsulation, such as JQuery-UI, makes the pop-up window developed by us more beautiful and easier to operate. Next I will summarize some of the common JQuery features based on my usual usage and network information.

1. First, introduce the core library of JQuery.

The JQuery core js file is dozens of kb, which basically does not affect the page loading speed.

<script type="text/javascript" src="${ctx}/js/jquery-1.9.1.min.js"></script>

2. Selector

JQuery's selector is very convenient to use. For example, to find the adjacent element js of a dom object, several lines of code may need to be written, while JQuery's one line of code is done, for example, to change the line color of a table, JQuery is also a line of code. The following is an example:

<Script type = "text/javascript"> // transcode the color of the line $ (document ). ready (function () {$ (". stripe_tb tr "). mouseover (function () {// if you move the cursor over the tr of a table whose class is stripe_tb, run the function $ (this ). addClass ("over ");}). mouseout (function () {// Add the class value to the row as over, and execute the function $ (this) when the mouse clicks this row ). removeClass ("over");}) // remove the class of the row $ (". stripe_tb tr: even "). addClass ("alt"); // Add the class value alt to the even row of the table whose class is stripe_tb); </script>

/* Pay attention to the cascade relationship of the selector */. stripe_tb tr. alt td {background: # ecf6fc}/* Add the background color to all even rows */. stripe_tb tr. over td {background: # FEF3D1}/* this will be the background color of the highlighted line of the mouse

3. cross-browser compatibility
JQuery is basically compatible with mainstream browsers and does not have to worry about browser compatibility issues.

4. Ajax Operation Support

JQuery simplifies AJAX operations. The background only needs to return a JSON string to complete communication with the foreground. Of course, you can also use div or iframe to return an asynchronous page refresh function. The following connection is an example of Jquery + div implemented asynchronous Refresh:

Http://blog.csdn.net/huangaigang6688/article/details/17038579

5. event, style, and animation support

JQuery also simplifies css code operations in Javascript, and the code is more readable than js. The following are some of the dynamic effects implemented by Jquery:

// 1. Click to see the explosion: $ (document ). ready (function () {$ ('div '). click (function () {$ (this ). effect ('plode') ;}); // 2. Click to display the sliding effect $ (document ). ready (function () {$ ('img '). animate ({top: '+ = 100px'}, 1000) ;}); // 3. Click it to show the upper and lower beating effect $ (document ). ready (function () {$ ('div '). click (function () {$ (this ). effect ('bounce ', {times: 3}, 500) ;}); // 4. Click to display the flashing effect $ (document ). ready (function () {$ ('div '). click (function () {$ (this ). effect ('slide') ;}) ;}; // 5. You can drag and re-order $ (document ). ready (function () {$ ('ol '). sortable () ;}); // 6. Click "show foldable effect" $ (document ). ready (function () {$ ('# menu '). accordion ();});

6. Chain Operations

JQuery's chain operation can write multiple operations in a single line of code, which is more concise.

After you select a webpage element, you can perform some operations on it. JQuery allows all operations to be connected and written in a chain. This is jQuery's most commendable and convenient feature. The principle is that each step of jQuery operations returns a jQuery object, so different operations can be connected together.

 $('div').find('h3').eq(2).html('Hello'); 

7. high scalability

JQuery has a wide range of third-party plug-ins, such as tree menus, date controls, image switching plug-ins, pop-up windows, and other components on the basic front-end pages, in addition, JQuery plug-ins are very effective, and you can rewrite and encapsulate plug-ins as needed, simple and practical (Jquery-UI ).
JQuery provides an extension interface: JQuery. extend (object). You can add new functions to the JQuery namespace. All JQuery plug-ins are developed based on this extension interface.

Conclusion: to learn more about the features, please refer to the official documents directly. The content above is comprehensive. Of course we do not need to remember it all, you can directly check the effect you have used. As long as we have nothing to do with it, you can check out the effect.

JQuery achieves the separation of scripts and pages. As long as there is a tag id, various effects can be added, just as CSS separates style code from page code, in this way, we can implement clear Page code with high flexibility. Of course, JQuery also has some disadvantages, such as: backward compatibility, sometimes multiple plug-ins conflict, and the order of introducing different libraries, but these are not worth mentioning compared to their convenience, I believe that after continuous optimization, it will have fewer and fewer shortcomings and more advantages in the future.