对于val()、html()、text()方法，相信大家都能够理解。而attr()和prop()这两个方法，就是通用的属性获取或设置方法，不过attr()方法针对的是HTML文档节点的属性，prop()方法针对的是文档节点对应的DOM元素对象的属性。它们之间的详细区别请参考attr()和prop()的区别。此外，它们各有一个对应的属性删除方法：removeAttr()和removeProp()。

jQuery的属性操作方法较多，请直接参考。

文档处理

jQuery还提供了众多的文档处理方法。通过这些方法，我们可以轻松地插入、修改、移动、删除指定的DOM元素。

// 以下$A均表示当前jQuery对象，$B可以是选择器字符串、html字符串、DOM元素、jQuery对象 $A.before( $B ); // 在$A之前插入$B $A.after( $B ); // 在$A之后插入$B $A.insertBefore( $B ); // 将$A插入到$B之前的位置 $A.insertAfter( $B ); // 将$A插入到$B之后的位置 $A.append( $B ); // 在$A内部的末尾位置追加$B $A.appendTo( $B ); // 将$A追加到$B内部的末尾位置 $A.prepend( $B ); // 在$A内部的开头位置追加$B $A.prependTo( $B ); // 将$A追加到$B内部的开头位置 $A.replaceAll( $B ); // 用$A替换$B $A.replaceWidth( $B ); // 用$B替换$A $A.wrap( $B ); // 在$A的外侧包裹$B $A.unwrap( ); // 只移除$A的父元素的标签 $A.wrapAll( $B ); // 在整个$A的外侧用单个$B将其包裹起来 $A.wrapInner( $B ); // 在$A的内侧包裹$B $A.empty(); // 清空$A的所有内容 $A.remove(); // 删除$A及其绑定的事件、附加数据等 $A.detach(); // 删除$A，但保留其绑定的事件、附加数据等 $A.clone(); // 克隆一个$A

除了*wrap*系列方法以及empty()、clone()方法外，当使用上述插入、追加、替换、删除方法时，如果用于插入/追加/替换/删除的元素是文档中的元素，则这些元素将从原位置上消失。

关于所有文档处理方法的详细信息，请参考。

CSS操作

几乎所有的CSS操作都可以通过jQuery的css()方法来进行。

$("selector").css("margin-left"); // 获取第一个匹配元素的margin-left的属性值 $("selector").css("marginLeft"); // 与上一行代码作用相同，css()支持这两种写法 $("selector").css("marginLeft", 15); // 设置所有匹配元素的margin-left为15px(数字的默认单位均为px) $("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // 一次性设置所有匹配元素的多个样式属性 $("selector").css( "marginLeft", ""); // 设为空字符串，则表示删除该样式属性

此外，jQuery还提供了直接获取或设置高度、宽度、偏移位置的方法，请参考。

动画效果

使用jQuery，我们还可以非常简单地实现动画效果。

$("selector").show(); // 显示隐藏的元素，默认不带过渡动画效果 $("selector").show( 400 ); // 显示隐藏的元素，带有400毫秒的过渡动画效果 $("selector").show( "fast" ); // 显示隐藏的元素，带有200毫秒的过渡动画效果 $("selector").show( "slow" ); // 显示隐藏的元素，带有600毫秒的过渡动画效果 $("selector").hide(); // 隐藏显示的元素，其用法与show()相同 $("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏，隐藏就显示)，其用法与show()类似 /* 下面的slide*、fade*系列方法与上面的show()、hide()、toggle()等方法作用相同， * 用法也类似，只是带有不同的动画效果 */ $("selector").slideDown(); // 显示隐藏的元素，带有向下滑动的过渡动画效果 $("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果 $("selector").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果 $("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果 $("selector").fadeOut(); // 隐藏显示的元素，带有淡出的过渡动画效果 $("selector").fadeToggle(); // 隐藏显示的元素，带有淡出的过渡动画效果

此外，jQuery还支持自定义基于CSS样式的动画效果。你可以使用animate()方法设置CSS样式，并执行一个从当前样式到指定样式的过渡动画效果。

// 设置所有匹配元素的css样式"width: 200px; height: 100px"，并执行一个当前样式到指定样式的过渡动画效果 // 动画的执行时间为 1000 毫秒 $("selector").animate( { width: "200px", height: "100px" }, 1000 );

关于jQuery动画效果的详细信息，请参考。

jQuery核心：事件处理

jQuery具有强大的DOM事件处理功能，使用jQuery的事件处理方法，我们可以非常方便地为DOM元素的指定事件绑定处理函数。以click事件为例：

function handler( event ){ // 事件处理函数的执行代码 // 参数event表示当前事件对象，该对象已经过jQuery封装标准化处理 // 函数内的this表示触发事件的当前DOM元素(不是jQuery对象) // 如果函数的返回值为false，可以阻止事件冒泡和元素的默认事件行为。 // 例如：a标签的click事件的默认跳转行为；form标签的submit事件的默认表单提交行为 } // 以下方法均可为所有匹配元素的click事件绑定处理函数 $("selector").click( handler ); $("selector").bind( "click", handler ); $("selector").live( "click", handler ); // 该方法已过时，不建议使用 $(document).delegate( "selector", "click", handler ); $("selector").on( "click", handler ); $("selector").one( "click", handler ); // 用于绑定一次性事件，第一次触发后就自动解除绑定

以上方法均可重复调用，从而为指定的click事件绑定多个处理函数。触发click事件时，将按照绑定顺序依次执行每个处理函数。

与click()方法类似，jQuery还提供绝大多数事件的绑定方法，例如:dblclick()、focus()、change()、hover()、submit()(仅限于<form>表单元素)、mousedown()、mouseover()、keydown()、keypress()等。