jquery美元背后的一点小技巧
1、如
【菜科解读】
在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换，如$('#msg')等同于JQuery('#msg') 的写法。
1、如何给一个id为casper的标签添加一个名为“world”的class
考虑下面一个场景，假设我们页面上有个id为casper的div标签，如下所示
casper是个大傻瓜，啦啦啦啦啦现在我们想要给它添加一个class，比如“world”，用jquery的话如何实现？很简单，不卖关子
$('#casper').addClass('world');很好，接下来我们思考：如何不用jquery，我们如何如何实现实现上述功能？最简单的方式：
var node = document.getElementById('casper');node.className += ' world';getElementById、getElementsByTagName神马的，名字老长老长的，写着有点不爽，于是把getElementById这个方法用美元（$）包装下：
function $(id){ return document.getElementById(id);$('casper').className += ' world';className品字符串神马的，jquery的调用方式相比麻烦多了，那再改进下：
function $(id){
var node = document.getElementById(id); node.addClass = function(addName){ node.className += ' ' + addName; return document.getElementById(id);$('casper').addClass('world');看上去挺像那么一回事了，多优雅的接口啊（热泪盈眶中）～
真的是这样吗，再仔细瞧瞧？于是果断发现不对劲的地方：对于$，每次调用，都会给返回的dom元素上添加一个addClass方法，这对空间来说是极大的浪费。
当然，可以将addClass方法抽取出来：
function addClass(className){
//实现略function $(id){ var node = document.getElementById(id); node.addClass = addClass; return document.getElementById(id);$('casper').addClass('world');原先的空间浪费问题可以在很大程度上得到解决，但明显这解决方法还不够好。
如果有那么一种实现方式，让所有的对象实例都共享一个方法。
。
。
2、jQuery中的实现思路
同样不必卖关子，这里说的就是原型方法，我们再看下jquery的调用方式
$('#casper').addClass('world');$('#casper')并不是像我们上面那样，简单地将id为casper的元素返回。
实际上，$('#casper')返回的是一个jQuery对象，该对象特征如下：
拥有一个length属性，length等于你调用$选中的元素的数目，在$('#casper')中为1
拥有0～n-1的实例属性，分别对应调用$时选中的第1～第n个元素，如本例中$('#casper')[0]即为目标dom元素
拥有一堆原型方法，如常见的addClass、removeClass、bind等
根据上面三点，很容易对我们之前写的代码进行修改，如下：
function $(id){
this[0] = document.getElementById(id); this.length = 1;$.prototype.addClass = function(className){ this[0].className += ' ' + className;var noode = new $('casper');node.addClass('world');其实就几行代码的事情，但。
。
。
还是觉得有些不对劲，new $('casper')，平常在用jquery的时候似乎不需要new一下的说，想想看，我们代码中一坨new是多么可怕的事情～
好吧，其实是因为jQuery帮你完成了构造函数调用的这部分工作，这一小小的细节改善对jQuery的流行起到了很大的帮助。
按照这个思路，继续修改之前的代码：
function $(id){
if(!(this instanceof $) return new $(id); //加了这么个语句 this[0] = document.getElementById(id); this.length = 1;//其他一样，节省空间不贴代码在上面的代码中，只有一点小小的修改，就是加了个判断语句 if(!(this instanceof $)) ，作用在于判断，当$被调用时，究竟是采用以下两种调用方式的哪一种，关于这种判断方式，可参考之前写的《【经验总结】构造函数的强制调用》：
$('casper')，直接调用，于是this为window
new $('casper')，此时$为构造方法，this instanceof $ == true
3、jQuery中的源码实现以及问题所在（俺的疑惑）
罗嗦了这么多，我们看看关于这点，jQuery里是如何实现的，源码大致如下，一些不相干的代码略过：
(function( window, undefined ) {
//去掉无关变量声明等，防止干扰分析var jQuery = (function() { // Define a local copy of jQuery var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); //一堆无关细节暂时略过 jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { //继续略过 // Give the init function the jQuery prototype for later instantiation jQuery.fn.init.prototype = jQuery.fn; return jQuery;})();window.jQuery = window.$ = jQuery;})( window );对于研究过jQuery源码或曾经打算研究jQuery源码的同学来说，上面这段代码肯定不会陌生，它有一个特点：看上去比较晦涩，特别是是结合了jQuery源码里面比较诡异的代码缩进～
通过闭包返回的jQuery对象，闭包里面是有jQuery函数定义，jQuery函数里面return了new jQuery.fn.init 。
。
。
快速看懂上面这段代码的秘诀在于：一个支持代码高亮和职能中括号匹配的编辑器，比如webstorm。
。
。
上面只是开个小玩笑，绕了这么久，无法是想做下面几件事情：
无论有没有new，只要调用$，都给你返回一个jQuery对象（实际上jQuery.fn.init才是实际的构造函数）
将jQuery.fn.init.fn指向jQuery.prototype，这样的话，当我们通过$.fn.newPrototypeAttr 方式向jQuery添加原型属性或方法，其实最终都成为了jQuery.fn.init地原型属性或方法
将constructor属性指向jQuery，不然$('#casper').constructor 获得的会是jQuery.fn.init
个人觉得上面这段代码有些费解，似乎完全可以采用相对不那么曲折的方式实现，如下所示，其实思路都是相同的：
然后，就是添加各种原型方法了，兼容性处理和优雅的API，这块才是精华，这里还没讲到。
(function(){
var jQuery = function(id){ return new _jquery(id); var _jquery = function(id){ //此处各种选择分支神马的都忽略～ this[0] = document.getElementById(id); this.length = 1; jQuery.fn = jQuery.prototype = { constructor: jQuery, addClass: function(className){ this[0].className += ' ' + className; _jquery.prototype = jQuery.fn; window.$ = window.jQuery = jQuery;})(); jquery,美元,背,后的,一点,小,技巧,在,Jquer利用JQuery插件实现图片滑动效果实例
于是在网上搜索了一番，发现类似的插件千千万万，都有各自的特色。
故本教程挑选了其中的一个插件，进行讲解，并在后面结合实例讲解如何在PS中切片，在导出的网页中完成图片滑动栏栏的制作。
插件网址：http://slidesjs.com/插件示例网址：http://slidesjs.com/examples/standard/插件的参数：preload (boolean)设置为true时，显示一个预加载图像。
在图片比较大的情况下特别有用，能改善用户操控。
默认值是falsepreloadImage (string)预加载图片的路径和文件名。
默认路径是/img/loading.gifcontainer (string)图片滑动块的容器的Class名。
默认的Class名是slides_containergenerateNextPrev (boolean)是否自动生成下一个/上一个按钮。
默认值是falsenext (string)自定义下一个按钮的Class名。
默认的Class名是nextprev (string)自定义上一个按钮的Class名。
默认的Class名是prevpagination (boolean)如果不使用页码，可以设置为false，但不是必须设置generatePagination (boolean)是否自动生成页码。
默认值是truepaginationClass (string)页码元素的Class名。
默认的Class名是paginationcurrentClass (string)当前页的Class名。
默认的Class名是currentfadeSpeed (number)设置（以毫秒为单位）的淡出淡入动画的速度。
默认值是350毫秒fadeEasing (string)设置淡出淡入动画的宽松的效果。
必须在项目中包含Easing插件slideSpeed (number)设置（以毫秒为单位）的滑动动画的速度。
默认值是350毫秒slideEasing (string)设置滑动动画的宽松的效果。
必须在项目中包含Easing插件start (number)设置滑动动画的开始的序号。
默认值是1，表示从第一张图片开始动画effect (string)设置动画效果，给下一个/上一个按钮和页码添加滑动（slide）和淡出淡入（fade）的动画效果，如果你只使用了一个动画效果的名字。
你也可以添加两个效果的名字。
第一个将会是下一个/上一个按钮的动画效果，第二个会是页码的动画效果。
两个效果之间用逗号分开。
默认的动画效果是slide，会使下一个/上一个按钮和分页的动画效果都是滑动。
crossfade (boolean)动画的切换是否是交叉淡变图像效果。
默认值是falserandomize (boolean)设置为true的时候随机滑动图片。
默认值是falseplay (number)自动播放幻灯片，一个正数将设置为true，表示幻灯片动画之间的时间（以毫秒为单位）。
默认值是0表示falsepause (number)当单击上一个/下一个按钮或者页码时暂停动画。
一个正数将设置为true，表示暂停的时间（以毫秒为单位）。
默认值是0表示falsehoverPause (boolean)设置为true时，鼠标在图片上方时暂停动画。
默认值是falseautoHeight (boolean)设置为true时自动调整高度。
默认值是falseautoHeightSpeed (number)设置自动高度动画的时间（以毫秒为单位）。
默认值是350毫秒bigTarget (boolean)设置为true时，点击整个图片时链接到下一张图片。
默认值是falseanimationStart() (callback)设置在动画开始时的回调函数。
默认值是空值animationComplete() (callback)设置在动画完成时的回调函数。
默认值是空值示例：接下来一步一步实现示例中的效果，先准备一些图片图片滑动栏的背景图片（frame.png）左上角飘带的图片（new-ribbon.png）上一个/下一个按钮的图片（arrow-prev.png和arrow-next.png）页码图片（pagination.png）如下是完成基本的页面结构 上面的结构中，每一部分都有解释，应该能看得比较清楚。
标签（div）container表示这块内容是一个图片滑动区块；飘带和背景以Img标签存在，也可以将两张图片合并成一张图片，这样只需要一个Img标签即可，或可增加其他的装饰图案；标签（div）slides，表示图片的滑动区域，也是本插件的作用区域，它包含三块内容，一是上一个/下一个按钮，以图片链接形式存在；一是滑动图片组，以若干图片超链接形式存在；一是页码组，由插件自动生成。
上面仅仅是页面的基本结构，还得给它们添加CSS样式，以完成如样张的效果先是设置页面的背景颜色和图片的边框为无（这会去除超链接中Img标签的蓝色边框，蓝色边框在IE中会出现），以及去除超链接在点击后的虚框body { background-color:#efefef} img { border:none;} :focus { outline:0; } 对图片滑动块区域添加样式，重点是position属性的设置，设置为relative后，其子元素的position属性才能起效果#container { width:760px; height:360px; padding:10px; margin:0 auto; position:relative; z-index:0; } 对飘带和背景设置样式，两个元素的position属性都是absolute（以父容器为参照，绝对定位）#ribbon { position:absolute; left:76px; top:10px; z-index:500; } #frame { position:absolute; width:740px; height:340px; z-index:0; } 对滑动区域设置样式，slides的position属性也是absolute。
绝对定位的两个参数top和left一定要设置精确#slides { position:absolute; top:28px; left:94px; z-index:100; } .slides_container { width:571px; overflow:hidden; position:relative; display:none; } 对滑动的图片设置样式，超链接和图片用相同的样式 .slides_container a , .slides_container a img { width:571px; height:269px; display:block; } 对上一个/下一个按钮设置样式，先设置相同的样式，在对下一个按钮另外设置left样式，使之居于右侧#slides .next,#slides .prev { position:absolute; top:107px; left:-39px; display:block; z-index:101; } #slides .next { left:586px;} 最后对页码按钮设置样式，页码按钮是由插件直接生成的，是一组超级链接.pagination { margin:26px auto 0; width:100px; } .pagination li { float:left; margin:0 1px; list-style:none; } .pagination li a { display:block; width:12px; height:0; padding-top:12px; background-image:url(Image/pagination.png); float:left; overflow:hidden; } 由于页码按钮中的用的图片是两张图片合在一张图片里的，故在current样式中直接设置background-position样式即可.pagination li.current a {background-position:0 -12px;} 到目前为止，页面结构和CSS样式都已经完成了。
那么该对插件的应用了 要注意的是，在VS2010中默认引用的JQuery是1.4.1版本。
该插件使用的至少是1.9.1版本。
要重新下载高版本的JQuery。
下面看看效果吧 利用,JQuery,插件,实现,图片,滑动,效果,实例,在,
