知识点:
1.5-6种实现方式
2.snippets.css和script标签位置,使用jquery cdn的好处.事件委托
3。糟粕:全局变量的依赖.没有块级作用域
4.设计模式(代码易于维护.扩展和复用)
原理分析–html结构
<ul id="rating" class="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="不好"></li>
</ul>
原理分析–css样式
使用雪碧图可以减少浏览器的请求
原理分析–js行为
mouseover事件
click事件
mouseout事件
//第一种方法,通过雪碧图移动星星的位置来实现评分
//默认点亮的星星
var num=2,
$rating=$("#rating");
//点亮
var lightOn=function(num){
$( $rating.find(".rating-item")).each(function(index) {
if (index < num) {
$(this).css("background-position", "0-32px");
} else {
$(this).css("background-position", "0 0");
}
});
};
//初始化
lightOn(num);
//事件绑定
$rating.find(".rating-item").on("click",function(){
num=$(this).index()+1;
});
$rating.on("mouseout",function(){
lightOn(num);
});
改进js代码
解决问题:解决多次绑定事件问题–通过事件委托 事件代理
解决变量重名问题–通过添加前缀– ab+变量名
事件委托
将子元素的事件委托给父元素
全局变量问题:通过闭包来解决
(function(){
})();
代码复用
通过函数
var rating=(function(){})();
rating.init(‘#rating’,2);
rating.init(‘#rating’,3);
…
var init=function(el,num){
var #rating=$(el),
…
};
封装成jquery插件
$.fn.extend({
rating:function(num)
{
return this.each(function(){
});
}
})
设计模式
当封装一个函数时,你是在复用代码,当使用一个设计模式时,你是在复用他人的经验
设计模式是在面向对象软件设计过程中针对特定问题的简洁二
这里写代码片
“`
第二种实现方式
使用img标签插入完全点亮状态的星星半点亮的星星
没有点亮的星星