What can I do with jQuery?

The jQuery library provides a common (cross-browser) layer of abstraction for Web script programming, making it suitable for almost any scripting scenario. jQuery typically provides us with the following features:

1. Easy and fast access to DOM elements

If you use javaScript to traverse the DOM and find a part of the DOM to write a lot of redundant code, it's enough to use jQuery with just one line of code. For example, to find all the P tags in all divs with the .content class style applied, you only need the following line of code:

1 $('div.content').find('p');

2. Dynamically modify the page style

With jQuery we can dynamically modify the CSS of the page even after the page is rendered. j Query can still change classes or individual style properties in a part of the document. For example, find the first li sublabel of all ul labels on a page, and then add a style called active to them, with the following code:

1 $('ul > li:first').addClass('active');

3. Dynamically change the DOM content

With jQuery we can easily modify the page DOM, for example, by adding a link to an element whose ID is "container":

1 $('#container').append('<a href="more.html">more</a>');

4. Respond to the user's interaction

jQuery provides an appropriate way to intercept a wide variety of page events, such as a user clicking a link, without using event handlers to break up HTML code. In addition, its event handling API eliminates the inconsistencies that often plague Web developer browsers.

1 $('button.show-details').click(function() {




2   $('div.details').show();
3 });

The code above indicates that you want to add a click event to the button element that uses the .show-details style, and the event is to display the DIV that uses the .details style.

5. Add dynamic effects to the page

A collection of fade-in, erasure-like effects built into jQuery, as well as kits for creating new effects, make it easy.

1    $(function () {
2             $("#btnShow").click(function () {
3                 $("#msubject").hide("slow");
4             });
5         });

6. Unify Ajax operation

jQuery unites Ajax operations between multiple browsers, allowing developers to focus more on server-side development.

1 function (data, type) {
2     // 对Ajax返回的原始数据进行预处理
3     return data  // 返回处理后的数据
4 }

7. Simplify common JavaScript tasks.

In addition to these document-specific features, jQuery has also improved the basic JavaScript data structure, such as iterations and array operations.

1 $.each(obj, function(key, value) {
2   total += value;
3 });