JQuery总结

来源：互联网发布：修改图片文字软件编辑：程序博客网时间：2024/06/10 02:08

在jQuery出世以来，它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架，它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果，轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点，它已经被微软官方认可加入VS IDE中拥有强大的智能提示，并据官方的统计现在至少有20%的国际性大网站已经加入jQuery作为其脚本。

1：首先是JavaScript的DOM 和 jQuery包装集的区分

1.1:在JavaScript中我们访问的方式是操作DOM结构,提供的可用方法有：

1: document.getElementById("ID")：根据ID获取DOM对象。

2：document.getElementsByName("name")：根据HTML标记name属性获取一个DOM数组。

3：document.getElementsByTagName("Tag")：根据HTML的Tag获取一个DOM数组。

1.2：jQuery相对DOM则提供了许多可用的方法和属性。

jQuery简单的获取对象有$(“#id”) ,$(“.class”),$(“tag”)方式，它的书写方式和css3.0相似 id用#，class（css）用.，HTMl Tag则直接书写。关于jquery的选择器在下面讲述，这里不急。

1.3:JavaScript的DOM对象转可以化为jQuery包装集：通过$(element)赴会就为jQuery包装集。

2：jQuery最强大的就是提供了一个万能的属性选择器。

2.1基本选择器

选择表达式

说明

举例

#id

根据给定的ID匹配一个元素用#

$("#testDiv2") 获取ID为testDiv2的元素

.class

根据给定的类匹配元素(也就是取class的值)用.

$(".myDiv") 获取class为myDiv的一组元素

element

根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等)

$("div") 获取所有的div元素

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开

$("#testDiv2,p")

$("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素

选择所有的元素

$("*")

2.2简单选择器

选择表达式

说明

举例

:first

匹配找到的第一个元素

$("div:first")

:last

匹配找到的最后一个元素

$("div:last")

:eq(index)

匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始

$("div:eq(1)")

:gt(index)

匹配所有大于给定索引值的元素

$("div:gt(0)") 查找第1个以后的元素

:lt(index)

匹配所有小于给定索引值的元素

$("div:lt(2)") 查找第一行和第二行的元素

:even

匹配所有索引值为偶数的元素，从0 开始计数

$("div:even")
查找第1,3,5个div

:odd

匹配所有索引值为奇数的元素，从0 开始计数

$("div:odd")
查找第2,4个div

:not(selector)

去除所有与给定选择器匹配的元素
selector为表达式,可以是属性里面的一个值

$("input:not(:checked)")
查找所有未选中的input 元素[注:checked为自定义筛选选择器,后面会讲到]

:header

匹配如 h1, h2, h3之类的标题元素

$(":header").css("background", "#EEE");
添加样式

:animated

匹配所有正在执行动画效果的元素

暂无例子

3.3：内容选择器

选择表达式

说明

举例

:contains(text)

匹配包含给定文本的元素,只要里面出现即可

$("p:contains('段落')")
找带有段落字样的p元素

:empty

匹配所有不包含子元素或者文本的空元素

$("div:empty")

:has(selector)

匹配含有选择器所匹配的元素的元素

$("div:has('p')")

:parent

匹配含有子元素或者文本的元素

$("div:parent")

4.4子元素选择器

选择器

说明

举例

:first-child

匹配第一个子元素

$("ul li:first-child")//在每个 ul 中查找第一个 li

:last-child

匹配最后一个子元素

$("ul li:last-child")//在每个 ul 中查找最后一个 li

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用:
nth-child(even)//偶数行

:nth-child(odd)//奇数行
:nth-child(3n)
:nth-child(2)//索引为2的
:nth-child(3n+1)
:nth-child(3n+2)

$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

$("ul li:only-child")//在 ul 中查找是唯一子元素的 li

4.5：可见性选择器

选择器

说明

举例

:hidden

匹配所有的不可见元素，input 元素的 type属性为 "hidden" 的话也会被匹配到

$("div:hidden")

:visible

匹配所有的可见元素

$("div:visible")//元素来匹配

$(".divH:visible")//根据class来匹配

jQuery之工具函数

jquery为我们提供了操作数组和对象的工具函数，方便和简化了我们对它们的操作。今天我们就进入jQuery的工具函数的复习。

jQuery给我们提供了主要有5类工具函数：

URL
字符串操作
数组和对象操作
测试操作
浏览器

1：URL操作：

$.param(obj)

返回：string；

说明：将jquery对象按照name/value 或者key/value序列化为URL参数，用&连接。

示例：

var obj ={name:zh,age:20};
alert(jQuery.param(obj));
//alert "name=zh&age=20";

2:字符串操作：

jQuery.trim(str)

返回：string；

说明：去掉字符串首尾空格。

示例：

alert($.trim(" 123 "));
//alert "123";

3:数组和对象操作：

(1) :

&.each(obj,callback)

说明：

通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。

回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。

如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

示例：

var a =[0,1,2,3,4,5];
$.each(a,function(i,n){document.write(""+i+" and " +n +"<br/>");});

//result:

/*0 and 0
1 and 1
2 and 2
3 and 3
4 and 4
5 and 5I*/

(2):

$.extend(obj,default,option)

说明：

在开发插件的时候最常用此函数函数来处理options.

下面是fancybox插件获取options的代码:

settings = $.extend({}, $.fn.fancybox.defaults, settings);

上面的代码target是一个空对象, 将默认设置defaults作为第一个对象, 将用户传入的设置setting合并到default上, setting上有的属性以setting为准. setting没有传入的属性则使用default的默认值. 然后将合并的结果复制给target并作为函数返回值返回.

看一个完整的示例:

var empty = {}var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(empty, defaults, options);

/*result：

settings == { validate: true, limit: 5, name: "bar" }empty == { validate: true, limit: 5, name: "bar" }*/

//target参数要传递一个空对象是因为target的值最后将被改变.比如:

var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend(defaults, options);

上面的代码将defaults作为target参数, 虽然最后settings的结果一样, 但是defaults的值被改变了! 而插件中的默认值应该都是固定! 所以使用时请注意target参数的用法.

(3):筛选

jQuery.grep( array, callback, [invert] )

返回值: Array

说明:

使用过滤函数过滤数组元素。

此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。

讲解:

默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素.

下面的示例演示如何过滤数组中索引小于 0 的元素:

$.grep( [0,1,2], function(n,i){return n > 0;});

//results:[1,2]

(4).转换

jQuery.map( array, callback )

返回值:Array

说明:

将一个数组中的元素转换到另一个数组中。

作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。

转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。

示例：

var arr = [ "a", "b", "c", "d", "e" ] ；

$("div").text(arr.join(", "));

arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); });

$("p").text(arr.join(", "));

arr = jQuery.map(arr, function (a) { return a + a; });

alert(arr.join(", "));

//alert A0A0, B1B1, C2C2, D3D3, E4E4

(5)

jQuery.makeArray( obj ) , jQuery.inArray( value, array ) ,jQuery.merge( first, second ) ,

jQuery.unique( array ) 就不再一一介绍了，

还有JavaScript的join（）和split（）方法也很重要。

4：测试操作:

(1):

$.isFunction(fn)

返回：Boolean；

说明：测试是否为函数；

示例：

var fn =function（）{}；

alert($.isFunction(fn));

//alert true;

(2):

$.isArray(obj);

返回：Boolean；

说明：测试是否为数组：

示例：略；

（3）：

JavaScript只带的 isNan（）和isFinite（）：非数字和无穷大；

5：浏览器对象：

浏览器

jQuery的优秀就在于其跨浏览器的特性, 通常我们不用再针对不同浏览器书写不同的代码. 但是如果是jQuery开发人员或者插件开发人员就要自行处理浏览器差异, 以便为用户提供跨浏览器的特性.

jQuery提供了下列属性用于获取浏览器特性:

jQuery.support

1.3后版本新增jQuery.browser已废除

jQuery.browser.version

已废除jQuery.boxModel已废除

$.support:

jQuery 1.3 新增。一组用于展示不同浏览器各自特性和bug的属性集合。

jQuery提供了一系列属性，你也可以自由增加你自己的属性。其中许多属性是很低级的，所以很难说他们能否在日新月异的发展中一直保持有效，但这这些主要用于插件和内核开发者。

所有这些支持的属性值都通过特性检测来实现，而不是用任何浏览器检测。以下有一些非常棒的资源用于解释这些特性检测是如何工作的：

http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting
http://yura.thinkweb2.com/cft/
http://www.jibbering.com/faq/faq_notes/not_browser_detect.html

jQuery.support主要包括以下测试：

boxModel: 如果这个页面和浏览器是以W3C CSS盒式模型来渲染的，则等于true。通常在IE 6和IE 7的怪癖模式中这个值是false。在document准备就绪前，这个值是null。

cssFloat: 如果用cssFloat来访问CSS的float的值，则返回true。目前在IE中会返回false,他用styleFloat代替。

hrefNormalized: 如果浏览器从getAttribute("href")返回的是原封不动的结果，则返回true。在IE中会返回false，因为他的URLs已经常规化了。

htmlSerialize: 如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接，则返回true，目前IE中返回false。

leadingWhitespace: 如果在使用innerHTML的时候浏览器会保持前导空白字符，则返回true，目前在IE 6-8中返回false。

noCloneEvent: 如果浏览器在克隆元素的时候不会连同事件处理函数一起复制，则返回true，目前在IE中返回false。

objectAll: 如果在某个元素对象上执行getElementsByTagName("*")会返回所有子孙元素，则为true，目前在IE 7中为false。

opacity: 如果浏览器能适当解释透明度样式属性，则返回true，目前在IE中返回false，因为他用alpha滤镜代替。

scriptEval: 使用 appendChild/createTextNode 方法插入脚本代码时，浏览器是否执行脚步，目前在IE中返回false，IE使用 .text 方法插入脚本代码以执行。

style: 如果getAttribute("style")返回元素的行内样式，则为true。目前IE中为false，因为他用cssText代替。

tbody: 如果浏览器允许table元素不包含tbody元素，则返回true。目前在IE中会返回false，他会自动插入缺失的tbody。

Jquery 筛选函数

jQuery的筛选函数提供了串联、查找和过滤函数，为我们的jQuery对象操作带来了很多的方便，今天我们就来温习下jQuery带来的这些筛选函数。

1：串联函数：

（1）：andSelf()

return：jQuery；

explain：

加入先前所选的加入当前元素中

对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

test：

example：

$(“div”).find(“p”).andSelf().addClass(“class1”);

result：

(2):end()

return :jQuery;

explain:

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

test:

example:

$(“div”).find(“p”).end();

//$(“div”).find(“p”)：<p>test</p>

result:<div><p>test</p></div>

2:查找函数:

(1):add(exp);

return :jQuery;

explain:

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

test:

example：

$(“p”).add(“a”);

result:

[<p>test1</p>,<a>test2</a>]//数组

(2):children([expr]);

return:jQuery

explain:

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()之考虑子元素而不考虑所有后代元素。

test:

<div><span>Hello Again</span></div>

example:

$(“div”).children();

result:<span>Hello Again</span>

(3):find(expr)

return:jquery

explain:

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

test:

<p><span>Hello</span>, how are you?</p>

example:

$("p").find("span");

result:<span>Hello</span>

(4):next([expr])

return :jquery

explain:

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

test:

<p><span>Hello</span><a>h1</a></p>;

example:

$(“span”).next();

result:<a>h1</a>;

(5):nextAll([expr])

return:jQuery

explain:查找当前元素之后所有的同辈元素。

test:<div>h1</div><div>h2</div><div>h3</div>;

example:

$(“div:first”).nextAll();

result:<div>h2<div>,<div>h3</div>;:

(6):offsetParent()

return :jQuery

explain:

返回第一个匹配元素用于定位的父节点。

这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

(7):parent([expr])

return:jQuery

explain:

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

test:

<div><p>Hello</p><p>Hello</p></div>

example:

$(“p”).parent();

result:<div><p>Hello</p><p>Hello</p></div>;

(8):parents([expr])

return:jquery;

explain:取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。

test:

<body><div><p><span>Hello</span></p><span>Hello Again</span></div></body>

example:$(“span”).parents(“p”);

result:<p><span><Hello></span></p>

(9):prev([expr])

return:jquery

explain:

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

test:

<div><span>Hello Again</span></div><p>And Again</p>

example:

$(“p”).prev();

result:<div><span>Hello Again</span></div>;

(9):prevAll([expr])

return:jQuery

explain:

查找当前元素之前所有的同辈元素;

test:

example:

$(“div:last”).prevAll();

result:<div></div><div></div><div></div>

(10):siblings([expr])

return :jquery

explain:

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

test:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

example:$("div").siblings()

result:

[ <p>Hello</p>, <p>And Again</p> ]

3:过滤函数：

(1):eq(insex);

return:jQuery

explain:获取第N个元素.这个元素的位置是从0算起。

test:<p> This is just a test.</p> <p> So is this</p>

example:$(“p”).eq(1);

result:<p> So is this</p>

(2):filter(expr)

return:jQuery

explain:

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

test:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

example:

$("p").filter(".selected");

result:

<p class="selected">And Again</p>

(3):filter(fn)

return:jquery

explain:

筛选出与指定函数返回值匹配的元素集合

test:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

example:

$("p").filter(function(index) {
return $("ol", this).length == 0;
});

result:

(4):hasClass(class)

return:jQuery

explain:

检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。

test:

example:

$(“div”).hasClass("protected")

result:

true

(5):is(expr)

return:jquery

explain:

用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

test:

explam:

$("input[type='checkbox']").parent().is("form")

result:

true;

(6):map(callback)

return:jQuery

explain:

将一组元素转换成其他数组（不论是否是元素数组);

test:

<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>

explam:

$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );

result:

<p>John, password, http://ejohn.org/</p>

(7):not(expr)

return:jQuery

explain:

删除与指定表达式匹配的元素

test:

<p>Hello</p><p id="selected">Hello Again</p>

example:

$("p").not( $("#selected")[0] )

result:

<p>Hello</p>

(8):slice(start,[end])

return:jQuery

explain:

选取一个匹配的子集;

test:

<p>Hello</p><p>cruel</p><p>World</p>

example:

$("p").slice(0, 1).wrapInner("<b></b>");

result:

<p><b>Hello</b></p>

JQuery1.4 新增特性

Query 1.4 最近发布了。超乎大家的预期，这次并非简单的修修补补，1.4 包含了很多新特性、功能增强和性能提升！本文即向您介绍这些可能对你十分有用的新特性和优化增强。

你可以立刻下载jQuery 1.4试用： http://code.jquery.com/jquery-1.4.js

1. 传参给 jQuery(…)

之前，jQuery可以通过 attr 方法设置元素的属性，既可传属性的名和值，也可以是包含几组特定属性名值对的对象。在 jQuery 1.4 中，你可以把一个参数对象作为第二个参数传给 jQuery 函数本身，同时创建HTML元素。

比方说你想要创建一个带有几个属性的锚记元素（<a></a>）。在1.4中，一切如此简单：

jQuery('<a/>', {
id: 'foo',
href: 'http://google.com',
title: 'Become a Googler',
rel: 'external',
text: 'Go to Google!'
});

你大概也能猜到，这个锚记元素没有的 text 属性会调用 jQuery 的私有方法 .text() ，把元素里的文字设置为“Go to Google!”

针对这一用法，下面是更有用的实例：

jQuery('<div/>', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function(){
alert('Foo has been clicked!');
}
});

id 为一般属性，被直接加上了，而 css 和 click 则激发了相应的 jQuery 方法。在1.4以前，上面的代码需写成这个样子：

jQuery('<div/>')
.attr('id', 'foo')
.css({
fontWeight: 700,
color: 'green'
})
.click(function(){
alert('Foo has been clicked!');
});

详细了解 jQuery(…)

2. 直到遇见你...

1.4的DOM遍历工具包里又增加了3个新方法： nextUntil， prevUntil 和 parentsUntil 。这些方法会按照特定的方向遍历DOM，直到遇到满足指定选择符的元素为止。举例来说，现在我们有一张水果名的清单：

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
<li>Strawberry</li>
<li>Pear</li>
<li>Peach</li>
</ul>

我们想挑选出所有在 Apple 后，Pear 前的所有条目。代码十分简单：

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');

详细了解： prevUntil, nextUntil, parentsUntil

3. 绑定多个事件处理器

不再需要把各个事件绑定方法“链”在一起，现在你可以把它们捆成一堆，如下：

jQuery('#foo).bind({
click: function() {
// do something
},
mouseover: function() {
// do something
},
mouseout: function() {
// do something
}
})

这一用法也适用于 " .one() ".

详细了解 .bind(…)

4. 依属性指定缓动效果

以前只能为一个动画指定一种缓动效果（easing，即动画过程中的速度变化规律。jQuery 原生支持两种缓动效果，swing（默认）和linear 。要使用其他效果，你需要自己另行下载。），现在你可以为动画的各个属性参数指定不同的缓动效果：

jQuery('#foo').animate({
left: 500,
top: [500, 'easeOutBounce']
}, 2000);

点此查看实际效果

你也可以在一个可选的动画选项对象中为 secialEasing 设置一系列名值对来完全上面的工作：

jQuery('#foo').animate({
left: 500,
top: 500
}, {
duration: 2000,
specialEasing: {
top: 'easeOutBounce'
}
});

编辑注：我们的作者 James Padolsey 谦虚了，这一功能点是他想出来的哦！

详细了解有关 per-property-easing 的内容

5. 更新的 Live 事件

jQuery 1.4 添加了对指派 submit ， change ， focus 和 blur 事件的支持。在jQuery中，我们利用" .live() " 方法指派事件。当你想要为多个元素注册事件处理器时，这会非常有用。而且就算满足选择符的元素是新出现的，这些事件也会继续有效（使用 .live() 比不断重复绑定要省力省心得多）。

不过，当心了！注册 focus 和 blur 事件时你需要用 focusin 和 focusout 作为事件名。

jQuery('input').live('focusin', function(){
// do something with this
});

6. 控制函数上下文

jQuery 1.4 提供了一个全新的 proxy 函数，位于 jQuery 命名空间下。这一函数接受两个参数，一个是“作用域”（scope）或者一个方法名，另一个是某函数或者目标作用域（the intended scope）。

众所周知， JavaScript的 this 关键字是一个很难把握的东西。有时候你并不想它代表一个元素，而想让它代表你前面创建的某个对象。

例如，在这里我们创建了一个 app 对象，它拥有两个属性，一个是 clickHandler 方法，一个是负责参数配置的对象。

var app = {
config: {
clickMessage: 'Hi!'
},
clickHandler: function() {
alert(this.config.clickMessage);
}
};

这个 clickHandler 方法，当像 app.clickHandler() 这样调用时， app 就是其上下文，也就是说 this 关键字指向的是 app 。如果只需简单地调用，这样的写法没什么问题：

app.clickHandler(); // "Hi!" is alerted

不过如果把它当作一个事件处理器：

jQuery('a').bind('click', app.clickHandler);

当我们点击这个锚记时，并没有达到预想的效果（没东西 alert 出来）。这是因为 jQuery （以及大部分理智的事件模型），默认地，都会把处理器的上下文指定为目标元素本身。也就是说， this 所代表正是被点击的这个链接。而我们想的是， this 应该继续代表 app 。在jQuery 1.4中，实现这一目的十分简单：

jQuery('a').bind(
'click',
jQuery.proxy(app, 'clickHandler')
);

现在点击所有锚记都会弹出“Hi!”了。

代理函数把你的函数包裹一圈，同时把函数内的 this 设定为你想要东西。在其他上下文应用场景，如把回调函数传给其他 jQuery 方法或插件，代理函数也能派上用场。

了解更多 jQuery.proxy

7. 动画队列延迟

现在，可以给动画队列加一个延迟了。虽然这个功能可以在任何队列里实现，但最常用的可能还是延迟“fx 队列”（"fx" queue，jQuery默认的动画队列）。它能让你在两个动画行为之间暂停一下，而不用牵扯到回调函数和 setTimeout 之类的东西。 .delay() 的第一个参数即你需要设定的延迟毫秒数：

jQuery('#foo')
.slideDown() // Slide down
.delay(200) // Do nothing for 200 ms
.fadeIn(); // Fade in

如果你想延迟一个除 fx 以外的队列，把队列名作为第二个参数传给 .delay() 就可以了。

详细了解 .delay(…)

8. 检测元素是否含有特定内容

jQuery 1.4 让检测一个元素（或集合）是否含有（ .has() ）某项东西更为容易。其背后的机理和选择过滤器 :has() 是一样的。这个方法会从当前集合中选出满足任意指定条件之一的元素。 jQuery('div').has('ul');

这条语句在所有DIV元素中挑出那些包含UL元素的。这种情况可能用选择过滤器 :has() 就好了，但当你要更程式化地过滤选择集时 .has() 方法就十分有用了。

jQuery 1.4 还在 jQuery 命名空间下新增了一个 contains 函数。这是一个比较底层的函数，接受两个 DOM 节点为参数。返回一个布尔值，指示第二个元素是否包含在第一个元素中。例如：

jQuery.contains(document.documentElement, document.body);
// 返回true - <body> 确实包含在 <html> 中

消息了解： .has(…) , jQuery.contains(…)

9. 给元素剥皮！

很早以前，jQuery 就可以用 .wrap() 给元素裹一层皮。现在， jQuery 1.4 添加了 .unwrap() 方法，用以剥皮。看下面的DOM结构：

<pre class="html" name="code]<div>
<p>Foo</p>
</div>[/code]

来把 p 元素外面的一层皮（div）剥掉：

jQuery('p').unwrap();

DOM 变成了：

总而言之，这个方法可以把任意元素的父元素移除。

详细了解 .unwrap(…)

10. 移除元素，而不删除数据

以前有一个 .remove() 方法，是把元素剥离后抛弃。全新的 .detach() 方法可以让你把一个元素从DOM中剥离，而不丢失数据。囊括该元素的 jQuery 对象会在操作完成后还保留这个元素。数据可以通过 .data() 或者 jQuery 事件系统中的任意事件处理器传入 jQuery 对象。

当你需要把某个元素从DOM中移除，然后在将来某个场景中重新引入时，这个函数会很有用。元素的事件句柄和其他所有数据都会被保留。

var foo = jQuery('#foo');
// 绑定一个重要的事件处理器
foo.click(function(){
alert('Foo!');
});
foo.detach(); // 从DOM中移除
// … do stuff
foo.appendTo('body'); // 重新加入到DOM
foo.click(); // 弹出alert信息： "Foo!"

详细了解 .detach(…)

11. index(…) 的功能增强

jQuery 1.4 为您使用 .index() 提供了两种新方法。以前，你必须把元素作为参数传给它，然后获得一个返回的数值，代表在当前集合中这个元素的索引。现在，如果不传参数过去，返回的值就代表某元素在其同辈中排行老几。比方说下面的DOM：

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
<li>Strawberry</li>
<li>Pear</li>
<li>Peach</li>
</ul>

你想要晓得点击一个条目后它是列表中的第几个，实现的代码十分简单：

jQuery('li').click(function(){
alert( jQuery(this).index() );
});

jQuery 1.4 也允许你将选择符作为 .index() 的第一个参数。这样做会返回当前元素在你指定的选择符所匹配出的元素集合中的索引值。

还得提醒一点，这一方法返回的是数值，如果文档中无法找到指定条件的元素，会返回数值 -1 。

详细了解 .index(…)

12. DOM 操纵可接收回调函数

现在，大部分的DOM操纵方法都支持了将函数作为单一参数传入（ .css() 和 .attr() 传入为第二个参数）。这个函数会为选择集中的每一个元素都跑一遍，从而为相应操纵方法提供更“有个性”的值。

下列方法支持这一功能：

after

before

append

prepend

addClass

toggleClass

removeClass

wrap

wrapAll

wrapInner

val

text

replaceWith

css

attr

html

有了回调函数，你就能在选择集中利用 this 关键字来访问当前元素，用回调函数的第一个参数来访问其索引值。

jQuery('li').html(function(i){
return 'Index of this list item: ' + i;
});

还有还有，上面的某些方法还提供第二个参数供你利用。如果你调用的是一个设定型方法（如 .html() 和 .attr('href...) ），你还能取得当前值。例如：

jQuery('a').attr('href', function(i, currentHref){
return currentHref + '?foo=bar';
});

如您所见，对于 .css() 和 .attr() 方法来说，之所以要把函数作为第二个参数传递，是因为第一个参数要用来指定我们需要修改的是哪一个属性：

jQuery('li').css('color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
});

13. 判定对象类型

jQuery 1.4 新增了两个全新的辅助函数（都直接位于 jQuery 命名空间下），可以帮助你判别你正在操纵的是何种对象。

第一个函数是 isEmptyObject , ，它返回一个布尔值，判定对象是否为空（）。第二个是 isPlainObject ，它返回的布尔值代表传递过去的参数是否为JavaScript的简单对象（plain object），也就是用 {} 或 new Object() 创建的对象。复制内容到剪贴板

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

了解更多： isPlainObject(…) , isEmptyObject(…)

14. Closest(…) 的功能增强

jQuery的 .closest() 方法现在可以接受一组选择符作为参数。当你需要遍历某一元素的所有上级，找到一个以上符合特定特征的最近元素时，此功能就能派上用场。

而且，现在它还能接受上下文环境作为第二个参数，也就是说你可以控制DOM遍历的深度或者说远度。虽然说大家可能很少会用到这两个新特性，但一旦用上效果是惊人的！

了解更多 .closest(…)

15. 新事件！ focusIn 与 focusOut

如前所述，现在部署 focus 和 blur 事件时，你需要使用 focusin 和 focusout 这两个新事件。这两个事件帮助你在特定元素或者该元素的子元素获取/失去焦点时采取行动。

jQuery('form')
.focusin(function(){
jQuery(this).addClass('focused');
});
.focusout(function(){
jQuery(this).removeClass('focused');
});

值得说明的是，这两个事件不会传播开来（即所谓的“冒泡”），它们会被捕获住。也就是说，外部元素（父辈）会在作孽的“目标”元素（causal "target" element）之前被触发。

0 0