on()
on()是jQuery中最根本的事件绑定函数，可以一次绑定多个事件
还可以事件委托
补充：
slideDown(); 下滑
slideUp(); 下滑
星星打分：
<body>
请打分：
<ul>
<li pos="-120"></li>
<li pos="-90"></li>
<li pos="-60"></li>
<li pos="-30"></li>
<li pos="0"></li>
</ul>
</body>
<script src="jquery-1.11.2.min.js"></script>
<script>
var isSelected=false;
//决定是否已经确定得分了
$('li').on({
//on()是jQuery中最根本的事件绑定函数，可以一次绑定多事件，还可以事件委托
mouseover:function(){
if(!isSelected){
var y=$(this).attr('pos');
$('ul').css("background-position",'0 ' +y+'px');
}
},
mouseout:function(){
if(!isSelected){
$('ul').css("background-position",'0 -150px' );
}
},
click:function(){
var y=$(this).attr('pos');
isSelected=true;
}
})
商品选择：
//采用事件委托，给A标签绑定事件
$(document).on('click', 'a', function () {
//只留选中的a个变色
$(this).parent().children().css({
'color': 'rgba(51,149,226)',
'background': 'white '
})
$(this).css({
'color': 'white',
'background': 'rgba(51,153,204)'
});
//点击某个A标签，找到它的父元素：DD
var dd = $(this).parent();
var className = dd.attr('class');
//根据DD的类名找到对应的span
$('#' + className).show();
//将当前A标签的文字放在找到的这个span中
$('#' + className).html($(this).html());
//动态生成一个IMG
var img = $(`<img src="./img/5.gif"/>`);
img.css('cursor', 'pointer');
$('#' + className).append(img);
if($('img').length>1){
$('#delete').css({
'display':'block'
})
}
})
$('#result').on('click', 'img', function () {
$(this).parent().hide();
})
/*单个去色**/
$('a').click(function(){
$(this).parent().children().css({
'color': 'rgba(51,149,226)',
'background':'white '
})
$(this).css({
'color': 'white',
'background':'rgba(51,153,204) '
});
})
/*清除筛选条件**/
$('#delete').click(function(){
$('img').parent().hide();
$('a').css({
'color': 'rgba(51,149,226)',
'background':'white '
})
})
apple watch
