jQuery 表单事件与遍历详情
表单事件
.blur()
.focus()
.change()
.submit()
遍历
.map()
.each()
.get()
表单事件 .blur()为 "blur" 事件绑定一个处理函数,或者触发元素上的 "blur" 事件(注:此事件不支持冒泡)。
$('#other').click(function() {
$('#target').blur();
});
.focus()
为 JavaScript 的 "focus" 事件绑定一个处理函数,或者触发元素上的 "focus" 事件。
$('#target').focus(function() {
alert('Handler for .focus() called.');
});
.change()
为JavaScript 的 "change" 事件绑定一个处理函数,或者触发元素上的 "change" 事件。
$('.target').change(function() {
alert('Handler for .change() called.');
});
.submit()
当用户试图提交表单时,就会在这个表单元素上触发submit事件。它只能绑定在<form>
元素上。
$('#target').submit(function() {
alert('Handler for .submit() called.');
});
遍历
.map()
通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。
由于返回值是一个jQuery包裹的数组,所以通常会使用get()方法将其转换成普通的数组。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-3.6.0.min.js" charset="utf-8"></script>
</head>
<body>
<form method="post" action="">
<fieldset>
<div>
<label for="two">2</label>
<input type="checkbox" value="2" id="two" name="number[]">
</div>
<div>
<label for="four">4</label>
<input type="checkbox" value="4" id="four" name="number[]">
</div>
<div>
<label for="six">6</label>
<input type="checkbox" value="6" id="six" name="number[]">
</div>
<div>
<label for="eight">8</label>
<input type="checkbox" value="8" id="eight" name="number[]">
</div>
</fieldset>
</form>
<script type="text/javascript">
$('input').map(function(index) {
console.log(this.id);
})
</script>
</body>
</html>
map()方法会返回一个新的数组。
.each()遍历一个jQuery对象,为每个匹配元素执行一个函数。
<ul>
<li>foo</li>
<li>bar</li>
</ul>
$( "li" ).each(function( index ) {
console.log( index + ":" + $(this).text());
});
each()返回的是原来的数组,并不会新创建一个数组。
.get()通过jQuery对象获取一个对应的DOM元素。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
</ul>
console.log( $( "li" ).get( 0 ) );
到此这篇关于jQuery 表单事件与遍历详情的文章就介绍到这了,更多相关jQuery 表单事件内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!
相关内容
-
确定java按钮响应事件的代码
确定java按钮响应事件的代码,,* 阅读本文可以结合最后在java...
-
为什么我的电脑开机出现id和cp|电脑重启的事件I
为什么我的电脑开机出现id和cp|电脑重启的事件ID是什么,,1. 电...
-
JS动态添加的标签无法绑定事件解决方案~~~
JS动态添加的标签无法绑定事件解决方案~~~,标签,动态,今天用aj...
-
90后瓶门事件图片
90后瓶门事件图片,,现在孩子们还太早,有些女孩子总是在门口等一...
-
为什么WPS表单总是不打开
为什么WPS表单总是不打开,,为什么WPS表格总是打不开??百度知道...
-
电脑事件查看器怎么打开|电脑事件查看器在哪
电脑事件查看器怎么打开|电脑事件查看器在哪,,1. 电脑事件查看...
-
laravel-admin|自定义表单与验证
laravel-admin|自定义表单与验证,表单,场景,场景:很多时候,由于...
-
唐山打人事件视频源自哪里
唐山打人事件视频源自哪里,华为,视频,唐山打人事件视频源自哪...
-
Win7系统怎么打开事件查看器?
Win7系统怎么打开事件查看器?,查看器,事件, win7系统中有一个...
-
苹果7爆炸事件真的吗|iphone爆炸事件
苹果7爆炸事件真的吗|iphone爆炸事件,,苹果7爆炸事件真的吗两...
-
金山表单如何查询已填数据?表单大师怎么设置上传
金山表单如何查询已填数据?表单大师怎么设置上传图片,表单,数...
-
联想5G投票事件中,企业有没有权利按照自己意愿选
联想5G投票事件中,企业有没有权利按照自己意愿选择,华为,自己...
-
VB里的mousemove事件举例
VB里的mousemove事件举例,鼠标,事件,本文目录VB里的mousemove...
-
js默认事件汇总
js默认事件汇总,事件,表单,默认事件 就是浏览器通过HTML标...
-
js设置input不可编辑|jquery设置input不可编辑
js设置input不可编辑|jquery设置input不可编辑,,1. jquery设置...