js进阶 12-5 jquery中表单事件如何使用
js进阶 12-5 jquery中表单事件如何使用
一、总结
一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样。
1、表单获取焦点和失去焦点事件有哪两组?
注意是blur/focus和focus in/out,并没有给blur加什么
- blur() 当元素失去焦点时触发 blur 事件。
blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
- focus() 当元素获得焦点时,触发 focus 事件。
- focusin()当元素获得焦点时,触发 focusin 事件。
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
- focusout()当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
36 //具有获得焦点和失去焦点事件的元素有3个:单行文本框text;多行文本框textarea;下拉列表select;
37 // $('input').focus(function(){
38 // $(this).css('background','#ccc')
39 // })
40 // $('input').blur(function(){
41 // $(this).css('background','#fff')
42 // })
2、tab键可以触发blur事件么?
可以
3、focusin/focusout和focus/blur的区别是什么?
都是鼠标获取和失去焦点事件,但是
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
也就是说:用focusin/focusout监听表单元素的祖先,也可以input的样式情况,从而方便给祖先或者input设置样式
44 // $('p').focusin(function(){
45 // $(this).css('background','#ccc')
46 // })
47 // $('p').focusout(function(){
48 // $(this).css('background','#fff')
49 // })
50 $('div').focusin(function(){
51 $(this).css('background','#ccc')
52 })
53 $('div').focusout(function(){
54 $(this).css('background','#fff')
55 })
4、表单事件如何使用?
可元素添加事件监听,然后监听元素
给你需要监听的元素添加事件监听
37 // $('input').focus(function(){
38 // $(this).css('background','#ccc')
39 // })
5、focus/blur的监听对象是谁?
36 //具有获得焦点和失去焦点事件的元素有3个:单行文本框text;多行文本框textarea;下拉列表select;
6、focusin/focusout的监听对象是谁?
单行文本框text;多行文本框textarea;下拉列表select的父亲或者祖先
7、change()的监听对象是谁?
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。
56 $('textarea').change(function(){
57 var str=$(this).val()
58 $('#num').text(str.length)
59 })
8、select()的监听对象是谁?
单行文本框text或多行文本框textarea的文本
60 $('textarea').select(function(){
61 alert('文本被选中')
62 })
9、submit()的监听对象是谁?
form表单
63 $('form').submit(function(){
64 alert('确定要提交吗?')
65 })
10、jquery中form表单事件有哪些?
焦点*4,change/select(文本框*2),表单*1
11、select()和selected的区别是什么?
前者是文本框字体选中事件,后者是多选择的某个选项是否被选中
二、jquery中表单事件如何使用
1、相关知识
表单事件
- blur() 当元素失去焦点时触发 blur 事件。
blur事件会在元素失去焦点的时候触发,既可以是鼠标行为,也可以是按tab键离开的
- focus() 当元素获得焦点时,触发 focus 事件。
- focusin()当元素获得焦点时,触发 focusin 事件。
focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
- focusout()当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
- change() 当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。
- select() 当用户选中单行文本框text或多行文本框textarea的文本时,会触发select事件。
- submit() 当提交表单时,会发生 submit 事件。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
p{width: 40%};
</style>
</style>
</head>
<body>
<h3>键盘事件-表单事件</h3>
<div>
<form action="#" id="myform">
<p>姓名:<input type="text" id="user"></p>
<p>密码:<input type="password" id="passw"></p>
<p>建议:<textarea name="" id="tarea" cols="30" rows="10"></textarea>
<br>textarea中已经输入了<span id="num">0</span>个字符
</p>
<p>
<select id="sel">
<option value="">AAA</option>
<option value="">BBB</option>
<option value="">CCC</option>
</select><br>
</p>
<p>附件:<input type="file" id="fil"></p>
<input type="submit" value="提交">
</form>
</div>
<script type="text/javascript">
$(function(){
//具有获得焦点和失去焦点事件的元素有3个:单行文本框text;多行文本框textarea;下拉列表select;
// $('input').focus(function(){
// $(this).css('background','#ccc')
// })
// $('input').blur(function(){
// $(this).css('background','#fff')
// }) // $('p').focusin(function(){
// $(this).css('background','#ccc')
// })
// $('p').focusout(function(){
// $(this).css('background','#fff')
// })
$('div').focusin(function(){
$(this).css('background','#ccc')
})
$('div').focusout(function(){
$(this).css('background','#fff')
})
$('textarea').change(function(){
var str=$(this).val()
$('#num').text(str.length)
})
$('textarea').select(function(){
alert('文本被选中')
})
$('form').submit(function(){
alert('确定要提交吗?')
}) })
</script>
</body>
</html>
js进阶 12-5 jquery中表单事件如何使用的更多相关文章
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些?
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件
js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型. event.target 触发该事件的 DOM 元素. ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
随机推荐
- POJ 1904 思路题
思路: 思路题 题目诡异地给了一组可行匹配 肯定有用啊-. 就把那组可行的解 女向男连一条有向边 如果男喜欢女 男向女连一条有向边 跑一边Tarjan就行了 (这个时候 环里的都能选 "增广 ...
- Cisco Works 2000 网络管理软件安装、配置全过程
下面是在windows 2000 server 下安装ciscoworks 2000的过程.(附件中是标准avi格式文件,由于上传附件大小限制,更多内容见Sina播客) 浏览全部原创视频请见: htt ...
- Fragment-如何监听fragment中的回退事件与怎样保存fragment状态
一.如何监听Fragment中的回退事件 1.问题阐述 在Activity中监听回退事件是件非常容易的事,因为直接重写onBackPressed()函数就好了,但当大家想要监听Fragment中的回退 ...
- Codefroces B. New Skateboard
B. New Skateboard time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- 玲珑学院 1050 - array
1050 - array Time Limit:3s Memory Limit:64MByte Submissions:494Solved:155 DESCRIPTION 2 array is an ...
- C/C++(语句,数组)
C语言语句: 两大选择,三大循环,四大跳转 两大跳转:if,switch 三大循环:for,while,do-while 四大跳转:break,continue,goto,return do-whil ...
- js对象拷贝的方法
对象拷贝的方法是一个难点,尤其是深拷贝.建议把代码都运行下,帮助理解拷贝. 一. json方法 1. 适合情况: JSON对象的深度克隆.方法是先JSON.stringify() 转为json字符 ...
- windows查看硬件信息系统信息
rem 查看cpu wmic cpu list briefrem 查看物理内存wmic memphysical list briefrem 查看逻辑内存wmic memlogical list bri ...
- js08--函数1
函数当成类看当成匿名对象看,都是跟java吻合的,只有当成函数看(函数自己可以执行)跟java区别在这里. function fact(){} var F = fact ; 函数名是函数对象的地址,是 ...
- PHP和JSON
PHP和JSON 一.总结 1.php中json的使用方法:php中json的使用超级简单啦,主要是两个函数json_encode(编码)和json_decode(解码),像md5加密 2.json的 ...