綁定事件
$(function(){
// //只能綁定click事件拧抖，不能綁定其他的了
// $('#btn').click(function() {
// /* Act on the event */
// });
//bind方式可綁定多個(gè)事件
$('#btn').bind('click mouseover', function() {
alert('hello!');
//取消綁定事件
$(this).unbind('mouseover');
});
})
自定義事件
$(function(){
//自定義事件只能用bind方式綁定柜裸，第一個(gè)參數(shù)是事件的名字，第二個(gè)參數(shù)是事件發(fā)生時(shí)執(zhí)行的函數(shù)
$('#btn1').bind('hello', function(){
alert('hello');
})
$('#btn1').bind('click', function(){
alert('click');
})
$('#btn2').click(function() {
// trigger即可以觸發(fā)自定義事件捌锭，也可以觸發(fā)原始的事件
$('#btn1').trigger('hello');
$('#btn1').trigger('click');
});
//不一定點(diǎn)擊按鈕觸發(fā)，也可頁面加載時(shí)觸發(fā)，也可在滿足某種if條件時(shí)觸發(fā)
// $('#btn1').trigger('hello');
})
事件冒泡
$(function(){
$('body').click(function() {
alert(4);
});
$('.grandfather').click(function() {
alert(3);
});
$('.father').click(function() {
alert(2);
});
$('.son').click(function(event) {//event代表當(dāng)前事件
alert(1);
// console.log(event);//顯示很多屬性，其中clientX柏肪、clientY就是點(diǎn)擊的坐標(biāo)
// alert("X軸坐標(biāo)：" + event.clientX);
// //阻止事件冒泡
// event.stopPropagation();
//合并阻止操作：把阻止冒泡和阻止默認(rèn)行為合并
return false;
});
//阻止右鍵菜單
$(document).contextmenu(function(event){
// //阻止默認(rèn)行為（原來右鍵能彈出菜單，阻止后無法彈出）
// event.preventDefault();
//合并阻止
return false;
})
})
彈框-阻止冒泡
.pop_con{
display: none;/*默認(rèn)不顯示芥牌，用定時(shí)器顯示*/
}
.pop{
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
position: fixed;/*使用固定定位*/
left: 50%;/*左上角位于頁面中心*/
top: 50%;
margin-left: -200px;/*讓div向左偏移半個(gè)寬度烦味、向上偏移半個(gè)高度，使div位于頁面中心*/
margin-top: -150px;
z-index: 9999;/*彈窗在最前面*/
}
/*遮罩樣式*/
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
/*設(shè)置透明度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();
});
//點(diǎn)彈框以外的地方，也能讓彈框消失
$(document).click(function(){
// setTimeout(function(){
// $('#pop').hide();
// },2000);
$('#pop').hide();
});
$('.pop').click(function() {
return false;
});
//阻止默認(rèn)行為（原來超鏈接可跳轉(zhuǎn)到百度溃论，阻止后無法跳轉(zhuǎn)）
$('#link1').click(function() {
return false;
});
})
事件委托
$(function(){
/*
給每個(gè)li綁定事件屎蜓，一共綁定了8次，性能不高
$('.list li').click(function() {
alert($(this).html());
});
*/
/*
事件委托：方法delegate钥勋，只綁定一次事件炬转，冒泡觸發(fā)
參數(shù)：
selector選擇器：寫入ul下面的所有要發(fā)生事件的元素，多個(gè)元素用空格隔開算灸，例如‘li a span’
eventType事件
function要執(zhí)行的操作
$('.list').delegate('li', 'click', function() {
//$(this)指發(fā)生事件的子集扼劈，即每個(gè)li
alert($(this).html());
//全部取消委托
$('.list').undelegate();
});
})
整屏滾動(dòng)
? $(function(){
? ? ? ? ? ? var $h = $(window).height();//獲取瀏覽器頁面默認(rèn)高度
? ? ? ? ? ? var len = $('.pages').length;
? ? ? ? ? ? var $points = $('.points li');//選上滾動(dòng)點(diǎn)并賦值給變量
? ? ? ? ? ? var $pages = $('.pages');
? ? ? ? ? ? var nowscreen = 0;
? ? ? ? ? ? var timer = null; //設(shè)定一個(gè)定時(shí)器，消除用力滾動(dòng)滑輪劃多屏的效果
? ? ? ? ? ? $pages.eq(0).addClass('moving');
? ? ? ? ? ? $('.pages').css({height:$h});//把滾動(dòng)頁面的高度設(shè)為頁面默認(rèn)高度
? ? ? ? ? ? //mousewheel插件設(shè)定dat的值：-1是向下滑動(dòng)菲驴，1是向上滑動(dòng)荐吵，
? ? ? ? ? ? $(window).mousewheel(function(event,dat){
? ? ? ? ? ? ? ? //清掉前面剛剛開的定時(shí)器：在200毫秒之內(nèi)如果多次滾動(dòng)，前面的都會(huì)清掉赊瞬，只保留最后一個(gè)滾動(dòng)
? ? ? ? ? ? ? ? clearTimeout(timer);
? ? ? ? ? ? ? ? // 最新的一次定時(shí)器捍靠，200毫秒內(nèi)的最后一個(gè)滾動(dòng)才會(huì)觸發(fā)下面的事件，setInterval是反復(fù)執(zhí)行森逮，setTimeout執(zhí)行一次
? ? ? ? ? ? ? ? timer = setTimeout(function(){
? ? ? ? ? ? ? ? ? ? if(dat==-1)
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? nowscreen++;
? ? ? ? ? ? ? ? ? //本例只有5屏，所以nowscreen區(qū)間為0-4磁携，nowscreen自加大于4時(shí)褒侧，賦值為4，不再往下滑
? ? ? ? ? ? ? ? ? ? ? ? if(nowscreen>len-1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? nowscreen=len-1;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? nowscreen--;
? ? ? ? ? ? ? ? ? ? ? ? if(nowscreen<0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? nowscreen=0;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? //向上滾屏?xí)r為負(fù)數(shù)谊迄，也就是-$h*nowscreen闷供，300毫秒是延遲滾動(dòng)，增強(qiáng)視覺體驗(yàn)
? ? ? ? ? ? ? ? ? ? $('.pages_con').animate({top:-$h*nowscreen},300);
? ? ? ? ? ? ? ? ? ? //這里表示當(dāng)選上某屏?xí)r统诺，就把li加上active屬性歪脏，并且同時(shí)去掉其他li的acive屬性
? ? ? ? ? ? ? ? ? ? $points.eq(nowscreen).addClass('active').siblings().removeClass('active');
? ? ? ? ? ? ? ? ? ? //給每一屏加動(dòng)畫效果，200毫秒是定時(shí)器的設(shè)定
? ? ? ? ? ? ? ? ? ? $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
? ? ? ? ? ? ? ? },200);
? ? ? ? ? ? })
? ? ? ? ? ? //實(shí)現(xiàn)點(diǎn)擊頁面右邊的列表點(diǎn)也能到相應(yīng)頁面屏的效果
? ? ? ? ? ? $points.click(function(){
? ? ? ? ? ? ? ? //實(shí)現(xiàn)跳到指定屏
? ? ? ? ? ? ? ? $(this).addClass('active').siblings().removeClass('active');
? ? ? ? ? ? ? ? $('.pages_con').animate({top:-$h*$(this).index()},300);
? ? ? ? ? ? ? ? //指定屏加動(dòng)畫
? ? ? ? ? ? ? ? $pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
? ? ? ? ? ? })
? ? ? ? })
? ? </script>
