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-09
json+jQuery實(shí)現(xiàn)的無限級(jí)樹形菜單效果代碼
這篇文章主要介紹了json+jQuery實(shí)現(xiàn)的無限級(jí)樹形菜單效果代碼,涉及jquery針對(duì)json數(shù)據(jù)的遍歷、讀取及動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
jquery獲取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-10
這篇文章主要介紹了 jQuery Plupload上傳插件的使用詳解,需要的朋友可以參考下2017-04-04
jQuery實(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
下面小編就為大家?guī)硪黄贘query Ajax type的4種類型(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了jQuery中prev()方法用法,實(shí)例分析了prev()方法的功能、定義及取得匹配元素集合中每個(gè)元素緊鄰的前一個(gè)同輩元素使用技巧,需要的朋友可以參考下2015-01-01