綁定事件
$(function(){
// //只能綁定click事件，不能綁定其他的了
// $('#btn').click(function() {
// /* Act on the event */
// });
//bind方式可綁定多個事件
$('#btn').bind('click mouseover', function() {
alert('hello!');
//取消綁定事件
$(this).unbind('mouseover');
});
})
自定義事件
$(function(){
//自定義事件只能用bind方式綁定，第一個參數(shù)是事件的名字，第二個參數(shù)是事件發(fā)生時執(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');
});
//不一定點擊按鈕觸發(fā)，也可頁面加載時觸發(fā)，也可在滿足某種if條件時觸發(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就是點擊的坐標(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)不顯示，用定時器顯示*/
}
.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;
/*設(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();
});
//點彈框以外的地方，也能讓彈框消失
$(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(){
/*
給每個li綁定事件，一共綁定了8次，性能不高
$('.list li').click(function() {
alert($(this).html());
});
*/
/*
事件委托：方法delegate，只綁定一次事件，冒泡觸發(fā)
參數(shù)：
selector選擇器：寫入ul下面的所有要發(fā)生事件的元素，多個元素用空格隔開，例如‘li a span’
eventType事件
function要執(zhí)行的操作
$('.list').delegate('li', 'click', function() {
//$(this)指發(fā)生事件的子集，即每個li
alert($(this).html());
//全部取消委托
$('.list').undelegate();
});
})
整屏滾動
? $(function(){
? ? ? ? ? ? var $h = $(window).height();//獲取瀏覽器頁面默認(rèn)高度
? ? ? ? ? ? var len = $('.pages').length;
? ? ? ? ? ? var $points = $('.points li');//選上滾動點并賦值給變量
? ? ? ? ? ? var $pages = $('.pages');
? ? ? ? ? ? var nowscreen = 0;
? ? ? ? ? ? var timer = null; //設(shè)定一個定時器，消除用力滾動滑輪劃多屏的效果
? ? ? ? ? ? $pages.eq(0).addClass('moving');
? ? ? ? ? ? $('.pages').css({height:$h});//把滾動頁面的高度設(shè)為頁面默認(rèn)高度
? ? ? ? ? ? //mousewheel插件設(shè)定dat的值：-1是向下滑動，1是向上滑動，
? ? ? ? ? ? $(window).mousewheel(function(event,dat){
? ? ? ? ? ? ? ? //清掉前面剛剛開的定時器：在200毫秒之內(nèi)如果多次滾動，前面的都會清掉，只保留最后一個滾動
? ? ? ? ? ? ? ? clearTimeout(timer);
? ? ? ? ? ? ? ? // 最新的一次定時器，200毫秒內(nèi)的最后一個滾動才會觸發(fā)下面的事件，setInterval是反復(fù)執(zhí)行，setTimeout執(zhí)行一次
? ? ? ? ? ? ? ? timer = setTimeout(function(){
? ? ? ? ? ? ? ? ? ? if(dat==-1)
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? nowscreen++;
? ? ? ? ? ? ? ? ? //本例只有5屏，所以nowscreen區(qū)間為0-4，nowscreen自加大于4時，賦值為4，不再往下滑
? ? ? ? ? ? ? ? ? ? ? ? if(nowscreen>len-1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? nowscreen=len-1;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? nowscreen--;
? ? ? ? ? ? ? ? ? ? ? ? if(nowscreen<0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? nowscreen=0;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? //向上滾屏?xí)r為負(fù)數(shù)，也就是-$h*nowscreen，300毫秒是延遲滾動，增強(qiáng)視覺體驗
? ? ? ? ? ? ? ? ? ? $('.pages_con').animate({top:-$h*nowscreen},300);
? ? ? ? ? ? ? ? ? ? //這里表示當(dāng)選上某屏?xí)r，就把li加上active屬性，并且同時去掉其他li的acive屬性
? ? ? ? ? ? ? ? ? ? $points.eq(nowscreen).addClass('active').siblings().removeClass('active');
? ? ? ? ? ? ? ? ? ? //給每一屏加動畫效果，200毫秒是定時器的設(shè)定
? ? ? ? ? ? ? ? ? ? $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
? ? ? ? ? ? ? ? },200);
? ? ? ? ? ? })
? ? ? ? ? ? //實現(xiàn)點擊頁面右邊的列表點也能到相應(yīng)頁面屏的效果
? ? ? ? ? ? $points.click(function(){
? ? ? ? ? ? ? ? //實現(xiàn)跳到指定屏
? ? ? ? ? ? ? ? $(this).addClass('active').siblings().removeClass('active');
? ? ? ? ? ? ? ? $('.pages_con').animate({top:-$h*$(this).index()},300);
? ? ? ? ? ? ? ? //指定屏加動畫
? ? ? ? ? ? ? ? $pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
? ? ? ? ? ? })
? ? ? ? })
? ? </script>
