GBin1在线实例帮助你更好的了解jQuery功能特性（二）

日期：2012-6-21 来源：GBin1.com



今天我们继续介绍jQuery的功能特性，如果你没有错过了第一篇，请这里阅读。

jQuery DOM操作

jQuery的一个特长之一是帮助你有效果的进行DOM（Document object model）操作。DOM是你能看到的web应用中的所有元素，包括图片，容器元素，链接，视频等等。

通常我们在DOM加载完毕后来处理各种事件和元素，用来生成独特的效果。以下我们介绍几个非常有用的方法：

使用.clone()方法

jQuery的clone()方法可以快速的帮助我们根据一个元素快速生成另外一个元素的拷贝，相信大家在我们的ajax方法介绍中看到过我们如何使用clone方法来生成一个新的元素，以便使用.live()方法来绑定动态元素。

注意，你同样可以使用clone()方法来拷贝绑定在元素上的事件，非常实用的方法。

使用.html()，.Text()和.empty()方法

.html()方法恐怕是大家最熟悉的方法了，它能够帮助你设置或者取得特定标签中的内容。如果你只需要设置或者取得文本而非标签的，你可以考虑使用.text方法。这个方法将会返回一个字符串。

需要注意的是，这些方法都是浏览器相关的，所以得到的结果将取决于你使用的浏览器。 .empty()方法帮助你快速的删除内容。

使用.append()，prepend()，after()和.before()方法

这几个方法都是非常常用的jQuery方法，用来帮助你添加元素到不同的位置，其中：

append方法添加内容到当前元素内部的最后部分，preprend()添加内容到元素内部的最前部分。after添加内容到当前元素外的后面，before添加内容到当前元素外部前面，如下：

使用jQuery的AJAX方法

使用jQuery的AJAX相关方法可以快速的执行ajax功能，如果大家有兴趣了解jQuery的相关方法，请参考我们的jQuery ajax教程：jQuery类库新手使用指南之AJAX方法。

使用.get()方法

使用get方法可以快速使用HTTP的get方法来取得页面内容：

在线演示

使用.load()方法

在线演示

使用.post()方法

在线演示

更多的方法介绍，请查看我们的Query ajax类库教程。

jQuery处理事件

使用jQuery可以很方便的处理各种事件，随着jQuery的版本发展，很多优化的新方法出现，例如， on()，off()，可以是的大家更高效来处理事件。

在以前的文章中，我们曾经详细介绍过相关的事件处理方法，如果大家有兴趣，可以查看我们以前的文章。

使用bind和unbind方法

bind和unbind方法可以帮助你添加事件触发到DOM元素中。当然，不同的触发动作，例如，click，我们都可以使用快捷方法来处理：

.click() 其实和bind('click')方法是一样的。 当然，使用unbind方法我们可以将事件触发删除。

使用live()，on()，off()

方法

如果你尝试给一个页面新添加的元素绑定事件，常常会发现不太好使，这里我们介绍另外一个方法live()，这个方法可以帮助你给DOC中新添加的方法绑定事件：

上面这个例子中，你点击第一个bind demo，可以看到绑定到了click事件，可是点击第二个，会发现没有绑定事件，原因是这里第二个元素是新添加的元素。bind不能够应用到它。

我们只需要修改代码，将bind用live替换即可。

在最新的jQuery1.7中，很多老的方法像.live()，.bind()和.delegate()都可以使用最新的on()方法来实现，所有其它方法最后都是调用on方法，所以这里我们也可以将以上代码如下书写：

大家可以看到，使用on()同样也可以实现对于新元素添加事件，相对于其它方法，它的性能更好。

如果我们需要删除on方法的绑定，可以使用off()方法

使用delegate方法

老版本的jQuery中，我们应该尽量使用delegate方法而不是live方法，你会发现delegate方法的性能要优于live方法，因为live方法将会从document层次来搜索元素，这会带来性能损失。

使用one()方法

如果你需要元素只执行一次事件，那么我们可以使用one()方法：

使用preventDefault()方法

这个方法可以帮助你阻止缺省的事件触发，例如，你点击 <a href="http://www.gbin1.com">gbin1.com</a> 将会转向对应的页面，如果你使用preventDefault()方法，将阻止页面加载：

使用.stopPropagation()方法

和preventDefault()方法类似，这个方法也可以阻止缺省行为，但区别是阻止上层元素的事件。注意不能和live方法联用，因为如果父元素是document会处理一次事件。

使用.stopImmediatePropagation()方法

使用这个方法将立刻阻止所有相关绑定事件。以下这个例子中，你分别点击两个button，可以看到stopImmediatePropagation和stopPropagation方法区别

来源：GBin1在线实例帮助你更好的了解jQuery功能特性（二）