CH06-JQuery事件一

本章目标

了解事件的概念和常用的事件
掌握窗体、键盘、鼠标和复合事件的使用

一、事件的分类

1、什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

在元素上移动鼠标
选取单选按钮
点击元素

2、常用的事件

基础事件
- 窗体事件
- 键盘事件
- 鼠标事件
- 表单事件
复合事件是多个事件的组合
- 鼠标光标悬停
- 鼠标连续点击

二、窗体事件

1、load()

语法：$(selector).load(function)

当指定的元素已加载时，会发生load事件

window.onload必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行

例：页面已加载进行提示

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(window).load(function(){
            alert("图片已载入");
        })
</script>  
<img src="img/cup.jpg" width="200px" height="200px" />

2、resize()

用法：当调整浏览器窗口大小时，发生resize事件

Resize()方法触发resize事件。或规定当发生resize事件时运行的函数。

3、scroll()

用法：当用户滚动指定的元素时。会发生scroll事件

scroll事件适用于所有可滚动的元素和window对象（浏览器窗口）

Scroll()方法触发scroll事件，或规定当发生scroll事件时运行的函数

语法：$(selector).scroll()

三、键盘事件

1、常用键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

2、keydown()事件

按下键盘时发生

例：显示按键的键盘码(keycode)

效果图：

<script src="js/jquery.min.js"></script>
<script>
        $(function(){
            $(document).keydown(function (e) {
                //当键盘按下回车键显示对应的键盘码
                $("#content").html(e.keyCode);
        	});
        })
</script> 
<div id="content" style="color:red"></div>

字母和数字键的键码值(keyCode)（左侧 ):

四、鼠标事件

1、常用鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

2、click()

语法：$(选择器).click(function(){})

3、mouseover()、mouseout( )

mouseover()鼠标移过时触发，mouseout( )鼠标移出时触发

例：鼠标移入菜单时显示背景色，移出时去除背景色

鼠标移入效果图：

鼠标移出效果图：

<style>
        li {
            /*横向显示li*/
            float:left;
            margin-left:20px;
        }
        .bg {
            background-color:#b6ff00;
        }
</style>
<script src="js/jquery.min.js"></script>
<script>
    $(function(){
        //鼠标移入给li元素添加样式
        $("li").mouseover(function () {
                $(this).addClass("bg");
            });
		//鼠标移出给li元素删除样式
        $("li").mouseout(function () {
                 $(this).removeClass("bg");
            });
     })
</script>
<ul style="list-style-type:none;">
        <li>首页</li>
        <li>服装城</li>
        <li>电器城</li>
        <li>易购超市</li>
        <li>易购团</li>
        <li>在线游戏</li>
</ul>

五、复合事件

1、hover()

鼠标光标悬停事件：模拟鼠标悬停事件，鼠标移动到一个对象上面及移出这个对象时发生

该事件相当于mouseover与mouseout事件的组合

与上面效果图一样：

<script src="js/jquery.min.js"></script>
<script>
    $(function(){
        $("li").hover(
        function () {
                   $(this).addClass("bg");
                }, 
        function () {
                    $(this).removeClass("bg");
                });
        //简写方式：
        $("li").hover(function () {
                    //鼠标悬停切换样式
                    $(this).toggleClass("bg");
                });
	})
</script>

2、toggle()

鼠标连续点击事件：模拟鼠标连续点击事件。（该方法在1.8.3jquery包中）

语法：

例：每点一下div，样式进行切换一次

效果图：

<script src="js/jquery-1.8.3.min.js"></script>
<script>
        $(function(){
            //点击press标签进行背景颜色切换
            $("#press").toggle(
               function () {
                   $(this).css("background-color", "red");
               },
               function () {
                   $(this).css("background-color", "green");
               },
               function () {
                   $(this).css("background-color", "blue");
               }
            );
        })
    </script>
<div id="press">点击我   </div>