登录|注册 帮助
 
 
 
常用 免费 热销 推荐 建站
热点 商业 共享 MVC 毕设
 
会员 充值 赚钱 积分 推广
论坛 技术 职场 留言 随笔
 
模板 Html模板 PSD
特效 网页特效 插件
  首页 免费源码 积分兑码 源码市场 商业精品 博文推荐 活跃榜 充值 源码上传↑  
当前位置:首页 > 博文推荐

jQuery事件学习

发布时间:2017-12-11 0:50:09     阅读量:312     作者:sys
简介: JS事件的学习和JS方法的学习揉杂在一起,JS相对于Java等语言,方法定义和使用上比较随意和简单,但是还是有一些区别,需要理清楚.

1.JS事件的基本知识

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js事件基本知识</title>

    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript">

        //这个事件可以添加到第一个button标签上,因为第一个button标签知道fn1是什么.
        function fn1() {
            alert("fn1");
        }

        //这段代码不会被执行,因为页面是从上往下执行,在这里获取不到"#i1".
        //如果想要解决这个问题,可以将下面的这些代码放到body后面.
        var obj = document.getElementById("i1");
        obj.onclick = function () {
            alert("fn2");

            //不能直接给对象添加已有事件,必须在将已有的事件添加到DOM对象的新的方法中.
            fn1();
        }

    </script>
</head>
<body>

<input type="button" class="dd" value="点击我" onclick="fn1();">
<input type="button" class="dd" id="i1" value="点击我">


</body>
</html>
复制代码

JS事件的学习和JS方法的学习揉杂在一起,JS相对于Java等语言,方法定义和使用上比较随意和简单,但是还是有一些区别,需要理清楚.

 

2.jQuery方式绑定事件

复制代码
//jQuery方式绑定事件
$(function () {
    var obj = $(".dd");

    obj.click(function () {
        alert("jQuery方式");
    })
})
复制代码

这里多多赘述一点,由于jQuery可以理解为是对JS的一种高级封装,这种封装是单向的,所以我们可以在JS中加入jQuery代码块,但是不能将JS和jQuery完全地揉杂在一起,所以对于jQuery的块状代码必须放入到一个分离的jQuery块中.

对于jQuery的绑定事件的方法,这里只举例click()方法,其他的方法查阅jQuery的文档即可.

 

3.事件操作和委派

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件操作和委派</title>

    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript">

        $(function () {

            //间接绑定:bind.
            //间接绑定,普通情况下,这种绑定方式是多余的.
            //给一个或多个事件绑定函数.
            $("input").bind("click", function () {
                alert("bind间接绑定事件");
            });

            //委派绑定:live
            $(".dd").live("click", function () {
                alert("live委派绑定事件");
            });

            //我在这里新添加一个标签
            //对于这种用JS新添加的标签,间接绑定的事件对这种标签没有用处.
            //对于这种用JS新添加的标签,委派绑定的事件会给符合条件的标签添加事件.
            $("body").append("<input type='button' class='dd' value='我是方法生成的标签,点击我''>");
        })

    </script>>

</head>
<body>
<input type="button" class="dd" value="点击我">

</body>
</html>
复制代码

不论是bind绑定还是live绑定,都是间接绑定

 

4.事件切换

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的切换</title>

    <style>
        .hover {
            background: aqua;
        }
    </style>

    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript">

        $(function () {
            //需求:鼠标覆盖变色,鼠标移走恢复
            $("#d1").hover(
                //鼠标覆盖
                function () {
                    $("#d1").addClass("hover");
                },
                //注意上面有一个逗号

                //鼠标移走
                function () {
                    $("#d1").removeClass("hover");
                }
            );
        })

    </script>

</head>
<body>

<div style="border:1px solid black; width: 100px; height: 100px" id="d1">
    Hello hover!
</div>

</body>
</html>
复制代码

在jQuery开发文档中,hover()函数归类到了事件切换中,对于hover()函数的事件切换的定义,仅限于鼠标的覆盖和移走两个操作,上面是一个标准的事件切换代码.

文章评论

源码点评
点评列表

打赏站长

其他推荐

百度广告代码