1 文档处理

jQuery中对dom元素进行操作。

属性/方法

描述

append(content|fn)

向每个匹配的元素内部追加内容。$("p").append("<b>Hello</b>");向所有段落中追加一些HTML标记。

appendTo(content)

把所有匹配的元素追加到另一个指定的元素中。使用这个方法是颠倒了常规的$(A).appendTo(B)的操作，即不是把B追加到A中，而是把A追加到B中。

$("p").appendTo("div");把所有段落追加到div元素中

prepend(content|fn)

向每个匹配的元素内部前置内容。$("p").prepend("<b>Hello</b>");向所有段落中前置一些HTML标记代码。

prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。$("p").prependTo("#foo"); 把所有段落追加到ID值为foo的元素中。

after(content|fn)

在每个匹配的元素之后插入内容。$("p").after("<b>Hello</b>");在所有段落之后插入一些HTML标记代码。

before(content|fn)

在每个匹配的元素之前插入内容。$("p").before("<b>Hello</b>");在所有段落之前插入一些HTML标记代码。

insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。$("p").insertAfter("#foo");把所有段落插入到一个元素之后。与 $("#foo").after("p")相同

insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。$("p").insertBefore("#foo");把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。

wrap(html|ele|fn)

把所有匹配的元素用其他元素的结构化标记包裹起来。

$("p").wrap("<div class='wrap'></div>"); 把所有的段落用一个新创建的div包裹起来

unwrap()

这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。

$("p").unwrap(); 把所有段落的父元素直接移除

wrapAll(html|ele)

将所有匹配的元素用单个元素包裹起来。$("p").wrapAll("<div></div>");用一个生成的div将所有段落包裹起来

wrapInner(html|ele|fn)

将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。$("p").wrapInner("<b></b>");把所有段落内的每个子内容加粗

replaceWith(content|fn)

将所有匹配的元素替换成指定的HTML或DOM元素。

$("p").replaceWith("<b>Paragraph. </b>");把所有的段落标记替换成加粗的标记。

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素。

$("<b>Paragraph. </b>").replaceAll("p");把所有的段落标记替换成加粗标记

empty()

删除、清空匹配的元素集合中所有的子节点。$("p").empty();把所有段落的子元素（包括文本节点）删除

remove([expr])

从DOM中删除所有匹配的元素。$("p").remove();从DOM中把所有段落删除

clone([Even[,deepEven]])

克隆匹配的DOM元素并且选中这些克隆的副本。（传入参数布尔值（true 或者 false）指示事件处理函数是否会被复制。）

$("b").clone().prependTo("p");克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

2 筛选

jQuery中对dom元素进行筛选判断。

属性/方法

描述

first()

first() 获取第一个元素。

$('li').first()

last()

last() 获取最后个元素。

$('li').last()

is(expr|obj|ele|fn)

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。

$("input[type='checkbox']").parent().is("form");由于input元素的父元素是一个表单元素，所以返回true。

has(expr|ele)

保留包含特定后代的元素，去掉那些不含有指定后代的元素。.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。

$('li').has('ul').css('background-color', 'red');给含有ul的li加上背景色

find(e|o|e)

搜索所有与指定表达式匹配的元素。

$("p").find("span");从所有的段落开始，进一步搜索下面的span元素。

parent([expr])

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

$("p").parent(".selected");查找段落的父元素中每个类名为selected的父元素。

siblings([expr])

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

$("div").siblings();找到每个div的所有同辈元素。

3 样式

jQuery中对dom元素进行样式上的操作。

属性/方法

描述

addClass(class|fn)

为每个匹配的元素添加指定的类名 $("p").addClass("selected"); 为匹配的元素加上 'selected' 类

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类 $("p").removeClass("selected"); 从匹配的元素中删除 'selected' 类

toggleClass(class|fn[,sw])

如果存在（不存在）就删除（添加）一个类。$("p").toggleClass("selected"); 为匹配的元素切换 'selected' 类

hasClass(class)

检查元素是否含有某个特定的类，如果有，则返回true。

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

css(name|pro|[,val|fn])

访问匹配元素的样式属性 $("p").css("color") 取得第一个段落的color样式属性的值。$("p").css("color","red"); 将所有段落字体设为红色

height/width([val|fn])

取得匹配元素当前计算的高/宽度值（px）

$("p").height();$("p").width();

offset([coordinates])

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效

var p = $("p:last");

var offset = p.offset();

p.html( "left: " + offset.left + ", top: " + offset.top );

4 事件

jQuery中dom元素事件的操作。

属性/方法

描述

on(eve,[sel],[data],fn)1.7+

在选择元素上绑定一个或多个事件的事件处理函数

$("p").on("click", function(){

alert( $(this).text() );

});

off(eve,[sel],[fn])1.7+

在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序

$("p").off( "click", "**" )

bind(type,[data],fn)

为每个匹配元素的特定事件绑定事件处理函数。

$(document).bind('mousemove',function(e){

$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);

});

unbind(t,[d|f])

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。

$("p").unbind( "click" )

one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

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

alert( $(this).text() );

});

hover([over,]out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

$("td").hover(

function () {

$(this).addClass("hover");

},

function () {

$(this).removeClass("hover");

}

);

事件冒泡：事件在dom文档中，会逐层往上触发。如点击了div里面的一个p元素，那么div及其上层元素的click也会被触发。如要阻止事件的冒泡可以在里层的元素的事件方法中return false。

5 效果

jQuery中对dom元素进行样式上的操作。

属性/方法

描述

show([s,[e],[fn]])

显示隐藏的匹配元素。

$("p").show() 显示所有段落

hide([s,[e],[fn]])

隐藏显示的元素。

$("p").hide() 隐藏所有段落

slideDown([s],[e],[fn])

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

$("p").slideDown("slow"); 用600毫秒缓慢的将段落滑下

slideUp([s,[e],[fn]])

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

$("p").slideUp("slow");用600毫秒缓慢的将段落滑上

slideToggle([s],[e],[fn])

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

$("p").slideToggle("slow");用600毫秒缓慢的将段落滑上或滑下

fadeIn([s],[e],[fn])

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。$("p").fadeIn("slow");用600毫秒缓慢的将段落淡入

fadeOut([s],[e],[fn])

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

$("p").fadeOut("slow");用600毫秒缓慢的将段落淡出

fadeTo([[s],o,[e],[fn]])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

$("p").fadeTo("slow", 0.66);用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度

fadeToggle([s,[e],[fn]])

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

$("p").fadeToggle("slow");用600毫秒缓慢的将段落淡入/出

animate(p,[s],[e],[fn])1.8*

用于创建自定义动画的函数。