绑定事件
$(function(){
// //只能绑定click事件，不能绑定其他的了
// $('#btn').click(function() {
// /* Act on the event */
// });
//bind方式可绑定多个事件
$('#btn').bind('click mouseover', function() {
alert('hello!');
//取消绑定事件
$(this).unbind('mouseover');
});
})
自定义事件
$(function(){
//自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数
$('#btn1').bind('hello', function(){
alert('hello');
})
$('#btn1').bind('click', function(){
alert('click');
})
$('#btn2').click(function() {
// trigger即可以触发自定义事件，也可以触发原始的事件
$('#btn1').trigger('hello');
$('#btn1').trigger('click');
});
//不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发
// $('#btn1').trigger('hello');
})
事件冒泡
$(function(){
$('body').click(function() {
alert(4);
});
$('.grandfather').click(function() {
alert(3);
});
$('.father').click(function() {
alert(2);
});
$('.son').click(function(event) {//event代表当前事件
alert(1);
// console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标
// alert("X轴坐标：" + event.clientX);
// //阻止事件冒泡
// event.stopPropagation();
//合并阻止操作：把阻止冒泡和阻止默认行为合并
return false;
});
//阻止右键菜单
$(document).contextmenu(function(event){
// //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）
// event.preventDefault();
//合并阻止
return false;
})
})
弹框-阻止冒泡
.pop_con{
display: none;/*默认不显示，用定时器显示*/
}
.pop{
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
position: fixed;/*使用固定定位*/
left: 50%;/*左上角位于页面中心*/
top: 50%;
margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
margin-top: -150px;
z-index: 9999;/*弹窗在最前面*/
}
/*遮罩样式*/
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
/*设置透明度30%，兼容IE6、7、8*/
opacity: 0.3;
filter: alpha(opacity=30);
z-index: 9990;/*遮罩在弹窗后面*/
}
$(function(){
$('#btn').click(function() {
$('#pop').show();
return false;
});
$('#shutoff').click(function() {
$('#pop').hide();
});
//点弹框以外的地方，也能让弹框消失
$(document).click(function(){
// setTimeout(function(){
// $('#pop').hide();
// },2000);
$('#pop').hide();
});
$('.pop').click(function() {
return false;
});
//阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）
$('#link1').click(function() {
return false;
});
})
事件委托
$(function(){
/*
给每个li绑定事件，一共绑定了8次，性能不高
$('.list li').click(function() {
alert($(this).html());
});
*/
/*
事件委托：方法delegate，只绑定一次事件，冒泡触发
参数：
selector选择器：写入ul下面的所有要发生事件的元素，多个元素用空格隔开，例如‘li a span’
eventType事件
function要执行的操作
$('.list').delegate('li', 'click', function() {
//$(this)指发生事件的子集，即每个li
alert($(this).html());
//全部取消委托
$('.list').undelegate();
});
})
整屏滚动
$(function(){
var $h = $(window).height();//获取浏览器页面默认高度
var len = $('.pages').length;
var $points = $('.points li');//选上滚动点并赋值给变量
var $pages = $('.pages');
var nowscreen = 0;
var timer = null; //设定一个定时器，消除用力滚动滑轮划多屏的效果
$pages.eq(0).addClass('moving');
$('.pages').css({height:$h});//把滚动页面的高度设为页面默认高度
//mousewheel插件设定dat的值：-1是向下滑动，1是向上滑动，
$(window).mousewheel(function(event,dat){
//清掉前面刚刚开的定时器：在200毫秒之内如果多次滚动，前面的都会清掉，只保留最后一个滚动
clearTimeout(timer);
// 最新的一次定时器，200毫秒内的最后一个滚动才会触发下面的事件，setInterval是反复执行，setTimeout执行一次
timer = setTimeout(function(){
if(dat==-1)
{
nowscreen++;
//本例只有5屏，所以nowscreen区间为0-4，nowscreen自加大于4时，赋值为4，不再往下滑
if(nowscreen>len-1){
nowscreen=len-1;
}
}
else
{
nowscreen--;
if(nowscreen<0){
nowscreen=0;
}
}
//向上滚屏时为负数，也就是-$h*nowscreen，300毫秒是延迟滚动，增强视觉体验
$('.pages_con').animate({top:-$h*nowscreen},300);
//这里表示当选上某屏时，就把li加上active属性，并且同时去掉其他li的acive属性
$points.eq(nowscreen).addClass('active').siblings().removeClass('active');
//给每一屏加动画效果，200毫秒是定时器的设定
$pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
},200);
})
//实现点击页面右边的列表点也能到相应页面屏的效果
$points.click(function(){
//实现跳到指定屏
$(this).addClass('active').siblings().removeClass('active');
$('.pages_con').animate({top:-$h*$(this).index()},300);
//指定屏加动画
$pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
})
})
</script>
