获取表单值
.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>
在输入框之中输入文字，然后点击回车键，如果文字和之前的不同，就会触发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>
1229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
