webrebuild.org第四届年会——金秋四城联动

jQuery 1.4 更新概述

2010年01月15日 | JavaScript

今天jquery发布了1.4版本，看了下1.4的更新文档，主要是强化了部分原有的方法（批量/支持function参数等），新增了一些实用的方法以及性能优化。
大致如下：

修改内容：

  1. .add() 支持 .add( selector, context ) 方式
  2. 以下增加支持处理function方式：.addClass() .after() .before() .append() .css() .html() .prepend() .removeAttr() .removeClass() .replaceWith() .text() .toggleClass() .val() .wrap() .wrapAll() .wrapInner()
  3. .bind() 支持批量绑定事件
  4. .closest()支持第二个参数(筛选元素的容器)，优化效率。用法：.closest( selector, [ context ] )
  5. .data() 支持批量设值 $('body').data({one: 1, two: 2});
  6. .index() 如果无参数，则返回在它兄弟级元素集合中的索引值；并支持使用选择器(selector)过滤
  7. jQuery() 如果无参数，会返回一个空的数组（旧版本返回document）
    用 jQuery() 创建DOM时，可以使用第二个参数来设置属性值、绑定事件 查看示例
  8. .offset() 新增功能可以直接设置元素相对于document的坐标，并支持function参数
  9. jQuery.param() 第二个参数(布尔值)，可以设定是否进行URI编码

新增内容：

  1. .clearQueue() 清除.queue()生成的队列，如无参数将清除fx中的队列；类似于.stop(true)
  2. jQuery.contains() 检测是元素否包含目标
    javascript
    jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false
  3. .delay() 延迟执行队列
    html
    <!DOCTYPE html>
<html>
<head>
  <style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
 
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
 
<script>
    $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
</script>
</body>
</html>
  4. .detach() 返回从元素数组中移除的匹配元素。
  5. .focusin() 是.bind(‘focusin’, handler)的简写方式。
  6. .focusout() 是.bind(‘focusout’, handler)的简写方式。
  7. .has() 筛选出包含有指定元素的集合
    html
    	<div id="a"><strong>这个会被选中</strong></div>
	<div id="b">这个选不中</div>
	<script type="text/javascript">
	$('div').has('strong').css('color','red');
	</script>
  8. jQuery.isEmptyObject() 检测对象是否为空值
    javascript
    jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false
  9. jQuery.isPlainObject( object ) 检测是否为pain object
    javascript
    	jQuery.isPlainObject({});	//true
	jQuery.isPlainObject('{}');	//false
  10. .nextUntil([ selector ]) 查找当前元素之后到selector(参数)之间的同辈元素
    javascript
    <div id="a1">3232323</div>
<div id="a"><strong>这个会被选中</strong></div>
<div id="b">这个选不中</div>
<div id="c">ccc</div>
<div id="d">ccc</div>
<script type="text/javascript">
$('#a').nextUntil('#d');	//取得[#b,#c]
</script>
  11. .prevUntil([ selector ]) 查找当前元素之前到selector(参数)之间的同辈元素
  12. .parentsUntil( [ selector ] ) 取得一个包含着所有匹配元素的祖先元素（直到找到selector截止）的元素集合
  13. jQuery.noop 空函数，当想定义一个空函数时可以用这个。
  14. .toArray() 取得所有匹配的 DOM 元素集合，有点类似于.get()
  15. .unwrap() 移除匹配元素的父级