我的编程空间,编程开发者的网络收藏夹
学习永远不晚

jQuery 表单事件与遍历详情

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

jQuery 表单事件与遍历详情

表单事件

.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 class="lazy" data-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 表单事件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

jQuery 表单事件与遍历详情

下载Word文档到电脑,方便收藏和打印~

下载Word文档

编程热搜

目录