Introduction to jquery

JQuery is another excellent Javascript library after prototype. It is a lightweight js library that is compatible with CSS3 and various browsers (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+). jQuery2.0 and subsequent versions will no longer support IE6/ 7/8 browser. jQuery enables users to more easily process HTML (an application under Standard Universal Markup Language), events, implement animation effects, and easily provide AJAX interaction for websites. Another big advantage of jQuery is that its documentation is very complete and its various applications are explained in detail. There are also many mature plug-ins to choose from. jQuery can keep the code and HTML content of the user's HTML page separated. In other words, there is no need to insert a bunch of js in the HTML to call the command. You only need to define the id.

jQuery is a javascript library compatible with multiple browsers. The core concept is write less, do more (write less, do more). jQuery was released by American John Resig at barcamp in New York in January 2006. It attracted many JavaScript experts from all over the world to join, and was developed by a team led by Dave Methvin. Today, jQuery has become the most popular JavaScript library, used by more than 55% of the world's top 10,000 most visited websites.

jQuery is free, open source, using the MIT license. jQuery's syntax design can make development more convenient, such as operating document objects, selecting DOM elements, creating animation effects, event handling, using Ajax and other functions. In addition, jQuery provides APIs for developers to write plug-ins. Its modular usage allows developers to easily develop powerful static or dynamic web pages.

jQuery, as the name suggests, is JavaScript and Query, which is a library that assists JavaScript development.

History

About 1992, a company called Nombas developed a software called C-subtract (C-minus-minus, Cmm for short) embedded scripting language. The idea behind Cmm is simple: a scripting language powerful enough to replace macros, while remaining similar enough to C (and C++) that developers can learn it quickly. The scripting language was bundled in a shareware called CEnvi, which for the first time showed developers the power of the language.

Nombas eventually changed the name of Cmm to ScriptEase because the last part (mm) sounded too negative and the letter C was "scary".

When Netscape Navigator came to prominence, Nombas developed a version of CEnvi that could be embedded in web pages. These early experiments were called Espresso Pages, and they represented the first client-side languages ​​used on the World Wide Web. Nombas had no idea that its concept would become an important cornerstone of the World Wide Web.

As Internet surfing becomes more and more popular, the need for developing client-side scripts gradually increases. At this time, most Internet users were connected to the network only through 28.8 kbit/s modems, even as web pages continued to become larger and more complex. What makes the user even more miserable is that just for simple form validity verification, it requires multiple round-trip interactions with the server. Imagine that the user fills out a form, clicks the submit button, waits for 30 seconds for processing, and then sees a message telling you that you forgot to fill in a necessary field.

Netscape, which was at the forefront of technological innovation at that time, began to seriously consider developing a client-side scripting language to solve simple processing problems.

Brendan Eich, who was working at Netscape at the time, began to develop a scripting language called LiveScript for Netscape Navigator 2.0, which was about to be released in 1995. The purpose at that time was to use it in browsers and servers (it was originally going to be called LiveWire) side uses it. Netscape and Sun completed LiveScript implementation in time.

Just before Netscape Navigator 2.0 was about to be officially released, Netscape changed its name to JavaScript in order to take advantage of the Internet buzzword Java. Netscape's bet paid off, and JavaScript has since become an essential component of the Internet.

Because JavaScript 1.0 was so successful, Netscape released version 1.1 in Netscape Navigator 3.0. It just so happened that around that time, Microsoft decided to get into browsers, releasing IE 3.0 with a clone of JavaScript called JScript (so named to avoid potential licensing disputes with Netscape). Microsoft's entry into the world of web browsers, while infamous, was also an important step in the evolution of the JavaScript language.

After Microsoft entered, there were 3 different versions of JavaScript existing at the same time: JavaScript in Netscape Navigator 3.0, JScript in IE, and ScriptEase in CEnvi. Unlike C and other programming languages, JavaScript does not have a standard that unifies its syntax or features, and these 3 different versions highlight this problem. As concerns in the industry increase, it is clear that standardization of this language is imperative.

In January 2006, the first version of jQuery was released, which has been more than 10 years ago (note: this time point is as of the time of publication). Even after so long, it still makes people fall in love with it at first sight with its simple and flexible programming style. In this article, we will tell the development history of jQuery so that readers can know more about jQuery.

While jQuery is developing rapidly, some large manufacturers have also taken a fancy to business opportunities. In September 2009, Microsoft and Nokia officially announced support for the open source jQuery library. In addition, Microsoft also announced that they would use jQuery as part of the Visual Studio toolset. It will provide features including jQuery smart tips, code snippets, sample documentation, and more. Microsoft and Nokia will be jQuery user members for a long time, and other members include Google, Intel, IBM, Intuit and other companies.
In January 2009, jQuery version 1.3 was released. It uses the new selector engine Sizzle, which comprehensively surpasses the query speed of other JavaScript frameworks of the same type in various browsers, and the performance of the program library has also been greatly improved. . The second change in this version is to provide the live() method. You can use the live() method to bind events to current and future elements. Before version 1.3, if you want to bind events to elements added in the future, you need to use livequery plug-in, and in version 1.3, you can use the live() method directly. In August 2005, John Resig proposed to improve Prototype's "Behaviour" library, so he published his ideas on his blog and used three examples to illustrate it.

John's idea at the time was simple: he found that this syntax was more concise than the existing JavaScript library. But what he didn't expect was that this article attracted widespread attention in the industry as soon as it was published. So John began to think seriously about this matter (writing a JavaScript library with simpler syntax), until January 14, 2006, John officially announced that he would release his own library under the name jQuery. What followed was the rapid development of jQuery.
August 2006, the first stable version of jQuery, and already supports CSS selectors, event handling and AJAX interaction.
In July 2007, jQuery version 1.1.3 was released. This minor version change included a significant improvement in the execution speed of the jQuery selector engine. Starting from this version, jQuery's performance reaches the level of similar JavaScript libraries such as Prototype, Mootools, and Dojo. In September of the same year, jQuery version 1.2 was released, which removed support for XPath selectors because it had become redundant compared to CSS syntax. This version allows for more flexible customization of effects, and also makes plug-in development easier with the help of new namespace events. At the same time, the jQuery UI project was also launched. This new suite was released as a replacement project for the once popular but outdated Interface plug-in. jQuery UI includes a large number of predefined widgets, as well as a set of tools for building advanced elements (such as drag-and-drop, sorting).

In February 2010, jQuery version 1.4.2 was released, which added two new methods about event delegation: delegate() and undelegate(). delegate() is used to replace the live() method in 1.3.2. This method is more convenient than live(), and can also achieve the function of dynamically adding events. For example, bind hover events to each td of the table

Features

1. Dynamic special effects

2.AJAX

3.Extended through plug-ins

4.Convenient Tools - For example, browser version judgment

5. Progressive enhancement

6. Chain call

7. Multi-browser support, supports Internet Explorer6.0+, Opera9. 0+, Firefox2+, Safari2.0+, Chrome1.0+ (support for Internet Explorer6,7,8 was canceled in 2.0.0)

Historical version

jQuery 1.0

(August 2006): The first stable version of the library, which already has support for CSS selectors, event handling, and AJAX Robust support for interactions.

jQuery 1.1

(January 2007): This version significantly simplifies the API. Many less commonly used methods are combined, reducing the number of methods that need to be mastered and explained.

jQuery 1.1.3

(July 2007): This minor release includes significant improvements to the execution speed of the jQuery selector engine . Starting from this version, jQuery's performance reaches the level of similar JavaScript libraries such as Prototype, Mootools, and Dojo.

jQuery 1.2

(September 2007): This version removes support for XPath selectors because it has Became redundant. This version supports more flexible customization of effects and makes plug-in development easier with new namespace events.

jQuery UI (September 2007): This new plugin suite was released as a replacement project for the once popular but outdated Interface plugin. jQuery UI includes a large number of predefined widgets, as well as a set of tools for building advanced elements such as drag-and-drop interface elements.

jQuery 1.2.6

(May 2008): This version mainly transplants the functions of the popular Dimensions plug-in developed by Brandon Aaron to in the core library.

jQuery 1.3

(January 2009): This version uses the new selector engine Sizzle, which greatly improves the performance of the library. Big improvement. This release officially supports the event delegation feature.

jQuery 1.3.2

(February 2009): This minor version upgrade further improves the performance of the library, such as improved: visible/ The underlying processing mechanism of :hidden selector and .height()/.width() method. In addition, it also supports querying elements to be returned in document order.

jQuery 1.4

(January 14, 2010): The code base was rewritten internally and some style specifications began to be established. The old core.js file is divided into attribute.js, css.js, data.js, manipulation.js, traversing.js and queue.js; the logical separation of CSS and attributes.

Important changes:

1. Ajax rewrite

The Ajax module has been completely rewritten. A new jXHR object is added to provide a consistent superset of the built-in XMLHttpRequest in different browsers. For transport mechanisms other than XMLHttpRequest, such as JSONP requests, jXHR objects can also be processed. (For details, please refer to: jQuery.ajax document)

In addition, the scalability of the system is greatly enhanced, and various data processors, filters and transmission mechanisms can be attached, which provides convenience for the development of new Ajax plug-ins.

2. Delay object

Deferred object (Deferred Object, jQuery.Deferred object) is a chainable utility object that implements the Promise interface and can be registered in the callback queue Multiple callbacks, calling the callback queue and forwarding the success or failure status of any synchronous/async function. As explained in Using Deferreds in jQuery 1.5, the result is that jQuery can decouple logic that depends on the outcome of a task (event) from the task itself. This is actually not new in JavaScript, Mochikit and Dojo have been implemented for some time. Since jQuery 1.5's Ajax module uses deferred objects built-in, Ajax programs written through jQuery will automatically get this functionality.

This allows developers to use return values ​​that are not immediately available (such as the return results of asynchronous Ajax requests) and, for the first time, can attach multiple event handlers.

For example, using the new jQuery internal Ajax API you can implement the following code:

// Assign handlers immediately after making the request,// and remember the jxhr object for this request var jxhr = $.ajax({ url: "example.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) . complete(function() { alert("complete"); });// perform other work here ... // Set another completion function for the request above jxhr.complete(function(){ alert("second complete") ; });

In addition, you can develop your own deferred objects using jQuery.Deferred. See: Deferred Object documentation for more details.

3. jQuery.sub()

jQuery 1.5 provides a way to create and modify jQuery copies. It can be used to add methods that are not exposed to the outside world, or to redefine certain methods of jQuery to provide new functions, or to provide better encapsulation and avoid namespace conflicts. Of course, it can also be used to develop plug-ins, but Resig strongly recommends considering the jQuery UI widget factory before developing plug-ins.

It is worth noting that the sub function does not provide real isolation. All methods, data, and calls still rely on jQuery itself to support it.

4. Improved traversal performance

In the new version, the performance of several commonly used traversal functions such as .children(), .prev(), and .next() has been significantly improved.

5. Internal development system

John Resig also specifically mentioned two changes in the internal development system of the jQuery team: First, the old Java/Rhino system was replaced with Node.js on the server side, allowing the team to focus on new changes in the JavaScript environment; second, the My code optimizer switched from Google Closure to UglifyJS, and the compression effect of the new tool is very satisfying.

How to use

##jQuery can be downloaded and used, and there are two versions jQuery is available for download

Production version - for use on actual websites, has been streamlined and compressed.

Development version - used for testing and development (uncompressed, readable code)

Comparison before and after compression of jQuery version 1.8.0

Plug-in Mechanism

The official plugin for jQuery is jQuery UI. Developers can arbitrarily extend jQuery's function library or develop UI components according to their own needs. There are already tens of thousands of jQuery plug-ins on the Internet, covering a variety of needs. For example, Ajax assistance, data tables, dynamic lists, XML tools, drag and drop, cookie processing, pop-up layers, etc. jQuery's documentation is very complete, and various applications are also explained in detail. There are also many mature plug-ins to choose from, such as ComponentOne Studio for ASP NET Wijmo.

With the jQuery plug-in in the website construction process The usage rate is constantly increasing, so it is necessary to follow the pace of the times and develop some new plug-ins/code snippets to consolidate and improve the front-end user experience and elevate the user experience to a new level. These include Flat jQuery Price Slider, Gmaps jQuery Map Plugin, FormChimp - MailChimp Ajax plugin for jQuery, etc.

Control

jQuery Gantt control is a feature-rich control based on native HTML5/jQuery. This control is truly cross-platform and can be used on many devices and browsers. Seamless operation.

Use the built-in scheduling, dependency and other functions in the project Gantt chart to visualize the hierarchical list of tasks.

Use the resource Gantt chart to implement a resource utilization view.

Using API-based jQuery or API-based MVC can help you easily install Gantt charts and speed up your application.

Can be used with popular jQuery patterns such as KnockOut(KO), jQuery.tmpl, etc.