jQuery实战笔记（简略重点版）
1.JQuery 基础
改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。
1.2不唐突的JS
1.2.1行为和结构分离
分为组织结构、样式、行为三部分。
任何存在与HTML页面<body>内部的JS代码都是错误的。
1.3.1 JQuery包装器
为了使设计和内容分离而把CSS引入Web技术时，需要以某种方法从外部样式表中引用页面中的元素组。这种方法就是选择器。它可以根据元素的类型、特性或者元素在HTML文档中的位置来精确地描述元素。
$()返回特殊的JS对象，它包含与选择器相匹配的DOM元素数组，这个数组中的元素是按照在文档中的顺序排列的。
这种构造方法成为包装器，因为它包装了收集到的元素并添加了扩展器
$()函数叫包装器。来指这些可以通过JQuery定义的方法操作的含有匹配元素的集合。
包装器方法：当执行完毕后会返回相同的一组元素。
作用链可以无限连续。可以把包装器返回的JS对象当作普通数组。
html()方法：用一些HTML标记替换DOM元素的内容。
1.3.2 实用函数
$()另一作用是 作为一些通用实用函数集的命名空间前缀。
如 $.trim(someString);
1.3.3 文档就绪处理程序
onload（）方法，在创建完DOM树，而且在所有外部资源全部加载完毕，并且整个页面在浏览器窗口中显示完毕后。
使用JQuery的方法：在DOM树加载完毕立即触发脚本执行。 可以多次调用，会根据页面中的声明顺序依次调用这些函数。
$(document).ready(function(){
});
1.3.4 创建DOM元素
可以通过向$()函数传递一个包含HTML标记的字符串动态创建DOM元素。
$("<p>hello</p>").insertAfter('#id');
1.3.5 扩展JQuery
JQuery包装器提供了大量有用的方法，可以反复使用。同样可以自己定制。
编写函数来填补。
$.fn.disable=function(){
return this.each(function(){
if(this.disabled !=null ) this.disable=true;
});
}
$.fn.disable表示使用disable方法扩展$包装器。
each()遍历每个匹配元素。
1.3.6 JQuery与其它库共存
$.noConflict();
- 选择要操作的元素
2.1选择被操作的元素
$('li')
2.1.1控制上下文
$(selector,'div#sampleDOM') 第二个参数为context(上下文)，指明要搜索的部分，默认为整个DOM树
2.1.2 使用基本CSS选择器
$("p a.spcialClass");
2.1.3使用子节点、容器和特性选择器
子节点：ul.myList >li >a
特性选择器： a[attr='']
a[attr^='http'] 以http开头
a[attr$='.pdf'] 以.pdf结尾
a[attr*='jquery'] 查找特性值包含任意指定字符串的元素
2.1.4 通过位置选择元素
a:first 第一个
a:odd 奇数元素
a:even 偶数
ul li:last-child
:contains('content') 包含content的节点 contains(text) :匹配包含给定文本的元素
:has(selector):匹配含有选择器所匹配的元素的元素
CSS将上面的选择器称伪类。JQuery称之为过滤器。以冒号开头。
nth-child 从1开始计数。其它从0开始。
2.1.5 使用CSS和自定义的jQuery过滤选择器
1.not 过滤器
$('img:not([src*='dog'])')
2.has过滤器 根据子节点选择父节点
$('tr:has(img[src$='puppy.jpg'])')
2.2创建新的HTML
第二个参数指定特性和特性值
$('<img>',
src:'img/image.png',
click:function(){
alert($(this).attr('title'));
}).css({
border:'',
}).appendTo('body');
2.3.2 从包装集中获取元素
var imgElement=$('img[alt]').get(index); index取负数，即从末尾开始查找。
get()
toArray() 更推荐，等价于 get()
first();
last();
index(element) 获取下标。 参数省略，则找出包装集中的第一个元素的在同级节点中的下标
var n=$('img').index('img#findMe').
2.3.3分解元素包装集
1.添加更多元素到包装集
add（expression,context） 创建一个新的包装集来保存结果，返回值是一个副本。
expression ：选择器、元素、数组
context:指定上下文，和$()一样
1.$('img[alt]').add('img[title]',div);
2.$('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')
2.整理包装集中的内容
$('img[title]').not('[title*="puppy"]');
$('img[title]').not(function(){
return !$(this).hasClass('keepMe');
})
not（） 选择不包含的 如果参数是函数， 返回值为true的删除
filter() 选择包含。 。。。。。。。。，返回值为true的添加。
$('td').filter(function(){return this.innerHTML.match(/^\d+$/)})
/为开头结尾，
字符^
意义：表示匹配的字符必须在最前边.
例如：/^A/不匹配"an A,"中的’A’,但匹配"An A."中最前面的’A’.
字符$
意义：与^类似,匹配最末的字符.
例如：/t$/不匹配"eater"中的’t’,但匹配"eat"中的’t’.
\d 匹配一个数字字符 ＋重复0次或多次
3.获取包装集的子集
slice(begin,end) $('*').slice(4) 返回不包含前四个的新包装集
has(selector) 返回满足子节点条件的父节点
4.转换包装集中的元素
例如收集每个元素的ID值
var allIds=$('div').map(function(){
return (this.id==underfined)? null:this.id;
}).get();
5.遍历包装集中的元素
each(iterator) 遍历，传入迭代器
iterator为回调函数 ,两个参数，下标和元素本身
$('img').each(function(n){
this.alt='this is image['+n+'] with an id of'+this.id;
})
6.使用关系获取包装集
按钮的事件处理函数触发时，处理器内部的this关键字指向按钮元素。假设想找出此按钮是在哪个<div>元素块中定义的。
$(this).closest('div')
$(this).siblings('button[title='Close']')
2.3.5 更多处理包装集的方式
wrapp.find('p cite')
find 返回心得包装集，将包装集中所有元素全部搜索一遍，并返回包含与传入的选择器相匹配的新包装集。
is 确定是否存在相匹配的元素 返回true,false
$('*').is('img');
2.3.6 管理jQuery链
链式操作提高效率。
$('img').filter('[title]').hide();
$('img').filter('[title]').hide().end().addClass('anImage');
end 回滚到前一个包装集
andSelf 合并方法链中的前两个包装集。
$('div').addClass('a').find('img').addClass('b').andSelf().addClass('c')
第三章 用jQuery为页面添加活力
3.1 使用元素属性和特性
属性和特性，属性时JS对象的，特性是DOM元素的。一般特性和属性一样。但也有例外比如：class为特性，和属性关联为
className。
3.2 操作元素属性
$('*').each(function(n){
this.id=this.tagName+n;
})
3.1.2 获取特性值
attr(name) 获取匹配集合的一个元素特性值
$('#myImage').attr('data-custom') 自定义特性：必须data-为前缀命名规则
特性名称不区分大小写
3.1.3 设置特性值
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 value'});
3.1.4 删除特性
removeAttr(name);
注意删除一个特性不回删除JS DOM元素中相应的属性，尽管可能导致属性值改变
比如从元素中删除readonly特性会导致元素的readOnly属性值由true变为false.
3.1.5 有趣的特性
1.强制在新窗口打开链接
$("a[href^='http://']").attr("target","_blank");
2.解决双重提交问题
$('form'.submit(function(){
$(':submit',this).attr('disabled','disable');
}))
3.1.5 在元素上储存自定义数据
自定义属性是有风险的。特别是它可以很容易地创建循环引用，从而导致严重的内存泄漏。
JQuery提供可控的方式将数据附加到所选择的DOM元素上。
data(name,value) 将传入值添加到为所有包装元素准备的jQuery托管数据仓库中 写入
data(name) 获取数据
removeData(name)
3.2 改变元素样式
3.2.1 添加和删除类名
addClass(names)
removeClass(names)
toggleClass(names) 为了表示两个状态之间的变化 当存在这个类名，删除；不存在，即添加。
function swapThem(){
$('tr').toggleClass('striped');
}
$(function(){
$('table tr:nth-child(even)').addClass("striped");
$("table").mouseover(swapThem).mouseout(swapThem);
});
toggleClass(names,switch) 如果switch表达式的计算结果为true，为此添加。
hasClass(name) 判断元素是否包含特殊的类。 返回true,false;
$('p:first').hasClass('surpriseMe');
等价于 $('p:first').is('.surpriseMe');
$('p:first').attr("className").split(" ");
$.fn.getClassNames=function(){
var name =this.attr("className");
if(name !=null){
return name.split(" ");
}else{
return [];
}
}
3.2.2 获取和设置样式
css(name,value);
$("div.expandable").css("width",function(index,currentWidth){
return currentWidth+20;
});
css(properties).
css(name).
width(value) height(value)
eg : $('div.myElements').width(500)
$('div.myElements').css("width",500)
2.定位和滚动
offset（） 返回相对于文档的位置
position() 返回包装集中的一个元素相对于最近偏移父元素的位置。
3.3 设置元素内容
替换HTML或者文本内容
html() 有参设置，无参获取
text() 不带参数获取所有文本组合成的字符串。 如果传入的呆<>等，会替换成相应的html实体字符
3.3.2 移动和复制元素
append() 追加新内容到现有内容的末尾。
$(‘p’).append(“<b>some text.</b>”);
$('p.appendToMe').append($('a.appendMe')); 这样是移动操作
单一目标这就是移动操作：原始位置被删除。多个目标即为复制移动，创造副本放到每个匹配节点后面。
prepend(content) 将内容添加到匹配的开头
before（）、after（） 放在前后。 和上面类似
appendTo()\prependTo()\insertAfter()\insertBefore()
3.3.3 包裹与反包裹元素
wrap(wraper) 将每个匹配元素包裹到wraper里。
$('a.surprise').wrap("<div class='hello'></div>")
$('a.surprise').wrap($("div:first")[0]);
wrapAll(wraper) 将匹配元素中所有元素作为整体包裹到wraper里。
wrapInner(wraper) 包裹匹配集中的内容
unwrap() 删除包装元素的父节点。子元素和其所有的同级节点一起替换DOM中的父亲
3.3.4 删除元素
remove（slector） 删除包装集中的所有元素,返回删除元素的集合。JQuery的数据和事件也会被删除
detach(selector) 删除元素，保留绑定事件和jQuery数据
empty() 清空元素，返回包装集
clone(copyHanders) copyHander true,复制事件处理器。false不复制
$('img').clone().appendTo('fieldset.photo');
$('ul').clone().insertBefore('#here'); ul的子节点也会被复制
$('ul').clone().insertBefore('#here').end().hide();
3.3.6 替换元素
replaceWith(content) 使用指定内容替换每个元素
$('img[alt]').each(function(){
$(this).replaceWith('<span>'+$(this).attr('alt')+'</span>')
});
replaceAll(selector) 使用匹配元素替换slector中匹配的元素。
3.4处理表单元素
获取和设置表单元素值
序列化表单元素
基于表单特定的属性选择元素
当我们是有表单元素时，指的是出现在表单内部的元素，拥有name和value特性，并且提交时，会作为http请求参数
发送到服务器中
val() 访问包装集的第一个表单元素的value特性 若第一个不是表单元素，返回空字符串
不适合单选多选。
$('[name="radioGroup"]:checked').val();
var checkboxValues=$('[name="radioGroup"]:checked').map(function(){
return $(this).val();
}).toArray();
$('input,select').val(['one','two','three']);
附录：JS概念
A。1 JS对象的基本原理
A.1.1 对象从何而来
新的对象由new操作符和与其相配的Object构造器产生。
var shiny=new Object();
A.1.2 对象的属性
JS Object实例就是一组属性集，每个属性由名称和值构成。属性不拘于数据类型,可以是另一个数据对象。
object[expression]
下面三个等价
ride.make
ride['make']
ride['m'+'a'+'k'+'e'];
ride["a property name"];
A.1.3 对象字面值
var ride={
make:'yama',
model:'V-star 110',
year:2005,
purchased:new Date(2005,3,12),
owner:{
name:'spike',
occupation:'bounty'
}
};
JSON: 对象由一对花括号表示，在其中用逗号分隔的多个属性。每个属性通过以冒号分隔的名称和值表示。
作为交换格式时，JSON中属性的名称必须由双引号来引用。
A.1.4 作为窗体属性的对象
如果在顶层（任何内部的函数主体之外）中使用var 关键词，都是引用于定义在JS window对象的属性。
任何在顶层作用域中生成的引用都隐式地创建在window实例中。
var foo=bar; 等价于 window.foo=bar;
总结： JS对象是属性的无序集合。
属性由名称和值组成。
可以使用字面值来声明对象
顶层变量是window的属性
A.2 作为一等公民的函数
JS的函数被认为是对象。函数也是通过JS构造器来定义的。
操作：
1.函数赋值给变量
2.函数指定为一个对象的属性
3.函数作为参数传递
4.函数作为函数结果返回
5.使用字面值创建函数
只有把函数赋值给变量、属性或参数时，函数才能被引用。
function doSomething(){};等价于：
它与通过var 创建window属性使用相同的语法：
doSomething=function(){};
等价与 window.doSomething=function(){}
函数字面值：由关键字function与紧接着的被圆括号所包含的参数列表，以及函数主体构成。
声明函数时，创建一个Function实例，并赋值给window属性，该属性自动创建。function实例不再有名字，类似于
数字213，只能通过生成引用来对其进行命名。
A.2.2 作为回调函数
function hello(){}
setTimeout(hello,5000);
当计时器过期时，hello函数会被调用。因为在代码中setTimout（）方法回调了一个函数，所以称setTimeout()为回调函数。
更通用的办法，使用函数字面值来创建,这样不回生成没有必要的hello名称在window属性中。
setTimeout(function(){alert();},5000);
A.2.3 this到底是什么
this所引用的对象（称为函数上下文）并不是由声明函数的方式所决定的，而是 由调用函数的方式决定的。
在默认情况下，函数调用的上下文（this）是对象，其属性包含用于调用该函数的引用。
var bike=ride.whatAmI();
函数上下文（this）被设置为ride所指向的对象实例。
JS还提供显式地控制函数上下文所使用的内容。通过call()\apply()来调用。
call（）第一个参数作为函数上下文（this）的对象，其余参数称为被调用函数的参数。
apply（）第一个参数作为函数上下文（this）的对象。第二个参数是被调用函数参数的对象数组。
当对象o充当函数f的调用函数上下文时，函数f就充当了对象o的方法。
alert(o1.idetifyMe.call(o3));
尽管函数作为o1的属性来引用，但调用的函数上下文是o3.更强调了函数上下文取决于调用函数的方式，而不是声明函数的方式。
A.2.4 闭包（一种特殊的函数）
闭包就是Fuction实例，它结合了来自环境的（函数执行所必需的）局部变量。
在声明函数时，可以在声明函数时引用函数作用域内任何变量。但是使用闭包时，即使在函数声明之后，已经超出函数作用域（也就是关闭函数
声明）的情况下，该函数仍然带有这些变量。
在回调函数运行时，引用声明回调函数时的局部变量时不可或缺的工具。
闭包允许回调访问环境中的值，即使该环境已经超出了作用域。
当就绪处理器执行完毕，local声明所在的块超出了作用域，但是函数声明所创建的闭包（包括local变量）在函数的生命周期内都保持在作用域中。
闭包的另一个重要特征是：函数上下文绝不会被包含在闭包的一部分。
在局部变量中创建this引用的副本，这个副本将会被包含在闭包中。
第四章 事件处理
脚本即事件处理器(监听器)，
4.1.1 DOM第0级事件模型
在这种事件模型下，事件处理器是通过将一个函数实例的引用赋值给DOM元素的属性来声明。
onclick="say('BOOM');"
等价于：
imageElement.onclick=function(event){
say('BOOM');
};
1。event实例
当一个事件处理器被触发时，名为Event的类实例会作为第一个参数传入处理器中。而IE存到event的全局属性中。
if(! event) event=window.event;
Event实例属性提供了关于当前正在被处理的已触发事件的大量信息。
target属性储存目标元素的引用。
2.事件冒泡
当触发了DOM树中一个元素上的事件时，触发事件处理器，由里往外。
3.影响事件传播和语义动作
通过调用event实例的stopPropagation()方法来阻止事件向更高层传播。
或IE浏览器，event实例的属性cancelBubble的值为true.
4.1.2 DOM第二级事件模型
1.建立事件处理器
DOM第2级事件处理器（也称为监听器）是通过元素方法创建的。每个元素都定义有一个名为addEventListener()方法，
用来敷家事件处理器到元素上。
addEventListener(eventType,listener,useCapture);
eventType:click、mouseover、keydown
listener:一个函数引用或内联函数，用来在元素上创建指定事件类型的处理器。 event实例是传入这个函数的第一个参数
useCapture：boolean。是否使用捕捉。
$(function(){
var element=$('example')[0];
element.addEventListener('click',function(event){
say('BOOM once!');
},false);
})
2.事件传播
基本事件模型是冒泡。第二级增加了额外捕获阶段。
在二级中，事件先从根部向下传递到目标元素，在从目标传到DOM根部，前者为捕获阶段，后者为冒泡阶段。
useCapture为true， 表示在捕获阶段触发事件。
为false,在冒泡阶段触发事件。
IE并不支持第二级事件模型，它提供对应的专有模型。
4.1.3 IE事件模型
attachEvent(eventName,handler);
eventName:onclick、onmouseover、onkeydown
hander:指的是处理函数。
4.2 JQuery事件模型
隐藏了 IE和浏览器的不一致。让开发更简单。
JQuery事件模型的实现，也被非正式地成为JQuery事件模型。
不支持捕获阶段。
4.2.1 使用JQuery绑定事件处理器
bind()
$('img').bind('click',function(event){alert("Hi there!");});
eg:
$(function(){
$('#example')
.bind('click',function(event){
say('BOOM once!');
})
.bind('click',function(event){
say('BOOM twice!');
})
.bind('click',function(event){
say('BOOM three');
});
})
bind(eventType,data,handler)
bind(eventMap)
eventType:处理类型
data(对象)：调用者提供的数据，用来附加到Event实例的data属性，以便为处理器函数使用。
handler：函数
eventMap:一个JS对象，允许在一次调用中创建多个事件类型的处理器。
JQuery还为事件处理提供了一个小巧的额外功能，就是通过指定命名空间来对事件处理器进行分组。它通过为事件名称添加
圆点分割的后缀来指定命名空间。
页面有两种模式：显示模式和编辑模式，事件监听器只能放置在编辑模式下，因此当页面离开编辑模式，需要删除监听器，如下：
$('#thing1').bind('click.editMode',someListener1);
$('#thing2').bind('click.editMode',someListener2);
$('#thing3').bind('click.editMode',someListener3);
离开时： $('*').unbind('click.editMode');
eventMap: 一个对象，名字为eventType,属性值为handler.
$('.whatever').bind({
click:function(event){}
mouseenter:function(event){}
mouseleave:function(event){}
});
focusin和focusout :当可聚焦元素获取或失去焦点时，会调用为元素上的这些事件创建的处理器，同时也会调用建立在其祖先
元素上的任何此类处理器。
one(eventType,data,listner) 只触发一次，触发完毕即删除
4.2.2 删除事件处理器
unbind(eventType,listener);
unbind(event);
为包装集中的所有元素删除由可选的传入参数指定的事件处理器。
4.2.3 Event实例
event实例提供各种信息。
4.2.4 预先管理事件处理器
不仅仅能在就绪处理器中使用，还提供动态的管理事件处理器。
live（），允许预先为哪些还不存在的元素创建事件处理器。
live(eventType,data,listner).
当指定类型的事件在元素上发生时，会将传入的监听器座位处理器调用，而无论在调用live方法时这些元素是否存在。
$('div.attendToMe').live(
'click',function(event){alert(this);})
在整个页面的生命周期中，单击任意匹配元素都会调用事件处理器并传入event实例。而且代码不需要放在就绪处理器中，因为
live()不关心DOM是否存在。
2.删除 live事件
使用die()方法来解除绑定。与unbind()相似。
4.2.5 触发事件处理器
当浏览器或者用户活动触发了相关事件在DOM层次结构中传播时，事件处理器将会被调用。但有时我们想在脚本控制下触发
处理器的执行。可以将这样的事件处理器定义为顶级函数。
trigger(eventType,data)
在所有匹配元素上调用为传入的事件类型创造的事件处理器
只想触发处理器，而不需要事件传播和语义动作执行的情况：
triggerHandler(eventType,data)
4.2.6 其它事件相关的方法
1.起切换作用的监听器
toggle(),他为单机事件处理器创建了一个循环队列。
toggle(listener1,listener2,...)
用途：根据元素被单机次数切换元素的可用状态。
2.在元素上悬停鼠标
$(element).mouseenter(function1).mouseleave(function2);
等价于：
hover(enterHandlder,leaveHandler);
4.3 充分利用（更多的）事件
第五章 用动画和特效装扮页面
特效用来增强页面的可用性，而不是用来炫耀。
5.1 显示和隐藏元素
show()用于显示包装集中的元素
hide()用于隐藏它们。
jQuery通过将元素的style.display属性改为none来隐藏元素。
<div style="display:none;">this will hiden</div>
等价
$('div').hide();
jQuery可以将display属性从none改变为block或inline来显示对象。选择哪个值取决于之前是否显示设置元素display值。
若显式设置，则它被记录并恢复。否则取决于默认值。
$('div.caption img').click(function(){
var body$=$(this).closest('div.module').find('div.body');
if(body$.is(':hidden')){
body$.show();
}else{
body$.hide();
}
})
$作为变量前后缀，代表包装集引用。
5.1.2 切换元素的显示
再显示和隐藏之间切换元素的状态。使用toggle()方法。
$('div.caption img').click(function(){
$(this).closest('div.module').find('div.body').toggle();
}）
5.2 用动画改变元素的显示状态
短时间的渐变过程有助于我们了解什么正在改变，以及如何从一个状态转换到另一个状态。
三种特效：
显示和隐藏
淡入和淡出
滑下和滑上
5.2.1 渐变地显示和隐藏元素
hide(speed,callback)
speed:时间（毫秒） 也可以为字符串slow、normal、fast
callback:当动画结束时调用
show(speed,callback)
speed:时间（毫秒） 也可以为字符串slow、normal、fast
callback:当动画结束时调用
toggle(speed,callback)
speed:时间（毫秒） 也可以为字符串slow、normal、fast
callback:当动画结束时调用
toggle(condition)
基于传入条件的运算结果显示和隐藏匹配元素。 true 显示 false 隐藏
$('div.caption img').click(function(){
$(this).closest('div.module').find('div.body')
.toggle('slow',function(){
$(this).closest('div.module')
.toggleClass('rolledup',$(this).is(':hidden'));
});
}）
5.2.2 使元素淡入和淡出
fadeIn(speed,callback)
只影响元素的透明度。
fadeOut(speed,callback)
淡出
fadeTo(speed,opacity,callback)
逐渐改变元素透明度，从他们的当前值到opacity指定的新值。
5.2.上下滑动元素
另一组用于隐藏和显示元素的特效（slideDown()、slideUp()），再显示时好像从顶部滑下，隐藏是滑入顶部。
slideDown(speed,callback)
隐藏的元素滑下显示出来。
slideUp(speed,callback)
删除匹配的显示元素。
slideToggle(speed,callback)
5.2.4 停止动画
stop(clearQueue,gotoEnd)
停止匹配集元素上正在进行的所有动画
clearQueue(布尔)：true, 停止当前动画，而且停止动画队列中等待的其他所有动画
gotoEnd(布尔): true, 则使当前动画执行到其逻辑结束。
jQuery.fx.off 标志为true 将导致所有的特效立即发生，而没有动画过程。
5.3 创建自定义动画
animate(properties,duration,easing,callback)
animate(properties,options)
properties(对象): 一个散列对象，指定动画结束时所支持的CSS样式应该达到的值。
duration: 时间可毫秒或可预定于字符串。
easing(字符串)：一个函数名称，用于指定动画缓动特效。通常是插件提供。
callback:
options:
duration：
easing
complete：动画完成调用函数
queue：如果false，则动画立即运行，无需排队
step：在动画每一步都会调用的回调函数。
$.fn.fadeToggle=function(speed){
return this.animate({opacity:'toggle'},speed);
};
5.3.1 自定义缩放动画
$('.animateMe').each(function(){
$(this).animate({
width:$(this).width()2,
width:$(this).height()2
},2000);
})
5.3.2 自定义掉落动画
$('.animateMe').each(function(){
$(this)
.css('position','relative')
.animate({
opacity:0,
top:$(window).height()-$(this).height()-$(this).position().top
},'slow',function(){$(this).hide();})
})；
5.3.3 自定义消散动画
$('.animateMe').each(function(){
var position=$(this).position();
$(this).css({
position:'absolute',
top:position.top,
left:position.left})
.animate({
opacity:'hide',
width:$(this).width()*5,
height:
})
})
5.4 动画和队列
如果想使自己的函数拥有相同功能该怎么办呢？jQuery队列
queue(name) 根据传入的名字查找建立在匹配集中第一个元素上的任意队列，以函数数组的形式返回。
queue(name,function) 添加函数到队列
queue(name,queue) 把匹配元素上现有的任意队列替换为传入的队列
dequeue(name)
删除匹配集中每个元素的命名队列中的第一个函数，并执行。
3.清除没有执行的队列函数
clearQueue(name)
从命名队列中删除所有未执行的函数
4.延迟队列函数
delay(duration,name); 延迟队列中下一个函数的执行。
5.4.3 插入函数到特效队列。
第六章 DOM无关的jQuery实用函数
实用函数：定义在JQuery／$命名空间下步操作包装集的函数。这些函数可以看作是定义在$实例。
实用函数要么操作除DOM以外的JS对象，要么执行一些对象无关的操作（Ajax）。
标志：
$.fx.off 启用或者禁用特效 可读写
$.support 所支持特征的详细信息 只读
$.browser 公开浏览器的细节 只读
6.1.1 禁用动画
$.fx.off 启用或者禁用特效 true 禁用
6.1.2 检测用户代理支持
1.浏览器检测
避免使用浏览器检测技术
浏览器通过设置一个称为用户代理字符串的请求头来标识自己。
2.代替方案：特征检测
3.jQuery浏览器功能标志
$.support对象的属性
6.13 浏览器检测标志
$.browser
建议使用这样的方式，哪怕mise消失，只需修改一次。
： $.support.useIntForSelectAdds=$.browser.mise;
6.2 JQuery与其他库并存
$.noConflict()实用函数调用来放弃对$标识符的占用，是通过JQuery标识符
$.noConflict(queryToo)
jqueryToo（布尔） 若true，放弃$和JQuery标识符
var $j=jQuery;
创建一个作用域环境，在该环境中$标识符指向JQuery对象。
（function($){/*函数主体*/})(jQuery）;
（function($){/*函数主体*/}) 声明了一个函数并用圆括号括起来，由此生成了一个表达式，这个表达式的结果是对一个匿名函数的引用，这个函数
期望传入单个参数并将其命名为$
(jQuery）在匿名函数上执行函数调用，讲JQuery对象作为参数传递。
习惯用法的变体： 用于声明就绪处理函数
jQuery（function($){alert("111")}）;
通过将一个函数作为参数传入jQuery函数来声明就绪处理器。但是这次，我们实用$标识符声明传入就绪处理器的单个参数。因为jQuery总是将jquery引
用作为第一个也是唯一的参数传入就绪处理器。
6.3 操作JS对象和集合
6.3.1 修建字符串
$.trim(value)
删除传入的字符串开头和结尾处的空白自负，并返回修改后的结果
6.3.2 遍历属性和集合
$.each() 函数
$.each(container,callback)
遍历传入的容器中的每一项，并为每一项调用传入的回调函数
container(数组｜对象)
callback(函数) callback的一个参数是数组元素的下标或对象属性的名称。第二个参数是数组项或属性值
当遍历时，可以使函数返回false跳出循环。
6.3.3筛选数组
$.grep()函数,筛选数据
$.grep(array,callback,invert)
对每个元素调用回调函数。
invert 省略或为false,回调函数返回true将导致数据被收集
true, false 被收集
var badZips=$.grep(originlArray,function(value){return value.match(/^\d(-\d{4})?$/)!=null;}
,true);
6.3.4 转换数组
数据并不总是以我们需要的格式存在。
$.map(array,callback)
遍历传入的数组，为每一项调用回调函数，并将函数调用的返回值收集到一个新的数组中。
var oneBased=$.map([0,1,2,3,4],function(value){return value+1;});
eg:
var strings=['1','2','3','S'];
var value=$.map(strings,function(value){
var result=new Number(value);
return isNaN(result)?null:result;
})
6.3.5 需要知道JS数组中是否包含特定值和位置。
$.inArray(value,array)
返回传入的值第一次出现时的下标
value(对象) 需要在数组上搜索的值
array（数组）被搜索的数组
var index=$.inArray(2,[1,2,3,4,5]);
$.makeArray: 可以从其他类似数组的对象来创建JS数组。
$.makeArray(object)
将传入的类似数组的对象转换为JS数组
$.unique(array)
向其传入DOM元素的数组，则返回由原始数组中不重复的元素组成的数组。
$.merge(array1,array2)
将第二个数组合并到的一个数组，返回的一个数组
6.3.6 扩展对象
在JS中模拟继承的一个模式是，通过将基础对象的属性复制到新对象来扩展对象。
$.extend(deep,target,source1,source2,...,sourceN)
使用其余传入的对象对象的属性来扩展传入的target对象。
deep（布尔） 深复制还是浅复制。
var target={a:1,b:2,c:3};
var source1={c:4,d:5,e:6};
var source2={e:7,f:8,g:9};
$.extend(target,source1,source2);
target={a:1,b:2,c:4,d:5,e:7,f:8,g:9};
6.3.7 序列化参数值
正确创建和格式化查询字符串。
服务器端的模版工具一般都会提供强大机制来帮助我们构建有效的URL。
对每一个名称和值进行URL编码
$.param(params,traditional)
将传入的信息序列化成可在提交请求中使用的查询字符串。
params(数组｜jQuery｜对象) 需要序列化为查询字符串的值
traditionl(布尔)
序列化嵌套参数
使用括号来表示组织关系
name[first]=YOGi&name[last]=Bear
6.4 其他实用函数
6.4.1 什么都不做
$.noop()
还记得有多少个Jquery方法需要传入可选的回调函数作为参数或者选项值吗？$.noop()就是用户没有提供回调函数时作为其
默认值用的。
6.4.2 测试包含关系
$.contains(container,containee)
测试一个元素是否在DOM层次结构中包含在另一个元素内部
container(元素) 要测试的包含另一个元素的DOM元素
containee（元素）要测试的被包含的元素
返回true ,false
6.4.3 附加数据到元素上
$.data(element,name,value)
使用指定的名称在传入的元素上存储或检索数据
element(元素)， 用于储存或检索的元素
name
value （对象） 将要被赋值给指定名称的元素的数据。如果省略，获取指定名称的数据
返回： 存储或获取的数据值
$.removeData（element,name）
删除储存在传入的元素上的数据
element(元素) 将要从中删除数据的元素
name 将要删除的数据项名称。 省略，全删。
6.4.4 预绑定函数上下文
我们想调用特定的函数并且显示地控制函数的上下文时，可以使用Function.call()方法来调用。
$.proxy(function,proxy)
$.proxy(proxy,property)
使用预绑定的代理对象创建函数的一个副本，在函数作为回调函数被调用时，此对象作为函数的上下文。
proxy 将要绑定微代理函数上下文的对象
property（字符串） 传入的proxy对象的属性名称，包含要绑定的函数
用途：当向回调函数提供的数据难以正常地通过闭包或者其他方式访问时，这个功能非常有用
将对象的方法绑定微处理器，并且将拥有方法的对象作为处理器的函数上下文。
6.4.5 解析JSON
$.parseJSON(json)
解析传入的JSON字符串，返回其计算值
JSON字符串必须是双引号字符分割
6.4.6 表达式求值
$.globalEval(code)
在全局上下文中对传入的JS代码进行求值
6.4.7 动态加载脚本
$.getScript(url,callback)
通过向指定的服务器发起GET请求来获取由URL参数指定的脚本，在请求成功后调用回调。
返回：涌来获取脚本的XML HTTP请求实例
第7章 扩展JQuery
7.1为什么要扩展JQuery
1.可以提供保持一致的代码风格
2.通过遵循这些工具的设计先例，自然就能从这些设计中获得规划的好处。
3.扩展JQuery，可以使用现有的代码基础，方便易用。
7.2 JQuery插件开发指南
扩展JQuery有两种形式：
1.直接定义在$上的实用函数
2.操作JQuery包装集的方法
7.2.1 为文件和函数命名
插件内部避免名称冲突的办法。但是首先来给将要编写的插件起个文件名以便不会和其他文件冲突。
为文件名添加Jquery前缀。
前缀后面是插件的名称
包含插件主版本号和次版本号
以.js 结束
eg： jquery.fred-1.0.js
7.2.2 当心$
(function($){})(JQuery);
7.2.3 简化复杂参数列表
complex(valueA,null,null,null,valueB)
complex(valueA,{p7:valueB});
新的函数使用：
complex(p1,options)
function complex(p1,options){
var settings=$.extend({
option1:d1,
option2:d2,
option3:d3,
},options||{});
}
7.3 编写自定义实用函数
$.say=function(){};
更加稳妥的方法
jQuery.say=function(){}
(function($){})(JQuery); 这样是最推荐的方式
7.3。1 创建数据操作的实用函数
$.toFixedWidth(value,length,fill)
把传入的值格式化成指定长度的定宽子段，提供可选的填充字符。
（function($){
$.toFixedWidth=function(value,length,fill){
var result=(value||'').toString();
fill=fill||'0';
var padding=length-result.length;
}
})(jQuery);
为实用函数添加命名空间
$.jQiaDateFormat.toFixedWidth=function(){};
7.3.2 编写日期格式器
$.formatDate(date,pattern)
根据提供的模式格式化传入的日期。
任何不匹配模式标记的字符被原封不动地复制到结果中
7.4 添加新的包装器方法
要给jQuery添加包装器方法，必须把这些方法赋值给$命名空间中名为fn的对象的属性
$.fn.wrapper=function(){}
定义的包装器方法主体部分的this必须志向包装集。
原则：除非要返回特定的值，否则函数应该总是将包装集作为其返回值。
通过使用接受函数作为值的方法进行遍历
7.4.1 在包装器方法中应用多个操作
setReadOnly()
(function($){
$.fn.setReadOnly=function(readonly){
return this.filter('input:text').attr('readOnly',readonly)
.css('opacity',readonly?0.5:1.0).end();
}
})(jQuery);
7.4.2 保留在包装器方法里的状态
photomatic(options)
设置缩略图包装集以及在options散列对象里标识的页面元素
(function($){
$.fn.photomatc=function(options){
var settings=$.extend({
photoElement:'img.photomaticPhoto',
transformer:function(name){ return name.replace(/thumbnail/,'photo')};
nextControl:null,
previousControl:null,
firstControl:null,
lastControl:null,
playControl:null,
delay:3000
},option||{});
};
settings.thumbnails$=this.filter('img');
settings.current=0;
setting.thumbnials$.each(function(n){ $(this).data('photomatic-index',n);})
.click(function(){
showPhoto($(this).data('photomatic-index')); //为每个匹配元素添加click（）
})
function showPhoto(index){
$(settings.photoElement).attr(src,settings.transformer(settings.thumbnails$[index].src));
settings.cureent=index;
}
$(settings.photoElement).attr('title','Click for next photo')
.css('cursor','pointer').click(function(){
showPhoto((settings.current+1)%settings.thumbnails.length);
});
$(settings.playControl).toggle(
function(event){
settings.tick=window.setTnterval(
function (){
$(settings.nextControl).triggerHandler('click')
},settings.delay);
$(event.target).addClass('photomatic-playing');
$(settings.nextControl).