jQuery?表單事件與遍歷詳情
表單事件
.blur()
為 "blur" 事件綁定一個(gè)處理函數(shù),或者觸發(fā)元素上的 "blur" 事件(注:此事件不支持冒泡)。
$('#other').click(function() { $('#target').blur(); });
.focus()
為 JavaScript 的 "focus" 事件綁定一個(gè)處理函數(shù),或者觸發(fā)元素上的 "focus" 事件。
$('#target').focus(function() { alert('Handler for .focus() called.'); });
.change()
為JavaScript 的 "change" 事件綁定一個(gè)處理函數(shù),或者觸發(fā)元素上的 "change" 事件。
$('.target').change(function() { alert('Handler for .change() called.'); });
.submit()
當(dāng)用戶試圖提交表單時(shí),就會(huì)在這個(gè)表單元素上觸發(fā)submit事件。它只能綁定在<form>
元素上。
$('#target').submit(function() { alert('Handler for .submit() called.'); });
遍歷
.map()
通過一個(gè)函數(shù)匹配當(dāng)前集合中的每個(gè)元素,產(chǎn)生一個(gè)包含新的jQuery對(duì)象。
由于返回值是一個(gè)jQuery包裹的數(shù)組,所以通常會(huì)使用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()方法會(huì)返回一個(gè)新的數(shù)組。
.each()
遍歷一個(gè)jQuery對(duì)象,為每個(gè)匹配元素執(zhí)行一個(gè)函數(shù)。
<ul> <li>foo</li> <li>bar</li> </ul>
$( "li" ).each(function( index ) { console.log( index + ":" + $(this).text()); });
each()返回的是原來的數(shù)組,并不會(huì)新創(chuàng)建一個(gè)數(shù)組。
.get()
通過jQuery對(duì)象獲取一個(gè)對(duì)應(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用jQuery實(shí)現(xiàn)頁(yè)面定時(shí)彈出廣告效果
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)頁(yè)面定時(shí)彈出廣告效果,需要的朋友可以參考下2017-08-08如何基于jQuery實(shí)現(xiàn)五角星評(píng)分
這篇文章主要介紹了如何基于jQuery實(shí)現(xiàn)五角星評(píng)分,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09json+jQuery實(shí)現(xiàn)的無限級(jí)樹形菜單效果代碼
這篇文章主要介紹了json+jQuery實(shí)現(xiàn)的無限級(jí)樹形菜單效果代碼,涉及jquery針對(duì)json數(shù)據(jù)的遍歷、讀取及動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jquery獲取div寬度的實(shí)現(xiàn)思路與代碼
DIV的width寬度如何獲取呢?接下來介紹使用jquery獲取DIV的width寬度,感興趣的朋友可以了解下的2013-01-01使用jQuery.wechat構(gòu)建微信WEB應(yīng)用
本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat,一個(gè)提供了統(tǒng)一API的、基于jQuery.promise的jQuery.plugin。希望能多少幫助到大家。2014-10-10jQuery實(shí)現(xiàn)的分頁(yè)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的分頁(yè)功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)分頁(yè)功能的具體步驟及相關(guān)操作技巧,包括前臺(tái)樣式、布局及jQuery分頁(yè)插件的調(diào)用方法,需要的朋友可以參考下2017-01-01網(wǎng)頁(yè)前端優(yōu)化之滾動(dòng)延時(shí)加載圖片示例
做web開發(fā)的朋友都應(yīng)該掌握前端優(yōu)化這個(gè)技巧,其中一個(gè)就是滾動(dòng)延時(shí)加載。這個(gè)技巧應(yīng)用在了很多地方,比如新浪微博網(wǎng)頁(yè)版。以下就為大家詳細(xì)介紹,需要的朋友可以參考下2013-07-07