【JavaScript】jQuery中的事件与动画

最新推荐文章于 2022-08-13 17:33:59 发布

ProBeginner

最新推荐文章于 2022-08-13 17:33:59 发布

阅读量670

点赞数

分类专栏： JavaScript笔记文章标签： javascript jquery 函数对象

本文链接：https://blog.csdn.net/mjianglei/article/details/53336043

版权

JavaScript笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery中的事件

    在jQuery中，事件总体分为两大类：简单事件和复合事件。
简单事件，与JavaScript中的事件几乎一样，包括有window事件、鼠标事件、键盘事件、表单事件等，只是其对应的方法略有不同。
复合事件，则是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序。

一：基础事件

语法：事件名 = "函数名()";

    或者

DOM对象.事件名=函数;

1.window事件

所谓window事件，就是当用户执行某些会影响浏览器的操作时，而触发的事件。例如：打开网页时加载页面、关闭窗口、调节窗口大小、移动窗口等操作引发的事件处理。在jQuery中，常用的window事件有文档就绪事件，它对应的方法是ready()。更多的window事件，[查看这里](http://www.cnblogs.com/wqj0405/archive/2011/12/09/2282032.html)

2.鼠标事件

常用鼠标事件的方法
方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover()	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout()	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时

//示例
    <script type = "text/javascript">
        $(document).ready(function(){
        $("#nav li").mouseover(function(){  //当鼠标指针移过#nav li元素时
            $(this).addClass("type");  //为鼠标指针所在li元素添加样式
        });
    });

        $("#nav li").mouseout(function(){  //当鼠标指针移出#nav li 元素时
        $(this).removeClass();  //移除鼠标指针所在li元素的全部样式
    });
    </script>

    注意：this关键词，指向调用这个方法的DOM对象，在上述代码中，this代表的是与鼠标事件关联的 #nav li 元素

    在web应用中，鼠标事件常常用于网站导航、下拉菜单、选项卡、轮播广告等。

3.键盘事件

键盘事件是指当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键都会产生事件。

常用键盘事件的方法
方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素的keydown事件	按下按键时
keyup()	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress()	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

//示例,一段w3School的代码
//说明keydown事件与keyup事件
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 //在文本框输入内容时，触发keydown（键盘按下事件）
  $("input").keydown(function(){  
    $("input").css("background-color","#FFFFCC");
  });
  //在文本框结束输入内容时，触发keyup（键盘释放事件）
  $("input").keyup(function(){
    $("input").css("background-color","#D6D6FF");
  //通过按钮，调用input元素的keydown事件
  $("#btn1").click(function(){
    $("input").keydown();
  });  
  //通过按钮，调用input元素的keyup事件
  $("#btn2").click(function(){
    $("input").keyup();
  });  
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
<p><button id="btn1">触发输入域的 keydown 事件</button></p>
<p><button id="btn2">触发输入域的 keyup 事件</button></p>
</body>
</html>

//说明keypress()事件
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
i=0;
$(document).ready(function(){
  $("input").keypress(function(){
    $("span").text(i+=1);
  });
  $("button").click(function(){
    $("input").keypress();
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>Keypresses:<span>0</span></p>
<button>触发输入域的 keypress 事件</button>
</body>
</html>

keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。

4.表单事件

表单事件是所有事件类型中最稳定，且支持最稳定的事件之一。

常用表单事件的方法
方法	描述	执行时机
focus()	触发或将函数绑定到指定元素的focus事件	获得焦点
blur()	触发或将函数绑定到指定元素的blur事件	失去焦点

//示例：代码来自w3School

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //触发获得焦点事件
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
    //触发失去焦点事件
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
  $("#btn1").click(function(){
    $("input").focus();
  });  
  $("#btn2").click(function(){
    $("input").blur();
  }); 
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
<p><button id="btn1">触发输入域的 focus 事件</button></p>
<p><button id="btn2">触发输入域的 blur 事件</button></p>
</body>
</html>

二：绑定事件与移除事件

1.绑定事件

在jQuery中，如果需要为匹配的元素同时绑定一个或多个事件，可以使用bind()方法。

    语法：
    1、绑定一个函数
    $(selector).bind(event,data,function)

    2、绑定多个函数
    $(selector).bind({event:function, event:function, ...})

    envet：事件，例如blur、focus、click、mouseout等基础事件，也可以是自定义事件。
    [data]：可选参数，作为event.data属性值传递给事件对象的额外数据对象，该参数不是必须的。
    function：处理函数，用来绑定的处理函数

//示例：代码来自w3School

//绑定一个事件
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
</html>

//绑定多个事件
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 //对button元素绑定事件，单个事件用放在{}当中，并用逗号分隔。
  $("button").bind({
    //单击时触发的事件
    click:function(){$("p").slideToggle();},
    //鼠标移过时触发的事件
    mouseover:function(){$("body").css("background-color","red");},  
    //鼠标移出时触发的事件
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
</html>

2.移除事件

    移除事件与绑定事件是相对的，在jQuery中，为匹配的元素移除单个或多个事件，移除事件使用unbind()方法。

    语法：
    unbind([envet],[function])

    envet：事件，例如blur、focus、click、mouseout等基础事件，也可以是自定义事件。

    function：处理函数，用来解除绑定的处理函数

unbind()方法有2个参数，这两个参数都不是必须的，当unbind()不带参数时，表示移除所有绑定的事件

//示例：代码来自w3School

//unbind()不带参数时
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });

  //获取button元素，单击时移除所有事件
  $("button").click(function(){
    $("p").unbind();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以令其消失。包括本段落。</p>
<button>删除 p 元素的事件处理器</button>
</body>
</html>


//unbind()带参数时
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
function alertMe()
{
alert("Hello World!");
}

$(document).ready(function(){
  $("p").click(alertMe);
  $("button").click(function(){
    //移除单击事件时的alertMe函数
    $("p").unbind("click",alertMe);
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以触发一个提示框。包括本段落。</p>
<button>从 p 元素的 click 事件删除提示框函数</button>
</body>
</html>

三：复合事件

1、hover()方法

在jQuery中，hover()方法用于模拟鼠标指针悬停事件。当鼠标指针移动到元素上时，会触发指定的第一个函数（enter：进入），当鼠标指针移出这个元素时，会触发指定的第2个函数（leave：离开），该方法相当于mouseover与mouseout事件的组合。

    语法：
    hover(enterfunction,leavefunction);

//示例
    $(document).ready(function(){
        $("bottom").hover(function(){
        //鼠标移入时触发的函数
            $("li").css("display","block");
        },function(){
        //鼠标移出时触发的函数
            $("li").css("display","none");
        });
    });

//函数之间用逗号分隔

2.toggle()方法

在jQuery中toggle()方法用于模拟鼠标连续click事件。第一次单击元素，触发指定的第一个函数；再次单击同一个元素，触发指定的第二个函数；...依次类推，直到最后一个。随后的每次单击都重复对这几个函数轮番调用。

    语法：
    toggle(fn1,fn2,fn3,...fnN);

//示例，代码来自w3School
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").toggle(function(){

    //第一次单击时
    $("body").css("background-color","green");},
    function(){

    //第二次单击时
    $("body").css("background-color","red");},
    function(){

    //第三次单击时
    $("body").css("background-color","yellow");}
  );
});
</script>
</head>
<body>
<button>请点击这里，来切换不同的背景颜色</button>
</body>
</html>

//不同的函数用逗号分割

jQuery中的动画

1、控制元素显示与隐藏

    语法：
        控制元素显示：$(selector).show([speed],[callback])
        控制元素隐藏：$(selector).hide([speed],[callback])

        seppd：可选。规定元素从隐藏到完全可见（从显示到完全隐藏）的速度。可能值：毫秒、slow、normal、fast。
        在设置速度的情况下，元素从隐藏到完全可见（从显示到完全隐藏）的过程中，会逐渐改变高度、宽度、外边距、内边距和透明度。
        callback:可选。show 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

//示例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //隐藏p元素
  $(".btn1").click(function(){
  $("p").hide(1000);
  });
  //显示p元素（背景颜色为红色），在百分百显示之后，改变p元素的背景颜色（背景颜色为绿色）
  $(".btn2").click(function(){
  $("p").show(1000,showColor);
  $("p").css("background-color","red");
  });
});
function showColor()
{
$("p").css("background-color","green");
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

2.改变元素透明度

1.控制元素淡入
    语法：$(selector).fadeIn([speed],[callback]);

2.控制元素淡出
    语法：$(selector).fadeOut([speed],[callback]);

    一般来说，fadeIn()方法fadeOut方法()常在网页中为轮播广告、菜单、信息提示框和弹出窗口等制作动画效果。

//示例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  //单击时元素淡出
  $("p").fadeOut(1000);
  });
  $(".btn2").click(function(){
  //单击时元素淡入
  $("p").fadeIn(1000);
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

3.改变元素高度

在jQuery中，用于改变元素高度的方法是slideUp()和slideDown()。若元素的display属性值为none，当调用slideDown()方法时，这个元素会从上向下延伸显示，而slideUp()方法正好相反，元素从下到上缩短直至隐藏。

//示例：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){

//向上缩短隐藏
  $("p").slideUp(1000);
  });
  $(".btn2").click(function(){

//向下延伸显示
  $("p").slideDown(1000);
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>