2、JS封装的方法有函数方式、对象的方式、闭包的方式。
举例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1）函数方式
function kk(a,b){
内部对a，b怎么处理就不需要关心了
}
2）对象方式
function kk(a,b){
this.x = a
this.y = b
}
var k = new kk(1,2)//通过面向对象的方式
alert(k.x)
3）闭包方式
function kk(a,b){
var k = 1
return function tt(){
k++
}
}
var u = kk(1,2)
u()//闭包实现累加
u()//闭包实现累加
鉴于楼主欠缺编程经验，我就先不说封装成jQuery插件等高大上的做法了。单就论封装成方法而言。
方法，也就是函数。是面向过程式语言一种代码复用的初级手段，简而言之，就是把重复的部分用函数封装起来。
例如猫叫多遍，cat.meow(), 你总不可能写对应次数的代码，一般会写成：
function meow(num){
for(var i=0i<numi++){
cat.meow()
}
}
meow(1000)
这就是一种最基础的代码复用。
当然，面向对象的语言也许有更简单的 cat.meow(1000)
那么，针对楼主的情况。逐步讲一下各层次的方法。最简单的用函数封装一下就是：
function effect(srcDom,destDom,className){$(srcDom).mouseenter(function(){
$(destDom).addClass(className)
}).mouseout(function(){
$(destDom).removeClass(className)
})
}
然后调用
effect('#plate-1','#plate-1hover','plate-1after')effect('#plate-2','#plate-2hover','plate-2after')
effect('#plate-3','#plate-3hover','plate-3after')
鉴于楼主的DOM的ID和Class命名比较有规律，可以写成这样
function effect(name){
$('#'+name).mouseenter(function(){
$('#'+name+'hover').addClass(name+'after')
}).mouseout(function(){
$('#'+name+'hover').removeClass(name+'after')
})
}
然后调用
effect('plate-1')effect('plate-2')
effect('plate-3')
但是这样还是不够通用，楼主应该看看事件方面有关事件委托的知识
