jQuery 学习笔记
第一章 jquery入门
.addClass会将一个CSS类应用到选择的页面部分
.removeClass()会删除选择的页面部分对应的CSS类
.addClass()方法中使用了隐式迭代机制，一次函数调用就可以完成对所有选择文档部分的修改。
$(doucument).ready();可以在DOM加载完成后（不必等待图像加载完成）触发函数的调用。
function emphasizePoemStanzas(){
$('.poem-stanza').addClass('emphasized');
}
可以这么来写
$(doucument).ready(emphasizePoemStanzas);
也可以使用匿名函数写在一块儿：
$(doucument).ready(function(){
$('.poem-stanza').addClass('emphasized');
});
第二章 选择符
Jquery利用了CSS和XPath选择符的能力，能够在DOM中轻松的获取元素或元素组，Jquery也可自定义选择符。
注：XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。
XPath 是 W3C XSLT 标准的主要元素，并且 XQuery 和 XPointer 同时被构建于 XPath 表达之上。
因此，对 XPath 的理解是很多高级 XML 应用的基础。
通过选择符和方法取得的结果集实际上都是一个jQuery对象，当我们想要实际操纵页面元素时，通过jQuery对象会简单一些。
*工厂函数$(),所有的选择符，都要从$()开始
放到圆括号中的任何元素都将自动执行循环遍历，并且会被何存到一个jQuery对象中。
如：$(‘p’)会取得文档中所有段落。
$(‘#some-id’)会取得文档中具有对应some-idID的一个元素。
$(‘.some-class’)会取得文档中带有some-class类的所有元素。
CSS选择符
$(document).ready(function(){
$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
});
XPath选择符
可以和CSS选择符一起使用
属性选择符（attribute selector）:jQuery使用了XPath中的惯例来标识属性，即将属性前置一个@符号并放在一对方括号中。
如：要选择所有带title属性的链接，可以使用$(‘a[@titile]’)
此外，方括号XPath语法中还有另外一种用途，在不带@符号的情况下，可以用来指定包含在另一个元素中的元素。
如：可以通过取得包含一个$(‘div[ol]’)元素的所有div元素
为链接添加样式
属性选择符允许以类似正则表达式的语法来标识字符串的开始（^）和结尾（$）,也可以使用星号（*）表示字符串的任意位置。
如：
$(document).ready(function(){
$('a[@href^="mailto:"]').addClass('mailto');
$('a[@href$=".pdf"]').addClass('pdflink');
$('a[@href*="mysite.com"]').addClass('mysite');
});
自定义选择符
其语法与CSS中的伪类选择符语法相同，以一个冒号开头。如果想从匹配的带有horizontal类的div集合中，选择第2项，可使用$(‘div.horizontal:eq(1)’);
交替为表格添加样式
$(document).ready(function(){
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
$('td:contains("Henry")').addClass('highlight');
});
DOM的遍历方法
$(document).ready(function (){
//$('tr').filter(':odd').addClass('odd');
$('th').parent().addClass('table-heading');
$('tr:not([th]):even').addClass('even');
$('tr:not[[th]):odd').addClass('odd');
$('td:contains("Henry")').addClass('highlight');
$('td:contains("Henry")').next().addClass('highlight');
});
其中.next()方法只取得最接近的下一个同辈元素。对于一个单元格包含Henry行，我们想要取得该行中的其他所有单元格。可以用：
$('td:contains("Henry")').siblings().addClass('highlight');
$('td:contains("Henry")').parent().find('td:gt(0)').addClass('highlight');
$('td:contains("Henry")').parent().find('td').not(':contains("Henry")').addClass('highlight');
访问DOM元素
jQuery提供了.get()方法。要访问jQuery对象引用的第1个DOM元素，可以使用.get(0)
第三章 事件
Window.onload和$(document).ready()的比较
通过$(document).ready()注册的事件处理程序，会在DOM完全就绪并可以使用时调用，不一定所有关联的文件都已下载完，也就是说：当HTML下载完成并解析为DOM树后，代码就可以运行。
Window.onload事件则需要文档完全下载到浏览器中。
Window.onload属性一次只能保存对一个函数的引用，所以不能在现有的其础上再增加新的行为。
注：但在<body onload=””>onload后可添加多个函数
每次调用$(document).ready()方法都会向内部的行为队列添加一个新函数，当页面加载完成后，所有函数都将得到执行。而且，这些函数会按照注册它们的顺序依次执行。
代码简写方式
$(document).ready(function (){
//……………
});
可以简写为
$().ready(function (){
//……………
});
还可以是
$(function (){
//……………
});
简单事件
$(document).ready(function(){
$('#switcher-large').bind('click',function(){
$('body').addClass('large');
});
});
$(document).ready(function(){
$('#switcher-normal').bind('click',function(){
$('body').removeClass('narrow');
$('body').removeClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-narrow').bind('click',function(){
$('body').addClass('narrow');
$('body').removeClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-large').bind('click',function(){
$('body').removeClass('narrow');
$('body').addClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
$(document).ready(function(){
$('#switcher .button').bind('click',function(){
$('body').removeClass();
if(this.id=='switcher-narrow'){
$('body').addClass('narrow');
}
else if(this.id=='switcher-large'){
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
简写事件
如果不使用bind，可以这么写
$(document).ready(function(){
$('#switcher .button').click(function(){
$('body').removeClass();
if(this.id=='switcher-narrow'){
$('body').addClass('narrow');
}
else if(this.id=='switcher-large'){
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
复合事件
象.toggle()和.hover()方法是另外两个自定义的事件处理程序。对于这两个方法，由于它们截取组合的用户操作，并且以多个函数作为响应，被称为复合事件处理程序。
Toggle()方法接收两个参数，第1次在元素上单击会调用第1个函数，第2次会调用第2个函数。
$(document).ready(function(){
$('#switcher h3').toggle(function(){
$('#switcher .button').addClass('hidden');
},
function(){
$('#switcher .button').removeClass('hidden');
});
});
$(document).ready(function(){
$('#switcher h3').click(function(){
$('#switcher .button').toggleClass('hidden');
});
});
突出显示可单击的项
CSS规范中加入了一个名叫:hover的伪类选择符，这个选择符可以让样式表在用户悬停在某个元素上时，影响元素的外观。jQuery可以让鼠标进入元素和离开元素时执行任意操作。
.hover()方法也接受两个函数参数。第1个函数会在鼠标指针进入被选择的元素时执行，第2个函数会在指针离开该元素时触发。
$(document).ready(function(){
$('#switcher .button').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});
使用.hover()也意味着可以避免javaScript中的事件传播（event propagation）
事件的旅程
允许多个元素响应单击事件的一种策略叫做事件捕获，在事件捕获过程中，事件首先会交给最外运层元素，接着再交给更具体的元素。Div=>span=>a
事件冒泡：是和事件捕获相反的策略。事件发生时，会首先发给最具体的元素，在这个元素获得响应之后，事件会向上冒泡到更一般的元素。a=>span=>div.
为了提供跨浏览器的一致性，jQuery始终会在模型的冒泡阶段注册事件处理程序。因此，我们总是可以假定最具体的元素会首先获得响应事件的机会。
限制和终止事件
事件对象是一种javascript结构，它会在元素获得处理事件的机会时被传递给相应的事件处理程序。这个对象中包含与事件有关的信息，也提供了可以用来影响事件在DOM中传递进程的一些方法。
为了在处理程序中使用事件对象，需要为函数添加一个参数：
停止事件传播
事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。
$(document).ready(function(){
$('#switcher .button').click(function(event){
$('body').removeClass();
if(this.id=='switcher-narrow'){
$('body').addClass('narrow');
}
else if(this.id=='switcher-large'){
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
event.stopPropagation();
});
});
默认操作
在一个锚元素上单击，会加载一个新页面，这种行为是默认操作。.preventDefault()方法可以在触发默认操作之前终止事件，通常用来表单验证上。
解绑定：移除事件处理程序
$(document).ready(function(){
var toggleStyleSwitcher = function(){
$('#switcher .button').toggleClass('hidden');
};
$('#switcher').click(toggleStyleSwitcher);
$('#switcher-narrow','#switcher-large').click(function(){
$('#switcher').unbind('click',toggleStyleSwitcher);
});
});
对于只需触发一次，随后立即解除绑定的情况可简写为.one()
模仿用户操作
通过.trigger()方法可以完成
如
$(document).ready(function(){
$(‘#switcher’).trigger(‘click’);
});
可简写为
$(document).ready(function(){
$(‘#switcher’).click();
});
触发操作而不绑定行为
第四章 CSS效果
修改内联CSS，jQuery提供了.css()方法。这个方法集获取方法（getter）和设置方法（setter）于一体。为取得某个样式属性的值，可以为这个方法传递一个字符串形式的属性名，比如.css(‘backgroundColor’)。对于由多个单词构成的属性名，jQuery既可以解释连字符版的CSS表示法（如background-color）,也可以解释驼峰大小写形式（camel-cased）的DOM表示法（如backgroundColor）。在设置样式属性时，.css()方法能够接受的参数有两种，一种是为它传递一个单独的样式属性和值，另一种是为它传递由属性-值对构成的映射（map）：
如：.css(‘property’,’value’)
.css({property1:’value1’,’property-2’:’value2’}),有些人将这些jQuery映射看成是javascript对象字面量。
使用.css()方式与我们前面使用.addClass()的方式相同-将它连缀到选择符后面并绑定到某个事件。
$(document).ready(function(){
$('#switcher-large').click(function(){
var $speech = $('div.speech');
var currentSize = $speech.css('fontSize');
var num = parseFloat(currentSize,10);
var unit = currentSize.slice(-2);
if(this.id=='switcher-large'){
num*=1.4;
}else if(this.id=='switcher-smaill'){
num/=1.4;
}
});
});
基本的隐藏和显示
基本的.hide()和show()方法不带任何参数。
.hide()方法会将匹配的元素集合的内联style属性设置为display:none.它能够把display的值变成none之前，记住原先的display值，通常是block或inline。
.show()方法会将匹配的元素的display属性，恢复为应用display:none之前的可见属性。
.show()和.hide()的这种特性，使得它们非常适合隐藏那些默认的display属性在样式表中被修改的元素。如，在默认情况下，<li>元素具有display:block属性，但是，为了构建水平导航菜单，它们可能会被修改成display:inline。而在类似这样的<li>元素上面使用.show()方法，不会简单地把它重置为默认的display:block，因为那样会导致把<li>元素放到单独的一行；相反，.show()方法会把它恢复为先前的display:inline状态，从而维持水平的菜单设计。
当DOM就绪时，可以通过以下代码隐藏第2个段落。
$(document).ready(function(){
$(‘p:eq(1)’).hide();
})
然后当用户单击第1段末尾的省略号时，就会隐藏省略号同时显示第2个段落。
$(document).ready(function() {
$('p:eq(1)').hide();
$('span.more').click(function() {
$('p:eq(1)').show();
$(this).hide();
});
});
效果和速度
当在.show()或.hide()中指定一个速度参数时，就会产生动画效果。
淡入和淡出
.fadeIn(),.fadeOut()可以显示淡入和淡出效果。
.fadeIn()和fadeOut():可以改变不透明度
.fadeTo():改变不透明度
.slideDown()和slideUp()：可以改变高度
jQuery提供了一个强大的animate()方法，通过该方法可以创建包含多重效果的自定义动画。
.animate({param1:’value’,param2:’value2’},speed,function(){
…
});
$(document).ready(function() {
$('p:eq(1)').hide();
$('span.more').click(function() {
$('p:eq(1)').animate({height: "show", width: "show", opacity:"show"}, 'slow');
$(this).hide();
});
});
$(document).ready(function() {
$('div.label').click(function(){
$('div.button').animate({left:650, Height:38},'slow');
});
});
$(document).ready(function(){
$('div.label').click(function(){
$('div.button')
.fadeTo('slow',0.5)
.animate({left:650},'slow')
.fadeTo('slow',1.0,function(){
$(this).css('backgroundColor','#f00');
});
});
});
第五章 DOM操作
操作属性：我们经常使用.addClass()和.removeClass()方法来示范如何改变页面元素的外观。这两个方法所做的，是在操作class属性（用DOM脚本编程的说法，是className属性）。而具备了这两种操作的.toggleClass（）方法能够交替地添加和移除一个类。这样，我们就具有了处理类的一种有效而可靠的方式。
不过，class只是需要访问和改变的属性中的一种，其他属性还有id、rel及href等。对于这些属性，jQuery提供了.attr()和.removeAttr()方法。
$(document).ready(function(){
$('div.chapter a').attr({'rel': 'external'});
});
$(document).ready(function(){
$('div.chapter a').each(function(index){
$(this).attr({
'rel': 'external',
'id': 'wikilink-' + index
});
});
});
$(document).ready(function(){
$('div.chapter a[@href*=wikipedia]').each(function(index){
var $thisLink = $(this);
$(this).attr({
'rel': 'external',
'id': 'wikilink-' + index,
'title': 'learn more about ' + $thisLink.text() + 'at Wikipedia'
});
});
alert('hello');
});
理解$()工厂函数
$()函数不仅能改变页面的外观，更能改变页面的内容，只要在这对括号中放入一组HTML元素，就能改变整个DOM结构。
$(document).ready(function() {
$('<a href="#top">back to top</a>');
$('<a id="top"></a>');
});
插入新元素
jQuery提供了两种元素插入到其他元素前面的方法：.insertBefore()和.before()。两个方法作用相同，区别在于如何将它们与其他方法进行连缀，对应的还有.insertAfter()和.after()。
$(document).ready(function() {
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('<a id="top"></a>');
});
或
$(document).ready(function() {
$('div.chapter p').after('<a href="#top">back to top</a>');
$('<a id="top"></a>');
});
标注、编号和链接到上下文
$(document).ready(function(){
$('<ol id="notes"></ol').insertAfter('div.chapter');
$('span.footnote').each(function(index){
$(this)
.before('<a href="#foot-note-'+(index+1)+
'"id="context-'+(index+1)+'" class="context"><sup>'
+(index+1)+'</sup></a>');
});
});
插入脚注：为了保持正解的顺序，我们使用.appendTo()方法，这样会把连续的每个脚注插入到元素的末尾：
$(document).ready(function(){
$('<ol id="notes"></ol').insertAfter('div.chapter');
$('span.footnote').each(function(index){
$(this)
.before('<a href="#foot-note-'+(index+1)+
'"id="context-'+(index+1)+'" class="context"><sup>'
+(index+1)+'</sup></a>')
.appendTo('#notes');
});
});
包装元素
jQuery中用于将元素包装在其他元素中的方法，被贴切命名为.wrap()。
$(document).ready(function(){
$('<ol id="notes"></ol').insertAfter('div.chapter');
$('span.footnote').each(function(index){
$(this)
.before('<a href="#foot-note-'+(index+1)+
'"id="context-'+(index+1)+'" class="context"><sup>'
+(index+1)+'</sup></a>')
.appendTo('#notes')
.appendTo( ' (<a href="context-' + (index + 1)+
'">context</a>)')
.wrap('<li id="foot-note-' +(index+1) + '"></li>');
});
});
复制元素
在复制元素时，需要使用jQuery的.clone()方法，这个方法能够创建任何匹配的元素集合的副本以便将来使用。
$(‘div.chapter p:eq(0)’).clone();
总结：
（1） 要在每个匹配元素中插入新元素，使用
.append()
.appendTo()
.prepend()
.prependTo()
(2)要在每个匹配的元素相邻的位置上插入新元素，使用：
.after()
.insertAfter()
.before()
.insertBefore()
(3)要在每个匹配的元素外部插入新元素，使用
.wrap()
(4)要用新元素或文本替换每个匹配的元素，使用：
.html()
.text()
(5)要移除每个匹配的元素中的元素，使用：
.empty()
(6)要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：
.remove()
根据《java基础教程整理》
.addClass会将一个CSS类应用到选择的页面部分
.removeClass()会删除选择的页面部分对应的CSS类
.addClass()方法中使用了隐式迭代机制，一次函数调用就可以完成对所有选择文档部分的修改。
$(doucument).ready();可以在DOM加载完成后（不必等待图像加载完成）触发函数的调用。
function emphasizePoemStanzas(){
$('.poem-stanza').addClass('emphasized');
}
可以这么来写
$(doucument).ready(emphasizePoemStanzas);
也可以使用匿名函数写在一块儿：
$(doucument).ready(function(){
$('.poem-stanza').addClass('emphasized');
});
第二章 选择符
Jquery利用了CSS和XPath选择符的能力，能够在DOM中轻松的获取元素或元素组，Jquery也可自定义选择符。
注：XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。
XPath 是 W3C XSLT 标准的主要元素，并且 XQuery 和 XPointer 同时被构建于 XPath 表达之上。
因此，对 XPath 的理解是很多高级 XML 应用的基础。
通过选择符和方法取得的结果集实际上都是一个jQuery对象，当我们想要实际操纵页面元素时，通过jQuery对象会简单一些。
*工厂函数$(),所有的选择符，都要从$()开始
放到圆括号中的任何元素都将自动执行循环遍历，并且会被何存到一个jQuery对象中。
如：$(‘p’)会取得文档中所有段落。
$(‘#some-id’)会取得文档中具有对应some-idID的一个元素。
$(‘.some-class’)会取得文档中带有some-class类的所有元素。
CSS选择符
$(document).ready(function(){
$('#selected-plays > li').addClass('horizontal');
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
});
XPath选择符
可以和CSS选择符一起使用
属性选择符（attribute selector）:jQuery使用了XPath中的惯例来标识属性，即将属性前置一个@符号并放在一对方括号中。
如：要选择所有带title属性的链接，可以使用$(‘a[@titile]’)
此外，方括号XPath语法中还有另外一种用途，在不带@符号的情况下，可以用来指定包含在另一个元素中的元素。
如：可以通过取得包含一个$(‘div[ol]’)元素的所有div元素
为链接添加样式
属性选择符允许以类似正则表达式的语法来标识字符串的开始（^）和结尾（$）,也可以使用星号（*）表示字符串的任意位置。
如：
$(document).ready(function(){
$('a[@href^="mailto:"]').addClass('mailto');
$('a[@href$=".pdf"]').addClass('pdflink');
$('a[@href*="mysite.com"]').addClass('mysite');
});
自定义选择符
其语法与CSS中的伪类选择符语法相同，以一个冒号开头。如果想从匹配的带有horizontal类的div集合中，选择第2项，可使用$(‘div.horizontal:eq(1)’);
交替为表格添加样式
$(document).ready(function(){
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
$('td:contains("Henry")').addClass('highlight');
});
DOM的遍历方法
$(document).ready(function (){
//$('tr').filter(':odd').addClass('odd');
$('th').parent().addClass('table-heading');
$('tr:not([th]):even').addClass('even');
$('tr:not[[th]):odd').addClass('odd');
$('td:contains("Henry")').addClass('highlight');
$('td:contains("Henry")').next().addClass('highlight');
});
其中.next()方法只取得最接近的下一个同辈元素。对于一个单元格包含Henry行，我们想要取得该行中的其他所有单元格。可以用：
$('td:contains("Henry")').siblings().addClass('highlight');
$('td:contains("Henry")').parent().find('td:gt(0)').addClass('highlight');
$('td:contains("Henry")').parent().find('td').not(':contains("Henry")').addClass('highlight');
访问DOM元素
jQuery提供了.get()方法。要访问jQuery对象引用的第1个DOM元素，可以使用.get(0)
第三章 事件
Window.onload和$(document).ready()的比较
通过$(document).ready()注册的事件处理程序，会在DOM完全就绪并可以使用时调用，不一定所有关联的文件都已下载完，也就是说：当HTML下载完成并解析为DOM树后，代码就可以运行。
Window.onload事件则需要文档完全下载到浏览器中。
Window.onload属性一次只能保存对一个函数的引用，所以不能在现有的其础上再增加新的行为。
注：但在<body onload=””>onload后可添加多个函数
每次调用$(document).ready()方法都会向内部的行为队列添加一个新函数，当页面加载完成后，所有函数都将得到执行。而且，这些函数会按照注册它们的顺序依次执行。
代码简写方式
$(document).ready(function (){
//……………
});
可以简写为
$().ready(function (){
//……………
});
还可以是
$(function (){
//……………
});
简单事件
$(document).ready(function(){
$('#switcher-large').bind('click',function(){
$('body').addClass('large');
});
});
$(document).ready(function(){
$('#switcher-normal').bind('click',function(){
$('body').removeClass('narrow');
$('body').removeClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-narrow').bind('click',function(){
$('body').addClass('narrow');
$('body').removeClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-large').bind('click',function(){
$('body').removeClass('narrow');
$('body').addClass('large');
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
$(document).ready(function(){
$('#switcher .button').bind('click',function(){
$('body').removeClass();
if(this.id=='switcher-narrow'){
$('body').addClass('narrow');
}
else if(this.id=='switcher-large'){
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
简写事件
如果不使用bind，可以这么写
$(document).ready(function(){
$('#switcher .button').click(function(){
$('body').removeClass();
if(this.id=='switcher-narrow'){
$('body').addClass('narrow');
}
else if(this.id=='switcher-large'){
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
});
});
复合事件
象.toggle()和.hover()方法是另外两个自定义的事件处理程序。对于这两个方法，由于它们截取组合的用户操作，并且以多个函数作为响应，被称为复合事件处理程序。
Toggle()方法接收两个参数，第1次在元素上单击会调用第1个函数，第2次会调用第2个函数。
$(document).ready(function(){
$('#switcher h3').toggle(function(){
$('#switcher .button').addClass('hidden');
},
function(){
$('#switcher .button').removeClass('hidden');
});
});
$(document).ready(function(){
$('#switcher h3').click(function(){
$('#switcher .button').toggleClass('hidden');
});
});
突出显示可单击的项
CSS规范中加入了一个名叫:hover的伪类选择符，这个选择符可以让样式表在用户悬停在某个元素上时，影响元素的外观。jQuery可以让鼠标进入元素和离开元素时执行任意操作。
.hover()方法也接受两个函数参数。第1个函数会在鼠标指针进入被选择的元素时执行，第2个函数会在指针离开该元素时触发。
$(document).ready(function(){
$('#switcher .button').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});
使用.hover()也意味着可以避免javaScript中的事件传播（event propagation）
事件的旅程
允许多个元素响应单击事件的一种策略叫做事件捕获，在事件捕获过程中，事件首先会交给最外运层元素，接着再交给更具体的元素。Div=>span=>a
事件冒泡：是和事件捕获相反的策略。事件发生时，会首先发给最具体的元素，在这个元素获得响应之后，事件会向上冒泡到更一般的元素。a=>span=>div.
为了提供跨浏览器的一致性，jQuery始终会在模型的冒泡阶段注册事件处理程序。因此，我们总是可以假定最具体的元素会首先获得响应事件的机会。
限制和终止事件
事件对象是一种javascript结构，它会在元素获得处理事件的机会时被传递给相应的事件处理程序。这个对象中包含与事件有关的信息，也提供了可以用来影响事件在DOM中传递进程的一些方法。
为了在处理程序中使用事件对象，需要为函数添加一个参数：
停止事件传播
事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。
$(document).ready(function(){
$('#switcher .button').click(function(event){
$('body').removeClass();
if(this.id=='switcher-narrow'){
$('body').addClass('narrow');
}
else if(this.id=='switcher-large'){
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
event.stopPropagation();
});
});
默认操作
在一个锚元素上单击，会加载一个新页面，这种行为是默认操作。.preventDefault()方法可以在触发默认操作之前终止事件，通常用来表单验证上。
解绑定：移除事件处理程序
$(document).ready(function(){
var toggleStyleSwitcher = function(){
$('#switcher .button').toggleClass('hidden');
};
$('#switcher').click(toggleStyleSwitcher);
$('#switcher-narrow','#switcher-large').click(function(){
$('#switcher').unbind('click',toggleStyleSwitcher);
});
});
对于只需触发一次，随后立即解除绑定的情况可简写为.one()
模仿用户操作
通过.trigger()方法可以完成
如
$(document).ready(function(){
$(‘#switcher’).trigger(‘click’);
});
可简写为
$(document).ready(function(){
$(‘#switcher’).click();
});
触发操作而不绑定行为
第四章 CSS效果
修改内联CSS，jQuery提供了.css()方法。这个方法集获取方法（getter）和设置方法（setter）于一体。为取得某个样式属性的值，可以为这个方法传递一个字符串形式的属性名，比如.css(‘backgroundColor’)。对于由多个单词构成的属性名，jQuery既可以解释连字符版的CSS表示法（如background-color）,也可以解释驼峰大小写形式（camel-cased）的DOM表示法（如backgroundColor）。在设置样式属性时，.css()方法能够接受的参数有两种，一种是为它传递一个单独的样式属性和值，另一种是为它传递由属性-值对构成的映射（map）：
如：.css(‘property’,’value’)
.css({property1:’value1’,’property-2’:’value2’}),有些人将这些jQuery映射看成是javascript对象字面量。
使用.css()方式与我们前面使用.addClass()的方式相同-将它连缀到选择符后面并绑定到某个事件。
$(document).ready(function(){
$('#switcher-large').click(function(){
var $speech = $('div.speech');
var currentSize = $speech.css('fontSize');
var num = parseFloat(currentSize,10);
var unit = currentSize.slice(-2);
if(this.id=='switcher-large'){
num*=1.4;
}else if(this.id=='switcher-smaill'){
num/=1.4;
}
});
});
基本的隐藏和显示
基本的.hide()和show()方法不带任何参数。
.hide()方法会将匹配的元素集合的内联style属性设置为display:none.它能够把display的值变成none之前，记住原先的display值，通常是block或inline。
.show()方法会将匹配的元素的display属性，恢复为应用display:none之前的可见属性。
.show()和.hide()的这种特性，使得它们非常适合隐藏那些默认的display属性在样式表中被修改的元素。如，在默认情况下，<li>元素具有display:block属性，但是，为了构建水平导航菜单，它们可能会被修改成display:inline。而在类似这样的<li>元素上面使用.show()方法，不会简单地把它重置为默认的display:block，因为那样会导致把<li>元素放到单独的一行；相反，.show()方法会把它恢复为先前的display:inline状态，从而维持水平的菜单设计。
当DOM就绪时，可以通过以下代码隐藏第2个段落。
$(document).ready(function(){
$(‘p:eq(1)’).hide();
})
然后当用户单击第1段末尾的省略号时，就会隐藏省略号同时显示第2个段落。
$(document).ready(function() {
$('p:eq(1)').hide();
$('span.more').click(function() {
$('p:eq(1)').show();
$(this).hide();
});
});
效果和速度
当在.show()或.hide()中指定一个速度参数时，就会产生动画效果。
淡入和淡出
.fadeIn(),.fadeOut()可以显示淡入和淡出效果。
.fadeIn()和fadeOut():可以改变不透明度
.fadeTo():改变不透明度
.slideDown()和slideUp()：可以改变高度
jQuery提供了一个强大的animate()方法，通过该方法可以创建包含多重效果的自定义动画。
.animate({param1:’value’,param2:’value2’},speed,function(){
…
});
$(document).ready(function() {
$('p:eq(1)').hide();
$('span.more').click(function() {
$('p:eq(1)').animate({height: "show", width: "show", opacity:"show"}, 'slow');
$(this).hide();
});
});
$(document).ready(function() {
$('div.label').click(function(){
$('div.button').animate({left:650, Height:38},'slow');
});
});
$(document).ready(function(){
$('div.label').click(function(){
$('div.button')
.fadeTo('slow',0.5)
.animate({left:650},'slow')
.fadeTo('slow',1.0,function(){
$(this).css('backgroundColor','#f00');
});
});
});
第五章 DOM操作
操作属性：我们经常使用.addClass()和.removeClass()方法来示范如何改变页面元素的外观。这两个方法所做的，是在操作class属性（用DOM脚本编程的说法，是className属性）。而具备了这两种操作的.toggleClass（）方法能够交替地添加和移除一个类。这样，我们就具有了处理类的一种有效而可靠的方式。
不过，class只是需要访问和改变的属性中的一种，其他属性还有id、rel及href等。对于这些属性，jQuery提供了.attr()和.removeAttr()方法。
$(document).ready(function(){
$('div.chapter a').attr({'rel': 'external'});
});
$(document).ready(function(){
$('div.chapter a').each(function(index){
$(this).attr({
'rel': 'external',
'id': 'wikilink-' + index
});
});
});
$(document).ready(function(){
$('div.chapter a[@href*=wikipedia]').each(function(index){
var $thisLink = $(this);
$(this).attr({
'rel': 'external',
'id': 'wikilink-' + index,
'title': 'learn more about ' + $thisLink.text() + 'at Wikipedia'
});
});
alert('hello');
});
理解$()工厂函数
$()函数不仅能改变页面的外观，更能改变页面的内容，只要在这对括号中放入一组HTML元素，就能改变整个DOM结构。
$(document).ready(function() {
$('<a href="#top">back to top</a>');
$('<a id="top"></a>');
});
插入新元素
jQuery提供了两种元素插入到其他元素前面的方法：.insertBefore()和.before()。两个方法作用相同，区别在于如何将它们与其他方法进行连缀，对应的还有.insertAfter()和.after()。
$(document).ready(function() {
$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
$('<a id="top"></a>');
});
或
$(document).ready(function() {
$('div.chapter p').after('<a href="#top">back to top</a>');
$('<a id="top"></a>');
});
标注、编号和链接到上下文
$(document).ready(function(){
$('<ol id="notes"></ol').insertAfter('div.chapter');
$('span.footnote').each(function(index){
$(this)
.before('<a href="#foot-note-'+(index+1)+
'"id="context-'+(index+1)+'" class="context"><sup>'
+(index+1)+'</sup></a>');
});
});
插入脚注：为了保持正解的顺序，我们使用.appendTo()方法，这样会把连续的每个脚注插入到元素的末尾：
$(document).ready(function(){
$('<ol id="notes"></ol').insertAfter('div.chapter');
$('span.footnote').each(function(index){
$(this)
.before('<a href="#foot-note-'+(index+1)+
'"id="context-'+(index+1)+'" class="context"><sup>'
+(index+1)+'</sup></a>')
.appendTo('#notes');
});
});
包装元素
jQuery中用于将元素包装在其他元素中的方法，被贴切命名为.wrap()。
$(document).ready(function(){
$('<ol id="notes"></ol').insertAfter('div.chapter');
$('span.footnote').each(function(index){
$(this)
.before('<a href="#foot-note-'+(index+1)+
'"id="context-'+(index+1)+'" class="context"><sup>'
+(index+1)+'</sup></a>')
.appendTo('#notes')
.appendTo( ' (<a href="context-' + (index + 1)+
'">context</a>)')
.wrap('<li id="foot-note-' +(index+1) + '"></li>');
});
});
复制元素
在复制元素时，需要使用jQuery的.clone()方法，这个方法能够创建任何匹配的元素集合的副本以便将来使用。
$(‘div.chapter p:eq(0)’).clone();
总结：
（1） 要在每个匹配元素中插入新元素，使用
.append()
.appendTo()
.prepend()
.prependTo()
(2)要在每个匹配的元素相邻的位置上插入新元素，使用：
.after()
.insertAfter()
.before()
.insertBefore()
(3)要在每个匹配的元素外部插入新元素，使用
.wrap()
(4)要用新元素或文本替换每个匹配的元素，使用：
.html()
.text()
(5)要移除每个匹配的元素中的元素，使用：
.empty()
(6)要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：
.remove()
根据《java基础教程整理》