jQuery?表單事件與遍歷詳情
表單事件
.blur()
為 "blur" 事件綁定一個處理函數(shù),或者觸發(fā)元素上的 "blur" 事件(注:此事件不支持冒泡)。
$('#other').click(function() { $('#target').blur(); });
.focus()
為 JavaScript 的 "focus" 事件綁定一個處理函數(shù),或者觸發(fā)元素上的 "focus" 事件。
$('#target').focus(function() { alert('Handler for .focus() called.'); });
.change()
為JavaScript 的 "change" 事件綁定一個處理函數(shù),或者觸發(fā)元素上的 "change" 事件。
$('.target').change(function() { alert('Handler for .change() called.'); });
.submit()
當用戶試圖提交表單時,就會在這個表單元素上觸發(fā)submit事件。它只能綁定在<form>
元素上。
$('#target').submit(function() { alert('Handler for .submit() called.'); });
遍歷
.map()
通過一個函數(shù)匹配當前集合中的每個元素,產(chǎn)生一個包含新的jQuery對象。
由于返回值是一個jQuery包裹的數(shù)組,所以通常會使用get()方法將其轉(zhuǎn)換成普通的數(shù)組。
<!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()方法會返回一個新的數(shù)組。
.each()
遍歷一個jQuery對象,為每個匹配元素執(zhí)行一個函數(shù)。
<ul> <li>foo</li> <li>bar</li> </ul>
$( "li" ).each(function( index ) { console.log( index + ":" + $(this).text()); });
each()返回的是原來的數(shù)組,并不會新創(chuàng)建一個數(shù)組。
.get()
通過jQuery對象獲取一個對應(yīng)的DOM元素。
<ul> <li id="foo">foo</li> <li id="bar">bar</li> </ul>
console.log( $( "li" ).get( 0 ) );
到此這篇關(guān)于jQuery 表單事件與遍歷詳情的文章就介紹到這了,更多相關(guān)jQuery 表單事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
json+jQuery實現(xiàn)的無限級樹形菜單效果代碼
這篇文章主要介紹了json+jQuery實現(xiàn)的無限級樹形菜單效果代碼,涉及jquery針對json數(shù)據(jù)的遍歷、讀取及動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08使用jQuery.wechat構(gòu)建微信WEB應(yīng)用
本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat,一個提供了統(tǒng)一API的、基于jQuery.promise的jQuery.plugin。希望能多少幫助到大家。2014-10-10