JQuery——事件操作

最新推荐文章于 2022-12-31 10:28:55 发布

原创最新推荐文章于 2022-12-31 10:28:55 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #事件操作

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解了jQuery中各种事件绑定的方法，包括click、dblclick、focus、blur等，并通过实例展示了如何使用这些事件来增强网页的交互性。

方法	描述
blur()	触发、或将函数绑定到指定元素的 blur 事件
change()	触发、或将函数绑定到指定元素的 change 事件
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
focus()	触发、或将函数绑定到指定元素的 focus 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
select()	触发、或将函数绑定到指定元素的 select 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>这只是个标题啊</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script>

        // 文档加载事件
        $(document).ready(
            function () {
                //alert("文档加载完毕！");

                // 单击事件
                $("#btn").click(function () {
                    $("#cont").html("<font color = red>点我干嘛</font>");
                });

                // 双击事件
                $("#btn").dblclick(function () {
                    $("#cont").html("<font color = red>双击我干嘛</font>");
                });

                // 获得焦点
                $("#t1").focus(function () {
                    $("#t1").val("获得焦点");
                });
                // 失去焦点
                $("#t1").blur(function () {
                    $("#t1").val("失去焦点");
                });

                // 鼠标移入、移除
                $("#d1").mouseover(function () {
                    $("#d1").html("鼠标移入");
                });
                $("#d1").mouseout(function () {
                    $("#d1").html("鼠标移出");
                });
            }
        );

    </script>
</head>
<body>
<input type="button" id="btn" value="OK" />
<p id="cont"></p>
<input type="text" id="t1" /><br/><br/>
<div id="d1" style="border: 1px red solid ; width: 100px;height: 100px;"></div>
</body>

</html>