// 读取属性值
$ ( ' textarea ' ). prop ( name )
// 写入属性值
$ ( ' textarea ' ). prop ( name , val )
所以，attr方法和prop方法针对的是不同的属性。在英语中，attr是attribute的缩写，prop是property的缩写，中文很难表达出这种差异。有时，attr方法和prop方法对同一个属性会读到不一样的值。比如，网页上有一个单选框。
<input type= "checkbox" checked= "checked" /> 对于checked属性，attr方法读到的是checked，prop方法读到的是true。
$ ( input [ type = checkbox ]). attr ( " checked " ) // "checked"
$ ( input [ type = checkbox ]). prop ( " checked " ) // true 可以看到，attr方法读取的是网页上该属性的值，而prop方法读取的是DOM元素的该属性的值，根据规范，element.checked应该返回一个布尔值。所以，判断单选框是否选中，要使用prop方法。事实上，不管这个单选框是否选中，attr(“checked”)的返回值都是checked。
if ( $ ( elem ). prop ( " checked " )) { /*... */ };
// 下面两种方法亦可
if ( elem . checked ) { /*...*/ };
if ( $ ( elem ). is ( " :checked " ) ) { /*...*/ }; （6）removeProp方法，removeAttr方法
removeProp方法移除某个DOM属性，removeAttr方法移除某个HTML属性。
$ ( " a " ). prop ( " oldValue " , 1234 ). removeProp ( ' oldValue ' )
$ ( ' a ' ). removeAttr ( " title " ) （7）data方法
data方法用于在一个DOM对象上储存数据。
// 储存数据
$ ( " body " ). data ( " foo " , 52 );
// 读取数据
$ ( " body " ). data ( " foo " ); 该方法可以在DOM节点上储存各种类型的数据。
添加、复制和移动网页元素的方法
jQuery方法提供一系列方法，可以改变元素在文档中的位置。
（1）append方法，appendTo方法
append方法将参数中的元素插入当前元素的尾部。
$ ( " div " ). append ( " <p>World</p> " )
// <div>Hello </div>
// 变为
// <div>Hello <p>World</p></div> appendTo方法将当前元素插入参数中的元素尾部。
$ ( " <p>World</p> " ). appendTo ( " div " ) 上面代码返回与前一个例子一样的结果。
（2）prepend方法，prependTo方法
prepend方法将参数中的元素，变为当前元素的第一个子元素。
$ ( " p " ). prepend ( " Hello " )
// <p>World</p>
// 变为
// <p>Hello World</p> 如果prepend方法的参数不是新生成的元素，而是当前页面已存在的元素，则会产生移动元素的效果。
$ ( " p " ). prepend ( " strong " )
// <strong>Hello </strong><p>World</p>
// 变为
// <p><strong>Hello </strong>World</p> 上面代码运行后，strong元素的位置将发生移动，而不是克隆一个新的strong元素。不过，如果当前结果集包含多个元素，则除了第一个以后，后面的p元素都将插入一个克隆的strong子元素。
prependTo方法将当前元素变为参数中的元素的第一个子元素。
$ ( " <p></p> " ). prependTo ( " div " )
// <div></div>
// 变为
// <div><p></p></div> （3）after方法，insertAfter方法
after方法将参数中的元素插在当前元素后面。
$ ( " div " ). after ( " <p></p> " )
// <div></div>
// 变为
// <div></div><p></p> insertAfter方法将当前元素插在参数中的元素后面。
$ ( " <p></p> " ). insertAfter ( " div " ) 上面代码返回与前一个例子一样的结果。
（4）before方法，insertBefore方法
before方法将参数中的元素插在当前元素的前面。
$ ( " div " ). before ( " <p></p> " )
// <div></div>
// 变为
// <p></p><div></div> insertBefore方法将当前元素插在参数中的元素的前面。
$ ( " <p></p> " ). insertBefore ( " div " ) 上面代码返回与前一个例子一样的结果。
（5）wrap方法，wrapAll方法，unwrap方法，wrapInner方法
wrap方法将参数中的元素变成当前元素的父元素。
$ ( " p " ). wrap ( " <div></div> " )
// <p></p>
// 变为
// <div><p></p></div> wrap方法的参数还可以是一个函数。
$ ( " p " ). wrap ( function () {
return " <div></div> " ;
上面代码返回与前一个例子一样的结果。
wrapAll方法为结果集的所有元素，添加一个共同的父元素。
$ ( " p " ). wrapAll ( " <div></div> " )
// <p></p><p></p>
// 变为
// <div><p></p><p></p></div> unwrap方法移除当前元素的父元素。
$ ( " p " ). unwrap ()
// <div><p></p></div>
// 变为
// <p></p> wrapInner方法为当前元素的所有子元素，添加一个父元素。
$ ( " p " ). wrapInner ( ' <strong></strong> ' )
// <p>Hello</p>
// 变为
// <p><strong>Hello</strong></p> （6）clone方法
clone方法克隆当前元素。
var clones = $ ( ' li ' ). clone (); 对于那些有id属性的节点，clone方法会连id属性一起克隆。所以，要把克隆的节点插入文档的时候，务必要修改或移除id属性。
（7）remove方法，detach方法，replaceWith方法
remove方法移除并返回一个元素，取消该元素上所有事件的绑定。detach方法也是移除并返回一个元素，但是不取消该元素上所有事件的绑定。
$ ( ' p ' ). remove ()
$ ( ' p ' ). detach () replaceWith方法用参数中的元素，替换并返回当前元素，取消当前元素的所有事件的绑定。
$ ( ' p ' ). replaceWith ( ' <div></div> ' ) 动画效果方法
jQuery提供一些方法，可以很容易地显示网页动画效果。但是，总体上来说，它们不如CSS动画强大和节省资源，所以应该优先考虑使用CSS动画。
如果将jQuery.fx.off设为true，就可以将所有动画效果关闭，使得网页元素的各种变化一步到位，没有中间过渡的动画效果。
（1）动画效果的简便方法
jQuery提供以下一些动画效果方法。
show：显示当前元素。
hide：隐藏当前元素。
toggle：显示或隐藏当前元素。
fadeIn：将当前元素的不透明度（opacity）逐步提升到100%。
fadeOut：将当前元素的不透明度逐步降为0%。
fadeToggle：以逐渐透明或逐渐不透明的方式，折叠显示当前元素。
slideDown：以从上向下滑入的方式显示当前元素。
slideUp：以从下向上滑出的方式隐藏当前元素。
slideToggle：以垂直滑入或滑出的方式，折叠显示当前元素。
上面这些方法可以不带参数调用，也可以接受毫秒或预定义的关键字作为参数。
$ ( ' .hidden ' ). show ();
$ ( ' .hidden ' ). show ( 300 );
$ ( ' .hidden ' ). show ( ' slow ' );
上面三行代码分别表示，以默认速度、300毫秒、较慢的速度隐藏一个元素。
jQuery预定义的关键字是在jQuery.fx.speeds对象上面，可以自行改动这些值，或者创造新的值。
jQuery . fx . speeds . fast = 50 ;
jQuery . fx . speeds . slow = 3000 ;
jQuery . fx . speeds . normal = 1000 ;
上面三行代码重新定义fast、normal、slow关键字对应的毫秒数。
你还可以定义自己的关键字。
jQuery . fx . speeds . blazing = 30 ;
// 调用
$ ( ' .hidden ' ). show ( ' blazing ' );
这些方法还可以接受一个函数，作为第二个参数，表示动画结束后的回调函数。
$ ( ' p ' ). fadeOut ( 300 , function () {
$ ( this ). remove ();
上面代码表示，p元素以300毫秒的速度淡出，然后调用回调函数，将其从DOM中移除。
使用按钮控制某个元素折叠显示的代码如下。
// Fade
$ ( ' .btn ' ). click ( function () {
$ ( ' .element ' ). fadeToggle ( ' slow ' );
// Toggle
$ ( ' .btn ' ). click ( function () {
$ ( ' .element ' ). slideToggle ( ' slow ' );
（2）animate方法
上面这些动画效果方法，实际上都是animate方法的简便写法。在幕后，jQuery都是统一使用animate方法生成各种动画效果。
$ ( ' a.top ' ). click ( function ( e ) {
e . preventDefault ();
$ ( ' html, body ' ). animate ({ scrollTop : 0 }, 800 );
上面代码是点击链接，回到页面头部的写法。其中，animate方法接受两个参数，第一个参数是一个对象，表示动画结束时相关CSS属性的值，第二个参数是动画持续的毫秒数。需要注意的是，第一个参数对象的成员名称，必须与CSS属性名称一致，如果CSS属性名称带有连字号，则需要用“骆驼拼写法”改写。
animate方法还可以接受第三个参数，表示动画结束时的回调函数。
$ ( ' div ' ). animate ({
left : ' +=50 ' , // 增加50
opacity : 0.25 ,
fontSize : ' 12px '
300 , // 持续时间
function () { // 回调函数
console . log ( ' done! ' );
上面代码表示，动画结束时，在控制台输出“done！”。
（3）stop方法，delay方法
stop方法表示立即停止执行当前的动画。
$ ( " #stop " ). click ( function () {
$ ( " .block " ). stop ();
上面代码表示，点击按钮后，block元素的动画效果停止。
delay方法接受一个时间参数，表示暂停多少毫秒后继续执行。
$ ( " #foo " ). slideUp ( 300 ). delay ( 800 ). fadeIn ( 400 ) 上面代码表示，slideUp动画之后，暂停800毫秒，然后继续执行fadeIn动画。
jQuery还提供一些供特定元素使用的方法。
serialize方法用于将表单元素的值，转为url使用的查询字符串。
$ ( " form " ). on ( " submit " , function ( event ) {
event . preventDefault ();
console . log ( $ ( this ). serialize () );
// single=Single&multiple=Multiple&check=check2&radio=radio1 serializeArray方法用于将表单元素的值转为数组。
$ ( " form " ). submit ( function ( event ){
console . log ( $ ( this ). serializeArray ());
event . preventDefault ();
// {name : 'field1', value : 123},
// {name : 'field2', value : 'hello world'}
事件绑定的简便方法
jQuery提供一系列方法，允许直接为常见事件绑定回调函数。比如，click方法可以为一个元素绑定click事件的回调函数。
$ ( ' li ' ). click ( function ( e ){
console . log ( $ ( this ). text ());
上面代码为li元素绑定click事件的回调函数，点击后在控制台显示li元素包含的文本。
这样绑定事件的简便方法有如下一些：
click
keydown
keypress
keyup
mouseover
mouseout
mouseenter
mouseleave
scroll
focus
resize
hover
如果不带参数调用这些方法，就是触发相应的事件，从而引发回调函数的运行。
$ ( ' li ' ). click () 上面代码将触发click事件的回调函数。
需要注意的是，通过这种方法触发回调函数，将不会引发浏览器对该事件的默认行为。比如，对a元素调用click方法，将只触发事先绑定的回调函数，而不会导致浏览器将页面导向href属性指定的网址。
下面是一个捕捉用户按下escape键的函数。
$ ( document ). keyup ( function ( e ) {
if ( e . keyCode == 27 ) {
$ ( ' body ' ). toggleClass ( ' show-nav ' );
// $('body').removeClass('show-nav');
上面代码中，用户按下escape键，jQuery就会为body元素添加/去除名为show-nav的class。
hover方法需要特别说明。它接受两个回调函数作为参数，分别代表mouseenter和mouseleave事件的回调函数。
$ ( selector ). hover ( handlerIn , handlerOut )
// 等同于
$ ( selector ). mouseenter ( handlerIn ). mouseleave ( handlerOut )
下面是一个例子，当按钮发生hover事件，添加一个class样式，当hover事件结束时，再取消这个class。
$ ( ' .btn ' ). hover ( function () {
$ ( this ). addClass ( ' hover ' );
}, function () {
$ ( this ). removeClass ( ' hover ' );
使用toggleClass可以简化上面的代码。
$ ( ' .btn ' ). hover ( function () {
$ ( this ). toggleClass ( ' hover ' );
on方法，trigger方法，off方法
除了简便方法，jQuery还提供事件处理的通用方法。
（1）on方法
on方法是jQuery事件绑定的统一接口。事件绑定的那些简便方法，其实都是on方法的简写形式。
on方法接受两个参数，第一个是事件名称，第二个是回调函数。
$ ( ' li ' ). on ( ' click ' , function ( e ){
console . log ( $ ( this ). text ());
上面代码为li元素绑定click事件的回调函数。
注意，在回调函数内部，this关键字指的是发生该事件的DOM对象。为了使用jQuery提供的方法，必须将DOM对象转为jQuery对象，因此写成$(this)。
on方法允许一次为多个事件指定同样的回调函数。
$ ( ' input[type="text"] ' ). on ( ' focus blur ' , function (){
console . log ( ' focus or blur ' );
上面代码为文本框的focus和blur事件绑定同一个回调函数。
下面是一个例子，当图片加载失败，使用error事件，替换另一张图片。
$ ( ' img ' ). on ( ' error ' , function () {
if ( ! $ ( this ). hasClass ( ' broken-image ' )) {
$ ( this ). prop ( ' src ' , ' img/broken.png ' ). addClass ( ' broken-image ' );
下面是检查用户是否切换浏览器tab的例子。
$ ( document ). on ( ' visibilitychange ' , function ( e ) {
if ( e . target . visibilityState === " visible " ) {
console . log ( ' Tab is now in view! ' );
} else if ( e . target . visibilityState === " hidden " ) {
console . log ( ' Tab is now hidden! ' );
on方法还可以为当前元素的某一个子元素，添加回调函数。
$ ( ' ul ' ). on ( ' click ' , ' li ' , function ( e ){
console . log ( this );
上面代码为ul的子元素li绑定click事件的回调函数。采用这种写法时，on方法接受三个参数，子元素选择器作为第二个参数，夹在事件名称和回调函数之间。
这种写法有两个好处。首先，click事件还是在ul元素上触发回调函数，但是会检查event对象的target属性是否为li子元素，如果为true，再调用回调函数。这样就比为li元素一一绑定回调函数，节省了内存空间。其次，这种绑定的回调函数，对于在绑定后生成的li元素依然有效。
on方法还允许向回调函数传入数据。
$ ( " ul " ). on ( " click " , { name : " 张三 " }, function ( event ){
console . log ( event . data . name );
上面代码在发生click事件之后，会通过event对象的data属性，在控制台打印出所传入的数据（即“张三”）。
（2）trigger方法
trigger方法用于触发回调函数，它的参数就是事件的名称。
$ ( ' li ' ). trigger ( ' click ' ) 上面代码触发li元素的click事件回调函数。与那些简便方法一样，trigger方法只触发回调函数，而不会引发浏览器的默认行为。
（3）off方法
off方法用于移除事件的回调函数。
$ ( ' li ' ). off ( ' click ' ) 上面代码移除li元素所有的click事件回调函数。
（4）事件的名称空间
同一个事件有时绑定了多个回调函数，这时如果想移除其中的一个回调函数，可以采用“名称空间”的方式，即为每一个回调函数指定一个二级事件名，然后再用off方法移除这个二级事件的回调函数。
$ ( ' li ' ). on ( ' click.logging ' , function (){
console . log ( ' click.logging callback removed ' );
$ ( ' li ' ). off ( ' click.logging ' ); 上面代码为li元素定义了二级事件click.logging的回调函数，click.logging属于click名称空间，当发生click事件时会触发该回调函数。将click.logging作为off方法的参数，就会移除这个回调函数，但是对其他click事件的回调函数没有影响。
trigger方法也适用带名称空间的事件。
$ ( ' li ' ). trigger ( ' click.logging ' ) event对象
当回调函数被触发后，它们的参数通常是一个事件对象event。
$ ( document ). on ( ' click ' , function ( e ){
// ...
上面代码的回调函数的参数e，就代表事件对象event。
event对象有以下属性：
type：事件类型，比如click。
which：触发该事件的鼠标按钮或键盘的键。
target：事件发生的初始对象。
data：传入事件对象的数据。
pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角）。
event对象有以下方法：
preventDefault：取消浏览器默认行为。
stopPropagation：阻止事件向上层元素传播。
一次性事件
one方法指定一次性的回调函数，即这个函数只能运行一次。这对提交表单很有用。
$ ( " #button " ). one ( " click " , function () { return false ; } ); one方法本质上是回调函数运行一次，即解除对事件的监听。
document . getElementById ( " #button " ). addEventListener ( " click " , handler );
function handler ( e ) {
e . target . removeEventListener ( e . type , arguments . callee );
return false ;
上面的代码在点击一次以后，取消了对click事件的监听。如果有特殊需要，可以设定点击2次或3次之后取消监听，这都是可以的。
Elijah Manor, Do You Know When You Are Looping in jQuery?
Craig Buckler, How to Create One-Time Events in JavaScript
jQuery Fundamentals, jQuery Basics
jQuery Fundamentals, Animating Your Pages with jQuery
