2019-06-20

绑定事件

$(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>

推荐阅读更多精彩内容

  • 线雕大v和小v的区别,哪个好?可以一起做吗? “线雕”的出现让不少人心动,大v线和小v线的区别是很多想做的女生都弄...
    jackof阅读 100评论 0 0
  • 2019-06-19 静待花开_2ae1 简书作者 2019-06-19 08:13 2019-06-19 静待花...
    静待花开_2ae1阅读 19评论 0 0
  • 今天要开始单事件复盘,技能考完第五天,这几天里书是一天没背,因为刚去华润,让我各种不适应。毕竟更普药店不一样,...
    宠蜜阅读 12评论 0 0
  • 有时候啊为两块三块钱计较得失,但是计较时,是不是失去了时间,失去了明朗的心情呢。不止于金钱方面这样。 道理都是从故...
    葭溪阅读 22评论 0 2
  • “到此一游”的外星人 程安安小朋友觉得自己是一个不一般的小朋友,并且也一直认为自己是天上的神仙的女儿,在洗澡的时候...
    我还没想好叫什么呢阅读 41评论 0 0