jQuery事件、动画表单

最新推荐文章于 2024-09-01 13:33:34 发布

遠2002

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量217

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/asdfg_asdsa/article/details/126334664

版权

jQuery是为事件处理特别设计的。

什么是事件?

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

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

在事件中经常使用术语"触发”(或"激发")例如:"当您按下按键时触发keypress事件"。

jQuery事件的分类

鼠标事件

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

事件绑定

除了使用事件名绑定事件外，还可以通过其他方式绑定事件:

bind事件绑定>>delegate事件绑定>>on事件绑定。

bind绑定事件

//第一个参数:事件类型
//第二个参数:事件处理程序
$("p").bind("click" ，function(){
//事件响应方法
});

缺点:不支持动态事件绑定

delegate注册委托事件

//第一个参数: selector，要绑定事件的元素
//第二个参数:事件类型
//第三个参数:事件处理函数
$ (".parentBox").delegate("p","click"，function({
 //.parentBox下面的所有的p标签绑定事件
});

缺点:只能注册委托事件，因此注册时间需要记得方法太多了

on绑定事件

on注册事件语法

//第一个参数: events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件)
//第二个参数: selector，执行事件的后代元素（可选)，如果没有后代元素，那么事件将有自己执行。
//第三个参数: data，传递给处理函数的数据，事件触发的时候通过event. data来使用（不常使用)
//第四个参数: handler，事件处理函数
$(selector).on(events[,selector][ , data] , handler);

on注册简单事件

1/表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click"， function() {});

on注册委托事件

//表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on("click","span",function() {});

事件解绑

unbind方式(不用)与bind对应

$(selector).unbind();//解绑所有的事件
$(selector).unbind("click");//解绑指定的事件

undelegate方式(不用)与delegate对应

$(selector).undelegate();//解绑所有的delegate事件
$(selector).undelegate("c1ick”);//解绑所有的click事件

off方式(推荐)与on对应

//解绑匹配元素的所有事件
$(selector).off();
//解绑匹配元素的所有click事件
$(selector).off("click");

动画

显示隐藏

show():显示隐藏的元素.

参数有slow表示慢慢的,fast表示快点,normal表示中间速度.还可以设置具体的时间数.

参数单位是毫秒。

$("#btn").click(function() {
                $("div").show(1000)
            })

hide();隐藏显示的元素.参数和show一样。

$("#btn2").click(function() {
                $("div").hide(1000)
            })

toggle(): hide()和show()方法之间的切换

$("#btn3").click(function() {
                $("div").toggle(1000)
            })

淡入淡出

他们的参数和show/hide—样.

参数1是速度(fast,normal,slow或者写一个时间数,单位毫秒)参数2是透明度.值是一个0-1的数字.

fadeIn()把隐藏的元素慢慢显示出来。

$("#btn4").click(function() {
                $("div").fadeIn(1000)
            })

fadeOut()把显示的元素通过慢慢变淡隐藏起来。

$("#btn5").click(function() {
                $("div").fadeOut(1000)
            })

fadeToggle()在淡入和淡出之间切换,如果事显示就淡入,如果是隐藏就是淡出。

$("#btn6").click(function() {
                $("div").fadeToggle(1000)
            })

滑动

slideUp():把元素使用往上收的方式隐藏起来,参数也是三个单词或者写时间数。

$("#btn7").click(function() {
                $("div").slideUp(1000)
            })

slideDown():把元素使用向下展开的方式显示出来,参数同上,把div缓慢的显示出来。

$("#btn8").click(function() {
                $("div").slideDown(1000)
            })

slideToggle():在向上卷和向下卷之间切换,如果是显示的,就卷上去隐藏,如果是隐藏的就向下卷显示。

$("#btn9").click(function() {
                $("div").slideToggle(1000)
            })

animate自定义动画

animate()方法用于创建自定义动画。

必需的params参数定义形成动画的CSS属性。

可选的speed参数规定效果的时长。它可以取以下值: "slow""、"fast"或毫秒。

可选的callback参数是动画完成后所执行的函数名称。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jQuery.min.js"></script>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <input type="button" value="动画" id="btn">
    <div>你好</div>

    <script>
        $(function() {
            $("#btn").click(function() {
                $("div").animate({
                    "left": "400px",
                    "top": "400px"
                }).animate({
                    "font-size": "30px"
                })
            })
        })
    </script>
</body>

</html>

表单

表单有两个较特殊的属性，一个是method，是规定用于发送表单的HTTP方法(提交表单的方式)﹔还有一个是action，是规定当提交时向何处发送表单的数据（要提交表单的地址)。Form表单有一个自动提交的功能(submit)有时候不写submit也会自动提交。可以默认不写。如果不想要表单自动提交就要写阻止表单自动提交的方法(οnsubmit="return false;")。

表单的提交方式有两种:分别是get提交（为表单的默认提交方式)与post提交。