饥人谷_李栋
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=$('')
$('body').append($button)
var $arrow=$('')
$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代表当前的作用域
以上实例都只是简单实现,期待进一步学习后改进...