Upgrading to jQuery 1.2
read 14 commentsAs I’m sure most of you have already heard, the jQuery Project Team has just released a major new version (1.2) of our beloved JavaScript Library. Hat’s off to John Resig and the gang for another spectacular release!
I’m going to upgrade this site to the new version this weekend. On a typical site, I’d feel pretty confident about moving forward without any hiccups—especially after hearing all the success stories on the jQuery discussion list. But since the nature of this site is to demonstrate techniques used with jQuery, its use of the library is probably more comprehensive (for lack of a better word) than most. Therefore, I want to be extra careful. My simple plan for the transition to 1.2 is described below, along with some discussion of the API changes, in the off chance that it helps others who wish to upgrade with caution.
Set Up
The first thing to do is upload three new files to the server: jQuery 1.2, the jQuery 1.1 compatibility plugin, and the XPath compatibility plugin.
Then, after referencing the new scripts on the site’s pages, I’ll look through my custom scripts and modify those that have methods removed from jQuery 1.2. For the scripts in tutorials, I’ll label the parts of each blog entry that require one of the plugins to be used in conjunction with 1.2.
Replace XPath Selectors and Removed DOM Traversal Methods
It seems the main things to look out for are the XPath selectors and the four removed DOM traversal methods. XPath selectors include the single slash for the child selector, the double slash for the descendant selector, the [@attribute] notation for the attribute selector, and the [selector] for the Contains Predicate selector:
- The single slash (“/”) can be replaced with the greater-than sign (“>”). Example: change
$('li/ul')to$('li > ul'). This selects all unordered lists that are direct children of a list item. - The double slash can be replaced with a space. Example: change
$('#container//p')to$('#container p'). This selects all paragraphs that are descendants of an element with an id of “container” - In jQuery 1.2, the @ symbol in [@attribute] is deprecated. It will still work for attribute selectors, but it isn’t necessary and should probably be removed for future compatibility. The [attribute] notation is in line with CSS (and most other JavaScript libraries) selectors rather than XPath. Example: change
$('input[@type=text]')to$('input[type=text]'). This selects all input elements that have a type of “text” - In jQuery 1.2, the XPath [selector] notation can be written as :has(selector) Example: change
$('p[a]')to$('p:has(a)'). This selects all paragraphs that have a link.
Three of the removed DOM traversal methods — .lt() and .gt() and .eq() — can be rewritten easily with the new .slice() method, or with their corresponding pseudo-classes. The fourth — .contains() — can be replaced with a filter expression:
- Replace
.lt(n)with.slice(0, n). Example: change$('li').lt(2)to$('li:lt(2)')or$('li').slice(0,2) - Replace
.gt(n)with.slice(n+1). Example: change$('li').gt(2)to$('li:gt(2)')or$('li').slice(3) ReplaceThe.eq(n)with.slice(n, n+1). Example: change$('li').eq(2)to$('li:eq(2)')or$('li').slice(2.3).eq()method has been restored as of jQuery version 1.2.1- Replace
.contains('text')with.filter(':contains(text)'). Example: change$('li').contains('scurryfunge')to$('li').filter(':contains(scurryfunge)')
Check for other Removed Methods
The DOM manipulation method .clone() no longer takes the optional deep argument, so instead of writing .clone(false), we need to write .clone().empty().
There are a handful of Ajax convenience methods that have been dropped in this release, too:
.loadIfModfied()$.getIfModified()$.ajaxTimeout.evalScripts
You can find out more about how to replace them in the official jQuery 1.2 Release Notes.
Remove the Compatibility and XPath plugins
After having updated my code, I’ll be removing the two plugins that make 1.2 backward compatible — at least for the pages that don’t need them. I’ll make sure they are still included in pages with tutorials that discuss them. And I’ll add notes for how to accomplish the same stuff in 1.2 style.
Start Playing with all the new fun stuff that 1.2 has to offer
The Release Notes also describe a host of new features added to jQuery in this release. I’ll be investigating them in the weeks to come and posting what I learn. So, stay tuned.
I did some minor edits to a tutorial you wrote, How to get anything you want, to make it work with jQuery 1.2.
However, I don’t know enough to mimic the entry for:
$('#jqdt2').find('li').not(':gt(2)').contains('silly')with 1.2 syntax.
Great tutorial, by the way!
Hi Pyrolupus,
Thanks a lot for making those edits! I had totally forgotten that the tutorials were mirrored on the docsjquery.com wiki.
I updated the line that you were having trouble with. It now reads:
$('#jqdt2').find('li').not(':gt(2)').filter(':contains(silly)')Glad you liked the tutorial!
Thanks for the info Karl. And just by the way the link to the google jquery group is wrong. Should be http://groups.google.com/group/jquery-en
Good catch on the link, Miha. Much appreciated. It’s fixed now.
Thanks! can’t wait to get started…
the link to the discussion board should be: http://groups.google.com/group/jquery-en
oops… I’m such a newb
Re: the deprecation of XPath attribute selectors:
Removing the leading
@is also a working migration method for pattern-matching selectors likea[@href*='#id']ora[@href^='#id']. As it isn’t explicitly mentioned in John’s post or anywhere else so far I think this is worth mentioning.Karl,
Just to let you know that your demos on this “Slicker hide and show” page don’t work any more (because of 1.2.1 upgrade?)
Firebug console says that there is en error in jquery-1.2.1.min.js file on line 20 (elem.style has no properties)
Hope this helps – keep up your excellent work!
The replace-eq-with-slice part isn’t quite true anymore. The eq-removal was reverted in 1.2.1.
Victor, thanks for notifying me of that problem. Actually, it isn’t a 1.2 problem. It’s a problem with my animated scrolling script. I’ll have to add another check in that code, and then I’ll post an update.
Jörn, you’re right about that. Thanks for catching that. I’ll update this entry asap.
oh well, migrating to Jquery 1.2 is one good idea , as of now i’m not so very good on jquery so my codes are not so complicated. So its easy to migrate to Jquery 1.2? Or the only thing i will do is to replace my current version?
i think you will just need to replace your old jquery version with the new version.. and i dont think that will have problems on that
Do anyone knows how to combine if else statement with the filter(fn)?
I am doing something similar and need expert advice please.
I’m not sure I understand what you’re getting at. Do you have an example of what you want to do? You don’t really need an if/else statement in the filter function because you’re just returning matched elements. If you want to do something else with your matched set of elements based on a condition, you could use the .each() method.