第一章 jQuery 基础

1. 包装器

jQuery对包装器（Wrapper）或包装集（wrapped set）进行操作，即 $(selector)或jQuery(selector)这样的结构。

jQuery选择器完整列表：http://docs.jquery.com/Selectors。

2.实用函数

如：

var trimmed = $.trim(someString); 或 var trimmed = jQuery.trim(someString);

3. 文档就绪处理程序

$(document).ready(function(){ });

简写形式：

$(function(){ });

4. 创建DOM元素

$("<p>Hi there!</p>").insertAfter("#followMe");

5. 扩展

$.fn.disable = function() {...}

6. 与其他库共存

jQuery.noConflict();

第二章 选择元素

$(selector)
$(selector, "div#sampleDOM")

1. 基本CSS选择器

a
#specialID
.specialClass
a#specialID.specialClass
p a.specialClass

合并多个选择器：

$("div,span")

2. 子节点、容器和特性选择器

*
E
E F
E>F
E+F
E~F
E.C
E#I
E[A]
E[A=V]
E[A^=V]
E[A$=V]
E[A!=V]
E[A*=V] 包含
3. 位置过滤
:first
:last
:first-child
:last-child
:only-child
:nth-child(n) 从 1 开始计数
:nth-child(even|odd)
:nth-child(Xn+Y)
:even
:odd
:eq(n)
:gt(n)
:lt(n)
示例：
table#languages td:first-child
table#languages td:nth-child(1)
li:nth-child(2n)
tbody tr:eq(2) td:eq(2) td:contains('1972') tbody td:nth-child(3):eq(2)

4. CSS和自定义过滤选择器

:animated
:button
:checkbox
:checked
:contains(food)
:disabled
:enabled
:file
:has(selector)
:header h1~h6
:hidden
:image
:input
:not(selector)
:parent
:password
:radio
:reset
:selected
:submit
:text
:visible

input:not(:checkbox)

$("img:not([src*='dog'])")
div:has(span)
$("tr:has(img[src$='puppy.png'])")

2. 创建HTML

$("<div>") 与 $("<div></div>") 或 $("<div/>") 是等价的。

示例：

$('<img>',
{src: 'images/little.bear.png',alt: 'Little Bear',title: '...',click: function() { alert($(this).attr('title')); }
})
.css({cursor: 'pointer',border: '1px solid black',padding: '12px 12px 20px 12px',backgroundColor: 'white'
})
.appendTo('body');

3.1 大小

.length
.size()

$('a').length
$('a').size()

[index]
.get(index)

示例：

var imgElement = $('img[alt]')[0];
var imgElement = $('img[alt]").get(0);
$($('p').get(23))

eq(index)
first()
last()

获取元素数组

toArray()

示例：

var allLabeledButtons = $('label+button').toArray();

获取元素索引

index(element)

示例：

var n = $('img').index($('img#findMe')[0];

简写为：

var n = $('img').index('img#findMe');

查找元素自己的索引：

var n = $('img').index();

3.3 分解包装集

添加元素：

add(expression, context)

示例：

$('img[alt]').add('img[title]');
$('img[alt]')
.addClass('thickBorder')
.add('img[title]')
.addClass('seeThrough');

排除元素：

not(expression)

示例：

$('img[title]').not('[title*=puppy]')

$('img').not(function(){return !$(this).hasClass('keepMe');})

过滤元素：

filter(expression)

示例：

$('td').filter(function(){return this.innerHTML.match(/^\d+$/)})

$('img').addClass('seeThrough').filter('[title*=dog]').addClass('thickBorder')

获取子集：slice(begin, end) end 不包含在子集内，可省略

$('*').slice(0,4);

获取子集：has(test)

$('div').has('img[alt]')

转换包装集：map(callback)

var allIds = $('div').map(function() {return this.id == undefined ? null : this.id;
}).get();

遍历：each(iterator)

$('img').each(function(n){this.alt = 'This is image[' + n + '] with an id of ' + this.id;
});

$([1,2,3]).each(function(){ alert(this); });

3.4 使用关系获取包装集

children([selector])
closest([selector]) //邻近祖先元素组成的包装集
contents()
next([selector])
nextAll([selector])
nextUntil([selector])
offsetParent()
parent([selector])
parents([selector])
parentsUntil([selector])
prev([selector])
prevAll([selector])
prevUntil([selector])
siblings([selector])

示例：

$(this).closest('div')
$(this).siblings('button[title="Close"]')

3.5 更多处理方式

find(selector)

is(selector)

示例：

wrappedSet.find('p cite');

3.6 管理jQuery链

将当前包装集回滚到前一个返回的包装集：end()

示例：

$('img').filter('[title]').hide();

$('img').filter('[title]').hide().end().addClass('anImage');

合并方法链中的前两个包装集：andSelf()

示例：

$('div')
.addClass('a)
.find('img')
.addClass('b')
.andSelf()
.addClass('c');

3.1 访问元素属性

$('*').each(function(n){this.id = this.tagName + n;
});

获取特性值：attr(name)

示例：

alert($("#myImage").attr("src"));

jQuery 的 attr() 方法的规范化访问名称

规范化名称    DOM名称

cellspacing   cellSpacing

class            className

colspan        colSpan

cssFloat        styleFloat(IE), cssFloat(other browsers)

float             同上

for htmlFor

frameborder frameBorder

maxlength maxLength

readonly readOnly

rowspan rowSpan

styleFloat styleFloat(IE), cssFloat(other browsers)

tabindex tabIndex

usemap useMap

设置特性值：attr(name, value)

$('*').attr('title', function(index, previousValue) {return previousValue + ' I am element ' + index +' and my name is ' + (this.id || 'unset');
});

设置多个特性值：attr(attributes)

$('input').attr({value: '', title: 'Please enter a name'}
);

删除特性：removeAttr(name)

示例1：强制在新窗口打开链接

$("a[href^=htt://']").attr("target", "_blank");

示例2：解决双重提交问题

$("form").submit(function() {$(":submit", this).attr("disabled", "disabled");
});

取消禁用：$("xxx").removeAttr("disabled");

在元素上存储自定义属性：data(name, value)

从元素读取自定义属性：data(name)

移除自定义属性：removeData(name)

3.2 改变元素样式

addClass(names) names - 单个类名或空格隔开的多个类名

removeClasse(names)

toggleClass(names)

示例：

function swapThem() {$("tr").toggleClass("striped");
}
$(function() {$("table tr:nth-child(even)").addClass("striped");$("table").mouseover(swapThem).mouseout(swapThem);
});

根据条件切换类：toggleClass(names, switch)

hasClass(name)

以数组的形式返回特定元素的类名列表：

方法1：

$("p:first").attr("className").split(" ");

方法2：

$.fn.getClassNames = function() {var name = this.attr("className");if (name != null) {return name.split(" ");} else {return [];}
};

设置样式：css(name, value)

$("div.expandable").css("width", function(index, currentWidth) {return currentWidth + 20;
});

快捷形式：css(properties)

$("<img>", {src: ...
})
.css({cursor: 'pointer',border: '1px solid black',...
});

获取样式：css(name);

设置宽度和高度：width(value) height(value)

$("div.myElements").width(500)

等价于：

$("div.myElements").css("width", 500)

获取宽度和高度： width() height()

获取元素的位置：offset() position()

滚动控制：scrollLeft() scrollLeft(value) scrollTop() scrollTop(value)

3.3 设置元素内容

html()
html(content)
text()
text(content)
append(content)
prepend(content)
before(content)
after(content)
appendTo(targets)
prependTo(targets)
insertBefore(targets)
insertAfter(targets)
wrap(wrapper)
wrapAll(wrapper)
wrapInner(wrapper)
unwrap()
remove(selector) 删除包装集中的所有元素
detach(selector) 功能同上，但保留绑定的事件和jQuery数据
empty()
clone(copyHandlers)
replaceWith(content)
replaceAll(selector)

3.4 处理表单元素值

表单插件（http://jquery.malsup.com/form/）。

val()
val(value)
val(values)

示例：

$("[name='radioGroup']:checked").val()
var checkboxValues = $("[name='checkboxGroup']:checked").map(function(){ return $(this).val(); }
).toArray();

$("input, select").val(["one", "two", "three"]);

第四章 事件处理

4.1 浏览器的事件模型

DOM 第0级事件模型

DOM 第2级事件模型

1. 建立事件处理器：addEventListener(eventType, listener, useCapture)

2. 事件传播：捕获阶段（根到目标）和冒泡阶段（目标到根）

4.2 jQuery 事件模型

绑定事件：bind(eventType, data, handler) bind(eventMap)

$("img").bind("click" function(event){alert("Hi there!");});

<script>
$(function(){$("#example").bind("click", function(event) {say("BOOM once!");}).bind("click", function(event) {say("BOOM twice!");}).bind("click", function(event) {say("BOOM three times!");});
});
</script>

$(".whatever").bind({click: function(event){/* handle clicks */},mouseenter: function(event){/* handle mouseenters */},mouseleave: function(event){/* handle mouseleaves */}
});

支持的事件类型名：blur change click dbclick error focus focusin focusout keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup ready resize scroll select submit unload

创建一次性事件绑定：one(eventType, data, listener)

删除事件处理器：unbind(eventType, listener) unbind(eventType)

Event实例作为第一个参数传入函数，不管使用什么浏览器。这个Event实例是 jQuery.Event 类型的对象。

属性

altKey
ctrlKey
currentTarget
data
metaKey
pageX
pageY
relatedTarget
screenX
screenY
shiftKey
result
target
timestamp
type
which

方法

preventDefault()
stopPropagation()
stopImmediatePropagation()
isDefaultPrevented()
isPropagationStopped()
isImmediatePropagationStopped()

动态管理事件处理器

bind()是静态绑定，在事件触发时只有最先被绑定的元素才会被处理，动态创建的元素不会触发事件。

创建 Live 事件处理 live(eventType, data, listener)

和bind()行为相似，不同之处是，当相应的事件发生时，该方法会为所有匹配选择的元素触发此事件，包括在使用live()方法绑定事件时还不存在的元素。例如：

$("div.attendToMe").live("click", function(event) {alert(this);
});

删除 LIVE 事件处理 die(eventType, listener)

触发事件处理器 trigger(eventType, data)

只触发处理器，不需要事件传播和语义动作执行：triggerHandler(eventType, data)

简化的触发事件方法：eventTypeName()

blur change click dblclick error focus focusin focusout keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover resize scroll select submit unload

其他事件相关的方法

toggle(listener1, listener2, ...) 第一次单击调用listener1,第二次单击调用 listener2，……全部执行完后重新开始。

hover(enterHandler, leaveHandler) 第一个是mouseenter事件处理器，第二个是mouseleave处理器

hover(handler) 二合一

mouseover 和 mouseout ，鼠标进入某个元素触发 mouseover，移出或进入子元素触发 mouseout。

mouseenter 和 mouseleave，鼠标进入元素触发 mouseenter，移出元素才触发 mouseout。

（待续）