事件绑定、jQuery动画、表单、

发布于：2023-01-19 ⋅ 阅读:(386) ⋅ 点赞:(0)

一、事件绑定        

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

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

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

//第一个参数:事件类型

//第二个参数;事件处理程序

 // 第一种：bind(事件类型，事件处理函数)

            $("div").bind("click", function() {

                $(this).css("color", "red")

            })

            $("div").bind("mouseover", function() {

                $(this).css("background-color", "green")

            })

            $("div").bind("mouseout", function() {

                $(this).css("background-color", "pink")

            })

on事件绑定：

// 第二种：一次绑定多个事件

            $("div").on({

                "click": function() {

                    $(this).css("color", "red")

                },

                "mouseover": function() {

                    $(this).css("background-color", "green")

                },

                "mouseout": function() {

                    $(this).css("background-color", "pink")

                }

            })

// 第三种：on进行绑定事件时可以实现动态绑定

            $("#btn").click(function() {

                $("body").append("<div>这个是新增加的div</div>")

            })

            $("body").on("click", "div", function() {

                $(this).css("color", "red")

            })

事件解绑：

$(selector).unbind(;//解绑所有的事件

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

键盘事件：

<!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-3.6.0.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div>点击A、B、C、D有惊喜哦！</div>
    <script>
        $(function() {
            $(document).on("keydown", function(event) {
                switch (event.keyCode) {
                    case 65:
                        $("div").css("background-color", "red")
                        break;
                    case 66:
                        $("div").css("background-color", "green")
                        break;
                    case 67:
                        $("div").css("background-color", "yellow")
                        break;
                    case 68:
                        $("div").css("background-color", "blue")
                        break;
                    case 39:
                        x += 10
                        $("div").css("left", x + "px")
                        break;
                    default:
                        break;
                }
            })
        })
    </script>
</body>

</html>

二、jQuery动画：

显示隐藏：

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

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

s( "div" ) . show( "fast ');

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

s( 'div').hide(" s1ow ' ) ;

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

$(C " div" ).toggle('s1ow' ) ;

        淡入淡出：

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

$( " div").fadeIn("slow ' );

fadeOut()把隐藏的元素慢慢显示出来，他们的参数和show/hide一样。

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

.s('div").fadeout(;

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

$( "div" ).fadeToggle( ;

        滑动：

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

$( 'div').s1ideup( 's1ow');//表示把div缓慢的收起来

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

$( 'div').slideDown( 's1ow ' ); //如果本身就是显示的,这个是没有效果的

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

$( 'div ').slideToggle('s1ow ' );

<!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-3.6.0.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }
    </style>
</head>

<body>
    <input type="button" value="toggle" id="btn0">
    <input type="button" value="淡入" id="btn1">
    <input type="button" value="淡出" id="btn2">
    <input type="button" value="淡入/淡出交替" id="btn3">
    <input type="button" value="上滑" id="btn4">
    <input type="button" value="下滑" id="btn5">
    <input type="button" value="上滑/下滑交替" id="btn6">

    <div></div>

    <script>
        $(function() {
            $("#btn0").on("click", function() {
                $("div").toggle(200) //指的是show()和hide()的交替
            })

            $("#btn1").on("click", function() {
                $("div").fadeIn(200) //显示(淡入)
            })

            $("#btn2").on("click", function() {
                $("div").fadeOut(200) //隐藏(淡出)
            })

            $("#btn3").on("click", function() {
                $("div").fadeToggle(200) //显示/隐藏交替(淡入/淡出交替)
            })

            $("#btn4").on("click", function() {
                $("div").slideUp(200) //显示(上滑)
            })

            $("#btn5").on("click", function() {
                $("div").slideDown(200) //隐藏(下滑)
            })

            $("#btn6").on("click", function() {
                $("div").slideToggle(200) //显示/隐藏交替(上滑/下滑交替)
            })
        })
    </script>
</body>

</html>

<!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-3.6.0.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .slider {
        width: 790px;
        height: 340px;
        margin: 100px auto;
        position: relative;
    }
    
    .slider li {
        display: none;
        position: absolute;
    }
    
    .slider li:first-child {
        display: block;
    }
    
    .arrow {
        display: none;
    }
    
    .slider:hover .arrow {
        display: block;
    }
    
    .arrow-left,
    .arrow-right {
        font-family: "SimSun", "宋体";
        width: 30px;
        height: 60px;
        font-size: 30px;
        background-color: rgba(0, 0, 0, 0.1);
        color: white;
        position: absolute;
        top: 50%;
        margin-top: -30px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
    }
    
    .arrow-left:hover,
    .arrow-right:hover {
        background-color: rgba(0, 0, 0, .5);
    }
    
    .arrow-left {
        left: 0;
    }
    
    .arrow-right {
        right: 0;
    }
</style>

<body>
    <div class="slider">
        <ul>
            <li>
                <a href="#"><img src="img/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/4.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/5.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/6.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/7.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/8.jpg" alt=""></a>
            </li>
        </ul>

        <div class="arrow">
            <span class="arrow-left">&lt;</span>
            <span class="arrow-right">&gt;</span>
        </div>
    </div>

    <script>
        $(function() {
            var index = 0;
            $(".arrow-right").on("click", function() {
                index++
                if (index > ($("ul li").lenght - 1)) {
                    index = 0
                }
                $("ul li").eq(index).fadeIn().siblings().fadeOut()
            })

            $(".arrow-left").on("click", function() {
                index--
                if (index == -1) {
                    index == $("ul li").lenght - 1
                }
                $("ul li").eq(index).fadeIn().siblings().fadeOut()
            })
        })
    </script>
</body>

</html>

自定义动画：

<!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-3.6.0.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
</head>

<body>
    <input type="button" id="btn" value="点击">
    <div>自定义动画</div>
    <script>
        $(function() {
            $("#btn").click("click", function() {
                $("div").animate({
                        "left": "500px"
                    }).animate({
                        "top": "400px"
                    }).animate({
                        "left": "0"
                    }).animate({
                        "top": "50px"
                    })
                    // $("div").animate({
                    //     "left": "500px",
                    //     "top": "400px"
                    // }).animate({
                    //     "font-size": "30px",
                    // })
            })
        })
    </script>
</body>

</html>

<!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-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #navigation li {
            height: 50px;
            width: 120px;
            text-align: center;
            position: relative;
        }
        
        #navigation li a {
            position: absolute;
            left: -100px;
            top: 0px;
            display: block;
            width: 120px;
            height: 50px;
            line-height: 50px;
            color: white;
            text-decoration: none;
        }
        
        #navigation li:first-child a {
            left: 0px;
        }
        
        .nav0 a {
            background: #f66;
        }
        
        .nav1 a {
            background: rgb(226, 112, 12);
        }
        
        .nav2 a {
            background: rgb(11, 58, 231);
        }
        
        .nav3 a {
            background: #f66;
        }
        
        .nav4 a {
            background: rgb(12, 31, 171);
        }
        
        .nav5 a {
            background: rgb(237, 4, 4);
        }
        
        .nav6 a {
            background: rgb(51, 243, 12);
        }
        
        .nav7 a {
            background: rgb(26, 214, 173);
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <ul id="navigation">
            <li class="nav0 current_page"> <a href="">我的日志</a></li>
            <li class="nav1"><a href="">菜单1</a></li>
            <li class="nav2"><a href="">菜单2</a></li>
            <li class="nav3"><a href="">菜单3</a></li>
            <li class="nav4"><a href="">菜单4</a></li>
            <li class="nav5"><a href="">菜单5</a></li>
            <li class="nav6"><a href="">菜单6</a></li>
            <li class="nav7"><a href="">菜单7</a></li>
        </ul>
    </div>
    <script>
        $(function() {
            $("ul li a").hover(function() {
                $(this).animate({
                    "left": "0px"
                })
            }, function() {
                $(this).stop(true) //停止上一个动画
                $(this).animate({
                    "left": "-100px"
                })
            })
        })
    </script>
</body>

</html>

 

三、表单

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

 get提交：

        请求参数放到请求的地址后面，参数大小受限只能传递几k的数据。由于参数再地址后面安全性不能保证。但是速度较快。

应用场景:地址栏发出的请求/超链接发出的请求。

 post请求：

请求参数放到请求体里面，参数大小没有限制，请求参数不可见，所以安全性更高，速度慢。

应用场景:当form表单指定请求方式为post时发出请求。

Get与Post的区别：

        Get方法是用来向服务器上获取数据;而Post是用来向服务器上传递修改数据。

表单提交的原则：

        表单提交主要是通过表单元素的name值等于value值进行传递数据的，但是表单提交时需要注意一下原则;name相同的表单提交格式

       如果name值相同的表单提交，该name值会出现多次，且对应不同表单的值。

       没有name的表单、disabled的表单元素

        表单元素没有name属性、含有disabled属性都会被禁止提交。

serialize()：

        serialize()方法通过序列化表单值创建URL编码文本字符串。

        您可以选择一个或多个表单元素(如输入和/或文本区)，或表单元素本身。

        序列化的值可在生成AJAX请求时用于URL查询字符串中。

语法：

console.log(s (""form") . serialize());

serializaxArray():

        serializeArray)方法通过序列化表单值来创建对象(name和value）的数组。

语法:

$(selector).serializeArrayo

<!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-3.6.0.min.js"></script>
</head>

<body>
    <form action="" id="nav" method="get">
        <p>用户名：<input type="text" name="uname"></p>
        <p>密码：<input type="password" name="pwd"></p>
        <p>
            性别：<input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1">女
        </p>
        <p>备注：
            <textarea name="remark" id="" cols="30" rows="10"></textarea></p>
        <p><input type="submit" value="提交" id="btn"></p>
    </form>
    <script>
        $(function() {
            $("#nav").submit(function() {
                // console.log($(this).serialize())
                // console.log(decodeURIComponent($(this).serialize(),true))
                // console.log()
                var arr = $(this).serializeArray()
                for (var i = 0; i < arr.length; i++) {
                    console.log(arr[i].value)
                }
                return false
            })
        })
    </script>
</body>

</html>

 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布