026_元素执行函数
生活随笔
收集整理的這篇文章主要介紹了
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_元素执行函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 025_元素集合
- 下一篇： 029_jQuery Ajax简介