026_元素执行函数

1. each()方法

1.1. each()方法规定为每个匹配元素规定运行的函数。返回false可用于及早停止循环。

1.2. 语法

$(selector).each(function(index, element))

1.3. 参数

1.4. 例子

1.4.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>each()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function() {$("button").click(function() {$("li").each(function(index, element) {alert('第' + (index + 1) + '元素内容是: ' + $(this).text());if(index == 1) return false;});});});</script></head><body> <button>输出每个列表项的值</button><ul><li>Coffee</li><li>Milk</li><li>Soda</li></ul></body>
</html>

1.4.2. 效果图

2. map()方法

2.1. map()方法把每个元素通过函数传递到当前匹配集合中, 生成包含返回值的新的jQuery对象。

2.2. 语法

$(selector).map(callback(index, domElement))

2.3. 参数

2.4. 由于返回值是jQuery封装的数组, 使用get()来处理返回的对象以得到基础的数组。

2.5. 在callback函数内部, this引用每次迭代的当前DOM元素。该函数可返回单独的数据项, 或者是要被插入结果集中的数据项的数组。如果返回的是数组, 数组内的元素会被插入集合中。如果函数返回null 或undefined, 则不会插入任何元素。

2.6. 例子

2.6.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>map()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function() {alert($(':checkbox').map(function(index, domElement) {return [this.id, domElement.value];}).get().join(','));// jQuery中的get()函数是取得当前页面中所有匹配的DOM元素集合。这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象, 而实际上是元素数组)。如果你想要直接操作DOM 对象而不是jQuery对象, 这个函数非常有用。// 其实get()还有一个用处是可以直接通过下标值访问其下标值对应的dom对象, 还记得get()返回的是一个array<element>吧, 已经是一个array对象了, 然可以像操作数组一样以下标去取值了。// get()方法的返回值: Array<Element>, 一个DOM数组。// get(index)方法的返回值: 数组元素。});</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></body>
</html>

2.6.2. 效果图

026_元素执行函数相关推荐

f函数java_Java流：对N-1个元素执行f(),对N个元素执行g(),即,最后一个元素使用不同的函数...
有没有一种方法可以调用Java流API,以对Iterable的最后一个元素(除了最后一个元素)执行所有功能,然后在最后一个元素上调用另一个元素而又不将其拆分为两个单独的调用? 这样可以节省两次遍历,一 ...
setwindowshookex回调函数不执行_不一样的“悬停几秒后执行函数”？一个开源工具函数，请注意查收...
大家好,我是 vortesnail. 前言: 最近这几个星期,一直都在维护自己的基于 React 的开源播放器组件,以为功能基本都差不多了,却忽视了播放器一个很重要的功能:鼠标悬停在视频播放界面时,在 ...
php外部系统命令执行函数
总结一下php中常用的执行函数,一篇水文一.system()函数 (PHP 4, PHP 5, PHP 7) 介绍:执行外部程序,并且显示输出说明 system( string $command[ ...
ruby 执行函数_Ruby at（）函数
ruby 执行函数 Ruby中的at()函数 (at() function in Ruby) If you are working with arrays in Ruby, sometimes you ...
浅谈自执行函数-立即调用的函数表达式
好文,屯一波:原文地址:https://www.jianshu.com/p/c64bfbcd34c3 在JavaScript中,会遇到自执行匿名函数:(function () {/*code*/} ) ...
jacascript 立即执行函数(IIFE)与闭包
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 一直没搞清楚立即执行函数和闭包之间的关系,总结一下: 闭包有很多种理解:访问不到内部作用域,函数就是这样, ...
html等待图片全部加载,imgLoad等待图片资源加载完成后执行函数（图片预加载）...
修改自一个2013年写的js判断图片资源加载完成后再执行函数的代码: 当时的代码片断需要手动加入需要确定加载完的图片名称到数组,比较麻烦,修改为插件后,不需要手动添加文件名称,只需对需要确定加载完成的 ...
JavaScript重难点解析2（立即执行函数IIFE，this关键字）
JavaScript重难点解析2(立即执行函数IIFE,this关键字) 立即执行函数 this关键字立即执行函数也叫做匿名函数自调用,可以在定义一段函数之后直接让其执行. ;(function ...
js立即执行函数，jqueryReady和Onload执行顺序比较
最近研究了一下这几个函数的执行顺序,有概念可知,立即执行函数是首先执行,但是ready函数和Onload的执行顺序可以根据区别得知 JQuery的ready函数与JS的onload的区别: 1. ...

026_元素执行函数

026_元素执行函数相关推荐

最新文章

热门文章