Jquery upgrades-1.3

Source: Internet
Author: User

Jquery has been released to Version 1.3.1, but Version 1.3.1 only fixes some bugs existing in version 1.3 without functional changes.

Jquery1.3's upgrade mainly changes internal implementation and overwrites the existing efficiency bottle quota method. Official test results show that the performance of 1.3 has been greatly improved, mainly in selector, event binding, Dom dynamic modification, offset calculation and animation. The details are as follows:

  • Sizzle selector Engine

In jq1.3, the CSS selector has been separated and named sizzle JavaScript selector library. A new project is launched to join mainstream framework developers for development, make the framework selector more unified and efficient. Currently, prototype, dojo, Yahoo UI, mochikit, and tinymce have been added to this project.

  • Live Events

Added the live and die methods to the event object, and added support for "Automatic Binding" to newly added element events ".

  • Jquery event object

The new event object is closer to W3C standards, and the browser has better compatibility.

  • HTML injection rewrite

The HTML insertion method (such as append, prepend, before, and after) is overwritten in a wide range. In complex jquery programs, HTML insertion efficiency is a huge bottle of cake. Version 1.3 overwrites the internal implementation to improve the running efficiency of these methods, but the previous API has not been changed.

Dom creation method changes:

$ ("<Script/>") is equivalent to $ ("<SCRIPT> </SCRIPT> ")

  • Offset rewrite

The offset method is rewritten to improve the efficiency of this method and the compatibility of the browser.

  • No more browser sniffing

Judging browser features is the biggest change in version 1.3. The traditional method is to test the client browser type and version, and then make code compatibility for different browsers. Once the browser is upgraded or fixed with some bugs, some features may change, resulting in incompatibility with our JS Code.

In mainstream JS frameworks, jq1.3 adopts a new detection method. For details, see jquery. browser.

Principle: JQ automatically creates a DOM Node during initialization. Each browser renders the node based on its own features.

  1. <Div>
  2. <Link/>
  3. <Table> </table>
  4. <A href = "/a" style = "color: red; float: Left; opacity:. 5;"> A </a>
  5. <SELECT>
  6. <Option> text </option>
  7. </SELECT>
  8. <Object>
  9. <Param/>
  10. </Object>
  11. </Div>

Then, it detects the support features of the browser for the rendered node, for example:

// Tbody support (tbody nodes are automatically inserted in IE)

Tbody :! Div. getelementsbytagname ("tbody"). Length

// Opacity support

Opacity: A. style. Opacity = "0.5"

In this way, you don't have to worry about the browser upgrade.

Note: The $. Support method is recommended for jq1.3, but the previous $. browser method will continue to be compatible because many code and plugin are dependent on this method.

  • Compression

JQ no longer provides the packed version. (Previously, the base compression provided by Dean Edwards 'packer was used ):

1. Compression versions are not debugged

2. the compressed version cannot be compatible with all Running Environments (such as air and Caja-capable)

3. Although the compressed file version is small, decompression in the browser is much more expensive. Compared with the minified version, it takes longer to load the file on the page.

JQ's current minified version uses Yui compressor for compression.

Risk of 1.3 upgrade:

Jq1.3 has minimized the risk arising from the upgrade and maintained the API published in version 1.2.6.

If you want to upgrade to 1.3, you need to read the following list of potential hazards to avoid exceptions in your original program.

If a problem occurs with the plug-in you are using, first check whether the plug-in has an upgraded version for version 1.3. Currently, jq ui and validate plugin are 1.3 compatible.

1. Since JQ 1.2, the attribute selector of JQ supports the [@ ATTR] and [ATTR] statements, but 1.3 completely abolished the [@ ATTR] syntax.

2. Trigger () triggers Events follow the default bubble mechanism of the DOM tree. triggre () in earlier versions does not trigger bubbles. To prevent bubbling, use the stoppropagation () method or return false in the event processing function. (If you need to upgrade your program to the 1.3 library, you need to carefully check the use of the previous trigger method .)

3. The ready () method no longer waits until all CSS files on the page are loaded and then executes the script. Therefore, we need to take the initiative to place the CSS file in the page before the script.

4. Simplified isfunction processing and improved function performance.

Note: In 1.3, for example, the getattribute methods of alert and Dom cannot be detected in all browsers, such as IE.

5. the selector in the form of $ ("A, B, C") may change. Browsers that support queryselectorall (such as safari, Firefox 3.1 +, opera 10 +, and IE 8 +) will return matching elements in the order in the Document Stream, other browsers return results in the order specified in the selector. After upgrading 1.3.x in the future, the elements matched by this type of selector will be returned in the Document Stream order.

6. Make sure that your page runs in standard mode. In quirks mode, some method functions are not normal currently. (Including selector errors in Safari)

I do not agree to continue using the following attributes, but I agree to use jquery. Support.

  1. Jquery. Browser
  2. Jquery. browser. Version
  3. Jquery. boxmodel
  • The following browsers are not supported yet:

Safari 2

Some API changes Core
  • The new ququeing method allows you to manage existing queues (such as animation queues)
  • Add two attributes to the JQ object. selector and. Context to reference selector and context in the first jquery () call.
Selectors
  • The CSS selector is separated and the API does not change. More advanced selectors start to support complex selector syntaxes, such ~ >.
Attributes
  • . Toggleclass ("classname", state) -- added a Boolean parameter to identify whether to switch classname.
Traversing
  • . Closest (selector)-adds a method to match the selector element at the parent level from the element itself, and returns the first matched element. (Note: matching starts from the element itself)
  • The. Is () method already supports complex selectors, for example, ++ ~ >.
Manipulation
  • Simplifies the syntax for creating empty DOM nodes, for example:

$ ("<Script/>") equivalent to $ ("<SCRIPT> </SCRIPT> ")

Events
  • Liveevents provides the live and die methods to "automatically bind" element events.
  • Trigger () This method triggers the event and bubbles according to the default method of the DOM tree.

Effects

Changes:

  • The default animation effect is smoother. The traditional method only allows animation for high width and transparency. Now the margin and padding attributes also support animation.
  • The animation that does not provide the duration parameter is directly executed to the animation end state.
  • . Toggle (Boolean) adds a Boolean parameter to facilitate element display control. True indicates display, and false indicates hidden.
  • Jquery. FX. Off-adds this new property to disable/enable all animation effects.
Ajax
  • The new datafilter attribute in the options of AJAX () method can be used to pre-process the returned data, so that serialized data can be used in the success callback.
Utilities
  • Adds an array Judgment Method for isarray.

Reprinted at: www.v-sky.com/blog/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.