jQuery Foundation

manipulation 操作

http://iciba.com/manipulation

dimension 

http://iciba.com/dimension

上节课纠错

正确：IE 6/7/8 只支持事件冒泡，不支持事件捕获

错误：IE 6/7/8 只支持事件捕获

IE 事件模型

为什么要用 jQuery

DOM API

1. 难用
2. 存在兼容性问题
3. 功能太少，不能与时俱进

1. 兼容性好
2. API 友好
3. 功能强大，与时俱进

jQuery

什么时候适合用 jQuery

1. DOM 操作较多（事件监听）
2. 简单的 AJAX
3. 需要兼容多款浏览器

什么时候不用 jQuery

1. 页面交互极为简单
2. 页面对流量有苛刻的要求
3. 上级强制、团队已经有了 jQuery 的代替品

如何引入 jQuery

1. 前往 jquery.com 下载最新版
   1. 1.x 与 2.x 的不同
   2. 也可以用 npm install jquery 下载
   3. jQuery Migrate Plugin
   4. 你也可以使用 CDN
2. 在页面使用 script 引用
3. 检查 jQuery 是否存在：alert(jQuery); alert($)
4. 查看 jQuery 版本：jQuery.fn.jquery

如何引入多个 jQuery

<script src="my_$.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// $ === my_$
// jQuery.fn.jquery
</script>

<script src="my_$.js"></script>
<script src="jquery-1.7.js"></script>
<script>
jQuery17 = $.noConflict();
</script>

<script src="jquery-1.8.js"></script>
<script>
jQuery18 = $.noConflict();
</script>

jQuery 的两种 API

$.noConflict()
$.each()

$('ul').addClass()
$('p').text('hi')

jQuery 函数（构造函数）自身的 API

jQuery 实例的 API

jQuery 对象与DOM 对象

var node = document.getElementById('foo')
var $node = $('#foo')

node === $node[0]
node === $node.get(0)
$(node) instanceof jQuery === true
$(node) !== $node

var name = node.getAttribute('name')
node.setAttribute('name','bar')

var name = $node.attr('name')
$node.attr('name','bar')

jQuery 对象

1. $('div') 是一个伪数组（类似 document.getElementsByTagName）
   1. $('div')[0] 得到第1个 node
   2. $('div').length 得到长度
2. $('div').addClass 等 API 默认会遍历整个伪数组

如何得到 jQuery 对象

$('selector')

get by id

window/body

$(window)

$(document.body)
$('body')

$('#foo')

$('#foo').find('#bar')

灵活的 selector

$('[xxx^=yyy]')

$('[name=a][class=b]')

$('[name=a],[class=b]')

jQuery 最简单的一个API

$(callback)

1. window.onload 事件
2. document 的 DOMContentLoaded 事件

$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )

参考文章

Manipulation API

DOM 操作相关

Traversing API

遍历相关

Event API

事件相关

Dimensions API

尺寸相关

Miscellaneous API

杂项

其他 API

后续介绍

1. http://devdocs.io/jquery-offset/
2. http://devdocs.io/jquery-ajax/
3. http://devdocs.io/jquery-data/
4. http://devdocs.io/jquery-deferred-object/
5. http://devdocs.io/jquery-effects/
6. http://devdocs.io/jquery-utilities/

完

下一讲：jQuery 动画

预习未讲的 API，尤其是动画相关