键盘输入与表单,change, submit

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

下面我们再去看一下跟表单相关的两个事件 … change 和 submit … 在表单元素发生变化的时候会触发 change 事件 … 提交表单的时候,会触发 submit 事件 …

.change()

我们先在这个 通知 复选框上绑定一个 change 事件 … 先选中这个元素 … 它上面有一个 notice ID .. 使用 change 事件的事件处理器 ..

用一个函数作为它的参数 … 在这个函数里面,我们用 if 语句去判断复选框的不同的状态,如果勾选了复选框,它的 checked 属性的值会是 true …

如果没有勾选的话,这个属性的值会是 false … 我们可以使用 prop() 方法获取到复选框元素的这个属性的值 …

$( '#notice' ).change(function() {
if( $( this ).prop( 'checked' ) ) {
$( '.alert' ).text( '发送通知' ).show();
}else{
$( '.alert' ).text( '不发送通知' ).show();
}
});

回到浏览器 … 勾选一下 通知 这个复选框 … 现在这个表单元素就发生了一些变化 .. 也就会触发 change 事件 … 这样在状态栏上就会显示 发送通知 … 取消勾选它 … 会在状态栏上显示 不发送通知 …

.submit()

下面我们再去试一下 submit 事件 … 先选择表单 … 调用 .submit() 事件处理器 …. 在状态栏上显示一个 正在提交内容 …

然后用一个提示窗口,显示在评论文本区域里面的内容 ….

$( 'form' ).submit(function() {
$( '.alert' ).text( '正在提交内容...' ).show();
alert( $( '#comment' ).val() );
});

回到浏览器 … 在评论框里输入点内容 … 点击 提交 按钮 … 会触发表单的 submit 事件 …

在弹出的提示窗口里,会显示在评论框里输入的内容 …

键盘输入与表单,change, submit《 jQuery 基础 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点