Documentation

Release:jQuery 1.2

From jQuery JavaScript Library

Jump to: navigation, search
[edit]

Downloading

jQuery 1.2: (How To Upgrade)

If you wish to checkout the full release from the Subversion repository, you can do so by following the following instructions and checking out the source from the following location: 

 svn co http://jqueryjs.googlecode.com/svn/tags/1.2

Plugins:

[edit]

New Features

  • Selectors
    •  :has(selector)
    •  :header
    •  :animated
    • XPath Selector Plugin
  • Attributes
    • .val() Overhaul
  • Traversing
    • .map()
    • .prevAll() / .nextAll()
    • .slice()
    • .hasClass()
    • .andSelf()
    • .contents()
  • Manipulation
    • .wrapInner() / .wrapAll()
    • .replaceWith() / .replaceAll()
    • .clone(true) Event Cloning
  • CSS
    • .offset()
    • .height() / .width() for document and window
  • Ajax
    • Partial .load()
    • Cross-Domain getScript
    • JSONP
    • .serialize() Overhaul
    • Disable Caching
  • Effects
    • .stop()
    • %/em Animations
    • Color Animations
    • Relative Animations
    • Queue Control
    •  :animated
    • step: Function
  • Events
    • Namespaced Events
    • .triggerHandler()
  • Internals
    • Documentation Move
    • Expando Management


[edit]

How To Upgrade

  1. First, if you have not done so already, please upgrade to jQuery 1.1.4. This should help to remove most of the surprises inbetween the last version of jQuery your code was using and the current release.
  2. Go through the list of deprecated and removed features and make sure that you're not using any of them in your code.
  3. Introduce jQuery 1.2 into your site. If anything immediately breaks, please report it to the bug tracker so that we may investigate, and resolve, the issue. Otherwise, you should now be using jQuery 1.2 - enjoy!
[edit]

New Plugins

[edit]

jQuery 1.1 Compatibility Plugin

A few pieces of functionality were removed in the jQuery 1.2 release. Including this plugin allows you have all of the features that were removed in your copy of jQuery 1.2.

The plugin would typically be used like so: 

 <html>
 <head>
   <script src="jquery-1.2.js"></script>
   <script src="jquery.compat-1.1.js"></script>
   <script>
     $(document).ready(function(){
       // Old jQuery 1.1 Functionality
     });
   </script>
 </head>
 <body>
   ...
 </body>
 </html>
[edit]

XPath Compatibility Plugin

Since XPath selectors were removed from jQuery in 1.2, a new XPath Selector Plugin has been introduced. You can use this plugin to give yourself the CSS/XPath hybrid selectors that have existed in jQuery since its creation.

An example of including and using the XPath selector plugin to find a child paragraph of a div and give it a border.

$("//div/p").css("border", "1px solid black");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("//div/p").css("border", "1px solid black");
  });
  </script>
  
</head>
<body>
  <script src="http://dev.jquery.com/view/trunk/plugins/xpath/jquery.xpath.js"></script>
<div><p>I'm a simple paragraph inside a div.</p></div>
<p>I'm a paragraph outside of a div.</p>
</body>
</html>

[edit]

Color Animation Plugin

A new, official, jQuery plugin that supports animating CSS colors of elements by using the new jQuery Animation API. Supported CSS properties include: 'backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'.

Flashes the div to alert the user. Change its background color to pink, and once it's done return to the original color.

$("#go").click(function(){
  $(".block").animate( { backgroundColor: 'pink' }, 1000)
    .animate( { backgroundColor: 'blue' }, 1000);
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#go").click(function(){
  $(".block").animate( { backgroundColor: 'pink' }, 1000)
    .animate( { backgroundColor: 'blue' }, 1000);
});
  });
  </script>
  <style>.block { 
   background-color: blue; 
   width: 150px; 
   height: 70px;
   margin: 10px; 
}</style>
</head>
<body>
  <script src="http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js"></script>
<button id="go">» Run</button>
<div class="block"></div>

</body>
</html>

[edit]

Removed Functionality

We've removed a number of methods in jQuery 1.2 that were relatively unused, causing confusion, or were inefficient. Wherever possible, we've provided alternate methods for performing the actions.

With jQuery 1.2, as with the jQuery 1.1 release, a backwards compatibility plugin has been provided. Thus, if you wish to continue using these particular methods, you'll be able to use that plugin and continue doing so.

Additionally, in order to handle the XPath changes another, separate, plugin has been made available that will handle XPath selector functionality in jQuery.

[edit]

Selectors

$("div//p") XPath Descendant Selector
Please use the CSS $("div p") selector instead. Or, use the XPath Compatibility Plugin.

$("div/p") XPath Child Selector
Please use the CSS $("div > p") selector instead. Or, use the XPath Compatibility Plugin.

$("p/../div") XPath Parent Selector
Please use the $("p").parent("div") selector instead. Or, use the XPath Compatibility Plugin.

$("div[p]") XPath Contains Predicate Selector
Please use the new $("div:has(p)") selector instead. Or, use the XPath Compatibility Plugin.

$("a[@href]") XPath Attribute Selector
Note: While this selector is deprecated, it has not yet been removed as of this release (jQuery 1.2).
It is now recommended that you use the CSS selector $("a[href]") instead. Or, use the XPath Compatibility Plugin.

[edit]

DOM Manipulation

$("div").clone(false)
Calling the clone method with an argument is being deprecated (the clone method, as a whole, is being kept). Instead of calling .clone(false) you should now do: .clone().empty() instead.

[edit]

DOM Traversing

$("div").eq(0)
This method is being deprecated for the use of the new .slice() method (which works identically to an array's slice method). You can duplicate .eq() like so: 

$("div").slice(0,1);

Additionally, .eq(0) can be duplicated in the following ways: 

$("div:eq(0)")
$("div:first")

$("div").lt(2)
This method is being deprecated for the use of the new .slice() method (which works identically to an array's slice method). You can duplicate .lt() like so: 

$("div").slice(0,2);

Additionally, .lt(2) can be duplicated in the following way: 

$("div:lt(2)")

$("div").gt(2)
This method is being deprecated for the use of the new .slice() method (which works identically to an array's slice method). You can duplicate .gt() like so: 

$("div").slice(3);

Additionally, .gt(2) can be duplicated in the following way: 

$("div:gt(2)")

$("div").contains('text')
This method is being deprecated in favor of just using a regular .filter() statement. You can duplicate .contains() like so: 

$("div").filter(":contains(Your Text)");

[edit]

Ajax

$("#elem").loadIfModified("some.php")
This convenience method is being removed in favor of the long form use of $.ajax(): 

$.ajax({
  url: "some.php",
  ifModified: true,
  success: function(html){
    $("#elem").html(html);
  }
});

$.getIfModified("some.php")
This convenience method is being removed in favor of the long form use of $.ajax():

$.ajax({
  url: "some.php",
  ifModified: true
});

$.ajaxTimeout(3000)
This convenience method is being removed in favor of the long form use of the more-explicit $.ajaxSetup(): 

$.ajaxSetup({timeout: 3000});

$(...).evalScripts()
This method is no longer necessary in jQuery - all scripts included in HTML strings are automatically evaluated when injected into the document. No substitute method is needed.

Retrieved from "http://docs.jquery.com/Release:jQuery_1.2"