JQuery plugin笔记

饥人谷_李栋

---

1.概述
2.插件实例
3.this相关

---

一、概述
1.目的

• 为了扩展jQuery的功能

2.实现方式

• 给jquery添加方法
  //$.method

$.goToTop = function(){
       $('body').scrollTop(0)
     }
$('button').click(function(){
       $.goToTop()
     })

• 给**.fn**添加方法 //.fn.method

$.fn.goToTop=function(){
      this.click(function(){
      $('body').animate({scrollTop:0})
    })
}
$('button').goToTop()

二、插件实例

1.回到顶部

//css部分
.goToButton{
  position:fixed;
  right:10px;
  bottom:60px;//为了在jsbin里面看到效果
  width:50px;
  height:50px;
  background:#bbb;
  border-radius:2px;
}
.goToButton-arrow{
  border:10px solid white;
  border-color:transparent transparent white;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-15px;
  margin-left:-10px;
}
//js部分
//构建、插入div
var $button=$('<div class="goToButton"></div>')
  $('body').append($button)  
 var $arrow=$('<div class="goToButton-arrow"></div>') 
  $arrow.appendTo($button)
  //关键语句
$.goToTop=function(){
    $button.click(function(){
    $('html,body').animate({scrollTop:0})
  })
}
                 
$.goToTop() 

具体实例参照效果
2.手风琴

//html内容ul>li*3>p{$}+p>img
//js部分
$.fn.accordion=function(object){
  var to=object.to
  this.on('click','li',function(){
    var $li=$(this)
    if($li.hasClass(to)){
      $li.removeClass(to)
    }else{
      $li.addClass(to).siblings().removeClass(to)
    }
  })
}
$('ul').accordion({to:'open'})

具体实例参照效果
3.简单轮播

//css部分 ：外部一个容器，绝对定位，设置left：0
//js部分
//简单实现
// var i=0
// setTimeout(function step(){
//   i++
//   if(i==3){i=0}
//   $('ul').animate({left:i*(-121)})
//   setTimeout(step,3000)
// },3000)
//部分改进后实现
$.fn.slides=function(){
  var currentIndex=0
  
  this.each(function(){
    var $currentUl=$(this)
  
var imagecount=$currentUl.children('li').length
  var imagewidth=$currentUl.children('li').first().width()
  setTimeout(function step(){
    currentIndex++
    if(currentIndex==imagecount){currentIndex=0}
    $currentUl.animate({left:currentIndex*(-imagewidth)})
    setTimeout(step,2000)
  },2000)
 }) 
}
$('ul').slides()

具体实例参照效果

---

4.知识扩展
由于代码中多次用到this所以搜了下
//因为看到这里有this的总结，所以把相关的内容移到了这里

• prototype

$.fn.xxx = function(opt){}

是为jquery的prototype定义了函数,
这样, 任何一个jquery对象都可以使用这个成员函数,
//Jquery插件的一种方法
//你需要知道的是.fn = jQuery.prototype =.prototype

• extend

$.fn.extend()

在jquery中重新定义了extend的使用方法,
如果只有一个参数, 那么就是扩展本身, 即.fn.extend({}), //就是用{}对象扩展.fn, 也就是jquery的prototype, 这样, 和上面的prototype就一样了

还有一种写法就是

$.extend($.fn, {}); 

//这个extend不是一个参数,它作用是用后面的扩展前面的, 即用{}扩展了$.fn, 还是一个意思

• this相关

1.关于$(this)和this, 你关键还是要知道this表示的是什么:

• 如果this是一个dom元素 -> $(this)是一个jquery元素,
• 如果this是一个jquery元素 -> $(this)还是一个jquery元素,

//虽然你用==去判断两者是不同的, 但是他们内容都是一样的

2.关于this和$(this)还要注意一点

$('.abc').click(function(){});

//其中this是dom元素, $(this)是jquery元素,

而写插件的时候

由于是扩展prototype, 所以this是对象实例,
即this就是jquery对象, $(this)还是jquery对象,
他们虽然不是同一对象, 但是内容是完全相同的

总结几点：

• 函数里面的this 代表 函数的调用者
• jquery里面 this代表jquery对象
• 一般jq回调函数里都代表dom
• this代表当前的作用域

---

以上实例都只是简单实现，期待进一步学习后改进...