锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件：

1.加载DOM：注意window.onload和$(document).ready()的不同

2.事件绑定

3.合成事件

--2和3的详细信息见代码-

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
</div>

</body>

<script type="text/javascript">

    /**
     * 4.1 加载DOM
     *      主要是注意window.onload和$(document).ready()的区别
     * */

    /**
     * 4.2 事件绑定
     *      在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配的元素进行特定事件的绑定，
     *      bind()方法的调用格式为“
     *          bind( type [, data, fn]);
     *      第1个参数是事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypass、keyup和error等，当然也可以自定义名称。
     *      第2个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象
     *      第3个参数是用来绑定的处理函数
     * */
    //基本效果
//    $(function () {
//        $("#panel h5.head").bind("click", function() {
//           $(this).next().show();
//        });
//    })
    //加强效果
//    $(function () {
//        $("#panel h5.head").bind("click", function() {
//            if($(this).next().is(":visible")) {
//                $(this).next().hide();
//            } else {
//                $(this).next().show();
//            }
//        });
//    })
    //引入局部变量
//    $(function () {
//        $("#panel h5.head").bind("click", function() {
//            var $content = $(this).next();
//            if($content.is(":visible")) {
//                $content.hide();
//            } else {
//                $content.show();
//            }
//        });
//    })
    //改变绑定事件的类型
//    $(function() {
//        $("#panel h5.head").bind("mouseover", function () {
//            $(this).next().show();
//        }).bind("mouseout", function() {
//            $(this).next().hide();
//        })
//    })
    //简写绑定事件
//    $(function() {
//        $("#panel h5.head").mouseover(function() {
//            $(this).next().show();
//        }).mouseout(function() {
//            $(this).next().hide();
//        })
//    })

    /**
     * 4.3 合成事件
     *      jQuery有两个合成事件---hover()方法和toggle()方法
     * */

    /**
     * 4.3.1 hover()方法
     *      hover()方法的语法结构为：hover(enter, leave);
     *      hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);当光标移出这个元素时，会触发指定的第2个函数(leave)。
     * */
//    $(function () {
//        $("#panel h5.head").hover(function() {
//            $(this).next().show();
//        }, function() {
//            $(this).next().hide();
//        })
//    })

    /**
     * 4.3.2 toggle()方法
     *      toggle()方法的语法结构为：toggle(fn1, fn2, ...fnN);
     *      toggle()方法用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数(fn1);当再次点击同一元素时，则触发指定的第2个函数(fn2);
     *      如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。
     *
     *      该方法在1.9被移除
     *      解决方法是使用jQuery迁移插件，项目地址为: https://github.com/jquery/jquery-migrate/
     * */
    $(function() {
        $("#panel h5.head").toggle(function() {
            $(this).next().show();
        },function() {
            $(this).next().hide();
        })
    })

</script>

</html>

4.事件冒泡

5.事件对象属性

6.移除事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body { font-size: 13px; line-height: 130%; padding: 60px; }
        #content { width: 220px; border: 1px solid #0050D0;background: #96E555 }
        span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}
        p {width:200px;background:#888;color:white;height:16px;}
    </style>
</head>

<body>

<div id="content">
    外层div元素
    <span>内层span元素</span>
    外层div元素
</div>

<!--阻止默认行为 -->
<form action="demo1.html">
    用户名: <input type="text" id="userName" />
    <input type="submit" value="提交" id="sub" />
</form>

<div id="msg"></div>

<br/><br/>
<a>test</a>

<br/><br/>
<button id="btn">点击我</button>
<br/>

<button id="delAll">删除所有事件</button>
<button id="delTwo">删除第二个事件</button>
<div id="test"></div>
</body>

<script type="text/javascript">

    /**
     * 4.4 事件冒泡
     * */

    /**
     * 单击span元素时，会造成事件冒泡。
     * */
//    $(function () {
//        //为span元素绑定click事件
//        $("span").bind("click", function() {
//            var txt = $("#msg").html() + "<p>内层span元素被单击</p>";
//            $("#msg").html(txt);
//        });
//        //为div元素绑定click事件
//        $("#content").bind("click", function() {
//            var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
//            $("#msg").html(txt);
//        })
//        //为body元素绑定click事件
//        $("body").bind("click", function() {
//            var txt = $("#msg").html() + "<p>body元素被单击</p>";
//            $("#msg").html(txt);
//        })
//    })
    /**
     * 停止事件冒泡
     * */
//    $(function () {
//        //为span元素绑定click事件
//        $("span").bind("click", function(event) {
//            var txt = $("#msg").html() + "<p>内层span元素被单击</p>";
//            $("#msg").html(txt);
//            event.stopPropagation();//阻止冒泡
//            //or
//            return false;//阻止冒泡
//        });
//        //为div元素绑定click事件
//        $("#content").bind("click", function(event) {
//            var txt = $("#msg").html() + "<p>外层div元素被单击</p>";
//            $("#msg").html(txt);
//            event.stopPropagation();//阻止冒泡
//            //or
//            return false;//阻止默认行为
//        })
//        //为body元素绑定click事件
//        $("body").bind("click", function() {
//            var txt = $("#msg").html() + "<p>body元素被单击</p>";
//            $("#msg").html(txt);
//        })
//    })

    /**
     * 阻止默认行为
     * */
//    $(function () {
//        $("#sub").bind("click", function(event) {
//            var username = $("#userName").val();
//            if(username == "") {
//                $("#msg").html("<p>文本框的值不能为空</p>");
//                //event.preventDefault();//阻止默认行为
//                //or
//                return false;//阻止默认行为
//            }
//        })
//    })

    /**
     * 4.5 事件对象的属性
     * */

    /**
     * 4.5.1 event.type
     *      该方法是获取到事件的类型
     * */
//    $("a").click(function (event) {
//        alert(event.type);//获取事件类型---输出为click
//        return false;//阻止链接跳转
//    })

    /**
     * 4.5.2 event.preventDefault()方法
     *      阻止默认的行为
     * */

    /**
     * 4.5.3 event.preventPropagation()方法
     *      阻止事件的冒泡
     * */

    /**
     * 4.5.4 event.target
     *      获取触发事件的元素
     * */
//    $("a[href=‘http://www.baidu.com‘]").click(function (event) {
//        var tg = event.target();//获取事件对象
//        alert(tg.href);
//        return false;//阻止跳转
//    })

    /**
     * 4.5.5 event.relatedTarget
     *      在标准的DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget来访问的。
     *      event.relatedTarget在mouseover中相当于IE浏览器的event.fromElement,在mouseout中相当于IE浏览器的event.toElement,
     *      jQuery对其进行了封装，使之能兼容各种浏览器
     * */

    /**
     * 4.5.6 event.pageX和event.pageY
     *      该方法的作用是获取到光标相对于页面的x坐标和y坐标。
     * */
//    $("a").click(function (event) {
//        //获取鼠标当前相对于页面的坐标
//        alert("Current mouse position: " + event.pageX + ", " + event.pageY);
//        return false;
//    })

    /**
     * 4.5.7 event.which
     *      该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键
     * */
//    $("a").mousedown(function (event) {
//        alert(event.which);// 1 = 鼠标左键  2 = 鼠标中键  3 = 鼠标右键
//    })
    //获取键盘按键
//    $("#userName").keyup(function (event) {
//        alert(event.which);
//    })

    /**
     * 4.6 移除事件--unbind方法
     *      语法结构：unbind([type], [data])
     *     说明：
     *      1.如果没有参数，则删除所有的事件
     *      2.如果提供了事件类型作为参数，则只删除该类型的绑定事件
     *      3.如果把绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数或被删除。
     * */
//    //为同一个元素绑定多个相同的事件
//    $(function () {
//        $("#btn").bind("click", function () {
//            $("#test").append("<p>我的绑定函数1</p>");
//        }).bind("click", function () {
//            $("#test").append("<p>我的绑定函数2</p>");
//        }).bind("click", function () {
//            $("#test").append("<p>我的绑定函数3</p>");
//        })
//    });
//
//    //移除按钮元素上以前注册的事件
//    $("#delAll").click(function () {
//        $("btn").unbind("click");//因为绑定的都是click事件，所以不写参数也可以达到同样的目的。-$("btn").unbind();
//    });

//    //移除button元素的其中一个事件。首先需要为匿名的绑定函数指定一个变量
//    $(function () {
//        $("#btn").bind("click", myFun1 = function () {
//            $("#test").append("<p>我的绑定函数1</p>");
//        }).bind("click",myFun2 = function () {
//            $("#test").append("<p>我的绑定函数2</p>");
//        }).bind("click",myFun3 = function () {
//            $("#test").append("<p>我的绑定函数3</p>");
//        })
//    });
//
//    $("#delTwo").click(function () {
//        $("btn").unbind("click", myFun2);
//    });

//    //one()方法
//    $(function () {
//        $("#btn").one("click", function () {
//            $("#test").append("<p>我的绑定函数1</p>");
//        }).one("click", function () {
//            $("#test").append("<p>我的绑定函数2</p>");
//        }).one("click", function () {
//            $("#test").append("<p>我的绑定函数3</p>");
//        })
//    });

</script>

</html>

//未完待续

时间： 2024-09-30 06:55:07

锋利的jQuery读书笔记---jQuery中的事件的相关文章

jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">&l

锋利的jQuery读书笔记---jQuery中操作DOM

一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创建文本节点 创建属性节点 插入节点 插入节点的方法 方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码:$("p").append("<b>你好</b>"

锋利的jQuery读书笔记---jQuery中动画

jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">

锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法

load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是$.ajax()方法) $.get()方法使用GET方式来进行异步请求.结构为:$.get(url [, data] [, callback] [, type]) $.get()方法参数解释如下: 参数名称 类型 说明 url String 请求的HTML页的URL地址 data(可选) Obj

锋利的jQuery读书笔记---jQuery中Ajax--load方法

第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="Ajax提交" onclick="Ajax();&qu

锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js">&l

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

jQuery学习笔记——jQuery常规选择器

一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了.#box {//使用 ID 选择器的 CSS 规则color:red;//将 ID 为 box 的元素字体颜色变红}在 jQuery 选择器里,我们使用如下的方式获取同样的结果:$('#box').css('color', 'red

3D数学读书笔记——3D中的方位与角位移

本系列文章由birdlove1987编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhurui_idea/article/details/25339595 方位和角位移的基本概念 什么是方位.角位移? 直观的说,我们知道,物体的"方位"主要描写叙述物体的朝向,然而,"方向"和"方位"并不全然一样.向量有"方向"但没有"方位",差别在于,当一个向量指向特定方向时,能够让向量自转