jQuery獲取表單值及幾個表單事件

opo77_發表於2020-10-17
jQuery事件

獲取表單值

.val()方法，

主要用於input,select和textarea標籤元素
它可以獲取匹配元素中的第一個元素的值，如果加上引數，可以設定所有元素的值

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>表單方法和事件</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    </head><body>    <label>請輸入您的名字：</label>    <input type="text">    <input type="button" value="確定">    <div id="result"></div>    <script>        $(function(){            $(":button").on('click',function(){                var $value=$(":text").val();                $("#result").html('hello'+ $value);            });        });    </script></body></html>

在這裡插入圖片描述
focus事件，
就是表單元素獲得焦點的時候
比如你的滑鼠在輸入框中點選了一下，輸入框裡面有游標，就是獲得焦點了，在這個事件發生的時候，可以操作元素。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>表單方法和事件</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        input{            display:block;            margin: 100px 0;        }    </style></head><body>    <label>請輸入您的名字：</label>    <input type="text">    <input type="button" value="確定">    <div id="result"></div>    <script>        $(function(){            $(":button").on('click',function(){                var $value=$(":text").val();                $("#result").html('hello'+ $value);            });            $(":text").on('focus',function(){                $(":text").css({                    'width':'200px',                    'height':'30px',                    'background-color':'lightgrey'                });            });        });    </script></body></html>

在這裡插入圖片描述
把input設定成塊級元素，方便調整大小，然後在獲得焦點事件時改變input框的大小。

blur事件
與focus相反，是失去焦點

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>表單方法和事件</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    <style>        input{            display:block;            margin: 100px 0;        }    </style></head><body>    <label>請輸入您的名字：</label>    <input type="text">    <input type="button" value="確定">    <div id="result"></div>    <script>        $(function(){            $(":button").on('click',function(){                var $value=$(":text").val();                $("#result").html('hello'+ $value);            });            $(":text").on('focus',function(){                $(":text").css({                    'width':'200px',                    'height':'30px',                    'background-color':'lightgrey'                });            });            $(":text").on('blur',function(){                $(":text").css({                    'width':'150px',                    'height':'20px',                    'background-color':'rgb(223,159,140)'                });            });        });    </script></body></html>

效果就是在input框外點選的時候，輸入框就會失去焦點，觸發事件。

表單事件之change事件，
表示當輸入框的值發生變化時。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>表單方法和事件</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    </head><body>    <label>請輸入您的名字：</label>    <input type="text">    <div id="result"></div>    <script>        $(function(){                        $(":text").on('change',function(){                var $text =$(":text").val();                $("#result").html('hello'+$text+'!');            });                    });    </script></body></html>

在這裡插入圖片描述
在輸入框之中輸入文字，然後點選Enter鍵，如果文字和之前的不同，就會觸發change事件，改掉div中的結果。

submit事件
表示當表單被提交時。一般情況下，submit事件會把帶有使用者資訊的表單交到伺服器驗證。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>表單方法和事件</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>    </head><body>    <label for="username">請輸入使用者名稱</label>    <input type="text" name="username">    <br />    <label for="password">請輸入密碼</label>    <input type="password" name="password">    <br />    <input type="submit" value="確認">    <script>        $(function(){            $(":submit").on('click',function(){                alert('驗證通過');            })        });    </script></body></html>

在這裡插入圖片描述

相關文章