1.JQuery 基础css
改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。
1.2不唐突的JS
1.2.1行为和结构分离
分为组织结构、样式、行为三部分。
任何存在与HTML页面<body>内部的JS代码都是错误的。
1.3.1 JQuery包装器
为了使设计和内容分离而把CSS引入Web技术时，须要以某种方法从外部样式表中引用页面中的元素组。这种方法就是选择器。它能够根据元素的类型、特性或者元素在HTML文档中的位置来精确地描述元素。html
$()返回特殊的JS对象，它包含与选择器相匹配的DOM元素数组，这个数组中的元素是按照在文档中的顺序排列的。 这种构造方法成为包装器，由于它包装了收集到的元素并添加了扩展器 $()函数叫包装器。来指这些能够经过JQuery定义的方法操做的含有匹配元素的集合。 包装器方法：当执行完毕后会返回相同的一组元素。 做用链能够无限连续。能够把包装器返回的JS对象看成普通数组。 html()方法：用一些HTML标记替换DOM元素的内容。
1.3.2 实用函数
$()另外一做用是 做为一些通用实用函数集的命名空间前缀。
如 $.trim(someString);jquery
1.3.3 文档就绪处理程序web
onload（）方法，在建立完DOM树，并且在全部外部资源所有加载完毕，而且整个页面在浏览器窗口中显示完毕后。 使用JQuery的方法：在DOM树加载完毕当即触发脚本执行。 能够屡次调用，会根据页面中的声明顺序依次调用这些函数。 $(document).ready(function(){
});ajax
1.3.4 建立DOM元素
能够经过向$()函数传递一个包含HTML标记的字符串动态建立DOM元素。
$("<p>hello</p>").insertAfter('#id');express
1.3.5 扩展JQuery
JQuery包装器提供了大量有用的方法，能够反复使用。一样能够本身定制。
编写函数来填补。json
$.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树ruby
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).click(); }