JavaScript大杂烩15 - 使用JQuery(下)
前面我们总结了使用各种selector拿到了jQuery对象了，下面就是对这个对象执行指定的行为了。
2. 操作对象 - 行为函数action
执行jQuery内置的行为函数的时候，JQuery自动遍历jQuery对象中包装的所有对象，依次在这些对象上执行指定的行为，直白的说，就是JQuery执行的是批量的操作，所以在JQuery中，默认情况下，是不需要强行的遍历包装对象，然后独自的执行指定的行为的。下面是常用的行为函数介绍。
1). 遍历jQuery对象
虽然执行jQuery内置的方法的时候不需要遍历这个对象，但是有时候还是需要遍历一下执行某些自定义的操作的，看例子：
<ul id="items"> <li>Item 1</li> <li>Item 2</li> </ul> <script src="jquery-1.11.0.min.js"></script> <script type="text/javascript"> // 缓存jQuery对象，方便多次使用 var jObj = $('li'); // 获取jQuery对象包装的对象的个数 alert(jObj.length); // 获取第1个DOM对象 alert(jObj[0]); alert(jObj.get(0)); // 获取第1个jQuery对象 alert(jObj.eq(0)); // 遍历 jObj.each(function( index, element) { $(element).prepend( '<em>' + index + ': </em>' ); }); jObj.map(function( index, element) { $(element).prepend( '<em>' + index + ': </em>' ); }); </script>
这个例子展示了jQuery对象与遍历相关的一些方法和属性，使用起来很简单。需要注意的是map方法的用法与each方法完全一样，区别在于each方法没有返回值，只是对每一个元素执行某种操作，而map方法返回一个新的jQuery对象。
2). DOM操作
对于常见的CRUD操作，查询的操作已经由selector指定并通过$函数执行了，下面就看看元素，属性和CSS等对象的创建/更新/删除操作。
再看下面例子之前有一个现象需要注意，那就是JQuery习惯于使用同一个函数完成读取值和设置值连个功能(大部分函数是这样的)，不带参数的重载是读取指定的值的，带参数的重载是设置指定的值，在下面的例子中你会看到这个特点。
<ul id="items"> <li>Item 1</li> </ul> <script src="jquery-1.11.0.min.js"></script> <script type="text/javascript"> // 0. 缓存jQuery对象，方便多次使用 var jObj = $('#items'); // 1. 获取元素的内容 - HTML形式与Text形式 alert(jObj.html()); alert(jObj.text()); // 2. 更新元素的内容 - 运行一下，体会使用html方法与text方法后，页面对于字符串的编码的不同 alert(jObj.html('<li>Item 2</li>').html()); alert(jObj.text('<li>Item 2</li>').html()); // 3. 添加新的子元素 - 体会一下append与appendTo的不同、prepend与prependTo的不同 jObj.append('<li>Item 3</li>'); $('<li>Item 4</li>').appendTo(jObj); jObj.prepend('<li>Item 5</li>'); $('<li>Item 6</li>').prependTo(jObj); // 4. 添加兄弟元素 - 体会一下after与insertAfter的不同、before与insertBefore的不同 jObj.after('<ol id="itemsClone1"><li>Item 7</li><ol>'); $('<ol id="itemsClone2"><li>Item 8</li><ol>').insertAfter(jObj); jObj.before('<ol id="itemsClone1"><li>Item 7</li><ol>'); $('<ol id="itemsClone2"><li>Item 8</li><ol>').insertBefore(jObj); // 5. 处理父元素 // - wrap方法：把包装集中每个元素都包装到一个指定的元素中 // - wrapAll方法：把包装集中所有元素包装到同一个指定的元素中 // - unwrap方法：移除当前元素的父元素。 // - wrapInner方法：为当前元素的所有子元素，添加一个父元素。 $('ul').wrap('<div style="color:Red"></div>'); $('ul').wrapAll('<div style="color:Red"></div>'); $('ul').unwrap(); $('ul').wrapInner('<strong></strong>'); // 6. 复制元素 - clone方法，包括id也会复制，所以通常clone完以后需要修改一下id以保证id唯一性 jObj.after(jObj.clone()); // 7. 移除元素 // - remove方法：移除元素，包括其挂接的事件 // - detach方法：移除元素，但保留挂接的事件 // - replaceWith方法：元素替换 $('li').remove(); $('li').detach(); $('li').replaceWith('<p>Items</p>'); // 8. 获取/设置/移除属性值 // 8.1 DOM对象的属性(property，如tagName,nodeName,className等) // - 由于jQuery对象可以很容易转换成DOM对象，所以第一种方式就是直接取得DOM对象执行操作 // 这个例子在前面讲DOM操作的时候看过了，这里不再重复。 // - 第二种方式就是在JQuery中直接设置/获取DOM对象的属性值，看下面的例子： $('li').prop('className', 'big') alert($('li').prop('className')); // 8.2 页面HTML元素的属性(attribute，如id,class,src等) $('li').attr('title','tooltip...'); alert($('li').attr('title')); // 9. 获取/设置/移除CSS // 9.1 addClass方法，removeClass方法，toggleClass方法 // - addClass方法用于添加一个class名字 // - removeClass方法用于移除一个class名字 // - toggleClass方法用于添加/删除一个class名字（如果无就添加，如果有就移除）。 $('li').addClass('special') $('li').removeClass('special') $('li').toggleClass('special') // 9.2 css方法 // - css方法用于获取/改变CSS设置。 // 获取fontSize $('h1').css('fontSize'); // css方法的参数是css属性名。 // 需要注意，CSS属性名的CSS写法和DOM写法，两者都可以接受，比如font-size和fontSize都行。 // 设置css属性 $('li').css('padding-left', '20px') // 或者 $('li').css({ 'padding-left': '20px' }); // 10. 自定义数据利器 - data方法 // 储存数据 $("body").data("foo", 52); // 读取数据 alert($("body").data("foo")); </script>
3). 事件响应
事件机制前面我们也讲过了，在JQuery中，设置事件有两种方式：
第一种，直接挂接相关的事件，例如以下几类：
click,focus,blur,scroll,resize
keydown/keypress/keyup
mouseover/moouseout/mouseenter/mouseleave/hover
简单看个例子：
// 设置回调函数 $('li').click(function (e) { alert($(this).text()); }); // 主动的去触发回调函数 $('li').click();
上面最后一行代码将触发click事件的回调函数。
需要注意的是，通过这种方法触发回调函数，将不会引发浏览器对该事件的默认行为。比如，对a元素调用click方法，将只触发事先绑定的回调函数，而不会导致浏览器将页面导向href属性指定的网址。
地位超然的$(document).ready事件
在众多的这类事件中，这个事件无疑是最常用的一个，当页面解析完成（即下载完</html>标签）以后，在所有外部资源（图片、脚本等）完成加载之前，该函数就会立刻运行，这是一个初始化逻辑执行的很好的一个时机。
$(document).ready方法接受一个函数作为参数，将该参数作为document对象的DOMContentLoaded事件的回调函数。看例子：
$( document ).ready(function() { alert('ready!'); }); // 等价写法 $(function() { alert('ready!'); });
上面代码表示，一旦页面完成解析，就会运行ready方法指定的函数，在控制台显示“ready!”。
需要说明的是，jQuery的ready事件和传统的JavaScript中onload方法功能接近，但前者优于onload。因为传统的onload方法必须等页面中的图片加载完才执行，而ready当在页面DOM加载完毕后就执行了，比较精确。
第二种，使用on,trigger,off,one方式(忘记过气的bind,delegate,live方法吧)
我相信on方法是绑定事件的核心方法，上面那些简单挂接的方法都可以使用on方法实现，看个例子：
$('li').on('click', function (e) {
alert($(this).text());
});
on方法相当强大，使用它不仅一次可以挂接一个事件，还可以做很多事情，看下面的例子：
// 同时挂接click与mouseleave事件 $('li').on('click mouseleave', function (e) { alert($(this).text()); }); // 给回调函数传额外的参数 $('li').on('click', {name: 'clicked'}, function (event){ alert(event.data.name); }); // 给子元素挂事件 $('ul').on('click', 'li', function (e){ alert($(this).text()); });
这里由两点需要说明：
第一点，上面最后一个给子元素挂事件的例子，这种方式click事件还是在ul元素上触发回调函数，但是会检查event对象的target属性是否为li子元素，如果为true，再调用回调函数。这样就比为li元素一一绑定回调函数，节省了内存空间。正式由于是在ul上检查的，这种绑定的回调函数，对于在绑定后新生成的li元素依然有效。
第二点，回调函数的参数e，就代表事件对象event，这个与DOM回调中的event对象类似，也有type, which, target, data, pageX, pageY等属性和preventDefault, stopPropagation等方法，不再多说了。
trigger方法就很简单了，就是触发事件：
$('li').trigger('click');
该方法同样不触发浏览器的默认行为。
off方法用于取消事件的回调函数：
$('li').off('click');
one方法设置了事件之触发一次，执行完一次后事件回调函数就被注销了：
$('li').one('click', function (e) {
alert($(this).text());
});
one这种方式特别适合提交表单的情况，这样即使用户多次点击也不会破坏程序。
4). 动画与特效
jQuery提供一些方法，可以很容易地显示网页动画效果。但是，总体上来说，它们不如CSS动画强大和节省资源，所以应该优先考虑使用CSS动画，例如像BootStrap这种超级CSS模板，提供了很多强大的特效。
第一种动画：简单特效
jQuery提供以下一些动画效果方法。
show/hide/toggle：显示/隐藏当前元素。
fadeIn/fadeOut：淡入/淡出特效。
slideDown/slideUp/slideToggle：以从上向下滑入/从下向上滑出的方式显示当前元素。
上面这些方法可以不带参数调用，也可以接受毫秒或预定义的关键字作为参数。
$('li').show();
$('li').show(300);
$('li').show('slow');
上面三行代码分别表示，以默认速度、300毫秒、较慢的速度隐藏一个元素。
jQuery预定义的关键字是在jQuery.fx.speeds对象上面，可以自行改动这些值，或者创造新的值。
jQuery.fx.speeds.fast = 50; jQuery.fx.speeds.slow = 3000; jQuery.fx.speeds.normal = 1000;
上面三行代码重新定义fast和slow关键字对应的毫秒数，并且自定义了normal关键字，表示动画持续时间为1000毫秒。
当然了，你可以定义自己的关键字。
jQuery.fx.speeds.blazing = 30; // 调用 $('.hidden').show('blazing');
这些方法还可以接受一个函数，作为第二个参数，表示动画结束后的回调函数。
$('p').fadeOut(300, function() {
$(this).remove();
});
上面代码表示，p元素以300毫秒的速度淡出，然后调用回调函数，将其从DOM中移除。
第二种动画：自定义特效 - animate方法
上面这些简单特效，实际上都是animate方法的简便写法。在幕后，jQuery都是统一使用animate方法生成各种动画效果。animate方法接受三个参数：
$('div').animate({
left: '+=50', // 增加50
opacity: 0.25,
fontSize: '12px'
},
300, // 持续事件
function() { // 回调函数
console.log('done!');
}
);
上面代码表示，animate方法的第一个参数是一个对象，表示动画结束时相关CSS属性的值，第二个参数是动画持续的毫秒数，第三个参数是动画结束时的回调函数。需要注意的是，第一个参数对象的成员名称，必须与CSS属性名称一致，如果CSS属性名称带有连字号，则需要用“驼峰拼写法”改写。
动画的延迟执行 - delay方法
delay方法接受一个时间参数，表示暂停多少毫秒后继续执行。
$('#foo').slideUp(300).delay(800).fadeIn(400);
上面代码表示，slideUp动画之后，暂停800毫秒，然后继续执行fadeIn动画。
动画的停止 - stop方法/off属性
stop方法表示立即停止执行当前的动画。
$('#stop').click(function() {
$('.block').stop();
});
上面代码表示，点击按钮后，block元素的动画效果停止。
如果想要停止所有动画效果，则需要将jQuery.fx.off设为true，这样就使得网页元素的各种变化一步到位，没有动画效果。
5). AJAX
使用原生的AJAX去获取数据的例子大家都尝试过了吧，写起来是不是很麻烦？兼容性问题是不是很烦人？有了JQuery，一切变得相当简单。
AJAX的核心就是异步与回调，下面我们先看一下最强大，也最低层的$.ajax方法。看个小例子：
$.ajax({ type: 'POST', url: 'some.php', data: { name: 'John', location: 'Boston' } }).done(function( msg ) { alert( 'Data Saved: ' + msg ); });
这是使用了POST方式去更新数据的小例子，从这个例子中可以看出使用JQuery的ajax方法还是相当直接的，这个函数可以传入很多的设置，这些设置完成了许多不同的功能，比如跨域获取数据，是否异步等等，完整的设置可以参看官方文档：http://api.jquery.com/jQuery.ajax/#options，这里就不多说了。
由于ajax函数返回了XHR对象(在1.5版本后返回jqXHR对象，是XHR的超集，拥有更多的方法和事件)，所以我们可以使用链式调用去完成我们的功能。
实际上，对于大部分的数据操作来说，常用的就是那么几种，比如获取一份json数据，更新页面数据等等，JQuery对ajax方法在这些场景中的使用进行了简化，提供了更加简洁的函数，比如下面几个：
// 使用http get方法向server申请一份数据 // jQuery.get( url, [data], [callback], [type] ) $.get( 'ajax/test.html', function( data ) { $( '.result' ).html( data ); alert( 'Load was performed.' ); }); // 获取json数据的快捷方法：jQuery.getJSON( url, [data], [callback] ) // 方法相当于jQuery.get(url, [data],[callback], 'json') // getJSON函数将get函数的type参数设置为'JSON'，在回调函数中获取的数据已经是按照JSON格式解析后的对象了。 $.getJSON('Sample.aspx', { 'resultType': 'json' }, function(data, textStatus) { alert(data.length); }); // 获取并执行一段脚本的快捷方法：jQuery.getScript( url, [callback] ) // 方法相当于: jQuery.get(url, null, [callback], 'script') $.getScript('../scripts/Sample.js', function(data, textStatus) { alert(data); alert(textStatus); }); // 使用http post方法向server申请一份数据 $.post( 'ajax/test.html', function( data ) { $( '.result' ).html( data ); }); // 使用load方法直接获取一个页面信息，然后更新当前元素 // 默认使用GET方式, 如果传递了data参数则使用Post方式 $('#divResult').load('data/AjaxGetCityInfo.aspx', { 'resultType': 'html' });
6). 元素图形学
使用JQuery可以轻易的获取元素的宽高，位置等信息，
// height/width/innerHeight/innerWidth/outerHeight/outerWidth // 上述函数取值时得到的都是以px为单位的值，设置值的时候默认单位是px，此外可以是em或者是% $('li').height(); $('li').height(20); // offset/position 获取当前元素相对于窗口的偏移和相对于父元素的偏移(只对可见元素有效) $('li').offset(); $('li').position(); // scrollTOP/scrollLeft/ // 获取/设置当前元素相对滚动条顶部/左边的偏移。此方法对可见和隐藏元素均有效。 $("div.demo").scrollTop(); $("div.demo").scrollTop(300);
这里需要弄清楚的一点就是height, innerHeight, outerHeight的区别，这个可以通过下面的图来说明：
除了这些核心的东西，下面这些组件或方法也是JQuery重要的组成部分：
1. 工具方法
JQuery提供了很多的方法来弥补原生JavaScript的缺陷，在ECMAScript 5中，已经加入了大部分类似方法，我们使用这些方法可以很方便的完成类似于"去除首尾空白字符($.trim)"，"遍历($.each, $.map)"，"筛选 ($.grep)"，"类型判断 ($.isArray, $.isFunction, $.inArray, $.isNumeric, $.isEmptyObject, $.isPlainObject)"， "字符串解析 ($.parseJSON, $.parseXML, $.parseHTML)"等功能，这里就不一一列举了，详细的列表请查看：http://api.jquery.com/category/utilities/。
2. JQuery UI
JQuery UI是jQuery的一部分，它是在jQuery之上的一套专门用于UI交互的类库。 JQuery UI可以方便的实现底层交互，各种高级特效和动画，并且可定制主题(一整套特效)。我们可以用它轻松的构建高度交互的Web应用程序。这个就不多说了，大家量才录用吧 - 官方首页: http://jqueryui.com/。
值得一提的是，jQuery UI的在线网站十分强大，在下载时可以组装自己想要的功能定制下载，这样能有效控制类库文件的大小。
参考资料：
JQuery官方网站：http://api.jquery.com/
JQueryUI官方网站：http://jqueryui.com/
