1、script放在</body>上面
2、jquery index()，获取到的索引值从0开始，如果未找到元素，index() 将返回 -1。
3、if(-1){}也会执行{}代码块内的代码，只有()内的代码为0才不会执行{}内的代码
所以，可根据index>0或者<0来区分
4、(function(){ //闭包，匿名函数只自行
//这里面的代码会立即自动执行，且变量和函数都是局部的
})()
5、jquery普通绑定事件和on委托事件
以click事件为例：
普通绑定事件：$('.btn1').click(function(){}绑定
on绑定事件：$(document).on('click','.btn2',function(){}绑定
①click事件是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生成一个btn1元素，它就没有click这个事件；
②而on()事件起到了监听的效果,可以实现动态html元素绑定，比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，可以无限添加btn2。
on()委托事件的优点：原来的事件绑定，要绑定好多事件，现在只需要绑定一个事件，大大提高了效率和页面性能，解决的动态添加元素导致不能触发的bug。
事件委托：是指在事件绑定的基础上补充与扩展事件绑定，具体就是指：通过子节点元素绑定事件来传递给父元素DOM节点（祖先节点）来统一管理其全部后代子元素。这样遇到需要绑定很多事件的子元素时，就避免了很多麻烦重复绑定事件的工作，提供了访问效率。
6、代码：自己写的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js每日一练之星星评分</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
.star-list{
width: 200px;
margin: 50px auto;
}
.star-item{
float: left;
width: 19px;
height: 19px;
background:url(img/star.png) no-repeat 0 0;
margin: 0 2px;
cursor: pointer;
}
.star-item.on{
background: url(img/star.png) no-repeat 0 -28px;
}
</style>
</head>
<body>
<ul class="star-list clear">
<li class="star-item" title="很差"></li>
<li class="star-item" title="较差"></li>
<li class="star-item" title="一般"></li>
<li class="star-item" title="较好"></li>
<li class="star-item" title="很好"></li>
</ul>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var starList = $(".star-list"),
items = starList.find(".star-item");
starNum = 2,
originalNum = starNum;
var starLight = function(num){
items.each(function(i,elem){
if(i<=num){
$(elem).addClass("on");
}else{
$(elem).removeClass("on");
}
})
}
starLight(starNum);
items.on("mouseover",function(){
var index = $(this).index();
starLight(index);
}).on("mouseout",function(){
starLight(originalNum);
}).on("click",function(){
var index = $(this).index();
starLight(index);
originalNum = index;
})
</script>
</body>
</html>
改进版
<script type="text/javascript">
var starList = $(".star-list"),
items = starList.find(".star-item");
starNum = 2;
var starLight = function(num){
items.each(function(i,elem){
if(i<=num){
$(elem).addClass("on");
}else{
$(elem).removeClass("on");
}
})
}
starLight(starNum);
items.on("mouseover",function(){
var index = $(this).index();
starLight(index);
}).on("click",function(){
starNum = $(this).index();
})
starList.on("mouseout",function(){
starLight(starNum);
})
</script>
//代码复用版
<script type="text/javascript">
var starRating = (function(){
//因为这个函数只需要申明一次，所以不用每次调用starRating都申明，所以拿到init方法外面去
var starLight = function(items,num){
items.each(function(i,elem){
if(i<=num){
$(elem).addClass("on");
}else{
$(elem).removeClass("on");
}
})
}
function init(el,num){
var starList = $(el),
items = starList.find(".star-item");
starNum = num;
starLight(items,starNum);
//使用事件代理
starList.on("mouseover",".star-item",function(){
var index = $(this).index();
starLight(items,index);
}).on("click",".star-item",function(){
starNum = $(this).index();
}).on("mouseout",function(){
starLight(items,starNum);
})
}
return {
init:init
}
})()
starRating.init(".star-list",2);
starRating.init(".star-list1",3);
</script>
©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，如需转载，请注明出处，否则将追究法律责任
随时随地看视频
