最近打算再重温一下《锋利的jQuery》，这次想查缺补漏，把里面我觉得有用的案例或者片段整理成文章。供自己以后复习和小伙伴们查看。
因为这两天，我只看到了第六章，捂脸，所以这篇文章整理的是《锋利的jQuery（第2版）》中前六章个人认为可以查缺补漏的地方，里面包含很多书中案例，比如利用cookie实现网页换肤，调整网页字体大小，表单应用等等、个人觉得可以学习。文章有点长，断断续续写了2天。看的时候还需耐心。
第六章的内容是Ajax，之前的文章中写过，想看的小伙伴，点击（jQuery-Ajax（详解））http://www.jianshu.com/p/d442a171100f
后几章的内容会在有空的时候陆续补全。
一、解决jQuery和其他库的冲突。
jQuery库在其他库之后导入，可以在任何时候调用jQuery.noConflict( )函数将变量$的控制权移交给其他JavaScript库，示例如下：
如果想确保jQuery不会与其他库冲突，但是又想自己定义一个快捷方式，可以进行如下操作。
如果不想给jQuery自定义这些备用名称，还想使用$而不管其他库的$()方法，同时也不想与其他库冲突。那么可以使用以下两种解决办法。
第一种
第二种
如果jQuery库在其他库之前就导入了，那么可以直接使用jQuery来做一些jQuery的工作。同时可以使用$(),方法作为其他库的快捷方式，无需设置JQuery.noConflict()函数。
二、关于jQuery选择器
关于整理的jQuery选择器，请看以前的文章，会有详细介绍。
1.需要注意的是，$('tt')获取的永远是对象，即使网页上没有此元素，因此当要用jQuery检查某个元素在网页上是否存在时，不能使用：
if ( $('#tt') ){
//do something
}
而要根据获取到元素的长度来判断
if ( $('#tt').length > 0 ){
//do something
}
或者转换成DOM对象来判断
if ( $('#tt')[0] ){
//do something
}
小注意
：input 选取的是所有的input、textarea、select、和button元素、、$( input )选取的input、
小案例
现在很多网站都会有一个案例，就是用户进入该页面的时候，品牌列表默认是精简显示的，用户可以单击商品列表下方的“显示全部品牌” 按钮来显示全部的品牌、当用户点击“显示全部品牌”按钮的同事，列表会将推荐的品牌的名字高亮显示，按钮里的文字也换成了精简显示品牌、
代码如下
效果如下：
三、关于DOM
详细整理的DOM。查看
1、关于删除节点
detach（）和remove（）一样，都是从DOM中去掉所有匹配的元素，但是需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除、因而可以在将来再使用这些匹配的元素。与remove（）不同的是，所有绑定的事件、附加的数据都会保留下来、
empty（）是不是删除节点、是清空节点、清空节点中所有的后代节点和内容、而最后只剩下一个空标签默默支撑。
2、注意addClass（）和attr（）的区别？
3、切换函数
toggle()方法是循环执行代码2、和代码3l两个函数、
$btn.toggle(function(){
//代码2
},function(){
//代码3
})
toggle()方法还可以用于模拟鼠标连续单击事件。第一次单击，触发第一个函数fn1，当再次单击同一元素时，则触发指定的第2个函数fn2，如果有更多的函数，则一次触发
toggle( fn1，fn2，fn3...... )
4、判断是否含有某个样式
hasClass（）可以用来判断元素是否含有某个Class，如果有，则返回true，否则返回false
5、遍历节点
children（）、取得匹配元素的子元素集合
next（）、取得匹配元素的后面紧邻的兄弟元素
prev（）、取得匹配元素前面的兄弟元素
siblings（）、取得匹配元素前后哦的所有同辈元素
closest（）、该方法用于取得最近的匹配元素、首先检查当前元素是否匹配，如果匹配就直接返回元素本身，如果不匹配则向上查找父元素，逐级向上直接找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
parent（），parents（）、closest（）的区别
6、关于宽高
height（）取得匹配元素当前计算的高度值（px），也可以用来设置元素的高度，如果传递的值是一个数字，默认单位是px，如果要用其他单位（em），则必须传一个字符串。获得到的不带单位。
width（）方法可以用来获取或者设置元素的宽度
offset（）获取当前元素在当前饰扣的相对偏移，其中返回的对象包含两个属性，及top（offset.top）和left( offset.left )，他只对可见元素有效。
position（）获取元素相对于最近的一个position样式
设置为relative或者absolute的祖父节点的相对偏移，它返回的对象也包含两个属性，及top（position.top）和left（position.left）\
scrollTop()和scrollLeft()分别是获取元素滚动条距离顶端和局左侧的距离。
var scrollTop = $p.scrollTop();//获取元素的滚动条距离顶端的距离
var scrollLeft = $p.scrollLeft();//获取元素的滚动条距离左侧的距离
小案例
登录框失去焦点或者获得焦点的时候一些人性化的交互显示。代码如下
效果如下
四、事件对象的属性
jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，是的事件处理在各大浏览器下都可以正常运行而不需要进项浏览器类型判断。
1、event.type
可以获取到事件的类型
$( a ).click(function( event ){
alert( event.type )//获取事件类型
return false //阻止链接跳转
})
2、event.preventDefault( )方法
阻止默认的时间行为。
3、event.stopPropagation( )方法
阻止事件冒泡
4、event.target
获取触发事件的元素
5、event.relatedTarget
在标准DOM中，mouseover 和 mouseout 所发生的元素可以通过event.target来访问，相关元素可以通过event.relatedTarget来访问，event.relatedTarget在mouseover中相当于IE浏览器的event.formElement，在mouseout中相当于IE浏览器的event.toElement，jQuery对其进行了封装，使之能兼容各种浏览器。
6、event.pageX和event.pageY
用来获取光标相对于页面的x坐标和y坐标。如果页面上有滚动条，还要加上滚动条的宽度或高度。
7、event.which
鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件中获取键盘的按键。
1==左键、2==中键、3==右键
8、event.metaKey
针对不同浏览器对键盘中的ctrl按键解释不同，jQuery也进行了封装，并且规定了event.metaKey为键盘事件中获取ctrl按键
五、动画
某网站视频展示效果案例
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
- 
北京
播放28.276
效果如下：
六、表单应用
一个表单有3个基本组成部分
1、表单标签
包含处理表单数据所需要用的服务器端程序URL以及数据提交到服务器的方法
2、表单域
包含文本框，密码框、隐藏域、多行文本框、复选框、单选框、下拉框、和文件上传框等
3、表单按钮
包含提交按钮，复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用于控制其他定义了处理脚本的处理工作。
获取和失去焦点改变样式
input：focus，textarea：focus{border：1px solid #f00；background：#f00}
多行文本框的应用
1、高度变化
例如某网站的评论框，可以控制评论康的高度
代码如下：
效果如下
关于全选
效果如下
关于下拉列表框的应用
常见一个小效果就是用户可以通过中间的按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方
代码如下
效果如下
表格的展开和闭合
姓名
性别
暂住地
前台设计组
张山
男
浙江宁波
李四
女
浙江杭州
前台开发组
王五
男
浙江宁波
赵六
女
浙江杭州
前台设计组
周七
男
浙江宁波
赵八
女
浙江杭州
效果如下
表格内容分筛选
姓名
性别
暂住地
前台设计组
张山
男
浙江宁波
李四
女
浙江杭州
前台开发组
王五
男
浙江宁波
赵六
女
浙江杭州
前台设计组
周七
男
浙江宁波
赵八
女
浙江杭州
效果如下
调整网页字体大小
hriuewyruiehiurcohuyugeyugryeureiwhwjoiwhuiehfewdewjn
ehwiurhyuireuiwhroiewhrioewjrieowjqroiewjrioewjrioewr
jwiojeiowhriuewhriuewhiurewhiurewhqiurewhiurewuriehwiur
效果如下
利用cookie实现网页换肤
现在很多网站更加注重用户自定义，如在网页上用户可以自定义皮肤，并且要很好的计入cookie中，这样用户下次访问时，就可以显示用户自定义的皮肤了。
时事新闻
娱乐新闻
效果如下
文章有点耗时，看过的小伙伴给个辛苦钱，点个赞小饭就开心啦~~