jquery1.9+ deprecated functions and methods upgrading the jquery version encountered problems

Facing problems

Long time no attention to jquery, and today suddenly want to upgrade the use of the jquery version of the system , suddenly found that the upgrade of the jquery version to 1.9 after a lot of problems, such as: $.browser is undefined. Suddenly it's hard to think of a jquery upgrade delete this attribute? Remember that a previous version of jquery has not recommended using this property to determine the browser.

Check the Google found that jquery upgrade 1.9 is really removed and abandoned a lot of things, upgrade system has a lot of difficulty, used to use some older plug-ins to do, can only modify their own.

The place of change in jQuery1.9

Jquery1.9 changed a lot of things, the specific upgrade can refer to the official Upgrade guide.

. Toggle (function, function, ...) method delete

This method binds two or more handlers to a matching element, which is used to perform alternating click events. It should not be confused with showing or hiding matching elements. The toggle () method, because it is not obsolete. The former is removed to reduce clutter and increase modularity. The JQuery Migrate (migration) plugin can restore this functionality.

Jquery.browser () method Delete

The Jquery.browser () method is obsolete from jquery 1.3 and is removed in 1.9. The JQuery Migrate (migration) plugin can restore this functionality if needed. We recommend that you use the Modernizr library, such as feature detection.

The. Live () method removes

The. Live () method is obsolete starting with jquery 1.7 and is removed in 1.9. We recommend using the. On () method to replace the upgrade your code. To exactly match $ ("A.foo"). Live ("click", fn), for example, you can write $ (document). On ("click", "A.foo", FN) (translator Note: Because the original live event is actually tied to the document file). For more information, see the. on () documentation. During this time, you can use the jquery Migrate (migration) plugin to restore the. Live () feature.

. Die () method to remove

The. Die () method is obsolete starting with jquery 1.7 and is removed in 1.9. We recommend using. The off () method to replace the upgrade your code. To exactly match $ ("A.foo"). Die ("click"), for example, you can write $ (document). Off ("click", "A.foo"). For more information, see the. off () documentation. During this time, you can use the jquery Migrate (migration) plugin to recover. Die () function.

Jquery.sub () method to remove

The Jquery.sub () method is moved to the jquery Migrate (migration) plugin. The frequency of use proves that it is not necessary to remain in the core codebase, and the JQuery Migrate (migration) plugin adds this functionality.

The. Add () method modifies

The results returned by the. Add () method are always arranged in the order in which the nodes are in the document. Before 1.9, if either the context or the input collection begins with a node that is detached from the document (not in the document), the. Add () method node is not sorted in the order of the document. The returned nodes are now sorted by the order in the document, and the node that is detached from the document is placed at the end of the collection.

. Addback (selector) Replace. Andself ()

Starting with jQuery1.8, the. Andself () method has been labeled obsolete and should be used in jQuery1.8 and later versions. Addback ().

We think it's a better name for "Add and return" the previous result set. The new method can accept an optional selector that can be used to filter the previous collection, add it to the current collection, and return it. $ ("section, aside"). Children ("ul"). Addback ("aside") will get all the UL sub-elements under section and aside, plus all aside elements, according to their order in the document. Although. Addself () is still available in 1.9, we recommend that you modify the name as soon as possible. If you use. Addself (), the JQuery migrate plugin will warn you.

. After (),. before (), and. ReplaceWith () Use a node that is detached from the document

1.9 ago,. After (),. before (), and. ReplaceWith () will attempt to add or change nodes in the current jquery collection if the node in the current jquery set is not connected to the document (note: The node that is detached from the document), in which case Returns a new set of jquery instead of the original one. This will result in some inconsistencies and outright errors – the method may or may not return a new result, depending on its parameters! Starting with 1.9, these methods always return the original unmodified set and try to use it on a node that does not have a parent node. After (),. before (), or. ReplaceWith () has no effect-that is, the set or the nodes it contains are not changed.

. AppendTo,. InsertBefore,. InsertAfter, and. ReplaceAll

In 1.9, these methods always return a new collection so that they can use the chained call and the. End () method. Before 1.9, they would return the old collection only if they were a separate target element. It is important to note that these methods always return all the elements that are attached to the aggregation collection of the target element. If no element is selected by the target selector (for example, $ (elements). AppendTo ("#not_found")) then the returned collection is empty.

AJAX events need to be bound to document

In jquery 1.9, Global Ajax events (Ajaxstart, Ajaxstop, Ajaxsend, Ajaxcomplete, Ajaxerror, and ajaxsuccess) can only be triggered on the document element. Modifies the Ajax event listener to the document element. For example, if the current code looks like this:

1	$ ("#status"). Ajaxstart (function () {$ (this). Text ("Ajax started");});

Modified to:

1	$ (document). Ajaxstart (function () {$ ("#status"). Text ("Ajax started");});

The state of Checkbox/radio when the. Trigger () "Click" Event

When a user taps a check box or radio button, if Event.preventdefault () is not called on the node, the event handler is judged by the current state of the check box or radio and gets its new state. So, for example, if the user clicks on an unchecked checkbox, the event handler will select the checkbox (checked). Before 1.9,. Trigger ("click") or. Click () any one will trigger a composition event, depending on the user's click behavior, we can see the checkbox in the opposite state of the actual checked property. This bug was fixed in 1.9 and the user behavior would be in a corresponding state.

Focus Event Trigger Sequence

When the user clicks on the form element or presses the TAB key to get the focus, the browser first triggers a blur (unfocused) event on the focus element and then triggers a focus (get focus) event on the new element. Before 1.9, using. Trigger ("focus") or. focus () to bind a focus event, the new element will trigger a focus event, and then trigger the blur event of the previous focus element, 1.9 has fixed the issue.

If the target element does not get focus and can successfully get focus (Translator Note: For example, disabled the disabled form element gets no focus), then using the DOM native focus event, the browser accesses only the focus event handler. jquery always calls the. Trigger ("focus") or. focus () binding handler, regardless of whether the element gets the focus. This is still the case with jquery 1.9. Unlike the DOM's. focus () method, the DOM's. Focus () method does not invoke the event handler in many cases where the element has already acquired focus or the element is disabled.

Unfortunately, all versions of Internet Explorer (6-10) Trigger focus events are asynchronous. When you use the. Trigger ("focus") in IE, jquery cannot "predict" what will happen after the asynchronous focus event. So it always triggers one of your own focus events to make sure the functionality is working. This may cause the focus event to be repeated, and it is recommended that you use the DOM built-in focus () more simply, for example: $ ("#boo"). Get (0). focus ().

jquery (htmlstring) and jquery (selectorstring)

Before 1.9, if there were any HTML tags in a string, the string would be considered an HTML string. This has the potential to cause unexpected code execution and rejection of a valid selector string. At 1.9 Start, a string that begins with a less than sign ("<") character is considered to be an HTML string. The Migrate (delay) plug-in can revert to behavior before 1.9.

If a string is considered HTML, but may start with any text that is not an HTML tag, passing it to jquery.parsehtml () returns a token represented by an array of DOM nodes. We can use it to create a jquery collection, for example: $ ($.parsehtml (htmlstring)). For example, this is considered a best practice in dealing with HTML templates. Simple use of literal strings, such as $ ("<p>Testing</p>"). AppendTo ("body") will not be affected by this.

In summary: HTML strings are passed to jquery (), except for strings that start with a less than sign ("<") character, which is interpreted as a selector. Because strings are usually not interpreted as a selector, the most likely result is an "invalid selector syntax" Thrown by the sizzle selector engine error. Use Jquery.parsehtml () to parse any HTML.

Using the jquery Migrate (migration) plug-in, if the string is passed to $ (), "looks like HTML", it will use the old rules to determine.

The name in. Data () contains a point (".") Change

. Data () has an undisclosed and incredibly non-high-performance monitoring value set and obtained, which is removed in 1.9. This has affected the parsing of the data name that contains the point. Starting with 1.9, calling. Data ("Abc.def") can only retrieve data by name "Abc.def", and the technique that could otherwise have been acquired through "ABC" has been canceled. It is important to note that the lower-level Jquery.data () method does not support events, so it does not change. Even using the jquery Migrate (migration) plugin does not restore the original behavior.

The order of the detached document node in the jquery collection

For many versions, almost all of the jquery methods return a new set of nodes, which is a result set that uses their order in the document. (There are several methods, such as. parents () that return the result that they are sorted in reverse order in the document, but in 1.9 these exceptions have been recorded and have not changed. ）

Before 1.9, unpredictable random ordering might occur if the nodes of the mixed Dom in the jquery collection and the out-of-document nodes that were not placed in the DOM. Starting with 1.9, the connection nodes in the document are always placed at the beginning of the collection in document order, leaving the document nodes behind them. Even using the jquery Migrate (migration) plugin does not restore the original behavior.

Load and execute scripts in HTML content

Before 1.9, any method that accepts HTML strings (for example, $ (),. append (),. Wrap ()) executes the script contained in the HTML string and removes them from the document to prevent them from being executed again. In special cases, using these methods a script may be removed and reinserted into the document, such as. Wrap (). Starting with 1.9, scripts that are inserted into the document execute, but remain in the document and are marked as already executed so that they are not executed again, even if they are deleted and reinserted.

Despite this change, it is a bad habit to mix executable JavaScript in HTML markup, which has an impact on design, security, reliability, and performance. For example, an external script tag is included in the HTML to be fetched synchronously, and then evaluated for execution, which can take a significant amount of time. There is no interface to tell when and where these scripts are loaded, or to get corrective hints when errors arise.

Attempting to load and inject scripts by cloning an existing script tag, cloning to a document will no longer work because the cloned script tag has already been marked as executed. To load a new script, it is recommended to use Jquery.getscript () instead.

. attr () and. Prop () comparison

JQuery 1.6 introduces the. Prop () method to set or get the object properties on the node, and it is not recommended to use the. attr () method to set the object property. However, the version continues to 1.9, and in some special cases continue to support the use of the. attr () method. This behavior can cause confusion in backward-compatible naming when selectors are used to differentiate between label attributes (attributes) and Object attributes (properties).

For example, a check box for the Boolean label property (attributes), such as checked and disabled, is affected by this change. The correct behavior for "input[checked]" is to select the check box with the Checked property, whether it is its string value or its current state. In contrast, "input:checked" selects the check box for the current checked property's Boolean value (True or false) to true, for example, when the user clicks the check box, which is affected. 1.9 Previous versions These selectors sometimes do not select the correct node.

Here are some examples of the correct and incorrect usage when setting a checked property on a check box; the same rule applies to the Disabled property. Note that only object properties (property) are always reflected and updated in the current state of the check box for all browsers; you will rarely need to set the properties (attribute).

12345678

// Correct if changing the attribute is desired$(elem).attr("checked", "checked");// Correct for checking the checkbox$(elem).prop("checked", true);// Correct if removing the attribute is desired$(elem).removeAttr("checked");// Correct for clearing the checkbox$(elem).prop("checked", false);

$ ("input") in old ie. attr ("type", NewValue)

Before version 1.9, jquery throws an exception for any attempt to set the type of the input or button element (type attribute) in all browsers. This is done in order to conform to the minimum standard of compatibility; because if you try to change the type of the input element, Ie6/7/8 throws an error. Starting with JQuery 1.9, we allow you to set the type of the element if the browser allows it. However, you need to know your own code, in the old IE (IE6/7/8) to try to do this or will throw an error. When you try to set the Type property, the JQuery Migrate (migration) plugin warns you, but does not throw a JavaScript error.

So when to use attr when to use prop:

1. Add property name This property will take effect should use Prop ();
2. There are true,false two attributes using prop ();
3. The other uses attr ();

The following are the official recommendations for the use of attr (), prop ():

Attribute/property	. attr ()	. Prop ()
AccessKey	√
Align	√
Async	√	√
Autofocus	√	√
Checked	√	√
Class	√
Contenteditable	√
Draggable	√
Href	√
Id	√
Label	√
Location (i.e. window.location)	√	√
Multiple	√	√
ReadOnly	√	√
Rel	√
Selected	√	√
Src	√
TabIndex	√
Title	√
Type	√
Width (if needed over. Width ())	√

"Hover" pseudo-event

Starting with 1.9, the event name string "Hover" no longer supports the pronoun abbreviation for "MouseEnter MouseLeave". Allows applications to bind and trigger custom "hover" events. Modifying the existing code is a simple find/replace, and the jquery Migrate (delay) plugin can restore the "hover" pseudo-event.

The. Selector property on the jquery object

The obsolete Selector property on jquery objects is reserved to support obsolete. Live () events. In 1.9, jquery no longer attempts to retain this property on the chain method because 1.9 has removed the. Live () event. Do not use the. Selector property of the jquery object. The JQuery Migrate (migration) plugin does not support this property.

Jquery.attr ()

Version 1.9 removes the jquery.attr (elem, name, value, pass) method and uses the jquery Migrate (migration) plugin to recover this method.

Jquery.ajax returns the JSON result of an empty string

Before 1.9, an Ajax call expected to return a JSON or JSONP data type that would be considered a successful state when the return value was an empty string, but returned a null to the success handler or commitment (promise). Starting with 1.9, the JSON data returns an empty string that is considered a malformed JSON (as it would have been); this throws an error. In this case, the error handler is used for the capture.

Jquery.proxy ()

Before version 1.9, the This of $.proxy (NULL, FN), $.proxy (undefined, FN) points to window, while this of $.proxy (False, FN) points to the new Boolean (false) ; 1.9 If the context is passed into Null/undefined/false, the this of the function will maintain the original context and not be changed.

. Data ("Events")

1.9 ago, if no other code defined a data element called "events", the. Data ("events") can be used to retrieve an internal event data structure on an element that jquery does not expose. This particular case has been removed in 1.9. There is no public interface to get this internal data structure,

It is not public. The JQuery Migrate (migration) plugin can revert to its original behavior.

Remove some properties of an event object

The Attrchange, Attrname, Realtednote, and Srcelement properties of the event object cannot be declared obsolete across browsers since version 1.7, and since jquery 1.9 They are no longer copied to the event handler. In all versions of jquery, these attributes can still be accessed via event.orginalevent on the browsers that support them to replace the event. The JQuery Migrate (migration) plugin has added these properties back to the event object.

Parameters not exposed by the API method

Before 1.9, several API methods did not publicly alter the parameters of their behavior, and there was a potential for accidental misuse. These parameters have been removed. The affected methods include Jquery.data (), Jquery.removedata (), and jquery.attr (). The JQuery Migrate (migration) plugin also does not support code.

Other properties and methods that are not exposed

The following internal properties and methods have never been paid to the document and have been deleted in 1.9.

• Jquery.deletedids

• Jquery.uuid

• Jquery.attrfn

• Jquery.clean ()

• JQuery.event.handle ()

• JQuery.offset.bodyOffset ()

Migrating plugins

Existing sites and plugins may be affected by these changes, so provide a transitional upgrade path--jquery Migrate (migration) plugin. In the following instructions, most of the APIs that are changed or removed in 1.9 can be recovered using the jquery Migrate (migration) plugin. Note that all the changes in jquery 1.9 will also be applied to jquery 2.0, and the jquery Migrate (migration) plugin is also available in jQuery2.0.

Uncompressed, the development version of the jquery Migrate (migration) plugin displays a warning message in the console, detailing information such as incompatibilities or deletions, and how to resolve it. This makes it useful to find and fix problems on existing jquery code and plugins. The JQuery Migrate (migration) plug-in contains 1.6.4 since it exists but 1.9 does not support all APIs.

The compressed version of the jquery Migrate (migration) plugin does not generate any incompatibilities or deletions in the browser console, and can be used in jquery 1.9 or later, or in old, incompatible jquery code or plugins.

Ideally, this will only be a short-term solution, but it's up to you to make your own decisions.

Long pain is not as short as pain ah, have time to change, poor that a bunch of plug-ins ...

This article was reproduced in: http://www.ppblog.cn/jquery1-9live.html

jquery1.9+ deprecated functions and methods upgrading the jquery version encountered problems