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).click();
},
function(event){
window.clearInterval(settings.tick);
$(event.target).removeClass('photomatic-playing');
}
);
showPhoto(0);
return this；
})(jQuery);
技巧：使用闭包跨越jQUery插件的作用域来维持状态，以及启用可以由插件来定义和使用的私有函数创建， 无需侵占任何命名空间。
第八章 使用Ajax与服务器通信
Ajax： 无需刷新面向用户的页面就能发出服务器请求的所有方法。
8.1.1 创建XHR实例
一旦创建了XHR，用来建立、初始化以及响应请求的代码就是相对于浏览器而独立的，并且为任何特殊的浏览器创建XML实例都很容易。
8.1.2 发起请求
1，指定http方法
2，提供要接触的服务器端资源的URL
3.告诉XHR实例如何通报进度
4.为post请求提供任何主体内容
1. xhr.open('GET',url).
2. 操作onreadystatechange属性的函数
3.send()或 send('a=1&b=2');
8.1.3 保持追踪进度
XHR通过就绪状态处理器通知我们它的进度。通过将作为就绪处理器的函数引用赋值给XHR实例的onreadystatechange
属性来建立处理器。
xhr.onreadystatechange=function(){
if(this.readyState==4){
if(this.status>200 && this.status<300){
}
}
}
8.1.4 获取响应
通过XHR实例的responseText属性来获取响应主体。如果响应通过包含内容类型头来表明它的主体格式是XML,那么响应主体
将会解析为XML.结果DOM将可以在responseXML属性中获取，然后可以使用JS处理XML DOM
8.2 加载内容到元素中
$('#someContainer').load('someResource');
8.2.1 使用jQuery加载内容
load(url,parameters,callback)
向指定url发起带有可选请求参数的Ajax请求。可以指定一个回调函数，并在请求完成并且DOM被修改后调用此函数。
响应文本会替换所有匹配的元素。
为包装集的每个雨啊怒调用一次此函数，并把函数上下文设为目标元素
返回：包装集
paramaters 若为散列对象或者数组，则通过POST发起请求，否则为GET
若想要创建一个带参数的GET请求，可以将他们作为查询字符串包含在url,且保证正确。
若想要筛选作为响应返回的元素 使用选择器。
$('.injectMe').load('/someResource div');
序列化表单数据
serialize()
根据包装集中所有成功的表单元素或包装集的表单中所有成功的表单元素，创建正确格式化和编码的查询字符串。
若想以JS数组的形式获取表数据：
serializeArray()
8.2.2 加载动态的HTML片段
$('#bootChooserControl').load('');
$('#bootChooserControl').change(function(event){
$('#productDetailPane').load('/jqia2/action'),
{style:$(event.target).val()},
function(){ $('[value=""]',event.target).remove(); }
})
8.3 发起GET和POST请求
get() 获取数据。 不加密
POST（） 更改信息 加密
8.3.1 使用GET获取数据
jQuery提供了发送GET请求的几种方式。
$.get(url,paramters,callback,type)
callback: 可选回调函数，请求成功调用。传入回调的参数依次为 响应主体、文本信息、XHR实例的引用
type: 指定如何解析响应主体 如：html\text\xml\json
返回：XHR实例
8.3.2 获取JSON数据
$.getJSON(url,parameters,callback)
返回： XHR实例
8.3.3 发起POST请求
$.post(url,parameters,callback,type)
8.3.4 实现级联下拉列表
$('#bootChooseControl').change(function(event){
$('#productDetailPane').load(
'/jqia2/action',
$(this).serialize());
};
$.('#colorChosserControl').load(
'/jqia2/action',
$(this).serialize(),
funtion(){
$(this).attr('disabled',false);
$('#sizeChooserControl').attr('disabled',true).html("");
}
);
8.4 完全控制Ajax请求
8.4.1 发起带所有参数的Ajax请求
$.ajax(options)
使用传入的选项来发起Ajax请求，以便控制如何创建请求以及如何通知回调.
$.ajaxSetup(options)
把传入的一组选项属性创建为随后调用$.ajax()的默认值
通常可以在页面头部的<script>元素的第一行编写这样的代码：
$.ajaxSetup({
type:'POST',
timeout:5000,
dataType:'html'
});
8.4.3 处理Ajax事件
局部事件由回调函数来处理。 beforeSend\success\error\complete
全局事件是像jQuery中其他自定义事件那样被触发的事件。可以通过ajaxStart、ajaxSend
全局事件在被触发时会广播到DOM中的每个元素上，因此可以在所选的DOM上创建这些处理器。
局部事件表现为传递给$.ajax()的回调函数，而全局事件是被触发的自定义事件。
jQuery Ajax事件创建器
ajaxCompelete（callback）
8.5 实现Termifier
术语提示 。
addClass-- 添加到生成的Termifier面板的外部容器的类名。
可重用插件：
1.没有特定于THE Boot Closet 的硬编码
2.在样式和布局方面赋予页面开发者最大的灵活性
(function($){
$.fn.termifier=function(actionURL,options){
var settings=$.extend({
origin:{top:0,left:0},
paramName:'term',
addClass:null,
actionURL:actionURL
},options||{});
this.click(function(event){
$('div.termifier').remove();
$('<div>')
.addClass('termifier'+(setting.addClass?(' ')
+settings.addClass:''))
.css({
position:'absolute',
top:event.pageY-settings.origin.top,
left:event.pageX-settings.origin.left,
display:'none'
})
.click(function(event){
$(this).fadeOut('slow');})
}).appendTo('body')
.append($('<div>').load(settings.actionURL,
encodeURIComponent(settings.paramName)+'='+
encodeURIComponent($(event.target).text()),
function(){
$(this).closest('.termifier').fadeIn('slow');
}
)
);
this.addClass('termified');
return this; //保证方法链能够运行良好。
}
})(jQuery);
决定如何找出页面上希望添加提示框的属于。我需要构造一个元素包装集，其中包含了方法将要操作的术语元素。
<span class="term">Goodyear welt</s pan>
可以只添加一些代码到Load（）函数，而且只需监听那些同志什么时候可以删除任何termfier的事件。
2.为提示框应用样式
第九章 jQuery UI 简介：主题和特效
jQuery UI 不只是一个插件，它是jQuery 核心库的官方扩展，旨在为启用jQuery的Web应用页面提供扩展用户界面的能力
9.2 jQuery的主题和样式
1.类名
2.识别部件
用jQuery
网友评论