表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

　　使用这种模式的操作方法，一共有四对：

　　

代码:

.insertAfter()和.after()：在现存元素的外部，从后面插入元素 　　.insertBefore()和.before()：在现存元素的外部，从前面插入元素 　　.appendTo()和.append()：在现存元素的内部，从后面插入元素 　　.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

　　

　　六、元素的操作：复制、删除和创建

　　复制元素使用.clone()。

　　删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

　　清空元素内容（但是不删除该元素）使用.empty()。

　　创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

　

代码:

$('Hello '); $('

new list item'); $('ul').append('list item ');

　　

　　七、工具方法

　　除了对选中的元素进行操作以外，jQuery还提供一些工具方法（utility），不必选中元素，就可以直接使用。

　　如果你懂得Javascript语言的，那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例（即选中元素）后使用。如果不理解这种区别，问题也不大，只要把工具方法理解成，是像javascript原生函数那样，可以直接使用的方法就行了。

　　常用的工具方法有以下几种：

代码:

$.trim()去除字符串两端的空格。

　

　　八、事件操作

　　jQuery可以对网页元素绑定事件。根据不同的事件，运行相应的函数。
　　

代码:

$('p').click(function(){ 　　　　alert('Hello'); });

　　

　　目前，jQuery主要支持以下事件：

代码:

　　.blur()表单元素失去焦点。

　

　　以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：

　

代码:

　$('input').bind(

　　

　　

　　有时，你只想让事件运行一次，这时可以使用.one()方法。

　　

代码:

$("p").one("click"， function(){

　　　　alert("Hello"); //只运行一次，以后的点击不会运行

　　});

　　

.unbind()用来解除事件绑定。

　　

代码:

$('p').unbind('click');

　　

　　所有的事件处理函数，都可以接受一个事件对象（event object）作为参数，比如下面例子中的e：

　　

代码:

$("p").click(function(e){ 　　　　alert(e.type); //"click" 　　});

　　

　　这个事件对象有一些很有用的属性和方法：

　　

代码:

event.pageX事件发生时，鼠标距离网页左上角的水平距离

　　在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：

　　

代码:

$('a').click(function(){

　

　　

　　有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。

　　

代码:

$('a').click(); 　　$('a').trigger('click');

　　

　　

　　九、特殊效果
　　jQuery允许对象呈现某些特殊效果。

　　

代码:

$('h1').show(); //展现一个h1标题

　　常用的特殊效果如下：

　

代码:

　.fadeIn()淡入

　　

　　

　　除了.show()和.hide()，所有其他特效的默认执行时间都是400ms（毫秒），但是你可以改变这个设置。

　　

代码:

$('h1').fadeIn(300); // 300毫秒内淡入

　　

　　更复杂的特效，可以用.animate()自定义。

　

代码:

　$('div').animate(

　

　　stop()[/URL]和.delay()用来停止或延缓特效的执行。

　　$.fx.off如果设置为true，则关闭所有网页特效。

完

Tags：阮一峰：jQuery官方基础教程笔记