锋利的jQuery读书笔记---jQuery中的事件（锋利的jquery教程）

25-01-27 22

本文的目的是介绍锋利的jQuery读书笔记---jQuery中的事件的详细情况，特别关注锋利的jquery教程的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解锋利的j

本文的目的是介绍锋利的jQuery读书笔记---jQuery中的事件的详细情况，特别关注锋利的jquery教程的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解锋利的jQuery读书笔记---jQuery中的事件的机会，同时也不会遗漏关于JQuery 总结（6）锋利的jQuery、jquery-11 jquery中的事件切换如何实现、jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）、jQuery中的jQuery()方法用法分析_jquery的知识。

本文目录一览：

锋利的jQuery读书笔记---jQuery中的事件（锋利的jquery教程）
JQuery 总结（6）锋利的jQuery
jquery-11 jquery中的事件切换如何实现
jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）
jQuery中的jQuery()方法用法分析_jquery

锋利的jQuery读书笔记---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>");
//        })
//    });

/**
     * 4.7 模拟操作
     *      在jQuery中，可以使用trigger()方法来完成模拟操作。
     * */

//    //触发id为btn的按钮的chick事件
//    $(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>");
//        });
//        $("#btn").trigger("click");
//        //or
//        $("#btn").click();
//    })

//    //触发自定义事件
//    $(function () {
//        $("#btn").bind("myClick", function () {
//            $("#test").append("<p>我的自定义事件</p>");
//        });
//        $("#btn").trigger("myClick");
//    })

//    //传递数据
//    $(function () {
//        $("#btn").bind("myClick", function (event, message1, message2) {
//            $("#test").append("<p>" + message1 + message2 + "</p>");
//        });
//        $("#btn").trigger("myClick", ["我的自定义 ", "事件"]);
//    })

//    //执行默认操作.trigger()方法触发事件后，会执行浏览器默认操作
//    $("input").trigger("focus");
//    //上述代码不仅会触发为<input>绑定的focus事件，也会使<input>元素本身得到焦点(这是浏览器的默认操作)
//    //如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法---triggerHandler()
//    $("input").triggerHandler("focus");
//    //该方法只会触发<input>元素上绑定的focus事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，不会得到焦点。


    /**
     * 4.8 其他用法
     * */

    /**
     * 4.8.1 绑定多个事件类型
     * */
    $(function () {
        $("div").bind("mouseover mouseout", function () {
            $(this).toggleClass("over");
        })
    })


    /**
     * 4.8.2 添加命名空间，便于管理
     *
     *  在绑定的事件类型后面添加命名空间，这样在删除事件时只需要指定命名空间即可。
     * */
    $(function () {
        $("div").bind("click.plugin", function () {
            $("body").append("<p>click事件</p>");
        });
        $("div").bind("mouseover.plugin", function () {
            $("body").append("<p>mouseover事件</p>");
        });
        $("div").bind("dblclick.plugin", function () {
            $("body").append("<p>dblclick事件</p>");
        });

        $("button").click(function () {
            $("div").unbind(".plugin");
        });
    })

    /**
     * 4.8.3 相同事件名称，不同命名空间执行方法
     *      可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用
     * */
    $(function () {
        $("div").bind("click", function () {
            $("body").append("<p>click事件</p>");
        });
        $("div").bind("click.plugin", function () {
            $("body").append("<p>click.plugin事件</p>");
        });

        $("button").click(function () {
            $("div").trigger("click!");//注意click后面的感叹号，匹配所有不包含在命名空间中的click方法
        });
    })

    /**
     *  单击div时，会同时触发click事件和click.plugin事件。
     *  如果只是单击button只触发click事件。如果想两者都触发，则去掉感叹号即可.
     * */

</script> </html>

JQuery 总结（6）锋利的jQuery

1.解决 jQuery 和其他库的冲突

定义了一个快捷键，以后碰到$的可以用新的替代，jQuery.noConflict(); 表示转移$控制权

//⋯省略其他代码
var $j = jQuery.noConflict(); //自定义一个快捷方式
$j(function(){ //使用 jQuery，利用自定义快捷方式 — $j
$j("p").click(function(){
alert( $j(this).text() );
})
})
$("pp").style.display = ''none''; //使用 prototype.js 隐藏元素
//⋯省略其他代码

2.jQuery 检查某个元素是否存在
有时候要用作if判断语句，如果存在执行什么如果不存在点击哪个按钮

if($("#hh")[0]){
console.log(1)
}else{
console.log(2)
$("#chh").click()
}

if ($("span")[0]){
   $("div").css("background","red")
  }

3.鼠标指示显示title
鼠标覆盖创建一个标签，然后插入标签，把前面的title值用东西存起来，清空他的title值，当鼠标移开的时候再给他赋值回去。

<body>
<p><a href="#"title="这是我的超链接提示 1.">提示 1.</a></p>
<p><a href="#"title="这是我的超链接提示 2.">提示 2.</a></p>
<p><a href="#" title="这是自带提示 1.">自带提示 1.</a> </p>
<p><a href="#" title="这是自带提示 2.">自带提示 2.</a> </p>
<script>
  $(".tooltip").mouseover(function (e) {
     this.myTitle = this.title;
     this.title = "";
    var  newt="<div id=''tooltip''>"+this.myTitle+"</div>";
    $("body").append(newt);
    console.log(e.pageX )
    $("#tooltip").css({
      "top": e.pageY +10+ "px",
      "left": e.pageX+10 + "px",
      "position":"absolute"
    })
  }).mouseout(function () {
   $("#tooltip").remove(); 
   this.title = this.myTitle;
  })
</script>
</body>

4.jQuery置顶
onclick=$(window).scrollTop(0);

$(".yb_top").click(function() {
$("html,body").animate({
''scrollTop'': ''0px''
}, 300)
});

　5.scroll

6.判断
activeText = activeText == "左边" ? "左边1111" : 5555;
判断activeText == "左边" 是否成立如果成立走前面左边1111，不成立就走后面

7.菜单折叠效果

$(this).siblings().toggle(500).parent().siblings().children("p").slideUp(200);

jquery-11 jquery中的事件切换如何实现

一、总结

一句话总结：事件切换hover()和toggle()函数。参数两个，都是函数，依次执行两个函数。

1、如何实现单击切换图片？

用toggle()方法，参数为两函数

26 $(''img'').toggle( 27 function(){ 28 this.src=''b.png''; 29  }, 30 function(){ 31 this.src=''a.png''; 32  } 33 );

2、如何实现谋元素鼠标移入和移出执行不同的函数？

用hover()方法

26 $(''img'').hover( 27 function(){ 28 this.src=''b.png''; 29  }, 30 function(){ 31 this.src=''a.png''; 32  } 33 );

3、如何实现某个元素交替执行不同的方法？

用toggle()方法，参数为两函数

26 $(''img'').toggle( 27 function(){ 28 this.src=''b.png''; 29  }, 30 function(){ 31 this.src=''a.png''; 32  } 33 );

二、jquery中的事件切换如何实现

4.事件切换
hover();
toggle();

toggle循环单击

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>index</title>
 6     <style>
 7         #div1{
 8             position: absolute;
 9             top:0px;
10             left:0px;
11             border-radius:256px;
12             width:256px;
13             height:256px;
14             background: #ccc;
15             overflow: hidden;
16         }
17     </style>
18     <script src="jquery.js"></script>
19 </head>
20 <body>
21     <div id="div1">
22          <img src="a.png">
23     </div>
24 </body>
25 <script>
26 $(''img'').toggle(
27     function(){
28         this.src=''b.png'';
29     },
30     function(){
31         this.src=''a.png'';
32     }
33 );
34 </script>
35 </html>

循环移入和移出

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>index</title>
 6     <style>
 7         #div1{
 8             position: absolute;
 9             top:0px;
10             left:0px;
11             border-radius:256px;
12             width:256px;
13             height:256px;
14             background: #ccc;
15             overflow: hidden;
16         }
17     </style>
18     <script src="jquery.js"></script>
19 </head>
20 <body>
21     <div id="div1">
22          <img src="a.png">
23     </div>
24 </body>
25 <script>
26 $(''img'').hover(
27     function(){
28         this.src=''b.png'';
29     },
30     function(){
31         this.src=''a.png'';
32     }
33 );
34 </script>
35 </html>

jQuery下拉框操作系列$(

jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下拉框应用</title>
    <script src="../../js/jquery-1.4.4.min.js"></script>
</head>
<body>
    <div>
        <select multiple id="select1">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
            <option value="7">选项7</option>
            <option value="8">选项8</option>
        </select>
        <div>
            <span id="add">选中添加到右边≥≥</span>
            <span id="add_all">全部添加到右边≥≥</span>
        </div>
    </div>
    <div>
        <select multiple id="select2"></select>
        <div>
            <span id="remove">选中删除到左边<<</span>
            <span id="remove_all">全部删除到左边<<</span>
        </div>
    </div>
    <script>
        $(function () {
            $("#add").click(function () {
                var $options = $("#select1 option:selected");  //获取选中的选项
                //var $remove = $options.remove();  //删除下拉列表中选中的选项
                $options.appendTo("#select2");   //追加到select2
            })

            $("#add_all").click(function () {
                var $options = $("#select1 option");  //获取选中的选项
                //var $remove = $options.remove();  //删除下拉列表中选中的选项
                $options.appendTo("#select2");   //追加到select2
            })

            $("#select1").dblclick(function () {
                var $options = $("option:selected", this);  //获取选中的选项
                //var $remove = $options.remove();  //删除下拉列表中选中的选项
                $options.appendTo("#select2");   //追加到select2
            })

            $("#remove").click(function () {
                var $options = $("#select2 option:selected");  //获取选中的选项
                //var $remove = $options.remove();  //删除下拉列表中选中的选项
                $options.appendTo("#select1");   //追加到select2
            })

            $("#remove_all").click(function () {
                var $options = $("#select2 option");  //获取选中的选项
                //var $remove = $options.remove();  //删除下拉列表中选中的选项
                $options.appendTo("#select1");   //追加到select2
            })

            $("#select2").dblclick(function () {
                var $options = $("option:selected", this);  //获取选中的选项
                //var $remove = $options.remove();  //删除下拉列表中选中的选项
                $options.appendTo("#select1");   //追加到select2
            })

        })
    </script>
</body>
</html>

jQuery中的jQuery()方法用法分析_jquery

本文实例讲述了jquery中的jquery()方法用法。分享给大家供大家参考。具体如下：

jQuery()方法的定义和用法:
此方法可以接受一组选择器，用于匹配相应的元素。例如:

复制代码代码如下:

jQuery("div")

在实际应用中，一般用$定义jQuery，其实$就是jQuery的简写，比如$("li")可以写成jQuery("li")。
jQuery的核心功能都是通过此方法实现的，或者说以某种方式使用此方法实现。下面就详细介绍一下次方法的用法。
语法结构一:
当jQuery()方法没有任何参数的时候，会返回一个空jQuery对象。

复制代码代码如下:

jQuery()

实例代码:

复制代码代码如下:

jQuery()函数-