jQuery:1.4新版本中你应该知道的15个新特性(二)
继续发布jQuery1.4版本剩余的新特性：第9点至第15点。
九、去除标签元素的父标签：
在之前的版本中已经有了.wrap()方法来个标签添加新的父标签，而在1.4新版本中又添加了相对的.unwrap()方法来去除标签的父标签。实例Html代码如下：
1 2 3 | <div>
<p>Foo</p>
</div> |
jQuery1.4版本中实现代码：
1 | jQuery('p').unwrap(); |
执行后的话题Html代码如下:
1 | <p>Foo</p> |
>>>>阅读更多关于.unwrap()方法的资料…
十、不用删除数据，即可删除掉DOM中的标签元素：
新版本中的.detach()方法允许你删除DOM中的任何标签元素，就像.remove()方法一样。但它与.remove()方法的不同之处是：.remove()是将标签直接删除，而.detach()方法则是将标签暂时移除，并通过方法内部调用.data()方法将标签缓存后赋予变量，再后面的代码中若还需要找回该标签，变量则会自动读取缓存的数据；另外若被.detach()方法移除的标签在移除前绑定了事件机制的话，在后面恢复后，该事件机制依然存在，无需再次绑定。
jQuery1.4版本中实现代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var foo = jQuery('#foo'); // Bind an important event handler foo.click(function(){ alert('Foo!'); }); foo.detach(); // Remove it from the DOM // … do stuff foo.appendTo('body'); // Add it back to the DOM foo.click(); // alerts "Foo!" |
>>>>阅读更多关于.detach()方法的资料…
十一、对.index()方法进行了扩展：
1.4新版本中新增了两个.index()的调用方法。而之前，我们将一个标签元素作为.index()方法的参数，并希望执行后返回一个标识当前集合中匹配元素序列号的数字结果。
若有一段XHtml代码如下：
1 2 3 4 5 6 7 8 | <ul> <li>Apple</li> <li>Banana</li> <li>Grape</li> <li>Strawberry</li> <li>Pear</li> <li>Peach</li> </ul> |
点击li标签获得该li标签的序号
jQuery1.32版本中实现代码：
1 2 3 | $('li').click(function() { alert($('li').index(this)); }); |
jQuery1.4版本中实现代码：
1 2 3 4 5 6 7 8 9 | $('li').click(function() { alert($(this).index()); }); //或者 $('li').click(function() { alert($(this).index('li')); }); |
>>>>阅读更多关于.index()方法的资料…
十二、DOM控制方法支持回调函数：
在1.4版本中绝大部分的DOM控制方法只支持回调函数作为唯一的参数，除了极个别的（比如：.attr()、.css()）方法中可以作为第二参数。这些回调函数将被匹配集合中所有元素所执行，
以确定哪些应作为该方法的实际值。
下面的这些DOM控制方法都支持回调函数：
- after
- before
- append
- prepend
- addClass
- toggleClass
- removeClass
- wrap
- wrapAll
- wrapInner
- val
- text
- replaceWith
- css
- attr
- html
在回调方法中，若你想访问该匹配集合的话，你需要使用”this”，或者序号index作为该方法的第一个参数。
jQuery1.4版本中实现代码：
1 2 3 | jQuery('li').html(function(i){ return 'Index of this list item: ' + i; }); |
当然你可以给该回调函数传递第二个参数，比如是在使用设置类的DOM控制方法（如：.html()、.attr()等），你若想得到当前的值。
jQuery1.4版本中实现代码：
1 2 3 | jQuery('a').attr('href', function(i, currentHref){ return currentHref + '?foo=bar'; }); |
正如你看到的一样，在使用.attr()和.css()方法是，当该方法的第一个是属性名称时，你可以将回调函数作为方法的第二参数。
jQuery1.4版本中实现代码：
1 2 3 | jQuery('li').css('color', function(i, currentCssColor){ return i % 2 ? 'red' : 'blue'; }); |
十三、检测对象类型方法：
jQuery1.4新版本在命名空间下新增了两个帮助型的方法，用来帮助你检测对象类型。
第一个方法：.isEmptyObject()用来判断一个对象是否是空对象，返回一个布尔类型的结果；
第二个方法：.isPlainObject()用来判断一个对象是否是最原始的Javascript对象(该对象是否是通过{}或者new Object()创建)，同样也返回一个布尔类型的结果。
jQuery1.4版本中实现代码：
1 2 3 4 5 6 | jQuery.isEmptyObject({}); // true jQuery.isEmptyObject({foo:1}); // false jQuery.isPlainObject({}); // true jQuery.isPlainObject(window); // false jQuery.isPlainObject(jQuery()); // false |
>>>>阅读更多关于.isEmptyObject().isPlainObject()方法的资料…
十四、.Closest()方法扩展：
扩展后的.Closest()支持数组选择器作为参数，这在遍历一个元素的祖先元素时非常有用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < !DOCTYPE html>
<html>
<head>
<style></style>
<script src="/scripts/jquery-1.4.js"></script>
</head>
<body>
<ul><li></li><li></li></ul>
<script>var close = $("li:first").closest(["ul", "body"]);
$.each(close, function(i){
$("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});</script>
</body>
</html> |
执行后的结果是：
1 2 | * ul: UL
* body: BODY |
另外该方法还支持使用上下文对象作为它的第二参数，也就是说你可以遍历任意上下文对象直到的元素的祖先元素。这个扩展使用的列子非常少，但在内部使用时非常的有效率。
>>>>阅读更多关于.closest()方法的资料…
十四、新的事件机制（focusIn 、focusOut）：
新版本中若要给事件对象委派”focus”和”blur”事件，也可以使用.focusIn()和.focusOut()方法（它们是一一对应的）。更加重要的是focus和blur事件不支持.live()方法委派，但focusIn和focusOut事件是支持.live()方法委派。
jQuery1.4版本中实现代码：
1 2 3 4 5 6 7 | jQuery('form') .focusin(function(){ jQuery(this).addClass('focused'); }); .focusout(function(){ jQuery(this).removeClass('focused'); }); |
1 2 3 4 5 6 7 | jQuery('input') .live('focusin', function(){ jQuery(this).addClass('focused'); }); .live('focusout', function(){ jQuery(this).removeClass('focused'); }); |
>>>>阅读更多关于.focusin().focusin()方法的资料…
更多的API文档资料请阅读：http://api.jquery.com/
嘿嘿，沙发呀，我这不是又出现了么，哈哈
你早该出现了！！！
深夜造访，问候一下博主。。谢谢分享，三点了明天再看。
好像没用过这个东西哎。
最近因为公司的项目，开始研究ext js了
EXT JS的动画效果比较多，不过jQUery1.4集成了jquery.easing.js动画插件，效果也不差！！
貌似很牛