2017/2/9 学习总结 jQuery事件

最新推荐文章于 2024-08-04 16:33:59 发布

chujiang3269

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量65

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3256201/blog/835258

版权

1.jQuery事件主要分捕获阶段和冒泡阶段与DOM操作

捕获阶段-Event Capturing：允许多个元素响应单击事件的一种策略叫做事件捕获。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。

冒泡阶段-Event Bubbling：与捕获事件相反，即当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。

2.jQuery 事件分类

与浏览器相关：ready，scroll，resize

$(document).ready(function(){//dosometing...})  //jQuery入口函数 使用了ready事件）
$(window).resize(function(){//dosometing...})   //浏览器窗口该改变事件监听
$(window).scroll(function(){//dosometing...})   //浏览器窗口滚动事件的监听

鼠标相关：click（点击），dbclick（双击鼠标），hover（悬浮），blur（失焦），focus（聚焦），mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter，mouseleave

$('div').dbclick(function(){
     console.log('我被双击了')'
})
$('div').hover(function(){
     console.log('移入事件'); 
},funcyion(){
     console.log('移出事件');
})

与键盘相关：keydown,keypress,keyup（用法与鼠标事件一致）

3.事件的各种绑定方式

on()方法可以用事件委托即给父元素绑定事件（推荐使用）可以绑定多个事件

$('ul').on('click','li',function(){})  //给ul中所有的li绑定事件 ，第二个参数不写即给ul绑定事件

bind()方法绑定一个或多个事件

$('div').bind('click mouseenter',function(){})//两个事件执行同一个函数
$('div').bind({'click':function(){console.log(执行click事件),'mouseenter':function(){console.log(执行mouseenter事件)}})

one(),hover(over, out)方法

trigger()方法触发被选元素的指定事件类型

 $('div').click(function () {
        alert('click');
    })
    setInterval(function () {
        $('div').trigger('click');  // 每隔一秒自动触发click事件
    },1000)

4.移除事件

unbind()方法该方法实现绑定相反的操作，它从每个匹配的元素中删除绑定的事件。

off()方法该方法实现的是 on的对立面，它删除了捆绑的 on事件

课后练习：

仿淘宝侧边栏楼层滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>楼层滚动</title>
    <style>
        body{
            height: 3000px;
        }
        div{
            width: 1000px;
            height: 300px;
            margin:30px auto;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
            color: #fff;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            width: 80px;
            height: 400px;
            position: fixed;
            top:200px;
            left:50px;
        }
        ul>li{
            width: 80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            color: #fff;
            font-weight: bolder;
            cursor: pointer;
        }
        ul>.active{
            color:red;
        }
    </style>
</head>
<body>
<div style="background-color: gold; margin-top: 0;">时尚</div>
<div style="background-color: greenyellow;">品质</div>
<div style="background-color: rebeccapurple;">特色</div>
<div style="background-color: brown;">实惠</div>
<div style="background-color: pink;">猜你喜欢</div>
<ul>
    <li class="active">时尚</li>
    <li>品质</li>
    <li>特色</li>
    <li>实惠</li>
    <li>猜你喜欢</li>
</ul>
</body>
</html>
<script src="jquery-3.1.1.min.js"></script>
<script>
    (function () {
        var color = 'gold,greenyellow,rebeccapurple,brown,pink'.split(',');
        $('ul>li')
                .each(function (index,value) {
                   $(value).css('background-color',color[index]);
                })
                .on('mouseenter',function () {
                   var index =$(this).index();
                    $(this).addClass('active').siblings().removeClass('active');
                    $('html,body').animate({'scrollTop':index * 330+'px'});
                })
        $(window).on('scroll',function () { //浏览器窗口滚动侧边栏对应样式改变
            var h = $(document).scrollTop();
            if( h>ttop(0)){
                changeClass(0);
            }
            if(h>ttop(1)){
                changeClass(1);
            }
            if(h>ttop(2)){
                changeClass(2);
            }
            if( h>ttop(3)){
                changeClass(3);
            }
            if(h>ttop(4)){
                changeClass(4);
            }
        })
        function ttop(i) {
            return  $('div').eq(i).offset().top-60; //ttop(0),ttop(1),ttop(2),ttop(3),ttop(4)各楼层距离页面顶端的距离
        }
        function changeClass(n) {
            $('ul>li').eq(n).addClass('active').siblings().removeClass('active');//改变对应li的样式
        }
    })();
</script>

效果图(还有一个bug没有解决)T.T

转载于:https://my.oschina.net/u/3256201/blog/835258

chujiang3269

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2017/2/9 学习总结 jQuery事件

1.jQuery事件主要分捕获阶段和冒泡阶段与DOM操作捕获阶段-Event Capturing：允许多个元素响应单击事件的一种策略叫做事件捕获。在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。冒泡阶段-Event Bubbling：与捕获事件相反，即当事件发生...
复制链接

扫一扫